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

export const Route = createFileRoute("/about")({
  head: () => ({
    meta: [
      { title: "About Eva Shii Jason — Author, Worship Minister & Mentor" },
      {
        name: "description",
        content:
          "Eva Wanjiru Jason is a purpose-driven author, worship minister, gospel recording artist, vocal coach, speaker, mentor and marketplace leader based in Nairobi, Kenya.",
      },
      { property: "og:title", content: "About Eva Shii Jason — Author, Worship Minister & Mentor" },
      {
        property: "og:description",
        content:
          "The story behind People. Purpose. Possibilities. — authentic, warm, purposeful and elegant.",
      },
      { property: "og:type", content: "profile" },
      { name: "twitter:card", content: "summary_large_image" },
    ],
  }),
  component: AboutPage,
});

function ValuePillar({ word, text }: { word: string; text: string }) {
  return (
    <div className="rounded-2xl border border-gold/25 bg-card p-8 text-center">
      <h3 className="font-display text-3xl text-jungle">{word}</h3>
      <p className="mt-2 eyebrow text-[0.55rem] text-terra">{text}</p>
    </div>
  );
}

function AboutPage() {
  return (
    <>
      {/* Intro hero */}
      <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">About</p>
              <h1 className="mt-5 font-display text-5xl leading-[1.05] sm:text-6xl">
                A distinctive presence for a{" "}
                <span className="gold-text">brighter tomorrow.</span>
              </h1>
              <p className="mt-7 max-w-md text-base leading-relaxed text-ivory/80">
                Eva Wanjiru Jason — also known as Eva Shii Jason — is a purpose-driven leader,
                author, worship minister, gospel recording artist, vocal coach, speaker, mentor and
                marketplace leader committed to empowering individuals and organizations to unlock
                their potential.
              </p>
              <p className="mt-5 max-w-md text-base leading-relaxed text-ivory/70">
                Through leadership, mentorship and strategic engagement, she inspires people to make
                intentional choices, embrace growth and create a brighter tomorrow.
              </p>
              <Button asChild variant="gold" size="xl" className="mt-9 rounded-full">
                <Link to="/contact">
                  Invite Eva <ArrowRight className="h-4 w-4" />
                </Link>
              </Button>
            </div>
          </Reveal>
          <Reveal delayMs={150} className="relative mx-auto h-[420px] w-full max-w-sm sm:h-[540px]">
            <ArchImage src={imgs.knit} alt={`${site.name} portrait in a black-and-white knit dress`} className="h-full" />
          </Reveal>
        </div>
      </section>

      {/* Values */}
      <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">What she carries</p>
            <h2 className="mt-4 font-display text-4xl text-jungle sm:text-5xl">
              People. Purpose. <span className="gold-text">Possibilities.</span>
            </h2>
            <GoldRule className="mt-7" />
          </Reveal>
          <div className="mt-14 grid gap-6 md:grid-cols-3">
            <Reveal>
              <ValuePillar word="People" text="Empower individuals" />
            </Reveal>
            <Reveal delayMs={120}>
              <ValuePillar word="Purpose" text="Live with intention" />
            </Reveal>
            <Reveal delayMs={240}>
              <ValuePillar word="Possibilities" text="Create a brighter tomorrow" />
            </Reveal>
          </div>
        </div>
      </section>

      {/* The work */}
      <section className="section-pad bg-secondary">
        <div className="mx-auto max-w-6xl px-4 sm:px-6">
          <div className="grid gap-12 lg:grid-cols-2 lg:items-center">
            <Reveal className="h-[440px] max-w-sm sm:h-[540px]">
              <ArchImage src={imgs.tulle} alt={`${site.name} in a black tulle gown, hands on heart`} className="h-full" />
            </Reveal>
            <div>
              <Reveal>
                <p className="eyebrow text-[0.62rem] text-terra">The work</p>
                <h2 className="mt-4 font-display text-4xl text-jungle sm:text-5xl">
                  One calling, <span className="gold-text">many rooms.</span>
                </h2>
                <p className="mt-6 max-w-lg leading-relaxed text-muted-foreground">
                  From the sanctuary to the marketplace, Eva moves with one message: your life is an
                  assignment worth stewarding. Her work gathers every room she walks into —
                </p>
              </Reveal>
              <div className="mt-8 grid gap-5">
                {[
                  { icon: BookOpen, title: "Author", text: "Books that turn insight into practice — on purpose, worship, choice and community." },
                  { icon: Mic2, title: "Worship Minister & Recording Artist", text: "Ministry beyond the stage: heart and skill, spirit and truth." },
                  { icon: GraduationCap, title: "Mentor & Vocal Coach", text: "Structured journeys for individuals, worship teams and creatives." },
                  { icon: Award, title: "Marketplace Leader", text: "Leading across realms — business and ministry without losing the centre." },
                ].map((w, i) => (
                  <Reveal key={w.title} delayMs={i * 100}>
                    <div className="flex gap-4">
                      <CircleBadge tone={i % 2 === 0 ? "gold" : "terra"}>
                        <w.icon className="h-5 w-5" />
                      </CircleBadge>
                      <div>
                        <h3 className="font-display text-xl text-jungle">{w.title}</h3>
                        <p className="mt-1 text-sm leading-relaxed text-muted-foreground">{w.text}</p>
                      </div>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Quote */}
      <section className="section-pad relative overflow-hidden bg-jungle text-ivory">
        <LeafShadow className="opacity-[0.06]" />
        <MonogramWatermark className="absolute -right-8 bottom-0 text-[15rem]" />
        <div className="relative mx-auto max-w-4xl px-4 text-center sm:px-6">
          <Reveal>
            <p className="eyebrow text-[0.62rem] text-gold-light">In her words</p>
            <blockquote className="mt-8 font-display text-3xl leading-relaxed sm:text-4xl">
              “People. Purpose. Possibilities. A brighter tomorrow is{" "}
              <span className="gold-text">possible.</span>”
            </blockquote>
            <p className="mt-6 font-script text-2xl text-gold-light">{site.name}</p>
          </Reveal>
        </div>
      </section>
    </>
  );
}