"use client";

import { type FormEvent, useState } from "react";
import { siteConfig } from "@/data/site-config";
import { SectionHeading } from "@/components/shared/SectionHeading";
import { SocialIcons } from "@/components/shared/SocialIcons";
import { PageContainer } from "@/components/shared/PageContainer";
import { SectionContainer } from "@/components/shared/SectionContainer";
import { ArrowIcon } from "@/components/shared/icons/ArrowIcon";

/**
 * ContactFormSection — dark card with contact info + form.
 *
 * Shared by: About page (section 8) and Contacts page (section 2).
 * Single implementation — avoids duplicated markup.
 *
 * Data sourced from `data/site-config.ts`.
 */
export function ContactFormSection() {
  const [formState, setFormState] = useState({
    fullName: "",
    email: "",
    subject: "",
    message: "",
  });

  function handleSubmit(e: FormEvent) {
    e.preventDefault();
    // Form submission logic will be implemented later
  }

  function handleChange(
    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
  ) {
    setFormState((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  }

  return (
    <SectionContainer paddingY="lg" className="bg-aiero-dark px-5">
      <div className="overflow-hidden rounded-[25px] bg-aiero-card-dark">
        <PageContainer className="grid grid-cols-1 gap-12 py-16 md:py-20 lg:grid-cols-2 lg:gap-16 lg:py-24">
          {/* ── Left: Info column ── */}
          <div className="flex flex-col">
            <SectionHeading
              tag="get in touch"
              title="We are always ready to help you and answer your questions"
              titleClassName="text-white"
              description="Pacific hake false trevally queen parrotfish black prickleback mosshead warbonnet sweeper! Greenling sleeper."
            />

            {/* Contact details grid */}
            <div className="mt-10 grid grid-cols-1 gap-8 sm:grid-cols-2">
              {/* Call Center */}
              <div>
                <h6 className="mb-3 font-sora text-sm font-semibold text-white">
                  Call Center
                </h6>
                <div className="flex flex-col gap-1">
                  <a
                    href={`tel:${siteConfig.phoneRaw}`}
                    className="text-[15px] text-aiero-text-muted transition-colors hover:text-aiero-teal"
                  >
                    {siteConfig.phone}
                  </a>
                  <a
                    href="tel:+11800234567"
                    className="text-[15px] text-aiero-text-muted transition-colors hover:text-aiero-teal"
                  >
                    + (123) 1800-234-5678
                  </a>
                </div>
              </div>

              {/* Our Location */}
              <div>
                <h6 className="mb-3 font-sora text-sm font-semibold text-white">
                  Our Location
                </h6>
                <p className="text-[15px] leading-relaxed text-aiero-text-muted">
                  {siteConfig.address.line1}
                  <br />
                  {siteConfig.address.line2}
                </p>
              </div>

              {/* Email */}
              <div>
                <h6 className="mb-3 font-sora text-sm font-semibold text-white">
                  Email
                </h6>
                <a
                  href={`mailto:${siteConfig.email}`}
                  className="text-[15px] text-aiero-text-muted underline transition-colors hover:text-aiero-teal"
                >
                  {siteConfig.email}
                </a>
              </div>

              {/* Social */}
              <div>
                <h6 className="mb-3 font-sora text-sm font-semibold text-white">
                  Social network
                </h6>
                <SocialIcons links={siteConfig.socials} />
              </div>
            </div>
          </div>

          {/* ── Right: Form column ── */}
          <div className="rounded-[25px] bg-white p-8 md:p-10">
            <h4
              className="mb-8 text-aiero-dark"
              style={{
                fontFamily: "var(--font-sora)",
                fontSize: "28px",
                fontWeight: 700,
                lineHeight: 1.2,
              }}
            >
              Get in Touch
            </h4>

            <form onSubmit={handleSubmit} className="flex flex-col gap-5">
              <input
                type="text"
                name="fullName"
                placeholder="Full name"
                value={formState.fullName}
                onChange={handleChange}
                className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
              />
              <input
                type="email"
                name="email"
                placeholder="Email"
                required
                value={formState.email}
                onChange={handleChange}
                className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
              />
              <input
                type="text"
                name="subject"
                placeholder="Subject"
                value={formState.subject}
                onChange={handleChange}
                className="rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
              />
              <textarea
                name="message"
                placeholder="Message"
                rows={4}
                value={formState.message}
                onChange={handleChange}
                className="resize-none rounded-xl border border-gray-200 bg-gray-50 px-5 py-3.5 text-[15px] text-aiero-dark outline-none transition-colors focus:border-aiero-teal"
              />
              <button
                type="submit"
                className="aiero-button aiero-button-gradient-border mt-2 self-start rounded-full px-8 py-4 font-sora text-base font-semibold text-aiero-dark"
              >
                Send message
                <ArrowIcon className="h-3 w-3" />
                <span className="button-inner" />
              </button>
            </form>
          </div>
        </PageContainer>
      </div>
    </SectionContainer>
  );
}