/* Process page — "The Route": six stations from intro call to launch */

const PHASES = [
  {
    week: "Week 0",
    title: "Basecamp",
    duration: "30 min",
    deliverable: "A straight answer",
    desc: "One call. You talk, we listen. By the end you have a yes or a no — never a \"we'll circle back.\"",
    bullets: [
      "No NDA, no homework",
      "Ballpark numbers, out loud",
      "Decision on the call",
    ],
    accent: 285,
  },
  {
    week: "Weeks 1–2",
    title: "The route is drawn",
    duration: "2 weeks · $12k",
    deliverable: "Build plan + fixed quote",
    desc: "A senior PM, designer and engineer map every screen, every risk, every assumption. The plan comes back with a price that doesn't move.",
    bullets: [
      "Workshops + user interviews",
      "Design exploration in Figma",
      "Milestone plan, fixed quote",
    ],
    accent: 255,
  },
  {
    week: "Weeks 3–6",
    title: "Foundation",
    duration: "3–4 weeks",
    deliverable: "A deployed app you can touch",
    desc: "The riskiest things get built first. Design system, auth, the feature most likely to kill the project — running on a real device by week six.",
    bullets: [
      "Design system in code",
      "Auth + core data model",
      "Riskiest feature, working",
    ],
    accent: 215,
  },
  {
    week: "Weeks 7–10",
    title: "The climb",
    duration: "3–4 weeks",
    deliverable: "Feature-complete v1",
    desc: "Features land weekly. Edge cases, empty states, bilingual UX. Every Friday: a demo on a call and a TestFlight build in your pocket.",
    bullets: [
      "All v1 features built",
      "Bilingual UX (EN/AR)",
      "Weekly TestFlight builds",
    ],
    accent: 175,
  },
  {
    week: "Weeks 11–12",
    title: "Shakedown",
    duration: "1–2 weeks",
    deliverable: "Live in both stores",
    desc: "Store submissions, analytics, crash reporting, the launch-day playbook. We're on call when the button gets pressed.",
    bullets: [
      "App Store + Play review",
      "Sentry + analytics wired",
      "Launch-day support",
    ],
    accent: 140,
  },
  {
    week: "Weeks 13+",
    title: "Beyond the summit",
    duration: "Optional · $18k/mo",
    deliverable: "Your code, your call",
    desc: "Take the keys and run — full handover, docs, final commit. Or keep us on retainer and keep shipping every month.",
    bullets: [
      "Full handover, your repo",
      "40 hrs/mo improvements",
      "Cancel anytime, 30 days notice",
    ],
    accent: 60,
  },
];

const PRINCIPLES = [
  { title: "Fixed-price milestones",  desc: "Every milestone is scoped and priced before it starts. No 'time and materials' surprises." },
  { title: "Weekly demos",            desc: "Every Friday, on a call, we show you what shipped that week. No surprises at the end." },
  { title: "Your code, your repo",    desc: "All work happens in a repo you own from week one. Access on day one, full handover at the end." },
  { title: "Senior teams only",       desc: "No bait-and-switch. The same engineers on the discovery call build your product." },
];

function ProcessPage() {
  React.useEffect(() => {
    document.title = "Process — Innoveev";
    let m = document.head.querySelector('meta[name="description"]');
    if (!m) { m = document.createElement("meta"); m.setAttribute("name","description"); document.head.appendChild(m); }
    m.setAttribute("content", "The route from intro call to App Store launch — six stations, twelve weeks, fixed prices.");
  }, []);

  return (
    <>
      <Nav />

      <header className="sub-hero">
        <div className="mesh" aria-hidden="true">
          <span className="mesh__blob mesh__blob--1"></span>
          <span className="mesh__blob mesh__blob--2"></span>
          <span className="mesh__blob mesh__blob--3"></span>
          <span className="mesh__fade-bottom"></span>
        </div>
        <div className="container">
          <div className="sub-hero__head">
            <span className="eyebrow">How we work · 12 weeks, typically</span>
            <h1 className="sub-hero__title">
              From intro call to <em>App Store</em>, on a clock.
            </h1>
            <p className="sub-hero__lede">
              No black box, no agency theatre. Every milestone is scoped and priced before it starts.
              Every Friday, on a call, we show you what shipped that week.
            </p>
            <div className="journey-cue" aria-hidden="true">
              <span className="journey-cue__rail"></span>
              Descend to station 01
            </div>
          </div>
        </div>
      </header>

      {/* The Route — full-bleed dark scroll journey (process/journey.jsx) */}
      <ProcessJourney phases={PHASES} />

      <section className="section section--tight">
        <div className="container">
          <div className="section-head">
            <div>
              <span className="eyebrow">Our principles</span>
              <h2 className="h2 section-head__title">Four rules we never bend.</h2>
            </div>
          </div>
          <div className="j-rules">
            {PRINCIPLES.map((p, i) => (
              <div key={p.title} className="j-rule">
                <span className="j-rule__num" aria-hidden="true">{String(i + 1).padStart(2, "0")}</span>
                <div>
                  <div className="j-rule__title">{p.title}</div>
                  <p className="j-rule__desc">{p.desc}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <Footer />
      <TweaksUI />
      <StickyCTA />
      <BuildMode />
      <KeyboardEggs />
      <CookieBanner />
      <CustomCursor enabled={window.useTweaksDefaults.cursor} />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ProcessPage />);