"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { fadeUp, fadeLeft, fadeRight } from "@/lib/variants";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import { Button } from "@/components/ui/button";


const contactSchema = z.object({
  name: z.string().min(1, "Name is required"),
  organisation: z.string().optional(),
  email: z.string().min(1, "Email is required").email("Please enter a valid email"),
  phone: z.string().optional(),
  message: z.string().min(10, "Please write at least 10 characters"),
});
type ContactValues = z.infer<typeof contactSchema>;

const CHANNELS = [
  { ix: "№ 01 · General", title: "The Council Office", body: "For general enquiries, programme questions, and public nominations for Vol. II.", email: "council@alatakakaloi.org" },
  { ix: "№ 02 · Press", title: "Press Office", body: "Accreditation, embargoed materials, and editorial photography requests.", email: "press@alatakakaloi.org" },
  { ix: "№ 03 · Partners", title: "Sponsorship Office", body: "Platinum, Gold, and Silver enquiries, plus bespoke youth-impact programmes.", email: "partners@alatakakaloi.org" },
];

const TOPICS = ["General", "Sponsorship", "Press", "Nomination · Vol. II", "Visit / Tour"];

const VENUE_INFO = [
  { dt: "Address", dd: "Osu Alata Mantse's Palace · Accra · Ghana" },
  { dt: "Hours", dd: "Mon–Fri · 09:00–17:00 GMT" },
  { dt: "Livestream", dd: "YouTube · Facebook" },
  { dt: "Office Phone", dd: "+233 (0)30 000 0000" },
];

/* ── Card components ── */
type ChannelCardProps = typeof CHANNELS[number] & { index: number };
function ChannelCard({ ix, title, body, email, index }: ChannelCardProps) {
  return (
    <motion.article
      className="bg-paper [border:1px_solid_var(--rule-color)] p-9 flex flex-col"
      variants={fadeUp}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, margin: "-40px" }}
      custom={index * 0.1}
    >
      <span className="font-mono text-[11px] tracking-[0.2em] uppercase text-terracotta mb-4 block">{ix}</span>
      <h3 className="text-[28px] m-0 mb-3">{title}</h3>
      <p className="text-[14px] text-ink-soft flex-1">{body}</p>
      <a
        href={`mailto:${email}`}
        className="font-mono text-[11px] tracking-[0.2em] uppercase text-terracotta no-underline border-none mt-auto"
      >
        {email} ↗
      </a>
    </motion.article>
  );
}

export default function ContactPage() {
  const [submitted, setSubmitted] = useState(false);
  const [activeTopics, setActiveTopics] = useState<Set<string>>(new Set());

  const form = useForm<ContactValues>({
    resolver: zodResolver(contactSchema),
    defaultValues: { name: "", organisation: "", email: "", phone: "", message: "" },
  });

  function toggleTopic(topic: string) {
    setActiveTopics((prev) => {
      const next = new Set(prev);
      next.has(topic) ? next.delete(topic) : next.add(topic);
      return next;
    });
  }

  function onSubmit(_values: ContactValues) {
    setSubmitted(true);
    form.reset();
    setActiveTopics(new Set());
  }

  return (
    <>
      {/* HERO */}
      <section className="bg-paper py-20 border-b border-rule">
        <div className="wrap grid grid-cols-1 gap-10 items-end lg:grid-cols-[1.3fr_1fr] lg:gap-14">
          <motion.div variants={fadeLeft} initial="hidden" animate="show" custom={0.1}>
            <div className="eyebrow mb-[18px]">Contact &amp; Connectivity</div>
            <h1 className="mb-4" style={{ fontSize: "clamp(54px, 7vw, 100px)" }}>Reach<br />the Council.</h1>
            <p className="lede">
              For sponsorship commitments, press accreditation, public nominations, or general questions about
              the Pioneer Shield.
            </p>
          </motion.div>
          <motion.figure className="figure" variants={fadeRight} initial="hidden" animate="show" custom={0.2}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              className="figure__img"
              src="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=900&q=70"
              alt="Council office"
            />
            <figcaption className="figure__cap">
              <span>The Council Office</span>
              <span>Osu Alata Mantse&apos;s Palace</span>
            </figcaption>
          </motion.figure>
        </div>
      </section>

      {/* CHANNELS */}
      <section className="py-[110px]">
        <div className="wrap">
          <div className="section-head">
            <h2 className="m-0">Channels.</h2>
            <span className="font-mono text-[11px] tracking-[0.24em] uppercase text-terracotta">I — Reach Us</span>
          </div>
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6 mt-12">
            {CHANNELS.map((ch, i) => (
              <ChannelCard key={i} {...ch} index={i} />
            ))}
          </div>
        </div>
      </section>

      {/* FORM */}
      <section className="py-[110px] bg-cream-deep border-t border-rule border-b border-rule">
        <div className="wrap grid grid-cols-1 gap-8 lg:grid-cols-[1fr_1.4fr] lg:gap-16">
          <motion.div variants={fadeLeft} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0}>
            <div className="eyebrow">II — Inquiry Form</div>
            <h2 style={{ fontSize: "clamp(38px, 4.6vw, 60px)" }}>Or write to us directly.</h2>
            <p>
              For general questions or sponsorship commitments. The Council acknowledges all messages within
              three working days.
            </p>
          </motion.div>

          <motion.div variants={fadeRight} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0.1}>
            {submitted ? (
              <div className="py-12">
                <p className="eyebrow mb-3">✓ Sent — thank you</p>
                <p>The Council will be in touch within three working days.</p>
                <Button variant="outline" className="mt-6" onClick={() => setSubmitted(false)}>
                  Send another →
                </Button>
              </div>
            ) : (
              <form className="grid gap-[22px]" onSubmit={form.handleSubmit(onSubmit)} noValidate>
                {/* Topic chips */}
                <div className="flex flex-col gap-1.5">
                  <label className="font-mono text-[10px] tracking-[0.2em] uppercase text-design-muted">I am writing about</label>
                  <div className="flex flex-wrap gap-2">
                    {TOPICS.map((topic) => (
                      <button
                        key={topic}
                        type="button"
                        className={`chip${activeTopics.has(topic) ? " is-active" : ""}`}
                        onClick={() => toggleTopic(topic)}
                      >
                        {topic}
                      </button>
                    ))}
                  </div>
                </div>

                {/* Name + Org */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div className="flex flex-col gap-1.5">
                    <label className="font-mono text-[10px] tracking-[0.2em] uppercase text-design-muted">Your name</label>
                    <input
                      type="text"
                      placeholder="Nii Ayi Mensah"
                      className="border-0 border-b border-[rgba(28,22,17,0.42)] bg-transparent font-serif text-[18px] py-2.5 text-ink outline-none rounded-none w-full focus:border-b-[var(--terracotta)]"
                      {...form.register("name")}
                    />
                    {form.formState.errors.name && (
                      <span className="text-[10px] font-mono uppercase tracking-widest text-terracotta mt-1">
                        {form.formState.errors.name.message}
                      </span>
                    )}
                  </div>
                  <div className="flex flex-col gap-1.5">
                    <label className="font-mono text-[10px] tracking-[0.2em] uppercase text-design-muted">Organisation</label>
                    <input
                      type="text"
                      placeholder="(optional)"
                      className="border-0 border-b border-[rgba(28,22,17,0.42)] bg-transparent font-serif text-[18px] py-2.5 text-ink outline-none rounded-none w-full focus:border-b-[var(--terracotta)]"
                      {...form.register("organisation")}
                    />
                  </div>
                </div>

                {/* Email + Phone */}
                <div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
                  <div className="flex flex-col gap-1.5">
                    <label className="font-mono text-[10px] tracking-[0.2em] uppercase text-design-muted">Email</label>
                    <input
                      type="email"
                      placeholder="you@institution.org"
                      className="border-0 border-b border-[rgba(28,22,17,0.42)] bg-transparent font-serif text-[18px] py-2.5 text-ink outline-none rounded-none w-full focus:border-b-[var(--terracotta)]"
                      {...form.register("email")}
                    />
                    {form.formState.errors.email && (
                      <span className="text-[10px] font-mono uppercase tracking-widest text-terracotta mt-1">
                        {form.formState.errors.email.message}
                      </span>
                    )}
                  </div>
                  <div className="flex flex-col gap-1.5">
                    <label className="font-mono text-[10px] tracking-[0.2em] uppercase text-design-muted">Phone</label>
                    <input
                      type="tel"
                      placeholder="+233 …"
                      className="border-0 border-b border-[rgba(28,22,17,0.42)] bg-transparent font-serif text-[18px] py-2.5 text-ink outline-none rounded-none w-full focus:border-b-[var(--terracotta)]"
                      {...form.register("phone")}
                    />
                  </div>
                </div>

                {/* Message */}
                <div className="flex flex-col gap-1.5">
                  <label className="font-mono text-[10px] tracking-[0.2em] uppercase text-design-muted">Message</label>
                  <textarea
                    placeholder="Tell us a little about your enquiry."
                    className="border-0 border-b border-[rgba(28,22,17,0.42)] bg-transparent font-serif text-[18px] py-2.5 text-ink outline-none rounded-none w-full focus:border-b-[var(--terracotta)] min-h-[120px] resize-y"
                    {...form.register("message")}
                  />
                  {form.formState.errors.message && (
                    <span className="text-[10px] font-mono uppercase tracking-widest text-terracotta mt-1">
                      {form.formState.errors.message.message}
                    </span>
                  )}
                </div>

                <Button variant="secondary" type="submit">Submit Inquiry ↗</Button>
              </form>
            )}
          </motion.div>
        </div>
      </section>

      {/* VENUE */}
      <section className="py-[110px]">
        <div className="wrap grid grid-cols-1 gap-10 items-center lg:grid-cols-2 lg:gap-14">
          <motion.div variants={fadeLeft} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0}>
            <div className="eyebrow">III — Location &amp; Connectivity</div>
            <h2>Osu Alata Mantse&apos;s Palace, Accra.</h2>
            <p>
              The Council office and the inaugural durbar venue. Public transit stops on Cantonments Road;
              ten-minute walk to the East Gate.
            </p>
            <dl className="mt-7 grid gap-3.5">
              {VENUE_INFO.map((info, i) => (
                <div key={i}>
                  <dt className="font-mono text-[10px] tracking-[0.2em] uppercase text-design-muted">{info.dt}</dt>
                  <dd className="font-heading text-[22px] mt-1 m-0">{info.dd}</dd>
                </div>
              ))}
            </dl>
          </motion.div>
          <motion.figure className="figure" variants={fadeRight} initial="hidden" whileInView="show" viewport={{ once: true, margin: "-80px" }} custom={0.1}>
            {/* eslint-disable-next-line @next/next/no-img-element */}
            <img
              className="figure__img"
              style={{ aspectRatio: "4/5" }}
              src="https://images.unsplash.com/photo-1580500550469-4d8c1ddff8c4?auto=format&fit=crop&w=900&q=70"
              alt="Palace"
            />
            <figcaption className="figure__cap">
              <span>The East Gate · Mantse&apos;s Palace</span>
              <span>Accra · Ghana</span>
            </figcaption>
          </motion.figure>
        </div>
      </section>
    </>
  );
}