// ---------- Studios page — case studies + community ----------

const StudiosPage = ({ onNav, onEnterApp }) => {
  const studios = [
    {
      id: "winterhill",
      name: "Winterhill Media",
      city: "Brooklyn, NY",
      kind: "Hybrid agency · 12 editors",
      headline: "From eight tabs to one tab.",
      lead: "Winterhill moved their entire Sarkis Team account onto HarborDock and cut their average approval window from 7.2 days to 2.4 days.",
      quote: "We stopped losing comments. We stopped chasing approvals. The clients started telling us our process felt better than agencies twice our size.",
      person: "Maren Kell",
      role: "Studio lead, Winterhill Media",
      initials: "MK",
      stats: [
        { v: "−66%", l: "APPROVAL TIME" },
        { v: "+38%", l: "RETAINER VALUE" },
        { v: "1.4yr", l: "ON HARBORDOCK" },
      ],
      accent: "harbor",
    },
    {
      id: "atrium",
      name: "Atrium Audio Co.",
      city: "Boston, MA",
      kind: "Podcast network · 6 producers",
      headline: "A review surface their hosts actually used.",
      lead: "Atrium runs 14 weekly shows. Each episode used to need 3+ rounds of email feedback. With HarborDock's transcript-side commenting, the average dropped to under 1.5.",
      quote: "Our hosts will open one link. They will not open four. Putting transcripts next to the audio in one calm place changed how they review forever.",
      person: "Noor Alvi",
      role: "Executive producer, Atrium Audio",
      initials: "NA",
      stats: [
        { v: "1.4", l: "AVG REVIEW ROUNDS" },
        { v: "14", l: "WEEKLY SHOWS" },
        { v: "+92%", l: "HOST PARTICIPATION" },
      ],
      accent: "lavender",
    },
    {
      id: "glasswing",
      name: "Glasswing Visuals",
      city: "Mexico City",
      kind: "Boutique studio · 4 editors",
      headline: "The portal became the proposal.",
      lead: "Glasswing now sends prospective clients a HarborDock portal preview before they sign the contract. It's their highest-converting sales asset.",
      quote: "We used to send a deck. Now we send a portal. Clients sign faster because they can see — visually — what working with us is going to feel like.",
      person: "Lucía Ramos",
      role: "Founder, Glasswing Visuals",
      initials: "LR",
      stats: [
        { v: "+54%", l: "PROPOSAL CONVERSION" },
        { v: "4", l: "EDITORS · 22 CLIENTS" },
        { v: "0", l: "MIGRATION HOURS" },
      ],
      accent: "teal",
    },
  ];

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

      <PageMasthead
        eyebrow="THE STUDIOS"
        title="The teams who"
        italic="set the bar."
        lead="HarborDock is built with — and for — boutique creative studios. These are the founding teams turning client review into something they're proud to put their name on."
      />

      {/* Studio counts strip */}
      <section style={{ padding: "60px 0", borderBottom: "1px solid rgba(8,12,16,0.06)" }} className="sm-pad-y">
        <div className="container">
          <Reveal>
            <div className="md-2col sm-1col" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0 }}>
              {[
                { v: "184", l: "STUDIOS ONBOARDED" },
                { v: "27", l: "COUNTRIES" },
                { v: "12.4M", l: "ASSETS REVIEWED" },
                { v: "96%", l: "CLIENT RETENTION" },
              ].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: 48, fontWeight: 500, letterSpacing: "-0.025em", lineHeight: 1 }}>{s.v}</div>
                  <div className="micro" style={{ color: "rgba(8,12,16,0.55)", marginTop: 12 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>

      {/* Featured case studies */}
      {studios.map((s, i) => <StudioStory key={s.id} studio={s} reversed={i % 2 === 1} />)}

      {/* Studio logos / community */}
      <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">
          <Reveal>
            <DisplayH2 center eyebrow="THE FOUNDING COHORT" italic="and many more.">A handful of the teams</DisplayH2>
          </Reveal>
          <div className="md-2col" style={{ display: "grid", gridTemplateColumns: "repeat(6, 1fr)", gap: 12, marginTop: 56 }}>
            {[
              "WINTERHILL", "ATRIUM", "GLASSWING", "NORTHFALL", "OPEN CIRCUIT", "BAY & ROW",
              "MEZZANINE", "FERRY POINT", "VANTAGE FILM", "WALDEN AUDIO", "ROW HOUSE", "LARK STUDIOS",
            ].map(n => (
              <div key={n} style={{
                padding: "28px 14px", textAlign: "center",
                background: "var(--white)", border: "1px solid rgba(8,12,16,0.08)", borderRadius: 10,
              }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 13, letterSpacing: "0.18em", fontWeight: 500, color: "rgba(8,12,16,0.65)" }}>{n}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Atelier program callout */}
      <section style={{ padding: "100px 0" }} className="sm-pad-y">
        <div className="container">
          <Reveal>
            <LCard style={{ padding: 48, background: "var(--ink)", color: "var(--white)", border: "1px solid var(--ink)" }}>
              <div className="md-stack" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, alignItems: "center" }}>
                <div>
                  <div className="micro" style={{ color: "#9CC1FF" }}>ATELIER PROGRAM</div>
                  <h3 style={{ fontFamily: "var(--serif)", fontSize: 36, lineHeight: 1.1, fontWeight: 500, letterSpacing: "-0.02em", margin: "16px 0 16px" }}>
                    For studios pouring craft<br /><span style={{ fontStyle: "italic", color: "rgba(255,255,255,0.62)" }}>into every detail.</span>
                  </h3>
                  <p style={{ fontSize: 15.5, lineHeight: 1.6, color: "rgba(255,255,255,0.72)", maxWidth: 480, margin: 0 }}>
                    Atelier studios get white-label client portals, dedicated onboarding, early access to new surfaces,
                    and quarterly studio-design reviews with the HarborDock team.
                  </p>
                </div>
                <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                  {["White-label portal + custom domain", "Quarterly studio-design review", "Direct line to product team", "Early access to new surfaces"].map(b => (
                    <div key={b} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14 }}>
                      <window.Icon.Check size={13} stroke={2.4} color="#9CC1FF" />
                      <span style={{ color: "rgba(255,255,255,0.86)" }}>{b}</span>
                    </div>
                  ))}
                  <div style={{ marginTop: 16 }}>
                    <Button variant="primary" size="md" iconRight={<window.Icon.Arrow size={13} />}>Apply to Atelier</Button>
                  </div>
                </div>
              </div>
            </LCard>
          </Reveal>
        </div>
      </section>

      <MarketingCTA onEnterApp={onEnterApp} title="Join the studios." italic="Open yours today." />
      <MarketingFooter onNav={onNav} />
    </div>
  );
};

const StudioStory = ({ studio, reversed }) => {
  const tone = STATUS_TONES[studio.accent];
  return (
    <section style={{ padding: "80px 0", borderBottom: "1px solid rgba(8,12,16,0.06)" }} className="sm-pad-y">
      <div className="container">
        <Reveal>
          <div className="md-stack" style={{
            display: "grid",
            gridTemplateColumns: reversed ? "1fr 1.1fr" : "1.1fr 1fr",
            gap: 56, alignItems: "center",
          }}>
            <div style={{ order: reversed ? 2 : 1 }}>
              <div style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "4px 12px", borderRadius: 99, background: tone.bg, border: `1px solid ${tone.bd}`, color: tone.dot, fontSize: 11, fontWeight: 500 }}>
                <window.Icon.Building size={11} /> {studio.kind}
              </div>
              <div className="micro" style={{ color: "rgba(8,12,16,0.55)", marginTop: 20 }}>{studio.name.toUpperCase()} · {studio.city.toUpperCase()}</div>
              <h3 style={{ fontFamily: "var(--serif)", fontSize: 36, lineHeight: 1.1, fontWeight: 500, letterSpacing: "-0.02em", margin: "10px 0 16px", maxWidth: 480 }}>
                {studio.headline}
              </h3>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: "rgba(8,12,16,0.65)", maxWidth: 480 }}>{studio.lead}</p>
              <div className="md-2col" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 0, marginTop: 28, borderTop: "1px solid rgba(8,12,16,0.08)", borderBottom: "1px solid rgba(8,12,16,0.08)" }}>
                {studio.stats.map((st, i, arr) => (
                  <div key={i} style={{ padding: "16px 20px 16px 0", borderRight: i === arr.length - 1 ? "none" : "1px solid rgba(8,12,16,0.08)" }}>
                    <div style={{ fontFamily: "var(--serif)", fontSize: 28, fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1, color: i === 0 ? tone.dot : "var(--ink)" }}>{st.v}</div>
                    <div className="micro" style={{ color: "rgba(8,12,16,0.55)", marginTop: 8, fontSize: 9.5 }}>{st.l}</div>
                  </div>
                ))}
              </div>
            </div>

            <div style={{ order: reversed ? 1 : 2 }}>
              <LCard style={{ padding: 32, position: "relative", overflow: "hidden", background: `linear-gradient(180deg, ${tone.bg}, var(--white))` }}>
                <div style={{ fontFamily: "var(--serif)", fontSize: 96, lineHeight: 0.6, color: tone.dot, opacity: 0.30, position: "absolute", top: 20, left: 28, fontStyle: "italic" }}>“</div>
                <div style={{ position: "relative", paddingTop: 28 }}>
                  <p style={{ fontFamily: "var(--serif)", fontSize: 22, lineHeight: 1.45, fontWeight: 500, letterSpacing: "-0.01em", fontStyle: "italic", margin: 0, color: "var(--ink)" }}>
                    {studio.quote}
                  </p>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, marginTop: 28 }}>
                    <div style={{
                      width: 42, height: 42, borderRadius: 99,
                      background: tone.bg, border: `1px solid ${tone.bd}`, color: tone.dot,
                      display: "flex", alignItems: "center", justifyContent: "center",
                      fontFamily: "var(--serif)", fontSize: 16, fontStyle: "italic", fontWeight: 500,
                    }}>{studio.initials}</div>
                    <div>
                      <div style={{ fontSize: 13, fontWeight: 600 }}>{studio.person}</div>
                      <div style={{ fontSize: 11.5, color: "rgba(8,12,16,0.55)", marginTop: 2 }}>{studio.role}</div>
                    </div>
                  </div>
                </div>
              </LCard>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
};

window.StudiosPage = StudiosPage;