// ---------- Workflow page — extended six-step ----------

const WorkflowPage = ({ onNav, onEnterApp }) => {
  const steps = [
    {
      n: "01", t: "Create the project", italic: "in under a minute.",
      body: "Kick off a HarborDock project with branding, deadlines, reviewers, and the brief — once. The portal is generated, the intake form is live, and your client's link is ready to share before your coffee cools.",
      points: ["Templates for listing films, brand reels, podcast episodes, and retainer cadences", "Auto-generated portal URL with your studio's branding", "Reviewer roles + permissions in one shared list"],
      ui: "intake",
    },
    {
      n: "02", t: "Receive client assets", italic: "without the Drive folder dance.",
      body: "Reviewers drop interview selects, brand files, brief docs, and voice memos into one structured intake. Every file is tagged, dated, and traced back to who uploaded it — no folder archaeology later.",
      points: ["Upload links that work for 50 GB files without WeTransfer", "Auto-categorization by type: footage, stills, brand, audio", "Note-against-file so context never gets lost"],
      ui: "assets",
    },
    {
      n: "03", t: "Upload drafts", italic: "with version history.",
      body: "Push Cut 01, Cut 02, Cut 03 — every version is its own surface. The client always sees the latest, but the entire history is one click away with reviewer state per version.",
      points: ["Single-command upload from any NLE", "Versioned URLs that never break", "Side-by-side diff of any two cuts"],
      ui: "drafts",
    },
    {
      n: "04", t: "Frame-locked comments", italic: "anchored to the exact moment.",
      body: "Clients leave timestamped notes against the precise frame they're talking about. Editors see every comment as a pin on the timeline, with thread, state, and the full context of who said what when.",
      points: ["Pin a comment with one keystroke", "Thread replies, @mention teammates", "Filter by reviewer, round, or state"],
      ui: "comments",
    },
    {
      n: "05", t: "Track every revision", italic: "round by round.",
      body: "Round 01, 02, 03 — each batch of changes is a tidy checklist with owner, due date, and approval state. Closed rounds get archived; open rounds are the studio's daily standup, automated.",
      points: ["Per-round checklist with assignees", "Auto-close when all items resolve", "Studio-wide revision velocity dashboard"],
      ui: "revisions",
    },
    {
      n: "06", t: "Deliver and archive", italic: "with one signature.",
      body: "Hand off final masters with a tap. The deliverables checklist makes sure nothing ships short — and the project archive becomes a permanent client record, complete with approval log.",
      points: ["Stripe invoice fires on final approval (optional)", "Cold-archive after 90 days, restore in seconds", "Audit-trail export as a single PDF"],
      ui: "deliver",
    },
  ];

  return (
    <div className="light-scroll" style={{ background: "var(--paper)", color: "var(--ink)", minHeight: "100vh", fontFamily: "var(--sans)" }}>
      <MarketingNav active="workflow" onNav={onNav} onEnterApp={onEnterApp} />

      <PageMasthead
        eyebrow="THE WORKFLOW"
        title="Kickoff to delivery,"
        italic="in one straight line."
        lead="Six steps. No tabs. Every artifact archived against the project, every approval timestamped, every revision rounded up automatically."
        kicker={
          <>
            <Button variant="secondary" light size="lg" onClick={onEnterApp} iconRight={<window.Icon.Arrow size={15} />}>Try the workflow</Button>
            <Button variant="ghost" light size="lg" onClick={() => onNav("product")}>See features</Button>
          </>
        }
      />

      {/* Workflow steps — alternating layout */}
      <section style={{ padding: "80px 0" }} className="sm-pad-y">
        <div className="container">
          {steps.map((s, i) => (
            <WorkflowStep key={s.n} step={s} index={i} />
          ))}
        </div>
      </section>

      {/* Outcome strip */}
      <section style={{ padding: "80px 0", background: "var(--sand-soft)", borderTop: "1px solid rgba(8,12,16,0.06)", borderBottom: "1px solid rgba(8,12,16,0.06)" }} className="sm-pad-y">
        <div className="container">
          <Reveal>
            <DisplayH2 center eyebrow="THE OUTCOME">A workflow you'd be<br /><span style={{ fontStyle: "italic" }}>proud to show anyone.</span></DisplayH2>
          </Reveal>
          <div className="md-2col sm-1col" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginTop: 56 }}>
            {[
              { v: "2.4×", l: "FASTER APPROVALS" },
              { v: "−68%", l: "EMAIL VOLUME" },
              { v: "−42%", l: "REVISION ROUNDS" },
              { v: "0", l: "VERSION-MIXUP INCIDENTS" },
            ].map((s, i, arr) => (
              <div key={i} style={{ padding: "20px 32px", borderRight: i === arr.length - 1 ? "none" : "1px solid rgba(8,12,16,0.10)" }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 52, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1, color: i === 0 ? "var(--harbor)" : "var(--ink)" }}>{s.v}</div>
                <div className="micro" style={{ color: "rgba(8,12,16,0.55)", marginTop: 12 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <MarketingCTA onEnterApp={onEnterApp} title="Move your next project." italic="On HarborDock." />
      <MarketingFooter onNav={onNav} />
    </div>
  );
};

const WorkflowStep = ({ step, index }) => {
  const reversed = index % 2 === 1;
  return (
    <div className="md-stack" style={{
      display: "grid",
      gridTemplateColumns: reversed ? "1fr 1.1fr" : "1.1fr 1fr",
      gap: 64, alignItems: "center",
      padding: "60px 0",
      borderBottom: "1px solid rgba(8,12,16,0.06)",
    }}>
      <Reveal style={{ order: reversed ? 2 : 1 }}>
        <div className="mono" style={{ fontSize: 11, color: "var(--harbor)", letterSpacing: "0.08em" }}>{step.n}</div>
        <h3 style={{
          fontFamily: "var(--serif)", fontSize: 44, lineHeight: 1.04, fontWeight: 500,
          letterSpacing: "-0.02em", margin: "12px 0 20px",
        }}>
          {step.t}<br />
          <span style={{ fontStyle: "italic", color: "rgba(8,12,16,0.55)" }}>{step.italic}</span>
        </h3>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: "rgba(8,12,16,0.65)", maxWidth: 480 }}>{step.body}</p>
        <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 24 }}>
          {step.points.map((p, i) => (
            <div key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14 }}>
              <window.Icon.Check size={13} stroke={2.4} color="var(--harbor)" />
              <span style={{ color: "rgba(8,12,16,0.78)" }}>{p}</span>
            </div>
          ))}
        </div>
      </Reveal>

      <Reveal delay={100} style={{ order: reversed ? 1 : 2 }}>
        <WorkflowMock kind={step.ui} />
      </Reveal>
    </div>
  );
};

// Distinct UI mock per step
const WorkflowMock = ({ kind }) => {
  if (kind === "intake") {
    return (
      <UIPreview label="NEW PROJECT" title="Sarkis Team — Cambridge Listing" sub="3 reviewers · Due May 24">
        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
          {["Project name", "Client lead", "Reviewers (3)", "Due date", "Template"].map((f, i) => (
            <div key={i} style={{ padding: "10px 12px", background: "rgba(255,255,255,0.025)", border: "1px solid rgba(255,255,255,0.05)", borderRadius: 8, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
              <span style={{ fontSize: 11, color: "var(--warm-gray)" }}>{f}</span>
              <span style={{ fontSize: 12 }}>
                {["93 Third St. Cambridge", "Roy Bahnam", "Roy, Sarkis Team +1", "May 24, 2026", "Listing film"][i]}
              </span>
            </div>
          ))}
          <Button variant="primary" size="md" full icon={<window.Icon.Plus size={13} />}>Create project</Button>
        </div>
      </UIPreview>
    );
  }
  if (kind === "assets") {
    return (
      <UIPreview label="INTAKE · 4 OF 6 RECEIVED" title="Client uploads">
        {[
          { n: "Exterior_Magic_Hour_A001.mov", t: "Video", s: "8.4 GB", a: "harbor" },
          { n: "Interior_Selects_Reel.mp4", t: "Video", s: "2.1 GB", a: "harbor" },
          { n: "Brand_Guidelines_2026.pdf", t: "Doc", s: "12 MB", a: "teal" },
          { n: "Voiceover_Roy_Final.wav", t: "Audio", s: "184 MB", a: "lavender" },
        ].map((f, i) => {
          const tone = STATUS_TONES[f.a];
          return (
            <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "8px 10px", background: "rgba(255,255,255,0.025)", border: "1px solid rgba(255,255,255,0.05)", borderRadius: 7, marginBottom: 6 }}>
              <div style={{ width: 24, height: 24, borderRadius: 5, background: tone.bg, border: `1px solid ${tone.bd}`, color: tone.dot, display: "flex", alignItems: "center", justifyContent: "center" }}>
                <window.Icon.File size={11} />
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ fontSize: 11.5, fontWeight: 500, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{f.n}</div>
                <div style={{ fontSize: 10, color: "var(--warm-gray)" }}>{f.t} · {f.s}</div>
              </div>
            </div>
          );
        })}
      </UIPreview>
    );
  }
  if (kind === "drafts") {
    return (
      <UIPreview label="VERSION HISTORY" title="4 drafts">
        {[
          { v: "Cut 03", d: "02:18", s: "review", at: "Today, 10:42 AM" },
          { v: "Cut 02", d: "02:21", s: "revised", at: "May 11" },
          { v: "Cut 01", d: "02:34", s: "revised", at: "May 09" },
          { v: "Assembly", d: "03:08", s: "archived", at: "May 07" },
        ].map((d, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: 10, background: i === 0 ? "rgba(29,78,216,0.10)" : "rgba(255,255,255,0.025)", border: i === 0 ? "1px solid rgba(29,78,216,0.28)" : "1px solid rgba(255,255,255,0.05)", borderRadius: 8, marginBottom: 6 }}>
            <div style={{ width: 44, height: 28, borderRadius: 4, background: `linear-gradient(135deg, var(--charcoal), #1D4ED8 200%)`, border: "1px solid rgba(255,255,255,0.06)" }} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 2 }}>
                <span style={{ fontSize: 12, fontWeight: 500 }}>{d.v}</span>
                <StatusBadge status={d.s} size="sm" />
              </div>
              <div style={{ fontSize: 10.5, color: "var(--warm-gray)" }}>{d.d} · {d.at}</div>
            </div>
          </div>
        ))}
      </UIPreview>
    );
  }
  if (kind === "comments") {
    return (
      <UIPreview label="THREAD · CUT 03" title="5 comments · 3 open">
        {[
          { who: "RB", from: "Roy Bahnam", t: "00:48", body: "Hold one beat longer before the logo reveal.", a: "harbor", state: null },
          { who: "ST", from: "Sarkis Team", t: "01:14", body: "Swap exterior shot for the evening angle.", a: "harbor", state: null },
          { who: "MK", from: "Maren K.", t: "01:32", body: "Pulling warmer key on kitchen. v2 by EOD.", a: "lavender", state: null },
          { who: "ST", from: "Sarkis Team", t: "01:52", body: "Color pass on hallway is gorgeous. Approve.", a: "harbor", state: "resolved" },
        ].map((c, i) => (
          <div key={i} style={{ display: "flex", gap: 10, padding: "10px 0", borderTop: i === 0 ? "none" : "1px solid rgba(255,255,255,0.04)" }}>
            <Avatar initials={c.who} accent={c.a} size={24} />
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }}>
                <span style={{ fontSize: 11.5, fontWeight: 500 }}>{c.from}</span>
                <span className="mono" style={{ fontSize: 9.5, color: "var(--harbor-2)", background: "rgba(29,78,216,0.10)", padding: "1px 5px", borderRadius: 4 }}>{c.t}</span>
                {c.state === "resolved" && <StatusBadge status="resolved" size="sm" />}
              </div>
              <div style={{ fontSize: 11.5, color: "rgba(255,255,255,0.78)", lineHeight: 1.5 }}>{c.body}</div>
            </div>
          </div>
        ))}
      </UIPreview>
    );
  }
  if (kind === "revisions") {
    return (
      <UIPreview label="ROUND 03 · ACTIVE" title="4 of 4 logged, 2 in progress">
        {[
          { t: "Hold logo reveal +0.5s", o: "Maren K.", s: "in-progress" },
          { t: "Swap exterior @ 01:14", o: "Maren K.", s: "in-progress" },
          { t: "Re-grade kitchen warmer", o: "Theo R.", s: "queued" },
          { t: "Lower bed music at VO", o: "Sound", s: "ready" },
        ].map((r, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0", borderTop: i === 0 ? "none" : "1px solid rgba(255,255,255,0.04)" }}>
            <div style={{ width: 16, height: 16, borderRadius: 4, border: "1px solid rgba(255,255,255,0.20)", background: r.s === "ready" ? "var(--harbor)" : "transparent" }}>
              {r.s === "ready" && <window.Icon.Check size={10} stroke={3} color="white" />}
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 500 }}>{r.t}</div>
              <div style={{ fontSize: 10.5, color: "var(--warm-gray)", marginTop: 2 }}>{r.o}</div>
            </div>
            <StatusBadge status={r.s} size="sm" />
          </div>
        ))}
      </UIPreview>
    );
  }
  if (kind === "deliver") {
    return (
      <UIPreview label="DELIVERY · 68%" title="3 of 5 ready">
        {[
          { n: "Hero film — 16:9", f: "ProRes 4444", s: "awaiting" },
          { n: "Vertical cut — 9:16", f: "H.264", s: "revision" },
          { n: "Square cut — 1:1", f: "H.264", s: "ready" },
          { n: "Stills package", f: "JPG + RAW", s: "not-started" },
          { n: "Client archive", f: "ZIP", s: "not-started" },
        ].map((d, i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0", borderTop: i === 0 ? "none" : "1px solid rgba(255,255,255,0.04)" }}>
            <div style={{ width: 28, height: 28, borderRadius: 6, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.06)", color: "var(--warm-gray)", display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0 }}>
              <window.Icon.Film size={12} />
            </div>
            <div style={{ flex: 1, minWidth: 0 }}>
              <div style={{ fontSize: 12, fontWeight: 500 }}>{d.n}</div>
              <div className="mono" style={{ fontSize: 10, color: "var(--warm-gray)", marginTop: 2 }}>{d.f}</div>
            </div>
            <StatusBadge status={d.s} size="sm" />
          </div>
        ))}
      </UIPreview>
    );
  }
  return null;
};

window.WorkflowPage = WorkflowPage;