// sections2.jsx — services, process, work, about, contact, footer

// ─────────────────────────────────────────────────────────────────────────────
function Services({ layout }) {
  if (layout === "bento")  return <ServicesBento/>;
  if (layout === "sticky") return <ServicesSticky/>;
  return <ServicesSnap/>;
}

// Shared service visual — different mock per service "k"
function ServiceVisual({ s, big }) {
  const W = big ? "100%" : "100%";
  // Type-driven mock content for each service. Avoid emoji.
  const inner = (() => {
    switch (s.k) {
      case "web": return <MockWeb/>;
      case "funnel": return <MockFunnel/>;
      case "ops": return <MockOps/>;
      case "email": return <MockEmail/>;
      case "social": return <MockSocial/>;
      case "content": return <MockContent/>;
      case "plan": return <MockPlan/>;
      case "video": return <MockVideo/>;
      default: return null;
    }
  })();
  return (
    <div style={{ width:W, height:"100%", position:"relative" }}>
      {inner}
    </div>
  );
}

// ─── Layout 1: SNAP — one service per viewport, alternating sides
function ServicesSnap() {
  return (
    <section id="services" className="section" style={{ paddingTop:0, paddingBottom:0 }}>
      <div className="container" style={{ paddingTop:"var(--section-y)", paddingBottom:60 }}>
        <Reveal><div className="h-eyebrow">Services</div></Reveal>
        <Reveal delay={1}>
          <h2 className="display" style={{ fontSize:"clamp(40px,6.4vw,88px)", margin:"14px 0 22px", maxWidth:980 }}>
            Eight disciplines.<br/>One studio. One bill.
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <p style={{ color:"var(--fg-mute)", fontSize:18, maxWidth:620, margin:0 }}>
            Hire one team for the whole stack — strategy, build, and run. No agency relay race.
          </p>
        </Reveal>
      </div>

      {SERVICES.map((s, i) => (
        <SnapService key={s.k} s={s} flip={i % 2 === 1} idx={i}/>
      ))}
    </section>
  );
}

function SnapService({ s, flip, idx }) {
  const ref = useRef(null);
  const p = useScrollProgress(ref, { start: 0.05, end: 0.95 });
  // Parallax: visual rises faster than copy
  const visualY = (0.5 - p) * 60;
  const copyY   = (0.5 - p) * 24;
  return (
    <div ref={ref} style={{
      minHeight:"95vh", padding:"60px 0",
      display:"flex", alignItems:"center",
      borderTop:"1px solid var(--line)",
    }}>
      <div className="container" style={{ width:"100%" }}>
        <div style={{
          display:"grid",
          gridTemplateColumns:"minmax(0,1fr) minmax(0,1.15fr)",
          gap:"clamp(30px,5vw,80px)",
          alignItems:"center",
          direction: flip ? "rtl" : "ltr",
        }}>
          <div style={{ direction:"ltr", transform:`translateY(${copyY}px)` }}>
            <Reveal>
              <div style={{ display:"flex", alignItems:"center", gap:10, color:"var(--accent)", fontFamily:"'Inter Tight'", fontWeight:600, letterSpacing:"-.02em", fontSize:14 }}>
                <span>{s.n}</span>
                <span style={{ width:24, height:1, background:"var(--accent)", opacity:.6 }}/>
                <span style={{ color:"var(--fg-dim)", textTransform:"uppercase", letterSpacing:".1em", fontSize:11 }}>{s.tag}</span>
              </div>
            </Reveal>
            <Reveal delay={1}>
              <h3 className="display" style={{ fontSize:"clamp(36px,5vw,68px)", margin:"18px 0 22px", maxWidth:560 }}>
                {s.name}
              </h3>
            </Reveal>
            <Reveal delay={2}>
              <p style={{ color:"var(--fg-mute)", fontSize:19, lineHeight:1.45, maxWidth:520, margin:"0 0 28px", textWrap:"pretty" }}>
                {s.blurb}
              </p>
            </Reveal>
            <Reveal delay={3}>
              <a className="btn-link" href="#contact">Brief us <Glyph.arrow className="arr"/></a>
            </Reveal>
          </div>
          <Reveal delay={1}>
            <div style={{ direction:"ltr", aspectRatio:"5/4", transform:`translateY(${visualY}px)` }}>
              <ServiceVisual s={s} big/>
            </div>
          </Reveal>
        </div>
      </div>
    </div>
  );
}

// ─── Layout 2: BENTO — all 8 visible, varied sizes
function ServicesBento() {
  // size hints (col / row spans in a 4-col grid)
  const sizes = [
    { c:2, r:2 }, { c:2, r:1 }, { c:1, r:1 }, { c:1, r:1 },
    { c:1, r:1 }, { c:2, r:1 }, { c:1, r:1 }, { c:2, r:1 },
  ];
  return (
    <section id="services" className="section">
      <div className="container">
        <Reveal><div className="h-eyebrow">Services</div></Reveal>
        <Reveal delay={1}>
          <h2 className="display" style={{ fontSize:"clamp(40px,6.4vw,88px)", margin:"14px 0 22px", maxWidth:980 }}>
            Eight disciplines.<br/>One studio. One bill.
          </h2>
        </Reveal>
        <Reveal delay={2}>
          <p style={{ color:"var(--fg-mute)", fontSize:18, maxWidth:620, margin:"0 0 56px" }}>
            Hire one team for the whole stack — strategy, build, and run. No agency relay race.
          </p>
        </Reveal>

        <div style={{
          display:"grid",
          gridTemplateColumns:"repeat(4, minmax(0,1fr))",
          gridAutoRows:"260px",
          gap:16,
        }}>
          {SERVICES.map((s, i) => (
            <Reveal key={s.k} delay={Math.min(4, (i%4)+1)} style={{
              gridColumn:`span ${sizes[i].c}`,
              gridRow:`span ${sizes[i].r}`,
            }}>
              <BentoCard s={s} large={sizes[i].c>=2 && sizes[i].r>=2}/>
            </Reveal>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          #services > .container > div:last-child{
            grid-template-columns: repeat(2, minmax(0,1fr)) !important;
            grid-auto-rows: 220px !important;
          }
          #services > .container > div:last-child > *{
            grid-column: span 1 !important; grid-row: span 1 !important;
          }
        }
      `}</style>
    </section>
  );
}

function BentoCard({ s, large }) {
  return (
    <div className="glass" style={{
      position:"relative", height:"100%", borderRadius:"var(--radius-lg)", overflow:"hidden",
      padding:22, display:"flex", flexDirection:"column", justifyContent:"space-between",
      transition:"transform .35s ease, box-shadow .35s ease",
    }}
    onMouseEnter={(e)=>{e.currentTarget.style.transform="translateY(-3px)";e.currentTarget.style.boxShadow="inset 0 1px 0 rgba(255,255,255,.32), 0 22px 60px -12px rgba(0,0,0,.6), 0 0 0 1px rgba(255,185,20,.18)"}}
    onMouseLeave={(e)=>{e.currentTarget.style.transform="";e.currentTarget.style.boxShadow=""}}>
      <div style={{ display:"flex", justifyContent:"space-between", alignItems:"center", color:"var(--fg-dim)", fontSize:11, letterSpacing:".12em", textTransform:"uppercase", zIndex:2 }}>
        <span style={{ color:"var(--accent)" }}>{s.n}</span>
        <span>{s.tag}</span>
      </div>
      <div style={{
        position:"absolute", inset:large ? "60px 0 110px 0" : "44px 0 90px 0",
        opacity:.85,
      }}>
        <ServiceVisual s={s}/>
      </div>
      <div style={{ zIndex:2 }}>
        <h3 className="display" style={{ fontSize: large ? 30 : 22, margin:"0 0 6px", letterSpacing:"-.025em", lineHeight:1.05 }}>
          {s.name}
        </h3>
        {large && <p style={{ color:"var(--fg-mute)", fontSize:14, margin:0, maxWidth:380, lineHeight:1.4 }}>{s.blurb}</p>}
      </div>
    </div>
  );
}

// ─── Layout 3: STICKY — left title pinned, right cards scroll
function ServicesSticky() {
  return (
    <section id="services" className="section">
      <div className="container">
        <div style={{
          display:"grid",
          gridTemplateColumns:"minmax(0,.85fr) minmax(0,1.15fr)",
          gap:"clamp(32px,6vw,96px)",
          alignItems:"start",
        }}>
          <div style={{ position:"sticky", top:"calc(48px + 6vh)" }}>
            <Reveal><div className="h-eyebrow">Services</div></Reveal>
            <Reveal delay={1}>
              <h2 className="display" style={{ fontSize:"clamp(40px,5.2vw,76px)", margin:"14px 0 22px" }}>
                Eight disciplines.<br/>One studio.<br/>One bill.
              </h2>
            </Reveal>
            <Reveal delay={2}>
              <p style={{ color:"var(--fg-mute)", fontSize:18, lineHeight:1.45, maxWidth:420 }}>
                Hire one team for the whole stack — strategy, build, and run. No agency relay race, no copy passed across vendors.
              </p>
            </Reveal>
            <Reveal delay={3}>
              <div style={{ marginTop:24 }}>
                <a className="btn-link" href="#contact">Brief us <Glyph.arrow className="arr"/></a>
              </div>
            </Reveal>
          </div>
          <div style={{ display:"grid", gap:18 }}>
            {SERVICES.map((s, i) => (
              <Reveal key={s.k} delay={Math.min(4, (i%3)+1)}>
                <StickyCard s={s}/>
              </Reveal>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px){
          #services > .container > div{ grid-template-columns: 1fr !important; }
          #services > .container > div > div:first-child{ position: static !important; }
        }
      `}</style>
    </section>
  );
}

function StickyCard({ s }) {
  return (
    <div className="glass" style={{
      borderRadius:"var(--radius-lg)",
      padding:24, display:"grid", gridTemplateColumns:"1fr 220px", gap:20, alignItems:"center",
      transition:"transform .3s ease, box-shadow .3s ease",
    }}
    onMouseEnter={(e)=>{e.currentTarget.style.transform="translateY(-2px)";e.currentTarget.style.boxShadow="inset 0 1px 0 rgba(255,255,255,.32), 0 22px 50px -14px rgba(0,0,0,.55), 0 0 0 1px rgba(255,185,20,.18)"}}
    onMouseLeave={(e)=>{e.currentTarget.style.transform="";e.currentTarget.style.boxShadow=""}}>
      <div>
        <div style={{ display:"flex", alignItems:"center", gap:10, color:"var(--accent)", fontWeight:600, fontSize:12, letterSpacing:"-.01em" }}>
          <span>{s.n}</span>
          <span style={{ width:18, height:1, background:"var(--accent)", opacity:.5 }}/>
          <span style={{ color:"var(--fg-dim)", textTransform:"uppercase", letterSpacing:".1em", fontSize:10 }}>{s.tag}</span>
        </div>
        <h3 className="display" style={{ fontSize:26, lineHeight:1.1, margin:"10px 0 8px", letterSpacing:"-.025em" }}>{s.name}</h3>
        <p style={{ color:"var(--fg-mute)", margin:0, fontSize:14.5, lineHeight:1.45, maxWidth:480 }}>{s.blurb}</p>
      </div>
      <div style={{ aspectRatio:"4/3", borderRadius:14, overflow:"hidden" }}>
        <ServiceVisual s={s}/>
      </div>
    </div>
  );
}

Object.assign(window, { Services });