// ---------- Product page — feature deep dive ----------

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

    <PageMasthead
      eyebrow="THE PRODUCT"
      title="A studio operating system,"
      italic="not another inbox."
      lead="HarborDock is six tightly-integrated surfaces that replace the entire client-review patchwork — from intake to final delivery — for the creative teams that move projects every week."
      kicker={
        <>
          <Button variant="secondary" light size="lg" onClick={onEnterApp} iconRight={<window.Icon.Arrow size={15} />}>Open the portal</Button>
          <Button variant="ghost" light size="lg" onClick={() => onNav("pricing")}>See pricing</Button>
        </>
      }
    />

    {/* Pillar grid — 6 core features */}
    <section style={{ padding: "100px 0" }} className="sm-pad-y">
      <div className="container">
        <Reveal>
          <DisplayH2 eyebrow="01 — THE SIX SURFACES" italic="every step of the way.">Built for</DisplayH2>
        </Reveal>
        <div className="md-2col sm-1col" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, marginTop: 24 }}>
          {[
            { icon: "Inbox",    t: "Asset intake",      body: "A structured intake portal that replaces \"can you drop this in Drive?\" with a single, branded link your client can't get wrong.", color: "harbor" },
            { icon: "Film",     t: "Versioned drafts",  body: "Cut 01 through final lock with full history, reviewer state, and frame-accurate playback inline.", color: "amber" },
            { icon: "Message",  t: "Timecoded review",  body: "Comments lock to the exact moment they were left on. Threaded, mentionable, resolvable.", color: "teal" },
            { icon: "Layers",   t: "Revision rounds",   body: "Every round captured as a tidy checklist with owner, due date, and approval state — auto-archived when closed.", color: "lavender" },
            { icon: "CheckCircle", t: "Deliverables",   body: "A checklist of every output the client signed off to receive — format, resolution, and state per item.", color: "harbor" },
            { icon: "Eye",      t: "Client portals",    body: "A read-only, branded surface the client actually wants to open. White-label optional on Atelier.", color: "steel" },
          ].map((p, i) => {
            const IconComp = window.Icon[p.icon];
            const tone = STATUS_TONES[p.color];
            return (
              <Reveal key={p.t} delay={i * 60}>
                <LCard hover style={{ padding: 28, height: "100%" }}>
                  <div style={{ width: 36, height: 36, borderRadius: 9, background: tone.bg, border: `1px solid ${tone.bd}`, color: tone.dot, display: "flex", alignItems: "center", justifyContent: "center" }}>
                    <IconComp size={16} />
                  </div>
                  <div style={{ fontFamily: "var(--serif)", fontSize: 22, marginTop: 20, fontWeight: 500, letterSpacing: "-0.01em" }}>{p.t}</div>
                  <div style={{ fontSize: 13.5, lineHeight: 1.55, color: "rgba(8,12,16,0.62)", marginTop: 8 }}>{p.body}</div>
                </LCard>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>

    {/* Frame-locked review deep section */}
    <section style={{ padding: "100px 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">
        <div className="md-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }}>
          <Reveal>
            <div className="micro" style={{ color: "var(--harbor)" }}>02 — FRAME-LOCKED REVIEW</div>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: 40, lineHeight: 1.05, margin: "16px 0 20px", letterSpacing: "-0.02em", fontWeight: 500 }}>
              Notes that point<br /><span style={{ fontStyle: "italic" }}>at the frame.</span>
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "rgba(8,12,16,0.65)" }}>
              No more "at like 1:14 there's a thing" — clients drop a pin at the exact frame they're looking at,
              and the editor sees it locked to the timeline. Threads, @mentions, resolution state, and a clean
              audit trail of who approved what when.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 24 }}>
              {[
                "Frame-accurate timecode anchors (24/25/30/60fps aware)",
                "Threaded replies with @mention notifications",
                "Resolve, reopen, and round-trip with the editor",
                "Filterable by reviewer, round, or status",
              ].map((b, 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)" }}>{b}</span>
                </div>
              ))}
            </div>
          </Reveal>

          <Reveal delay={120}>
            <UIPreview label="REVIEW · CUT 03" title="93 Third St. Cambridge Listing" sub="Roy Bahnam left 3 timecoded notes">
              {/* Mock player */}
              <div style={{ position: "relative", aspectRatio: "16/9", borderRadius: 10, overflow: "hidden", background: "linear-gradient(135deg, #0B0F13, #1D4ED8 240%)", border: "1px solid rgba(255,255,255,0.08)" }}>
                <svg width="100%" height="100%" viewBox="0 0 800 450" preserveAspectRatio="none" style={{ position: "absolute", inset: 0, opacity: 0.12 }}>
                  {Array.from({ length: 22 }).map((_, i) => {
                    const y = 10 + i * 20;
                    return <path key={i} d={`M -20 ${y} Q 200 ${y - 10} 400 ${y} T 820 ${y}`} stroke="white" fill="none" strokeWidth="0.5" />;
                  })}
                </svg>
                <div style={{ position: "absolute", left: "62%", top: "38%", width: 28, height: 28, borderRadius: 99, background: "var(--amber)", color: "white", border: "2px solid rgba(0,0,0,0.4)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600 }} className="hd-pulse">2</div>
                <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <div style={{ width: 56, height: 56, borderRadius: 99, background: "rgba(0,0,0,0.5)", backdropFilter: "blur(8px)", border: "1px solid rgba(255,255,255,0.16)", display: "flex", alignItems: "center", justifyContent: "center", color: "white" }}>
                    <window.Icon.Play size={20} />
                  </div>
                </div>
              </div>
              {/* Scrubber w/ pins */}
              <div style={{ marginTop: 12, padding: "10px 12px", background: "rgba(255,255,255,0.025)", borderRadius: 8, border: "1px solid rgba(255,255,255,0.05)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <span className="mono" style={{ fontSize: 10.5 }}>00:45</span>
                  <div style={{ flex: 1, position: "relative", height: 14 }}>
                    <div style={{ position: "absolute", inset: "5px 0", background: "rgba(255,255,255,0.08)", borderRadius: 99 }} />
                    <div style={{ position: "absolute", left: 0, top: 5, height: 4, width: "33%", background: "var(--harbor)", borderRadius: 99 }} />
                    {[10, 35, 56, 78].map((p, i) => (
                      <div key={i} style={{ position: "absolute", left: `${p}%`, top: "50%", transform: "translate(-50%, -50%)", width: 12, height: 12, borderRadius: 99, background: i === 1 ? "var(--amber)" : "rgba(255,255,255,0.40)", border: "2px solid var(--ink)" }} />
                    ))}
                  </div>
                  <span className="mono" style={{ fontSize: 10.5, color: "var(--warm-gray)" }}>02:18</span>
                </div>
              </div>
              {/* Comment */}
              <div style={{ marginTop: 12, display: "flex", gap: 10, padding: 10, background: "rgba(255,255,255,0.025)", borderRadius: 8, border: "1px solid rgba(255,255,255,0.05)" }}>
                <Avatar initials="RB" accent="harbor" size={26} />
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 6, marginBottom: 4 }}>
                    <span style={{ fontSize: 11.5, fontWeight: 500 }}>Roy Bahnam</span>
                    <span className="mono" style={{ fontSize: 10, color: "var(--harbor-2)", background: "rgba(29,78,216,0.12)", padding: "1px 5px", borderRadius: 4 }}>00:48</span>
                  </div>
                  <div style={{ fontSize: 12, color: "rgba(255,255,255,0.78)", lineHeight: 1.5 }}>Hold one beat longer before the logo reveal. Feels rushed against the music.</div>
                </div>
              </div>
            </UIPreview>
          </Reveal>
        </div>
      </div>
    </section>

    {/* Client portal section */}
    <section style={{ padding: "100px 0" }} className="sm-pad-y">
      <div className="container">
        <div className="md-stack" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center" }}>
          <Reveal>
            <UIPreview label="CLIENT PORTAL · ROY BAHNAM" title="Sarkis Team workspace" sub="Read-only · branded for your studio">
              <div style={{ background: "var(--paper)", borderRadius: 10, padding: 18, color: "var(--ink)" }}>
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                    <HDMark size={20} light />
                    <span style={{ fontSize: 11.5, fontWeight: 500 }}>Winterhill × Sarkis Team</span>
                  </div>
                  <span style={{ fontSize: 10, color: "rgba(8,12,16,0.55)" }}>Good afternoon, Roy</span>
                </div>
                <div style={{ fontFamily: "var(--serif)", fontSize: 22, fontWeight: 500, letterSpacing: "-0.015em" }}>Two cuts waiting on your eyes.</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginTop: 14 }}>
                  {[{n: "Cambridge Listing", v: "Cut 03"}, {n: "Beacon Hill", v: "Storyboard v2"}].map((c, i) => (
                    <div key={i} style={{ background: "white", border: "1px solid rgba(8,12,16,0.08)", borderRadius: 8, padding: 10 }}>
                      <div style={{ aspectRatio: "16/8", borderRadius: 5, background: "linear-gradient(135deg, var(--ink), #1D4ED8 240%)", marginBottom: 8 }} />
                      <div style={{ fontSize: 10.5, color: "rgba(8,12,16,0.55)" }}>{c.n}</div>
                      <div style={{ fontFamily: "var(--serif)", fontSize: 13, marginTop: 2 }}>{c.v}</div>
                    </div>
                  ))}
                </div>
              </div>
            </UIPreview>
          </Reveal>

          <Reveal delay={80}>
            <div className="micro" style={{ color: "var(--harbor)" }}>03 — CLIENT PORTAL</div>
            <h3 style={{ fontFamily: "var(--serif)", fontSize: 40, lineHeight: 1.05, margin: "16px 0 20px", letterSpacing: "-0.02em", fontWeight: 500 }}>
              The link your client<br /><span style={{ fontStyle: "italic" }}>actually wants to open.</span>
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.6, color: "rgba(8,12,16,0.65)" }}>
              Every project gets a calm, branded portal — no logins, no folders, no download caps. Reviewers see exactly
              what's waiting on them, exactly what's been signed off, and exactly what's next.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 24 }}>
              {[
                "Custom domain + white-label on Atelier and Production",
                "Studio mark, palette, and type baked in",
                "Mobile-first review surfaces — review on the train, approve on the bus",
                "Approval log with timestamp + IP — a paper trail clients trust",
              ].map((b, 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)" }}>{b}</span>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>

    {/* Integrations 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 eyebrow="04 — INTEGRATIONS" lead="HarborDock sits where your studio already works. No rip-and-replace, no migration weekend.">
            Plays well<br /><span style={{ fontStyle: "italic" }}>with the kit you own.</span>
          </DisplayH2>
        </Reveal>
        <div className="md-2col sm-1col" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginTop: 32 }}>
          {[
            { t: "Drive & Dropbox", body: "Two-way sync your live folders into project intake." },
            { t: "Frame.io & Vimeo", body: "Import any existing review with comments intact." },
            { t: "Slack & Discord", body: "Approval pings and revision queues in your channels." },
            { t: "Premiere & Resolve", body: "Drop a draft from inside the NLE with one shortcut." },
            { t: "Notion & Linear", body: "Sync revisions back to your studio's tracker." },
            { t: "Calendly", body: "Deadlines become calendar holds for the entire reviewer pool." },
            { t: "Stripe", body: "Invoice the milestone the moment delivery is approved." },
            { t: "Zapier & API", body: "Wire anything else into the workflow." },
          ].map(it => (
            <LCard key={it.t} style={{ padding: 18 }}>
              <div style={{ fontSize: 13.5, fontWeight: 600, color: "var(--ink)" }}>{it.t}</div>
              <div style={{ fontSize: 12.5, color: "rgba(8,12,16,0.62)", marginTop: 6, lineHeight: 1.5 }}>{it.body}</div>
            </LCard>
          ))}
        </div>
      </div>
    </section>

    <MarketingCTA onEnterApp={onEnterApp} title="See the product." italic="In ninety seconds." />
    <MarketingFooter onNav={onNav} />
  </div>
);

window.ProductPage = ProductPage;