// V3 — Editorial contrast. Full-bleed navy hero, oversized type, numbered manifesto services.

const V3Hero = () => (
  <section id="top" style={{background:"var(--navy-900)",color:"#fff",padding:"72px 32px 0",position:"relative",overflow:"hidden",minHeight:"88vh",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:40,flex:1,display:"flex",flexDirection:"column",justifyContent:"center"}}>
      <div style={{fontFamily:"var(--font-mono)",fontSize:12,color:"var(--signal-400)",letterSpacing:".12em",marginBottom:32}}>
        <span style={{opacity:.6}}>// </span>one network · integrated solutions · lasting impact
      </div>
      <h1 style={{fontFamily:"var(--font-display)",fontSize:"clamp(72px, 11vw, 180px)",fontWeight:500,lineHeight:0.88,letterSpacing:"-0.045em",margin:"0 0 32px",color:"#fff"}}>
        We build the tech<br/>
        orgs <span style={{fontStyle:"italic",color:"var(--signal-400)"}}>that ship.</span>
      </h1>
      <div style={{display:"grid",gridTemplateColumns:"1.2fr 1fr",gap:64,alignItems:"flex-end",marginTop:40}}>
        <p style={{fontFamily:"var(--font-body)",fontSize:22,lineHeight:1.45,color:"var(--navy-200)",margin:0,maxWidth:"52ch"}}>
          We are engineers. We orchestrate cloud, platforms, DevEx, data, and AI into integrated systems — and hand them over to teams who can keep shipping.
        </p>
        <div 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"}}>15</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>
);

const V3Pillars = () => (
  <section id="about" className="lq-section" style={{background:"var(--paper)"}}>
    <div className="lq-container">
      <div style={{marginBottom:56}}>
        <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:"20ch"}}>
          Integrated solutions.<br/><span style={{fontStyle:"italic",color:"var(--navy-700)"}}>Not isolated projects.</span>
        </h2>
      </div>
      <div 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:"40px 36px",
            display:"grid",gridTemplateColumns:"80px 1fr",gap:28,alignItems:"flex-start"
          }}>
            <div style={{fontFamily:"var(--font-display)",fontSize:52,fontWeight:500,letterSpacing:"-0.04em",color:"var(--navy-200)",lineHeight:1}}>0{i+1}</div>
            <div>
              <h3 style={{fontFamily:"var(--font-display)",fontSize:24,fontWeight:600,letterSpacing:"-0.02em",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>
);

const V3Services = () => (
  <section id="services" className="lq-section" style={{background:"var(--paper-2)"}}>
    <div className="lq-container">
      <div 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:"12px 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:"44ch",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) => (
          <V3ServiceRow key={s.key} s={s}/>
        ))}
      </div>
    </div>
  </section>
);

const V3ServiceRow = ({s}) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div
      className="lq-service-row"
      onMouseEnter={()=>setHover(true)}
      onMouseLeave={()=>setHover(false)}
      style={{
        display:"grid",gridTemplateColumns:"100px 1fr 1.4fr 60px",gap:40,alignItems:"center",
        padding:"36px 0",borderBottom:"1px solid var(--ink-200)",cursor:"pointer",
        transition:"padding var(--dur-base) var(--ease-out)",
        paddingLeft: hover ? 16 : 0
      }}>
      <div className="lq-service-num" style={{fontFamily:"var(--font-mono)",fontSize:14,color:"var(--signal-600)",letterSpacing:".12em"}}>// {s.n}</div>
      <h3 style={{fontFamily:"var(--font-display)",fontSize:"clamp(28px,3vw,44px)",fontWeight:500,letterSpacing:"-0.03em",lineHeight:1.0,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:"50ch"}}>{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={26}/>
      </div>
    </div>
  );
};

Object.assign(window, { V3Hero, V3Pillars, V3Services });