// V1 — Editorial engineer. Classic rhythm, aperture diagram hero, navy services cards, grid team.

const V1Hero = () => (
  <section id="top" style={{padding:"88px 32px 72px", position:"relative", overflow:"hidden", background:"var(--paper)"}}>
    <div className="lq-container lq-hero-content" style={{display:"grid",gridTemplateColumns:"1.25fr 1fr",gap:64,alignItems:"center"}}>
      <div>
        <Eyebrow>one network · integrated solutions · lasting impact</Eyebrow>
        <h1 style={{fontFamily:"var(--font-display)",fontSize:"clamp(56px, 7vw, 104px)",fontWeight:500,lineHeight:0.98,letterSpacing:"-0.035em",margin:"24px 0 28px"}}>
          Building <span style={{fontStyle:"italic",fontWeight:500,color:"var(--navy-700)"}}>high-performing</span><br/>tech organizations.
        </h1>
        <p style={{fontFamily:"var(--font-body)",fontSize:20,lineHeight:1.45,color:"var(--fg-2)",maxWidth:"54ch",margin:"0 0 36px"}}>
          We are engineers. We build integrated solutions across cloud, platforms, DevEx, data, and AI — and hand them back to teams who can keep shipping.
        </p>
        <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
          <a href="#contact" className="lq-btn lq-btn-primary lq-btn-lg" onClick={(e)=>{e.preventDefault();document.querySelector("#contact")?.scrollIntoView({behavior:"smooth",block:"start"})}}>Start your transformation <Icon name="arrow-right" size={18}/></a>
          <a href="#services" className="lq-btn lq-btn-secondary lq-btn-lg" onClick={(e)=>{e.preventDefault();document.querySelector("#services")?.scrollIntoView({behavior:"smooth",block:"start"})}}>What we do</a>
        </div>
        <div style={{display:"flex",gap:28,marginTop:52,fontFamily:"var(--font-mono)",fontSize:12,color:"var(--fg-3)",flexWrap:"wrap"}}>
          <span><span style={{opacity:.6}}>// </span>hoofddorp · cimaja</span>
          <span><span style={{opacity:.6}}>// </span>15 engineers · 9 clients</span>
          <span><span style={{opacity:.6}}>// </span>{new Date().getFullYear()}.04</span>
        </div>
      </div>
      <V1HeroDiagram/>
    </div>
  </section>
);

const V1HeroDiagram = () => {
  const [rot, setRot] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setRot(r => (r + 0.25) % 360), 32);
    return () => clearInterval(t);
  }, []);
  return (
    <div style={{position:"relative",aspectRatio:"1/1.05",background:"var(--navy-900)",borderRadius:16,padding:28,color:"#fff",overflow:"hidden"}}>
      <div className="lq-mesh" style={{position:"absolute",inset:0,opacity:.35}}/>
      <div style={{position:"relative",zIndex:1,height:"100%",display:"flex",flexDirection:"column",justifyContent:"space-between"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start"}}>
          <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--signal-400)",letterSpacing:".12em"}}>// fig.01 · system unlock</div>
          <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--navy-300)"}}>network · 15 nodes</div>
        </div>
        <div style={{display:"flex",alignItems:"center",justifyContent:"center",flex:1}}>
          <svg viewBox="0 0 240 240" style={{width:"86%",maxWidth:340}}>
            <circle cx="120" cy="120" r="100" stroke="var(--navy-700)" strokeWidth="1" fill="none" opacity=".4"/>
            <circle cx="120" cy="120" r="76" stroke="var(--navy-700)" strokeWidth="1" fill="none" opacity=".6"/>
            <circle cx="120" cy="120" r="52" stroke="var(--navy-600)" strokeWidth="1.5" fill="none"/>
            <g transform={`rotate(${rot} 120 120)`}>
              {[0,60,120,180,240,300].map(a => (
                <g key={a} transform={`rotate(${a} 120 120)`}>
                  <line x1="120" y1="120" x2="120" y2="68" stroke="var(--signal-400)" strokeWidth="1.5" opacity=".5"/>
                  <circle cx="120" cy="68" r="3" fill="var(--signal-400)"/>
                </g>
              ))}
            </g>
            {[30,90,150,210,270,330].map(a => (
              <g key={a} transform={`rotate(${a} 120 120)`}>
                <line x1="120" y1="120" x2="120" y2="44" stroke="var(--navy-500)" strokeWidth="1" opacity=".4" strokeDasharray="2 4"/>
                <circle cx="120" cy="44" r="2" fill="var(--navy-400)"/>
              </g>
            ))}
            <circle cx="120" cy="120" r="10" fill="var(--signal-400)"/>
            <circle cx="120" cy="120" r="18" stroke="var(--signal-400)" strokeWidth="1" fill="none" opacity=".4"/>
          </svg>
        </div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:12,fontFamily:"var(--font-mono)",fontSize:10}}>
          <div style={{borderLeft:"2px solid var(--signal-400)",paddingLeft:10}}><div style={{color:"var(--navy-300)"}}>throughput</div><div style={{fontSize:18,color:"#fff",fontFamily:"var(--font-display)",letterSpacing:"-.02em"}}>+312%</div></div>
          <div style={{borderLeft:"2px solid var(--signal-400)",paddingLeft:10}}><div style={{color:"var(--navy-300)"}}>cutover</div><div style={{fontSize:18,color:"#fff",fontFamily:"var(--font-display)",letterSpacing:"-.02em"}}>0 dt</div></div>
          <div style={{borderLeft:"2px solid var(--signal-400)",paddingLeft:10}}><div style={{color:"var(--navy-300)"}}>shipped</div><div style={{fontSize:18,color:"#fff",fontFamily:"var(--font-display)",letterSpacing:"-.02em"}}>12 wks</div></div>
        </div>
      </div>
    </div>
  );
};

const V1Pillars = () => (
  <section id="about" className="lq-section" style={{background:"var(--paper)",paddingTop:40,paddingBottom:72}}>
    <div className="lq-container">
      <div className="lq-section-header" style={{display:"grid",gridTemplateColumns:"1fr 2fr",gap:64,alignItems:"flex-start",marginBottom:40}}>
        <div>
          <Eyebrow>what makes us different</Eyebrow>
          <h2 style={{fontFamily:"var(--font-display)",fontSize:44,fontWeight:600,letterSpacing:"-0.025em",lineHeight:1.05,margin:"12px 0 0"}}>Integrated solutions. Not isolated projects.</h2>
        </div>
        <p style={{fontFamily:"var(--font-body)",fontSize:18,lineHeight:1.55,color:"var(--fg-2)",margin:0,paddingTop:8}}>
          We orchestrate expertise across our entire network to deliver cohesive systems where everything works together. No vendor finger-pointing. No integration debt left behind.
        </p>
      </div>
      <div className="lq-v1-pillars-grid" style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:0,borderTop:"1px solid var(--border-1)"}}>
        {PILLARS.map((p, i) => (
          <div key={p.k} style={{padding:"28px 24px 28px 0",borderRight:i<3?"1px solid var(--border-1)":"none",paddingLeft:i>0?24:0}}>
            <div style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--signal-600)",letterSpacing:".12em",marginBottom:16}}>0{i+1}</div>
            <h3 style={{fontFamily:"var(--font-display)",fontSize:20,fontWeight:600,letterSpacing:"-0.01em",margin:"0 0 10px"}}>{p.k}</h3>
            <p style={{fontFamily:"var(--font-body)",fontSize:14,lineHeight:1.55,color:"var(--fg-2)",margin:0}}>{p.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const V1Services = () => (
  <section id="services" className="lq-section lq-section-navy" style={{position:"relative",overflow:"hidden"}}>
    <div className="lq-mesh" style={{position:"absolute",inset:0}}/>
    <div className="lq-container" style={{position:"relative"}}>
      <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-end",marginBottom:48,flexWrap:"wrap",gap:20}}>
        <div>
          <Eyebrow>what we do</Eyebrow>
          <h2 style={{fontFamily:"var(--font-display)",fontSize:48,fontWeight:600,letterSpacing:"-0.025em",lineHeight:1.05,margin:"12px 0 0",maxWidth:"20ch",color:"#fff"}}>
            Five disciplines. One integrated team.
          </h2>
        </div>
        <a href="#network" className="lq-btn lq-btn-ghost" style={{color:"var(--signal-400)"}} onClick={(e)=>{e.preventDefault();document.querySelector("#network")?.scrollIntoView({behavior:"smooth"})}}>See the network <Icon name="arrow-right" size={16}/></a>
      </div>
      <div className="lq-v1-services-grid" style={{display:"grid",gridTemplateColumns:"repeat(3,1fr)",gap:16}}>
        {SERVICES.map((s, i) => {
          const wide = i === 0 ? { gridColumn: "span 2" } : {};
          return (
            <div key={s.key} style={{
              background:"var(--navy-800)",border:"1px solid rgba(159,180,219,.1)",borderRadius:10,padding:28,
              display:"flex",flexDirection:"column",gap:14,borderTop:"2px solid var(--signal-400)",
              minHeight: i === 0 ? 280 : 240, ...wide
            }}>
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start"}}>
                <div style={{width:44,height:44,borderRadius:8,background:"var(--navy-950)",color:"var(--signal-400)",display:"flex",alignItems:"center",justifyContent:"center"}}>
                  <Icon name={s.icon} size={22}/>
                </div>
                <span style={{fontFamily:"var(--font-mono)",fontSize:11,color:"var(--signal-400)",letterSpacing:".12em"}}>{s.n}</span>
              </div>
              <h3 style={{fontFamily:"var(--font-display)",fontSize:i===0?26:20,fontWeight:600,letterSpacing:"-0.015em",margin:0,color:"#fff"}}>{s.title}</h3>
              <p style={{fontFamily:"var(--font-body)",fontSize:14,lineHeight:1.55,color:"var(--navy-200)",margin:0,flex:1}}>{s.body}</p>
              <a href="#contact" style={{color:"var(--signal-400)",fontFamily:"var(--font-mono)",fontSize:12,textDecoration:"none",display:"flex",alignItems:"center",gap:6}} onClick={(e)=>{e.preventDefault();document.querySelector("#contact")?.scrollIntoView({behavior:"smooth"})}}>learn more <Icon name="arrow-up-right" size={14}/></a>
            </div>
          );
        })}
      </div>
    </div>
  </section>
);

Object.assign(window, { V1Hero, V1Pillars, V1Services });
