// Hero section — multiple layout variants
const Hero = ({ layout = 'editorial' }) => {
  return (
    <section style={{padding:'40px 0 80px', position:'relative', overflow:'hidden'}}>
      {/* ambient glow */}
      <div aria-hidden style={{position:'absolute',top:-200,right:-100,width:600,height:600,
        background:'radial-gradient(circle, rgba(212,255,58,0.08), transparent 60%)',
        pointerEvents:'none', filter:'blur(40px)'}}/>

      <div className="container" style={{position:'relative'}}>
        {layout === 'editorial' && <HeroEditorial/>}
        {layout === 'split' && <HeroSplit/>}
        {layout === 'centered' && <HeroCentered/>}
      </div>
    </section>
  );
};

const HeroEditorial = () => (
  <div>
    <div style={{display:'flex',alignItems:'center',justifyContent:'space-between',marginBottom:48,flexWrap:'wrap',gap:16}}>
      <div className="eyebrow"><span className="dot"/>SolidAtoms · Engineering studio · est. 2022</div>
      <div className="mono" style={{fontSize:11,color:'var(--ink-3)',letterSpacing:'0.06em'}}>
        ◌ 41 PROJECTS  ·  5 ENGINEERS  ·  ⌖ KARACHI ⇄ REMOTE
      </div>
    </div>

    <h1 style={{
      fontSize:'clamp(56px,9.8vw,150px)', lineHeight:0.92, letterSpacing:'-0.045em',
      fontWeight:500, marginBottom:48
    }}>
      We build <span className="serif" style={{color:'var(--accent)'}}>serious</span> software
      <br/>
      for <span style={{display:'inline-block',position:'relative'}}>ambitious<span style={{position:'absolute',left:0,right:0,bottom:'0.06em',height:'0.06em',background:'var(--accent)',opacity:0.6}}/></span> teams.
    </h1>

    <div style={{display:'grid',gridTemplateColumns:'minmax(0,1fr) minmax(280px,420px)',gap:48,alignItems:'end',marginBottom:56}}>
      <p style={{fontSize:'clamp(18px,1.8vw,24px)',lineHeight:1.4,color:'var(--ink-2)',maxWidth:680,letterSpacing:'-0.01em'}}>
        SolidAtoms is a small, deliberate studio. We design and engineer marketing sites,
        web apps, and AI-native products for founders, agencies, and teams who can tell
        the difference between shipped and finished.
      </p>
      <div style={{display:'flex',gap:10,flexWrap:'wrap',justifyContent:'flex-end'}}>
        <button className="btn btn-primary">View our work {Icon.arrow()}</button>
        <button className="btn btn-ghost">Book intro call</button>
      </div>
    </div>

    {/* Feature panel */}
    <FeaturePanel/>
  </div>
);

const FeaturePanel = () => {
  const featured = PORTFOLIO[0];
  return (
    <div style={{
      display:'grid', gridTemplateColumns:'1.4fr 1fr', gap:0,
      border:'1px solid var(--line)', borderRadius:'var(--radius)', overflow:'hidden',
      background:'var(--bg-2)'
    }}>
      <div style={{position:'relative', aspectRatio:'16/10', background:`linear-gradient(135deg, ${featured.color}22 0%, #0a0a0a 70%)`, borderRight:'1px solid var(--line)'}}>
        {/* mock dashboard preview */}
        <div style={{position:'absolute',inset:24,borderRadius:8,background:'#0d0d0e',border:'1px solid var(--line-2)',padding:'12px 14px',display:'flex',flexDirection:'column',gap:10}}>
          <div style={{display:'flex',gap:6}}>
            <span style={{width:10,height:10,borderRadius:'50%',background:'#3a3a3a'}}/>
            <span style={{width:10,height:10,borderRadius:'50%',background:'#3a3a3a'}}/>
            <span style={{width:10,height:10,borderRadius:'50%',background:'#3a3a3a'}}/>
            <span className="mono" style={{fontSize:10,color:'var(--ink-3)',marginLeft:8}}>ledgerline.io / dashboard</span>
          </div>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:8}}>
            {[['Revenue','$248,310','+12.4%'],['Active','1,284','+4.1%'],['Churn','2.1%','-0.3%']].map((m,i)=>(
              <div key={i} style={{padding:'10px 12px',background:'#0a0a0b',borderRadius:6,border:'1px solid var(--line)'}}>
                <div className="mono" style={{fontSize:9,color:'var(--ink-3)',marginBottom:4,letterSpacing:'0.06em'}}>{m[0].toUpperCase()}</div>
                <div style={{fontSize:14,fontWeight:600,color:'var(--ink)'}}>{m[1]}</div>
                <div className="mono" style={{fontSize:10,color: m[2].startsWith('-') ? 'var(--accent-2)' : 'var(--ok)'}}>{m[2]}</div>
              </div>
            ))}
          </div>
          <div style={{flex:1, position:'relative', borderRadius:6, background:'#0a0a0b', border:'1px solid var(--line)', overflow:'hidden'}}>
            <svg viewBox="0 0 300 100" style={{width:'100%',height:'100%'}} preserveAspectRatio="none">
              <defs>
                <linearGradient id="lg" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="#d4ff3a" stopOpacity="0.35"/>
                  <stop offset="100%" stopColor="#d4ff3a" stopOpacity="0"/>
                </linearGradient>
              </defs>
              <path d="M0,80 C30,70 50,40 80,45 C110,50 130,30 160,28 C190,26 210,55 240,40 C270,28 290,18 300,12 L300,100 L0,100Z" fill="url(#lg)"/>
              <path d="M0,80 C30,70 50,40 80,45 C110,50 130,30 160,28 C190,26 210,55 240,40 C270,28 290,18 300,12" stroke="#d4ff3a" strokeWidth="1.5" fill="none"/>
            </svg>
          </div>
        </div>
      </div>

      <div style={{padding:'32px 32px 28px', display:'flex',flexDirection:'column',justifyContent:'space-between',gap:24}}>
        <div>
          <div style={{display:'flex',gap:8,marginBottom:16}}>
            <Tag accent>Featured</Tag>
            <Tag>{featured.tag}</Tag>
            <Tag>{featured.year}</Tag>
          </div>
          <h3 style={{fontSize:28,letterSpacing:'-0.025em',marginBottom:10,fontWeight:500}}>{featured.name}</h3>
          <p style={{color:'var(--ink-2)',fontSize:15,lineHeight:1.5,marginBottom:20}}>{featured.summary}</p>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:16,paddingTop:16,borderTop:'1px solid var(--line)'}}>
            <div>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',marginBottom:6,letterSpacing:'0.06em'}}>{featured.metric[0].toUpperCase()}</div>
              <div style={{fontSize:22,letterSpacing:'-0.02em',fontWeight:500,color:'var(--accent)'}}>{featured.metric[1]}</div>
            </div>
            <div>
              <div className="mono" style={{fontSize:10,color:'var(--ink-3)',marginBottom:6,letterSpacing:'0.06em'}}>STACK</div>
              <div style={{fontSize:13,color:'var(--ink-2)'}}>{featured.stack.join(' · ')}</div>
            </div>
          </div>
        </div>
        <button className="btn btn-ghost" style={{alignSelf:'flex-start'}}>Read case study {Icon.arrow()}</button>
      </div>
    </div>
  );
};

const HeroSplit = () => (
  <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:48,alignItems:'center',minHeight:'70vh'}}>
    <div>
      <div className="eyebrow" style={{marginBottom:24}}><span className="dot"/>Engineering studio</div>
      <h1 style={{fontSize:'clamp(48px,6.4vw,86px)',lineHeight:0.96,letterSpacing:'-0.04em',fontWeight:500,marginBottom:28}}>
        Software, <span className="serif" style={{color:'var(--accent)'}}>finished</span> properly.
      </h1>
      <p style={{fontSize:18,lineHeight:1.5,color:'var(--ink-2)',marginBottom:32,maxWidth:520}}>
        Web builds, rescues, AI integrations, and the boring infrastructure
        that holds it all together. Shipped by humans who care.
      </p>
      <div style={{display:'flex',gap:10,flexWrap:'wrap'}}>
        <button className="btn btn-primary">Start a project {Icon.arrow()}</button>
        <button className="btn btn-ghost">See our work</button>
      </div>
    </div>
    <Placeholder label="hero / studio reel" code="V.01" color="#1a1a1c" ratio="4/5"/>
  </div>
);

const HeroCentered = () => (
  <div style={{textAlign:'center',padding:'40px 0 20px',maxWidth:980,margin:'0 auto'}}>
    <span className="pill" style={{marginBottom:32}}>
      <span style={{width:6,height:6,borderRadius:'50%',background:'var(--accent)'}}/>
      New: AI integration practice · Open for Q3
    </span>
    <h1 style={{fontSize:'clamp(48px,8vw,120px)',lineHeight:0.94,letterSpacing:'-0.045em',fontWeight:500,marginBottom:28}}>
      Engineering for the <span className="serif" style={{color:'var(--accent)'}}>next</span> web.
    </h1>
    <p style={{fontSize:20,lineHeight:1.5,color:'var(--ink-2)',marginBottom:40,maxWidth:680,margin:'0 auto 40px'}}>
      SolidAtoms is a five-person studio building marketing sites, web apps,
      and AI-native products for teams that move fast and care about craft.
    </p>
    <div style={{display:'flex',gap:10,justifyContent:'center',flexWrap:'wrap'}}>
      <button className="btn btn-primary">Start a project {Icon.arrow()}</button>
      <button className="btn btn-ghost">View case studies</button>
    </div>
  </div>
);

window.Hero = Hero;