// V4 — Mix of V1 & V3. Aperture hero + oversized editorial type + manifesto services
// + animated client marquee. Movement where V3 was static.

const V4Hero = () => (
  <section id="top" className="lq-v4-hero" style={{background:"var(--navy-900)",color:"#fff",padding:"72px 32px 0",position:"relative",overflow:"hidden",minHeight:"92vh",display:"flex",flexDirection:"column",justifyContent:"space-between"}}>
    <div className="lq-mesh" style={{position:"absolute",inset:0,opacity:.35}}/>
    <div className="lq-container" style={{position:"relative",paddingTop:56,flex:1,display:"flex",flexDirection:"column",justifyContent:"center"}}>
      <h1 style={{fontFamily:"var(--font-display)",fontSize:"clamp(48px, 7.5vw, 128px)",fontWeight:500,lineHeight:0.96,letterSpacing:"-0.04em",margin:"0 0 48px",color:"#fff"}}>
        <div style={{display:"block"}}><span style={{color:"var(--signal-400)",fontFamily:"var(--font-mono)",fontWeight:400,fontSize:"0.5em",letterSpacing:"0",verticalAlign:"0.35em",marginRight:"0.35em"}}>//</span>one network</div>
        <div style={{display:"block"}}><span style={{color:"var(--signal-400)",fontFamily:"var(--font-mono)",fontWeight:400,fontSize:"0.5em",letterSpacing:"0",verticalAlign:"0.35em",marginRight:"0.35em"}}>//</span>integrated <span style={{fontStyle:"italic"}}>solutions</span></div>
        <div style={{display:"block"}}><span style={{color:"var(--signal-400)",fontFamily:"var(--font-mono)",fontWeight:400,fontSize:"0.5em",letterSpacing:"0",verticalAlign:"0.35em",marginRight:"0.35em"}}>//</span>lasting impact<span style={{color:"var(--signal-400)"}}>.</span></div>
      </h1>
      <div className="lq-hero-content" style={{display:"grid",gridTemplateColumns:"1.2fr 1fr",gap:64,alignItems:"flex-end"}}>
        <div style={{maxWidth:"58ch"}}>
          <p style={{fontFamily:"var(--font-body)",fontSize:22,lineHeight:1.45,color:"#fff",margin:"0 0 20px",fontWeight:500}}>
            We are <b style={{color:"var(--signal-400)"}}>LEAPSTAQ</b>. We unlock high-performing tech orgs, built on engineering excellence.
          </p>
          <p style={{fontFamily:"var(--font-body)",fontSize:17,lineHeight:1.55,color:"var(--navy-100)",margin:"0 0 12px"}}>
            We are experts in Cloud, Platforms, DevEx, Data, AI, and Digital Transformations.
          </p>
          <p style={{fontFamily:"var(--font-body)",fontSize:17,lineHeight:1.55,color:"var(--navy-200)",margin:0}}>
            We build solutions, integrate them seamlessly, train world-class engineers, and make sure your transformation succeeds.
          </p>
        </div>
        <div className="lq-hero-btns" style={{display:"flex",gap:12,justifyContent:"flex-end",flexWrap:"wrap"}}>
          <a href="#services" className="lq-btn lq-btn-ghost lq-btn-lg" style={{color:"#fff",border:"1px solid rgba(255,255,255,.2)"}} onClick={(e)=>{e.preventDefault();document.querySelector("#services")?.scrollIntoView({behavior:"smooth"})}}>What we do</a>
          <a href="#contact" className="lq-btn lq-btn-accent lq-btn-lg" onClick={(e)=>{e.preventDefault();document.querySelector("#contact")?.scrollIntoView({behavior:"smooth"})}}>Start a project <Icon name="arrow-right" size={18}/></a>
        </div>
      </div>
    </div>
    <div style={{position:"relative",borderTop:"1px solid rgba(159,180,219,.15)",padding:"20px 0",marginTop:48}}>
      <div className="lq-container lq-hero-stats" style={{display:"grid",gridTemplateColumns:"repeat(4, 1fr)",gap:32,fontFamily:"var(--font-mono)",fontSize:12,color:"var(--navy-200)"}}>
        <div><div style={{color:"var(--signal-400)",marginBottom:4,fontSize:10,letterSpacing:".12em"}}>// ENGINEERS</div><div style={{fontSize:28,fontFamily:"var(--font-display)",color:"#fff",fontWeight:500,letterSpacing:"-0.02em"}}>75+</div></div>
        <div><div style={{color:"var(--signal-400)",marginBottom:4,fontSize:10,letterSpacing:".12em"}}>// HUBS</div><div style={{fontSize:28,fontFamily:"var(--font-display)",color:"#fff",fontWeight:500,letterSpacing:"-0.02em"}}>4 · NL / PL / SR / ID</div></div>
        <div><div style={{color:"var(--signal-400)",marginBottom:4,fontSize:10,letterSpacing:".12em"}}>// DELIVERED IMPACT</div><div style={{fontSize:28,fontFamily:"var(--font-display)",color:"#fff",fontWeight:500,letterSpacing:"-0.02em"}}>50+ projects</div></div>
        <div><div style={{color:"var(--signal-400)",marginBottom:4,fontSize:10,letterSpacing:".12em"}}>// FOUNDED</div><div style={{fontSize:28,fontFamily:"var(--font-display)",color:"#fff",fontWeight:500,letterSpacing:"-0.02em"}}>2023</div></div>
      </div>
    </div>
  </section>
);

// Scrolling client marquee — logos rendered as wordmarks on navy strip
const V4ClientMarquee = () => {
  const loop = [...CLIENTS, ...CLIENTS];
  return (
    <section id="clients" style={{background:"var(--navy-900)",padding:"36px 0",overflow:"hidden",borderTop:"1px solid rgba(159,180,219,.08)",borderBottom:"1px solid rgba(159,180,219,.08)",position:"relative"}}>
      <div className="lq-container" style={{padding:"0 32px",marginBottom:20}}>
        <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--signal-400)",letterSpacing:".12em"}}>
          <span style={{opacity:.6}}>// </span>trusted by teams at
        </div>
      </div>
      <div className="v4-marquee">
        <div className="v4-marquee-track">
          {loop.map((n, i) => (
            <span key={i} className="v4-marquee-item">
              <span style={{width:6,height:6,borderRadius:999,background:"var(--signal-400)",opacity:.6,display:"inline-block"}}/>
              <span style={{fontFamily:"var(--font-display)",fontWeight:700,fontSize:28,letterSpacing:"-0.03em",color:"rgba(255,255,255,.82)"}}>{n}</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
};

// V4 Pillars — editorial two-up with larger type + numbered
const V4Pillars = () => (
  <section id="about" className="lq-section" style={{background:"var(--paper)"}}>
    <div className="lq-container">
      <div className="lq-section-header" style={{display:"grid",gridTemplateColumns:"1fr 1.3fr",gap:64,alignItems:"flex-end",marginBottom:56}}>
        <div>
          <Eyebrow>what makes us different</Eyebrow>
          <h2 style={{fontFamily:"var(--font-display)",fontSize:"clamp(44px,5vw,72px)",fontWeight:500,letterSpacing:"-0.03em",lineHeight:1.02,margin:"16px 0 0",maxWidth:"16ch"}}>
            Integrated.<br/><span style={{fontStyle:"italic",color:"var(--navy-700)"}}>Not isolated.</span>
          </h2>
        </div>
        <p style={{fontFamily:"var(--font-body)",fontSize:18,lineHeight:1.55,color:"var(--fg-2)",margin:0,maxWidth:"54ch",paddingBottom:12}}>
          We orchestrate expertise across our network to deliver cohesive systems where everything works together. No vendor finger-pointing. No integration debt at the end of the contract.
        </p>
      </div>
      <div className="lq-pillars-grid" style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:24}}>
        {PILLARS.map((p, i) => (
          <div key={p.k} style={{
            background:"#fff",border:"1px solid var(--border-1)",borderRadius:10,padding:"36px 32px",
            display:"grid",gridTemplateColumns:"72px 1fr",gap:24,alignItems:"flex-start",
            transition:"all var(--dur-base) var(--ease-out)"
          }}
          onMouseEnter={(e)=>{e.currentTarget.style.borderColor="var(--border-2)";e.currentTarget.style.boxShadow="var(--shadow-2)";e.currentTarget.style.transform="translateY(-2px)"}}
          onMouseLeave={(e)=>{e.currentTarget.style.borderColor="var(--border-1)";e.currentTarget.style.boxShadow="none";e.currentTarget.style.transform="translateY(0)"}}>
            <div style={{fontFamily:"var(--font-display)",fontSize:48,fontWeight:500,letterSpacing:"-0.04em",color:"var(--navy-200)",lineHeight:1}}>0{i+1}</div>
            <div>
              <h3 style={{fontFamily:"var(--font-display)",fontSize:22,fontWeight:600,letterSpacing:"-0.015em",margin:"0 0 10px"}}>{p.k}</h3>
              <p style={{fontFamily:"var(--font-body)",fontSize:15,lineHeight:1.55,color:"var(--fg-2)",margin:0}}>{p.d}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// V4 Services — manifesto rows with icon + hover lift
const V4Services = () => (
  <section id="services" className="lq-section" style={{background:"var(--paper-2)"}}>
    <div className="lq-container">
      <div className="lq-section-header" style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:48,alignItems:"flex-end",marginBottom:56}}>
        <div>
          <Eyebrow>what we do</Eyebrow>
          <h2 style={{fontFamily:"var(--font-display)",fontSize:"clamp(48px,5.5vw,80px)",fontWeight:500,letterSpacing:"-0.035em",lineHeight:1.0,margin:"14px 0 0",maxWidth:"16ch"}}>
            Five disciplines.<br/><span style={{fontStyle:"italic",color:"var(--navy-700)"}}>One team.</span>
          </h2>
        </div>
        <p style={{fontFamily:"var(--font-body)",fontSize:17,lineHeight:1.55,color:"var(--fg-2)",margin:0,maxWidth:"46ch",paddingBottom:12}}>
          We don't hand off between disciplines. Every engagement is a single team working across cloud, DevEx, data, AI, and delivery.
        </p>
      </div>
      <div style={{display:"flex",flexDirection:"column",borderTop:"1px solid var(--ink-200)"}}>
        {SERVICES.map(s => <V4ServiceRow key={s.key} s={s}/>)}
      </div>
    </div>
  </section>
);

const V4ServiceRow = ({s}) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      className="lq-service-row"
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{
        display:"grid",gridTemplateColumns:"90px 48px 1fr 1.3fr 60px",gap:32,alignItems:"center",
        padding:"32px 0",borderBottom:"1px solid var(--ink-200)",cursor:"pointer",
        transition:"padding var(--dur-base) var(--ease-out), background var(--dur-base)",
        paddingLeft: hover ? 20 : 0,
        background: hover ? "rgba(255,255,255,.5)" : "transparent"
      }}>
      <div className="lq-service-num" style={{fontFamily:"var(--font-mono)",fontSize:13,color:"var(--signal-600)",letterSpacing:".12em"}}>// {s.n}</div>
      <div style={{width:40,height:40,borderRadius:8,background: hover ? "var(--navy-900)" : "var(--navy-100)",color: hover ? "var(--signal-400)" : "var(--navy-900)",display:"flex",alignItems:"center",justifyContent:"center",transition:"all var(--dur-base)"}}>
        <Icon name={s.icon} size={20}/>
      </div>
      <h3 style={{fontFamily:"var(--font-display)",fontSize:"clamp(26px,2.6vw,38px)",fontWeight:500,letterSpacing:"-0.025em",lineHeight:1.05,margin:0,color: hover ? "var(--navy-900)" : "var(--ink-900)", transition:"color var(--dur-base)"}}>
        {s.title}
      </h3>
      <p className="lq-service-body" style={{fontFamily:"var(--font-body)",fontSize:15,lineHeight:1.55,color:"var(--fg-2)",margin:0,maxWidth:"52ch"}}>{s.body}</p>
      <div style={{justifySelf:"end",color: hover ? "var(--signal-600)" : "var(--ink-400)",transition:"all var(--dur-base)",transform: hover ? "translateX(4px)" : "none"}}>
        <Icon name="arrow-right" size={24}/>
      </div>
    </div>
  );
};

// Moving tech-stack marquee (reverse direction, on paper)
const V4TechMarquee = () => {
  const loop = [...TECH, ...TECH];
  return (
    <section id="tech" style={{background:"var(--paper)",padding:"64px 0",borderTop:"1px solid var(--border-1)",borderBottom:"1px solid var(--border-1)"}}>
      <div className="lq-container lq-section-header" style={{padding:"0 32px",marginBottom:24,display:"grid",gridTemplateColumns:"1fr 2fr",gap:32}}>
        <div>
          <Eyebrow>tech we love</Eyebrow>
          <h2 style={{fontFamily:"var(--font-display)",fontSize:36,fontWeight:600,letterSpacing:"-0.02em",lineHeight:1.1,margin:"12px 0 0"}}>The stack we bet on.</h2>
        </div>
        <p style={{fontFamily:"var(--font-body)",fontSize:15,lineHeight:1.55,color:"var(--fg-2)",margin:0,maxWidth:"48ch",alignSelf:"flex-end"}}>
          Innovative where it earns its keep, stable where it counts — the tech choices that unlock your team's potential without leaving them stranded.
        </p>
      </div>
      <div className="v4-marquee v4-marquee-reverse">
        <div className="v4-marquee-track">
          {loop.map((t, i) => (
            <span key={i} className="v4-marquee-item">
              <span style={{width:6,height:6,borderRadius:999,background:"var(--signal-500)",display:"inline-block"}}/>
              <span style={{fontFamily:"var(--font-mono)",fontSize:15,color:"var(--fg-1)",fontWeight:500}}>{t}</span>
            </span>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { V4Hero, V4ClientMarquee, V4Pillars, V4Services, V4TechMarquee });