"use client";

import { useState } from "react";
import Link from "next/link";
import { motion } from "framer-motion";
import { fadeUp, fadeLeft, fadeRight, scaleFade } from "@/lib/variants";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { z } from "zod";
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

/* ── Form schema ── */
const bulletinSchema = z.object({
  email: z
    .email("Please enter a valid email address").min(1, "Email is required"),
});
type BulletinValues = z.infer<typeof bulletinSchema>;

/* ── Data ── */
const MARQUEE_ITEMS = [
  "Bridging the Digital Sea",
  "Mastering the Sea",
  "Mastering the Signal",
  "Kakalɔi Agbi",
  "Pioneer Shield",
  "The Hero's Journey",
  "Bridging the Digital Sea",
  "Mastering the Sea",
  "Mastering the Signal",
  "Kakalɔi Agbi",
  "Pioneer Shield",
  "The Hero's Journey",
];

const DATE_STATS = [
  { dt: "Edition", dd: "Vol. I" },
  { dt: "Programme", dd: "Kakalɔi Agbi" },
  { dt: "Venue", dd: "Mantse's Palace" },
  { dt: "Honouree", dd: "Prof. N. N. Quaynor" },
];

const PILLARS = [
  {
    num: "№ 01",
    href: "/history",
    titleLine1: "Heritage",
    titleLine2: "& The Sea.",
    desc: (
      <>
        The story of Osu Alata — masters of the physical sea who fed
        and sustained their community. The Ga spirit of{" "}
        <em>&ldquo;never say die until the bones are rotten.&rdquo;</em>
        <sup className="cite">5·7</sup>
      </>
    ),
    more: "Read the time capsule →",
  },
  {
    num: "№ 02",
    href: "/award",
    titleLine1: "The Pioneer",
    titleLine2: "Shield.",
    desc: (
      <>
        The physical manifestation of the Alata Kakalɔi Award — a
        trophy honouring those who embody Osu Alata&apos;s spirit of
        excellence and innovation.
        <sup className="cite">10·11</sup>
      </>
    ),
    more: "View the trophy →",
  },
  {
    num: "№ 03",
    href: "/events",
    titleLine1: "Two Days",
    titleLine2: "of Durbar.",
    desc: (
      <>
        The Roots &amp; The Calling. The Hero&apos;s Journey. Libation,
        Storytelling, Grand Durbar, Tech Clinics, and the Hero&apos;s
        Lecture.<sup className="cite">1·6</sup>
      </>
    ),
    more: "See the schedule →",
  },
];

const SAMAI_CARDS = [
  {
    name: "Antswele",
    teach: <>The Ladder · Loyalty &amp; Communal Support<sup className="cite">9</sup></>,
    svg: (
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
        <line x1="30" y1="15" x2="30" y2="85"/>
        <line x1="70" y1="15" x2="70" y2="85"/>
        <line x1="30" y1="25" x2="70" y2="25"/>
        <line x1="30" y1="40" x2="70" y2="40"/>
        <line x1="30" y1="55" x2="70" y2="55"/>
        <line x1="30" y1="70" x2="70" y2="70"/>
        <line x1="30" y1="85" x2="70" y2="85"/>
      </svg>
    ),
  },
  {
    name: "Atoobi",
    teach: <>The Bird · Respect for All Members<sup className="cite">9</sup></>,
    svg: (
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
        <path
          d="M20 60 Q 35 35, 55 45 Q 70 50, 85 40 L 78 50 L 88 52 L 75 60 Q 60 70, 45 70 Q 30 70, 20 60 Z"
          strokeLinejoin="round"/>
        <circle cx="78" cy="44" r="1.5" fill="currentColor"/>
        <path d="M40 70 L 36 86 M 50 72 L 50 88 M 60 70 L 64 86" strokeWidth="1.4"/>
      </svg>
    ),
  },
  {
    name: "Samfee",
    teach: <>The Key · Access, Richness &amp; Responsibility<sup className="cite">9</sup></>,
    svg: (
      <svg viewBox="0 0 100 100" fill="none" stroke="currentColor" strokeWidth="2" aria-hidden="true">
        <circle cx="32" cy="50" r="14"/>
        <circle cx="32" cy="50" r="5" fill="currentColor"/>
        <line x1="46" y1="50" x2="86" y2="50"/>
        <line x1="74" y1="50" x2="74" y2="62"/>
        <line x1="82" y1="50" x2="82" y2="58"/>
      </svg>
    ),
  },
];

const PROGRAMME_DAYS = [
  {
    num: "01",
    label: "Day One — The Roots & The Calling",
    title: "Youth & Heritage.",
    events: [
      { time: "09:00", desc: "Libation & Proclamation at the Palace" },
      { time: "11:30", desc: "Youth Tech Clinics — connectivity, hardware" },
      { time: "16:00", desc: "Clan Trail Storytelling · Fireside Chats" },
      { time: "19:30", desc: "Communal supper at the Mantse's Palace" },
    ],
  },
  {
    num: "02",
    label: "Day Two — The Hero's Journey",
    title: "Procession & Lecture.",
    events: [
      { time: "10:00", desc: "Grand Durbar of Heroes — chiefs & queen mothers" },
      { time: "13:00", desc: "Tech-Heritage Exhibition opens" },
      { time: "15:30", desc: "The Hero's Lecture — Prof. Nii Narku Quaynor" },
      { time: "18:00", desc: "Award Ceremony · The Pioneer Shield" },
    ],
  },
];

/* ── Card components ── */
type PillarCardProps = typeof PILLARS[number] & { index: number };
function PillarCard({ num, href, titleLine1, titleLine2, desc, more, index }: PillarCardProps) {
  return (
    <motion.a
      href={href}
      className="p-10 border-r border-[rgba(28,22,17,0.42)] bg-paper hover:bg-cream-deep transition-colors duration-200 no-underline border-b-0 text-ink flex flex-col min-h-80"
      variants={fadeUp}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, margin: "-40px" }}
      custom={index * 0.1}
    >
      <div className="font-mono text-[11px] tracking-[0.24em] text-terracotta uppercase mb-4.5">
        {num}
      </div>
      <h3 className="font-heading text-[32px] leading-[1.05] m-0 mb-3.5">
        {titleLine1}
        <br/>
        {titleLine2}
      </h3>
      <p className="text-ink-soft flex-1 mb-5.5 text-[15px] max-w-none">{desc}</p>
      <span className="font-mono text-[11px] tracking-[0.2em] uppercase text-terracotta">
        {more}
      </span>
    </motion.a>
  );
}

type SamaiCardProps = typeof SAMAI_CARDS[number] & { index: number };
function SamaiCard({ name, teach, svg, index }: SamaiCardProps) {
  return (
    <motion.div
      className="bg-[rgba(245,237,224,0.04)] border border-[rgba(245,237,224,0.18)] p-8 aspect-[1/1.1] flex flex-col justify-between hover:bg-[rgba(200,132,43,0.08)] hover:border-ochre transition-colors duration-200"
      variants={fadeUp}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, margin: "-40px" }}
      custom={index * 0.12}
    >
      <div className="w-full h-3/5 text-ochre">{svg}</div>
      <div>
        <div className="font-heading text-[26px] mt-4 text-cream">{name}</div>
        <div className="font-mono text-[10px] tracking-[0.18em] uppercase text-[rgba(245,237,224,0.55)] mt-1.5">
          {teach}
        </div>
      </div>
    </motion.div>
  );
}

type ProgrammeDayCardProps = typeof PROGRAMME_DAYS[number] & { index: number };
function ProgrammeDayCard({ num, label, title, events, index }: ProgrammeDayCardProps) {
  return (
    <motion.article
      className="bg-paper border border-rule p-9 relative overflow-hidden"
      variants={fadeUp}
      initial="hidden"
      whileInView="show"
      viewport={{ once: true, margin: "-40px" }}
      custom={index * 0.15}
    >
      <div className="absolute -top-2.5 right-6 font-heading text-[200px] leading-[0.8] text-cream-deep pointer-events-none z-0 select-none">
        {num}
      </div>
      <div className="relative z-10">
        <div className="font-mono text-[11px] tracking-[0.22em] uppercase text-terracotta mb-2">
          {label}
        </div>
        <h3 className="font-heading text-[34px] leading-[1.05] m-0 mb-4.5">{title}</h3>
        <ul className="list-none p-0 m-0 mb-5.5 flex flex-col gap-2.5">
          {events.map((ev, j) => (
            <li key={j} className="flex gap-4 text-[15px]">
              <time className="font-mono text-[11px] text-design-muted min-w-17.5 pt-1 tracking-widest">
                {ev.time}
              </time>
              <span>{ev.desc}</span>
            </li>
          ))}
        </ul>
        <Link href="/events"
              className="font-mono text-[11px] tracking-[0.2em] uppercase text-terracotta border-none hover:text-ink transition-colors duration-150">
          Day {num} details →
        </Link>
      </div>
    </motion.article>
  );
}

/* ── Page ── */
export default function HomePage() {
  const [submitted, setSubmitted] = useState(false);

  const form = useForm<BulletinValues>({
    resolver: zodResolver(bulletinSchema),
    defaultValues: { email: "" },
  });

  function onSubmit(_values: BulletinValues) {
    setSubmitted(true);
    form.reset();
  }

  return (
    <>
      {/* ════════════ HERO ════════════ */}
      <section className="py-0! bg-paper border-b border-rule overflow-hidden">
        <div className="wrap grid grid-cols-1 gap-10 items-end pt-10 lg:grid-cols-[1.05fr_0.95fr] lg:gap-16 lg:pt-16">

          {/* Lead */}
          <div>
            <motion.div
              className="font-mono text-[11px] tracking-[0.28em] uppercase text-terracotta mb-5.5 flex items-center gap-3.5"
              variants={fadeLeft}
              initial="hidden"
              animate="show"
              custom={0.1}
            >
              <span className="block w-11 h-px bg-terracotta shrink-0" aria-hidden="true"/>
              An Inaugural Celebration · Two-Day Durbar
            </motion.div>

            <motion.h2
              className="tracking-[-0.02em] mb-6 leading-[0.96]"
              style={{ fontSize: "clamp(54px, 7.4vw, 116px)" }}
              variants={fadeUp}
              initial="hidden"
              animate="show"
              custom={0.2}
            >
              The Digital
              <br/>
              <em className="italic text-terracotta">Harvest</em>.
            </motion.h2>

            <motion.p
              className="font-serif italic text-ink-soft mb-8 max-w-[48ch] leading-normal"
              style={{ fontSize: "clamp(18px, 1.6vw, 22px)" }}
              variants={fadeUp}
              initial="hidden"
              animate="show"
              custom={0.35}
            >
              From mastering the sea to masterfully navigating the Information
              Superhighway — the people of Osu Alata gather to honour a living
              legend whose work bridges shore and signal.
            </motion.p>

            <motion.div
              className="flex gap-3 flex-wrap mb-11"
              variants={fadeUp}
              initial="hidden"
              animate="show"
              custom={0.45}
            >
              <Button variant="secondary" asChild>
                <Link href="/hero">The Hero&apos;s Journey →</Link>
              </Button>
              <Button variant="outline" asChild>
                <Link href="/events">Event Schedule</Link>
              </Button>
              <Button variant="outline" asChild>
                <Link href="/sponsors">Sponsorship</Link>
              </Button>
            </motion.div>

            {/* Date stats */}
            <motion.dl
              className="border-t border-rule pt-5.5 pb-9 grid grid-cols-2 sm:grid-cols-4 gap-y-4"
              variants={fadeUp}
              initial="hidden"
              animate="show"
              custom={0.55}
            >
              {DATE_STATS.map((item, i, arr) => (
                <div
                  key={item.dt}
                  className={`pr-4.5 ${i < arr.length - 1 ? "border-r border-[rgba(28,22,17,0.18)]" : ""}`}
                >
                  <dt className="font-mono text-[10px] tracking-[0.2em] uppercase text-design-muted mb-1.5">
                    {item.dt}
                  </dt>
                  <dd className="m-0 font-heading text-[22px] leading-[1.1]">{item.dd}</dd>
                </div>
              ))}
            </motion.dl>
          </div>

          {/* Crest SVG */}
          <motion.div
            className="relative aspect-[1/1.1] hidden lg:block"
            variants={scaleFade}
            initial="hidden"
            animate="show"
            custom={0.3}
          >
            <svg
              viewBox="0 0 400 440"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.2"
              className="w-full h-full block"
              aria-hidden="true"
            >
              <defs>
                <pattern id="weave" width="8" height="8" patternUnits="userSpaceOnUse">
                  <path d="M0 4 H8 M4 0 V8" stroke="#9A4A2D" strokeWidth="0.4" opacity="0.4"/>
                </pattern>
              </defs>
              <path
                d="M200 20 C 320 20, 360 60, 360 140 C 360 280, 280 380, 200 420 C 120 380, 40 280, 40 140 C 40 60, 80 20, 200 20 Z"
                stroke="#1A1612" strokeWidth="2" fill="#FAF6EE"/>
              <path
                d="M200 38 C 305 38, 342 72, 342 140 C 342 270, 270 360, 200 398 C 130 360, 58 270, 58 140 C 58 72, 95 38, 200 38 Z"
                stroke="#1A1612" strokeWidth="0.7" fill="url(#weave)"/>
              <path d="M70 220 H330" stroke="#1A1612" strokeWidth="0.8"/>
              <path d="M70 240 Q 100 232, 130 240 T 190 240 T 250 240 T 310 240 T 330 240" stroke="#1B2A4E"
                    strokeWidth="1.4" fill="none"/>
              <path d="M70 260 Q 100 252, 130 260 T 190 260 T 250 260 T 310 260 T 330 260" stroke="#1B2A4E"
                    strokeWidth="1" fill="none"/>
              <path d="M70 280 Q 100 272, 130 280 T 190 280 T 250 280 T 310 280 T 330 280" stroke="#1B2A4E"
                    strokeWidth="0.8" fill="none"/>
              <path d="M150 218 Q 200 230, 250 218 L 240 226 Q 200 234, 160 226 Z" fill="#1A1612"/>
              <path d="M200 218 V 200" stroke="#1A1612" strokeWidth="0.8"/>
              <path d="M196 200 L 220 208 L 196 212 Z" fill="#9A4A2D"/>
              <circle cx="200" cy="140" r="36" fill="#C8842B"/>
              <circle cx="200" cy="140" r="36" stroke="#1A1612" strokeWidth="1" fill="none"/>
              <g stroke="#1A1612" strokeWidth="0.8">
                <circle cx="120" cy="100" r="3" fill="#1A1612"/>
                <circle cx="280" cy="100" r="3" fill="#1A1612"/>
                <circle cx="100" cy="160" r="3" fill="#1A1612"/>
                <circle cx="300" cy="160" r="3" fill="#1A1612"/>
                <circle cx="200" cy="70" r="3" fill="#1A1612"/>
                <line x1="120" y1="100" x2="200" y2="140" strokeDasharray="2 3"/>
                <line x1="280" y1="100" x2="200" y2="140" strokeDasharray="2 3"/>
                <line x1="100" y1="160" x2="200" y2="140" strokeDasharray="2 3"/>
                <line x1="300" y1="160" x2="200" y2="140" strokeDasharray="2 3"/>
                <line x1="200" y1="70" x2="200" y2="140" strokeDasharray="2 3"/>
              </g>
              <g stroke="#1A1612" strokeWidth="0.4" opacity="0.6">
                <path
                  d="M70 300 L 330 380 M 90 300 L 330 360 M 110 300 L 330 340 M 130 300 L 330 320 M 150 300 L 330 300"/>
                <path
                  d="M330 300 L 70 380 M 310 300 L 70 360 M 290 300 L 70 340 M 270 300 L 70 320 M 250 300 L 70 300"/>
              </g>
              <path d="M120 388 L 280 388 L 270 408 L 130 408 Z" fill="#9A4A2D"/>
              <text x="200" y="403" textAnchor="middle" fontFamily="DM Serif Display" fontSize="13" fill="#FAF6EE"
                    letterSpacing="3">MMXXVI
              </text>
              <path d="M150 60 H 250 L 240 80 H 160 Z" fill="#1B2A4E"/>
              <text x="200" y="76" textAnchor="middle" fontFamily="DM Serif Display" fontSize="11" fill="#F5EDE0"
                    letterSpacing="3">ALATA
              </text>
            </svg>
          </motion.div>
        </div>

        {/* Filename strip */}
        <div className="border-t border-rule py-3.5 mt-0">
          <div
            className="wrap flex justify-between gap-6 flex-wrap font-mono text-[11px] tracking-[0.2em] uppercase text-design-muted">
            <span>◆ The Digital Harvest</span>
            <span>Vol. I · Edition 01</span>
            <span>Filed under: Heritage · Innovation · Honour</span>
          </div>
        </div>
      </section>

      {/* ════════════ SEA MARQUEE ════════════ */}
      <div className="bg-ink text-cream overflow-hidden">
        <div
          className="flex overflow-hidden whitespace-nowrap py-4.5 border-y border-[rgba(245,237,224,0.2)] font-heading text-[22px] tracking-[0.04em]">
          <div className="inline-flex animate-marquee will-change-transform">
            {MARQUEE_ITEMS.map((text, i) => (
              <span key={i} className="inline-flex items-center gap-5.5 pr-5.5">
                {text} <i className="not-italic text-ochre text-[14px]">◆</i>
              </span>
            ))}
          </div>
        </div>
      </div>

      {/* ════════════ MISSION ════════════ */}
      <section className="py-24">
        <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">I — Mission</div>
            <h2
              className="m-0"
              style={{ fontSize: "clamp(38px, 4.6vw, 64px)" }}
            >
              To celebrate evolution, from shore to signal.
            </h2>
          </motion.div>

          <motion.div
            variants={fadeRight}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, margin: "-80px" }}
            custom={0.1}
          >
            <p className="dropcap text-[19px] leading-[1.6]">
              The Osu Alata Kakalɔi Award is a formal addition to the Osu Alata
              calendar — established to ensure the achievements of{" "}
              <em>living legends</em> are woven into the fabric of history. It
              celebrates the evolution of Osu Alata&apos;s resourcefulness — from
              mastering the sea to masterfully navigating the Information
              Superhighway.
              <sup className="cite">5 · 10</sup>
            </p>
            <p className="text-[19px] leading-[1.6]">
              The inaugural award honours{" "}
              <strong>Professor Nii Narku Quaynor</strong>, the Architect of the
              African Internet, whose career embodies the Osu Alata spirit of
              excellence and innovation — a journey from the shores of Osu to
              the global stage of digital connectivity.
              <sup className="cite">12</sup>
            </p>
          </motion.div>
        </div>
      </section>

      {/* ════════════ THREE PILLARS ════════════ */}
      <section className="py-0! bg-paper border-y border-rule">
        <div className="wrap pt-14 pb-6">
          <div className="flex justify-between items-baseline gap-6 mb-0">
            <h2 className="m-0">The Hero&apos;s Journey</h2>
            <span className="font-mono text-[11px] tracking-[0.24em] uppercase text-terracotta">II — Three Roads</span>
          </div>
        </div>
        <div className="wrap grid grid-cols-1 sm:grid-cols-3 gap-0 border-l border-[rgba(28,22,17,0.42)]">
          {PILLARS.map((pillar, i) => (
            <PillarCard key={i} {...pillar} index={i} />
          ))}
        </div>
      </section>

      {/* ════════════ HERO FEATURE — PROF QUAYNOR ════════════ */}
      <section className="py-27.5">
        <div className="wrap grid grid-cols-1 gap-10 items-center lg:grid-cols-[1.1fr_0.9fr] lg:gap-16">
          <motion.figure
            className="m-0 border-none bg-transparent overflow-hidden"
            variants={fadeLeft}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, margin: "-100px" }}
            custom={0}
          >
            <div
              className="aspect-4/5 w-full border border-rule bg-cream-deep flex flex-col items-center justify-center gap-3"
              style={{ boxShadow: "24px 24px 0 -12px var(--ochre)" }}
            >
              <svg viewBox="0 0 80 80" fill="none" className="w-16 h-16 opacity-20" aria-hidden="true">
                <circle cx="40" cy="30" r="16" stroke="currentColor" strokeWidth="2" />
                <path d="M10 72 C10 52 70 52 70 72" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
              </svg>
              <span className="font-mono text-[10px] tracking-[0.2em] uppercase text-design-muted">Portrait · Coming Soon</span>
            </div>
          </motion.figure>

          <motion.div
            variants={fadeRight}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, margin: "-100px" }}
            custom={0.15}
          >
            <div className="eyebrow">III — The Hero</div>
            <h2 style={{ fontWeight: 400 }}>
              <span style={{ fontSize: "clamp(32px, 3.2vw, 52px)", display: "block", lineHeight: 1.1 }}>Prof. Nii Narku Quaynor</span>
              <span style={{ fontSize: "clamp(20px, 1.8vw, 26px)" }}>— Architect of the African Internet.</span>
            </h2>
            <p>
              The first Ghanaian to receive a PhD in Computer Science. Founder
              of the Computer Science Department at the University of Cape
              Coast. Pioneer of Internet development across the African
              continent.<sup className="cite">12·13</sup>
            </p>
            <blockquote className="quote">
              &ldquo;From the shores of Osu to a global tech titan — leveraging
              heritage for the future.&rdquo;
              <cite>— A Hero&apos;s Lecture, Day Two</cite>
            </blockquote>
            <p>
              Inductee of the <strong>Internet Hall of Fame</strong> and
              recipient of the{" "}
              <strong>Jonathan B. Postel Service Award</strong>.
              <sup className="cite">14</sup>
            </p>
            <Button asChild>
              <Link href="/hero">Read the full profile</Link>
            </Button>
          </motion.div>
        </div>
      </section>

      {/* ════════════ GA SAMAI ════════════ */}
      <section className="bg-indigo-brand text-cream py-27.5 relative">
        <div className="wrap py-27.5">
          <motion.div
            className="mb-12"
            variants={fadeUp}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, margin: "-80px" }}
            custom={0}
          >
            <div className="eyebrow text-ochre">IV — The Ga Samai</div>
            <h2 className="text-cream">Visual Wisdom.</h2>
            <p className="text-[rgba(245,237,224,0.78)] max-w-[60ch]">
              An exploration of the traditional pictographic symbols (
              <em>Samai</em>) that encode the community&apos;s moral lessons and
              philosophical truths.<sup className="cite">8</sup>
            </p>
          </motion.div>

          <div className="grid grid-cols-1 sm:grid-cols-3 gap-6">
            {SAMAI_CARDS.map((card, i) => (
              <SamaiCard key={i} {...card} index={i} />
            ))}
          </div>

          <p className="mt-8">
            <Link href="/gallery"
                  className="text-cream border-b border-ochre hover:text-ochre transition-colors duration-150">
              Enter the Ga Samai gallery — eleven symbols, one philosophy →
            </Link>
          </p>
        </div>
      </section>

      {/* ════════════ PROGRAMME PREVIEW ════════════ */}
      <section className="py-27.5">
        <div className="wrap">
          <div className="grid grid-cols-1 gap-4 items-end mb-12 lg:grid-cols-2 lg:gap-8">
            <div>
              <div className="eyebrow">V — Kakalɔi Agbi</div>
              <h2 className="m-0">A two-day inaugural celebration.</h2>
            </div>
            <p className="text-left lg:text-right">
              A detailed programme — the Roots &amp; The Calling, followed by
              The Hero&apos;s Journey. Libation, storytelling, the Grand Durbar, the
              Tech-Heritage Exhibition, and the Hero&apos;s Lecture.
              <sup className="cite">1·6</sup>
            </p>
          </div>

          <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
            {PROGRAMME_DAYS.map((day, i) => (
              <ProgrammeDayCard key={i} {...day} index={i} />
            ))}
          </div>
        </div>
      </section>

      {/* ════════════ SPONSORS STRIP ════════════ */}
      <section className="bg-cream-deep border-y border-rule py-16">
        <div className="wrap py-16">
          <div className="flex justify-between items-end gap-6 flex-wrap mb-2">
            <div>
              <div className="eyebrow">VI — Partners &amp; Sponsorship</div>
              <h2 className="m-0 text-[38px]">
                Aligned with prestige, heritage, and digital transformation.
              </h2>
            </div>
            <Button variant="outline" asChild>
              <Link href="/sponsors">Sponsorship Tiers →</Link>
            </Button>
          </div>

          <div
            className="grid grid-cols-3 sm:grid-cols-6 gap-px mt-8 border border-[rgba(28,22,17,0.42)]"
            style={{ background: "rgba(28,22,17,0.42)" }}
            aria-label="Sponsor partners (placeholders)"
          >
            {["Platinum", "Gold", "Gold", "Silver", "Silver", "Silver"].map((tier, i) => (
              <motion.div
                key={i}
                className="bg-paper aspect-[2.6/1] flex items-center justify-center font-heading italic text-design-muted text-[18px]"
                initial={{ opacity: 0 }}
                whileInView={{ opacity: 1 }}
                viewport={{ once: true }}
                transition={{ duration: 0.4, delay: i * 0.06 }}
              >
                {tier}
              </motion.div>
            ))}
          </div>
        </div>
      </section>

      {/* ════════════ BULLETIN ════════════ */}
      <section className="py-27.5 pb-32.5">
        <div className="wrap grid grid-cols-1 gap-10 items-center lg:grid-cols-2 lg:gap-16">
          <motion.div
            variants={fadeLeft}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, margin: "-80px" }}
            custom={0}
          >
            <div className="eyebrow">VII — The Bulletin</div>
            <h2 className="m-0 mb-4">Receive the inaugural programme by post.</h2>
            <p className="lede">
              A bound copy of the Pioneer Shield programme, mailed to your
              address ahead of the durbar — and digital invitations to the
              Hero&apos;s Lecture livestream.
            </p>
          </motion.div>

          <motion.div
            variants={fadeRight}
            initial="hidden"
            whileInView="show"
            viewport={{ once: true, margin: "-80px" }}
            custom={0.1}
          >
            <Form {...form}>
              <form onSubmit={form.handleSubmit(onSubmit)}>
                <p className="eyebrow mb-6">Subscribe to the Bulletin</p>

                <FormField
                  control={form.control}
                  name="email"
                  render={({ field }) => (
                    <FormItem className="space-y-0">
                      <FormControl>
                        <div className="flex border-b-2 border-rule pb-2 gap-3 mt-6">
                          <Input
                            type="email"
                            placeholder="your.name@institution.org"
                            className="flex-1 border-0 bg-transparent text-[18px] italic py-2 px-0 h-auto focus-visible:ring-0 shadow-none"
                            {...field}
                          />
                          <button
                            type="submit"
                            disabled={submitted}
                            className="bg-transparent border-0 font-mono text-[11px] tracking-[0.2em] uppercase text-terracotta cursor-pointer py-2 px-1 transition-colors hover:text-ink disabled:opacity-60"
                          >
                            {submitted ? "✓ Submitted" : "Submit ↗"}
                          </button>
                        </div>
                      </FormControl>
                      <FormMessage className="mt-2"/>
                    </FormItem>
                  )}
                />

                <p className="text-[13px] text-muted-foreground mt-4">
                  By submitting, you&apos;ll receive the inaugural programme and a
                  digital pass for the livestream.
                </p>
              </form>
            </Form>
          </motion.div>
        </div>
      </section>
    </>
  );
}