import { createFileRoute, Link } from "@tanstack/react-router";
import { ArrowRight, CalendarCheck, GraduationCap, Mic2, Briefcase } from "lucide-react";
import { imgs } from "@/lib/assets";
import { site } from "@/lib/site";
import { Reveal } from "@/components/brand/Reveal";
import { ArchImage, CircleBadge, LeafShadow, MonogramWatermark } from "@/components/brand/decor";
import { Button } from "@/components/ui/button";

export const Route = createFileRoute("/speaking")({
  head: () => ({
    meta: [
      { title: "Speaking, Mentorship & Vocal Coaching — Eva Shii Jason" },
      {
        name: "description",
        content:
          "Keynotes on purpose, faith and leadership; structured mentorship journeys; vocal coaching that builds heart and skill. Book Eva Shii Jason for your next event or cohort.",
      },
      { property: "og:title", content: "Speaking, Mentorship & Vocal Coaching — Eva Shii Jason" },
      {
        property: "og:description",
        content: "Lead. Empower. Transform — sessions and journeys that move people to act.",
      },
      { property: "og:type", content: "website" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: SpeakingPage,
});

const offers = [
  {
    icon: Mic2,
    title: "Speaking",
    tone: "jungle" as const,
    text: "Keynotes, chapel sessions and conferences on identity, purpose, worship and leading across realms. Audiences leave with a plan — not just inspiration.",
    points: ["Keynotes & conference sessions", "Church and worship team training", "Panels and moderation"],
  },
  {
    icon: GraduationCap,
    title: "Mentorship",
    tone: "gold" as const,
    text: "Structured mentorship journeys on discovering God-given identity, embracing purpose and stewarding every assignment entrusted to you.",
    points: ["Individual mentorship journeys", "Cohorts for young leaders", "Worshipper development"],
  },
  {
    icon: Briefcase,
    title: "Marketplace Leadership",
    tone: "terra" as const,
    text: "Practical frameworks for leaders carrying multiple assignments — business, ministry and family — without losing their centre.",
    points: ["Leadership workshops", "Team sessions", "The Overlapper's Mindset labs"],
  },
];

function SpeakingPage() {
  return (
    <>
      <section className="relative overflow-hidden bg-jungle pb-20 pt-32 text-ivory sm:pt-36">
        <LeafShadow className="opacity-[0.07]" />
        <MonogramWatermark className="absolute -left-10 top-16 text-[16rem]" />
        <div className="relative mx-auto grid max-w-6xl items-center gap-12 px-4 sm:px-6 lg:grid-cols-2">
          <Reveal>
            <div>
              <p className="eyebrow text-[0.65rem] text-gold-light">Speaking & mentorship</p>
              <h1 className="mt-5 font-display text-5xl leading-[1.05] sm:text-6xl">
                Lead. Empower. <span className="gold-text">Transform.</span>
              </h1>
              <p className="mt-7 max-w-md text-base leading-relaxed text-ivory/80">
                Real insights. Practical tools. Lasting impact. Invite Eva to your event, enrol in a
                mentorship journey, or train your worship team — every engagement is built to move
                people from inspiration to action.
              </p>
              <div className="mt-9 flex flex-wrap gap-3">
                <Button asChild variant="gold" size="xl" className="rounded-full">
                  <Link to="/contact">
                    <CalendarCheck className="h-4 w-4" /> Check availability
                  </Link>
                </Button>
              </div>
            </div>
          </Reveal>
          <Reveal delayMs={150} className="relative mx-auto h-[420px] w-full max-w-sm sm:h-[540px]">
            <ArchImage src={imgs.tulle} alt={`${site.name} ministering, hands open in worship`} className="h-full" />
          </Reveal>
        </div>
      </section>

      <section className="section-pad">
        <div className="mx-auto max-w-6xl px-4 sm:px-6">
          <Reveal className="text-center">
            <p className="eyebrow text-[0.62rem] text-terra">Ways to work together</p>
            <h2 className="mt-4 font-display text-4xl text-jungle sm:text-5xl">
              Built for <span className="gold-text">lasting impact.</span>
            </h2>
          </Reveal>
          <div className="mt-14 grid gap-6 md:grid-cols-3">
            {offers.map((o, i) => (
              <Reveal key={o.title} delayMs={i * 120}>
                <div className="card-lift flex h-full flex-col gap-4 rounded-2xl border border-gold/25 bg-card p-9">
                  <CircleBadge tone={o.tone}>
                    <o.icon className="h-5 w-5" />
                  </CircleBadge>
                  <h3 className="font-display text-2xl text-jungle">{o.title}</h3>
                  <p className="text-sm leading-relaxed text-muted-foreground">{o.text}</p>
                  <ul className="mt-2 grid gap-2">
                    {o.points.map((p) => (
                      <li key={p} className="flex items-start gap-2 text-sm text-foreground/80">
                        <span className="mt-1.5 h-1.5 w-1.5 shrink-0 rotate-45 bg-gold" />
                        {p}
                      </li>
                    ))}
                  </ul>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      <section className="section-pad relative overflow-hidden bg-jungle-deep text-ivory">
        <MonogramWatermark className="absolute -right-6 top-4 text-[14rem]" />
        <div className="relative mx-auto max-w-3xl px-4 text-center sm:px-6">
          <Reveal>
            <h2 className="font-display text-4xl sm:text-5xl">
              Bring Eva to your <span className="gold-text">room.</span>
            </h2>
            <p className="mx-auto mt-5 max-w-md text-sm leading-relaxed text-ivory/75">
              Share your date, audience and theme — you'll hear back with availability and a
              proposal shaped for your gathering.
            </p>
            <Button asChild variant="gold" size="xl" className="mt-8 rounded-full">
              <Link to="/contact">
                Start the conversation <ArrowRight className="h-4 w-4" />
              </Link>
            </Button>
          </Reveal>
        </div>
      </section>
    </>
  );
}