import { ContactForm } from "@/components/ContactForm";
import { ParallaxHero } from "@/components/ParallaxHero";
import { getPageContent } from "@/content/pages";
import { siteConfig } from "@/lib/content";
import { contactPageJsonLd } from "@/lib/json-ld";
import type { Metadata } from "next";
import Link from "next/link";
import Script from "next/script";

const FORMS_ENABLED = process.env.FORMS_ENABLED !== "false";
const page = getPageContent("contact");
const topics = page?.sections?.find((s) => s.title === "Topics")?.items || [];

export default function ContactPage() {
  const email = siteConfig.contactEmail || "hello@jenadounlimited.com";
  const phone = siteConfig.contactPhone;

  return (
    <>
      <Script
        id="contact-jsonld"
        type="application/ld+json"
        strategy="afterInteractive"
      >
        {`{${JSON.stringify(contactPageJsonLd())}}`}
      </Script>

      <ParallaxHero
        image={page?.heroImage || "/images/hero-contact.jpg"}
        alt={
          page?.heroAlt ||
          "Handwritten note, fountain pen, wax-sealed envelope, and flower on a dark wooden desk"
        }
        size={page?.heroSize || "md"}
        priority={page?.heroPriority}
        align={page?.heroAlign}
        overlayClassName={
          page?.heroOverlay ||
          "bg-gradient-to-r from-black/80 via-black/55 to-black/30"
        }
        contentClassName={page?.heroContentClass}
      >
        <div className="max-w-2xl">
          <p className="mb-4 text-[11px] font-medium uppercase tracking-[0.3em] text-white/65">
            {page?.heroLabel}
          </p>
          <h1 className="mb-5 text-4xl font-semibold tracking-[-0.03em] text-white md:text-6xl">
            {page?.title}
          </h1>
          <p className="max-w-xl text-lg leading-relaxed text-white/80 md:text-xl">
            {page?.heroDescription}
          </p>
        </div>
      </ParallaxHero>

      <section className="border-b border-[var(--color-border)] py-12 md:py-16">
        <div className="container-xl max-w-3xl">
          <p className="text-lg leading-relaxed text-[var(--color-text-muted)]">
            The form is the fastest way to reach us with context. Pick the topic
            that fits best, share what you are hoping for, and include any
            timing or constraints that matter. Prefer email or a call? Use the
            direct details in the sidebar — same team either way.
          </p>
        </div>
      </section>

      <section className="py-16 md:py-24">
        <div className="container-xl">
          <div className="grid grid-cols-1 gap-12 lg:grid-cols-12 lg:gap-16">
            <div className="lg:col-span-7">
              <div className="mb-8">
                <h2 className="mb-3 text-2xl font-semibold tracking-[-0.02em]">
                  Send a message
                </h2>
                <p className="leading-relaxed text-[var(--color-text-muted)]">
                  A few sentences are enough to start. If you are requesting
                  custom work, rough dimensions, material ideas, or reference
                  photos (described in text) help us respond with something
                  useful the first time.
                </p>
              </div>

              {FORMS_ENABLED ? (
                <ContactForm />
              ) : (
                <div className="border border-[var(--color-border)] bg-[var(--color-surface)] p-10 text-center">
                  <h2 className="mb-3 text-xl font-medium">
                    Contact temporarily unavailable
                  </h2>
                  <p className="mb-6 text-[var(--color-text-muted)]">
                    The form is disabled right now. Reach us directly by email
                    or phone — we are still here.
                  </p>
                  <a
                    href={`mailto:${email}`}
                    className="btn-primary inline-block"
                  >
                    Send Email
                  </a>
                </div>
              )}

              <div className="mt-14 border-t border-[var(--color-border)] pt-12">
                <h2 className="mb-3 text-xl font-semibold tracking-[-0.02em]">
                  What helps us help you
                </h2>
                <p className="mb-6 text-[15px] leading-relaxed text-[var(--color-text-muted)]">
                  You do not need a polished brief. These prompts simply speed
                  up a useful reply:
                </p>
                <ul className="space-y-4">
                  {topics.map((topic) => (
                    <li
                      key={topic.title}
                      className="flex gap-3 border-b border-[var(--color-border)] pb-4 last:border-b-0 last:pb-0"
                    >
                      <span
                        className="mt-2 h-1 w-1 shrink-0 rounded-full bg-[var(--color-heading)]"
                        aria-hidden
                      />
                      <div>
                        <p className="font-medium text-[var(--color-heading)]">
                          {topic.title}
                        </p>
                        <p className="mt-1 text-[15px] text-[var(--color-text-muted)]">
                          {topic.description}
                        </p>
                      </div>
                    </li>
                  ))}
                </ul>
              </div>
            </div>

            <aside className="lg:col-span-5">
              <div className="space-y-6 md:sticky md:top-24">
                <div className="border border-[var(--color-border)] bg-[var(--color-surface)] p-8">
                  <p className="mb-6 text-[11px] font-medium uppercase tracking-[0.3em] text-[var(--color-text-muted)]">
                    Direct contact
                  </p>
                  <div className="space-y-6">
                    <div>
                      <div className="mb-1 text-sm font-medium text-[var(--color-heading)]">
                        Email
                      </div>
                      <a
                        href={`mailto:${email}`}
                        className="text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-heading)]"
                      >
                        {email}
                      </a>
                    </div>
                    {phone && (
                      <div>
                        <div className="mb-1 text-sm font-medium text-[var(--color-heading)]">
                          Phone
                        </div>
                        <a
                          href={`tel:${phone.replace(/[^\d+]/g, "")}`}
                          className="text-[var(--color-text-muted)] transition-colors hover:text-[var(--color-heading)]"
                        >
                          {phone}
                        </a>
                      </div>
                    )}
                    <div className="border-t border-[var(--color-border)] pt-6">
                      <p className="text-sm leading-relaxed text-[var(--color-text-muted)]">
                        We typically respond within one to two business days.
                        For time-sensitive training slots or event dates, put
                        the deadline in your message subject line or first
                        sentence so we can prioritize.
                      </p>
                    </div>
                  </div>
                </div>

                <div className="border border-[var(--color-border)] bg-[var(--color-surface)] p-8">
                  <p className="mb-4 text-[11px] font-medium uppercase tracking-[0.3em] text-[var(--color-text-muted)]">
                    What to expect
                  </p>
                  <ul className="space-y-3 text-sm leading-relaxed text-[var(--color-text-muted)]">
                    <li>
                      A real reply — not an autoresponder loop — once we have
                      reviewed your note.
                    </li>
                    <li>
                      Honest availability. If something is waitlisted or still
                      coming soon, we will say so clearly.
                    </li>
                    <li>
                      Next steps when it makes sense: samples, sessions, proofs,
                      or a short call.
                    </li>
                  </ul>
                  <p className="mt-6 text-sm text-[var(--color-text-muted)]">
                    Prefer to browse first?{" "}
                    <Link
                      href="/offerings"
                      className="font-medium text-[var(--color-heading)] underline-offset-4 hover:underline"
                    >
                      Explore offerings
                    </Link>{" "}
                    or{" "}
                    <Link
                      href="/gallery"
                      className="font-medium text-[var(--color-heading)] underline-offset-4 hover:underline"
                    >
                      view the gallery
                    </Link>
                    .
                  </p>
                </div>
              </div>
            </aside>
          </div>
        </div>
      </section>
    </>
  );
}

export const metadata: Metadata = {
  title: "Contact | Jenado Unlimited",
  description:
    "Contact Jenado Unlimited — send us a message about honey, training, sourdough, custom craft, and more.",
};
