"use client";

import { m } from "framer-motion";
import { SectionHeading } from "@/components/patterns/SectionHeading";
import { LinkButton } from "@/components/ui/LinkButton";
import { fadeUp, staggerContainer, scrollReveal } from "@/lib/motion";

/** Section 9 — Startup Success Journey. The founder track from Sprint 2 §08, condensed to a horizontal strip distinct from the generic Funding Process timeline above. */
const stages = [
  { stage: "Apply", detail: "Submit your organization profile, stage, sector, and funding need." },
  { stage: "Review", detail: "Decline with specific feedback, or proceed to preparation — never a silent rejection." },
  { stage: "Prepare", detail: "Pitch deck, valuation, and fundraising strategy sharpened through the Portal." },
  { stage: "Match", detail: "Introduced only to investors whose stage and thesis genuinely fit." },
  { stage: "Raise", detail: "Terms and diligence proceed directly between you and the investor." },
];

export function StartupJourney() {
  return (
    <section aria-labelledby="startup-journey-heading" className="border-b border-line py-24">
      <div className="container">
        <SectionHeading
          id="startup-journey-heading"
          eyebrow="Startup Success Journey"
          title="From application to term sheet."
          description="Five stages a founder moves through, start to finish."
        />

        <m.ol
          initial="hidden"
          whileInView="visible"
          viewport={scrollReveal}
          variants={staggerContainer}
          className="mt-14 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-5"
        >
          {stages.map((s, i) => (
            <m.li key={s.stage} variants={fadeUp} className="relative border-t-2 border-primary/40 pt-5">
              <span className="font-mono text-[11px] text-primary">{String(i + 1).padStart(2, "0")}</span>
              <h3 className="mt-1.5 font-display text-h4 font-normal text-ink">{s.stage}</h3>
              <p className="mt-2 text-caption text-ink-soft">{s.detail}</p>
            </m.li>
          ))}
        </m.ol>

        <div className="mt-10">
          <LinkButton href="/who-we-serve/startups" variant="secondary" size="md">
            Start Your Readiness Review
          </LinkButton>
        </div>
      </div>
    </section>
  );
}