"use client";

import { FormEvent, useState } from "react";
import { Footer } from "@/components/Footer";
import { Header } from "@/components/Header";
import { PageHero } from "@/components/PageShared";
import { contactPage } from "@/data/company";
import { site } from "@/data/home";

function IconShell({ children }: { children: React.ReactNode }) {
  return (
    <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-white shadow-[0_0_0_1px_rgba(0,39,118,0.08)]">
      {children}
    </div>
  );
}

function LocationIcon() {
  return (
    <svg width="40" height="40" viewBox="0 0 48 48" fill="none" aria-hidden>
      <path
        d="M24 44s14-10.4 14-22a14 14 0 1 0-28 0c0 11.6 14 22 14 22Z"
        stroke="#002776"
        strokeWidth="2.2"
        strokeLinejoin="round"
      />
      <circle cx="24" cy="22" r="5.5" stroke="#009543" strokeWidth="2.2" />
      <path
        d="M24 8.5c-7.5 0-13.5 6-13.5 13.5 0 1.4.2 2.7.6 4"
        stroke="#009543"
        strokeWidth="2.2"
        strokeLinecap="round"
        opacity="0.35"
      />
    </svg>
  );
}

function MailIcon() {
  return (
    <svg width="40" height="40" viewBox="0 0 48 48" fill="none" aria-hidden>
      <rect
        x="6"
        y="12"
        width="36"
        height="26"
        rx="4"
        stroke="#002776"
        strokeWidth="2.2"
      />
      <path
        d="m8 15 14.2 11.2a3 3 0 0 0 3.6 0L40 15"
        stroke="#009543"
        strokeWidth="2.2"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M8 35.5 18.5 26M40 35.5 29.5 26"
        stroke="#002776"
        strokeWidth="2.2"
        strokeLinecap="round"
        opacity="0.35"
      />
    </svg>
  );
}

function PhoneIcon() {
  return (
    <svg width="40" height="40" viewBox="0 0 48 48" fill="none" aria-hidden>
      <path
        d="M16.5 8.5h7.2l3.2 8.4-4.2 2.6a22 22 0 0 0 9.8 9.8l2.6-4.2 8.4 3.2v7.2A3.5 3.5 0 0 1 40 39a28 28 0 0 1-28-28 3.5 3.5 0 0 1 4.5-3.5Z"
        stroke="#002776"
        strokeWidth="2.2"
        strokeLinejoin="round"
      />
      <path
        d="M28.5 11.5c3.8.6 6.9 3.2 8.2 6.8M31.8 8c5.4 1 9.8 4.8 11.5 10"
        stroke="#009543"
        strokeWidth="2.2"
        strokeLinecap="round"
        opacity="0.85"
      />
    </svg>
  );
}

export function ContactUsView() {
  const [sent, setSent] = useState(false);

  function onSubmit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    setSent(true);
  }

  return (
    <>
      <Header />
      <main>
        <PageHero
          title={contactPage.title}
          titleEn={contactPage.titleEn}
          breadcrumb={[
            { label: "صفحه اصلی", href: "/" },
            { label: "تماس با ما", href: "/contact" },
          ]}
        />

        <section className="section">
          <div className="container-page grid gap-6 md:grid-cols-3">
            <div className="bg-[#f7f7f7] px-6 py-8 text-center">
              <IconShell>
                <LocationIcon />
              </IconShell>
              <h3 className="mb-3 text-base font-bold text-[#232323]">
                {contactPage.visitTitle}
              </h3>
              <p className="text-sm leading-7 text-[#666]">{contactPage.office}</p>
              <p className="mt-2 text-sm leading-7 text-[#666]">
                {contactPage.factory}
              </p>
              <p className="text-sm leading-7 text-[#666]">
                {contactPage.factoryAddress}
              </p>
            </div>

            <div className="bg-[#f7f7f7] px-6 py-8 text-center">
              <IconShell>
                <MailIcon />
              </IconShell>
              <h3 className="mb-3 text-base font-bold text-[#232323]">
                {contactPage.emailTitle}
              </h3>
              <a
                href={`mailto:${contactPage.email}`}
                className="text-sm text-[#666] hover:text-brand-navy"
              >
                {contactPage.email}
              </a>
            </div>

            <div className="bg-[#f7f7f7] px-6 py-8 text-center">
              <IconShell>
                <PhoneIcon />
              </IconShell>
              <h3 className="mb-3 text-base font-bold text-[#232323]">
                اطلاعات تماس با ما
              </h3>
              <div className="space-y-1 text-sm text-[#666]">
                {contactPage.phones.map((phone) => (
                  <p key={phone}>
                    <a
                      href={`tel:${phone.replace(/\D/g, "")}`}
                      className="latin-digits hover:text-brand-navy"
                      dir="ltr"
                    >
                      {phone}
                    </a>
                  </p>
                ))}
              </div>
            </div>
          </div>
        </section>

        <section className="section section-gray">
          <div className="container-page grid items-start gap-8 lg:grid-cols-2">
            <div>
              <h2 className="mb-1 text-xl font-bold text-[#232323]">
                {contactPage.formTitle}
              </h2>
              <p className="mb-6 text-sm tracking-wide text-[#999]">
                {contactPage.formTitleEn}
              </p>

              <form className="space-y-3" onSubmit={onSubmit}>
                <input
                  name="name"
                  type="text"
                  required
                  placeholder="نام"
                  className="w-full border border-[#ddd] bg-white px-4 py-3 text-sm outline-none focus:border-brand-navy"
                />
                <input
                  name="email"
                  type="email"
                  required
                  placeholder="ایمیل"
                  className="w-full border border-[#ddd] bg-white px-4 py-3 text-sm outline-none focus:border-brand-navy"
                />
                <input
                  name="subject"
                  type="text"
                  required
                  placeholder="موضوع"
                  className="w-full border border-[#ddd] bg-white px-4 py-3 text-sm outline-none focus:border-brand-navy"
                />
                <textarea
                  name="text"
                  required
                  rows={6}
                  placeholder="متن پیام"
                  className="w-full resize-y border border-[#ddd] bg-white px-4 py-3 text-sm outline-none focus:border-brand-navy"
                />
                <button type="submit" className="btn-more">
                  {contactPage.submitLabel}
                </button>
                {sent ? (
                  <p className="text-sm text-accent-green">
                    پیام شما ثبت شد. به زودی با شما تماس می‌گیریم.
                  </p>
                ) : null}
              </form>
            </div>

            <div className="overflow-hidden border border-[#eee] bg-white">
              <iframe
                title={`نقشه ${site.name}`}
                src={contactPage.mapEmbedUrl}
                className="h-[420px] w-full border-0"
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
              />
              <div className="space-y-1 p-4 text-sm leading-7 text-[#666]">
                <p>{contactPage.office}</p>
                <p>{contactPage.factory}</p>
                <p>{contactPage.factoryAddress}</p>
              </div>
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  );
}
