// AG Associates landing — three themes selectable via Tweaks
const { useState, useEffect, useRef, useMemo } = React;

// ──────────────────────────────────────────────────────────────────────────
// NAV
// ──────────────────────────────────────────────────────────────────────────
function Nav({theme}){
  const [menuOpen, setMenuOpen] = useState(false);
  const linkStyle = {color:'var(--ink)', textDecoration:'none', fontSize:13, opacity:.75};
  const isBrut = theme==='brutalist';
  return (
    <nav style={{
      position:'sticky', top:0, zIndex:50,
      borderBottom: isBrut ? '2px solid var(--ink)' : '1px solid var(--line)',
      background: theme==='editorial' ? 'rgba(245,241,232,.85)' : theme==='brutalist' ? 'var(--bg)' : 'rgba(5,7,13,.65)',
      backdropFilter:'blur(20px)', WebkitBackdropFilter:'blur(20px)',
    }}>
      <div className={`container${menuOpen ? ' mobile-menu-open' : ''}`} style={{display:'flex',alignItems:'center',justifyContent:'space-between',height:64}}>
        <div style={{display:'flex',alignItems:'center',gap:12}}>
          <Logo theme={theme}/>
          <span style={{fontFamily:'IBM Plex Mono,monospace',fontSize:11,opacity:.5,letterSpacing:'.12em',textTransform:'uppercase'}}>
            Banking Panel · Thane, MH
          </span>
        </div>
        <div className="nav-links" style={{display:'flex',alignItems:'center',gap:32}}>
          <a href="#workforce" style={linkStyle}>Workforce</a>
          <a href="#workflow" style={linkStyle}>Workflow</a>
          <a href="#manifesto" style={linkStyle}>Manifesto</a>
          <a href="#flywheel" style={linkStyle}>Flywheel</a>
          <a href="#dashboard" style={{
            ...linkStyle, opacity:1,
            padding: isBrut ? '8px 14px' : '8px 14px',
            border: isBrut ? '2px solid var(--ink)' : '1px solid var(--line)',
            borderRadius: isBrut ? 0 : 999,
            background: isBrut ? 'var(--accent)' : 'transparent',
            color: isBrut ? '#0a0a0a' : 'var(--ink)',
            fontWeight:500,
          }}>Live Dashboard →</a>
        </div>
        <button className="nav-hamburger" onClick={()=>setMenuOpen(v=>!v)} style={{
          display:'none', alignItems:'center', justifyContent:'center',
          width:36, height:36, border:'1px solid var(--line)', borderRadius:6,
          background:'transparent', color:'var(--ink)', cursor:'pointer',
          fontSize:18, padding:0
        }}>
          {menuOpen ? '✕' : '☰'}
        </button>
      </div>
      {menuOpen && (
        <div onClick={()=>setMenuOpen(false)} style={{
          position:'fixed', inset:0, zIndex:-1, background:'transparent'
        }}/>
      )}
    </nav>
  );
}

function Logo({theme}){
  const isBrut = theme==='brutalist';
  const isEd = theme==='editorial';
  return (
    <div style={{display:'flex',alignItems:'center',gap:10}}>
      <div style={{
        width:32, height:32,
        display:'grid', placeItems:'center',
        border: isBrut ? '2px solid var(--ink)' : `1px solid var(--accent)`,
        background: isBrut ? 'var(--accent)' : 'transparent',
        color: isBrut ? '#0a0a0a' : 'var(--accent)',
        fontFamily: isEd ? 'Fraunces, serif' : 'IBM Plex Mono, monospace',
        fontWeight:700, fontSize:13, letterSpacing:'-.02em',
        borderRadius: isBrut ? 0 : 6,
      }}>AG</div>
      <span style={{
        fontFamily: isEd ? 'Fraunces, serif' : 'IBM Plex Sans, sans-serif',
        fontWeight: isEd ? 500 : 600,
        fontSize: isEd ? 18 : 15,
        letterSpacing: isEd ? '0' : '-.01em',
      }}>
        {isEd ? <em style={{fontStyle:'italic'}}>AG&nbsp;Associates</em> : 'AG Associates'}
      </span>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// HERO — three different layouts per theme
// ──────────────────────────────────────────────────────────────────────────
function Hero({theme, headline}){
  if (theme==='editorial') return <HeroEditorial headline={headline}/>;
  if (theme==='brutalist') return <HeroBrutalist headline={headline}/>;
  return <HeroBlueprint headline={headline}/>;
}

function HeroBlueprint({headline}){
  return (
    <section className="hero-padding" style={{position:'relative', padding:'96px 0 80px', overflow:'hidden'}}>
      {/* corner ticks */}
      <CornerTicks/>
      <div className="container hero-grid" style={{display:'grid', gridTemplateColumns:'7fr 5fr', gap:64, alignItems:'end'}}>
        <div>
          <div className="rise" style={{display:'inline-flex',alignItems:'center',gap:10,
            padding:'6px 14px', borderRadius:999, border:'1px solid rgba(91,141,239,.25)',
            background:'rgba(91,141,239,.06)', fontSize:12, fontFamily:'IBM Plex Mono,monospace'}}>
            <LiveDot color="#22c55e"/>
            <span style={{opacity:.85}}>Live · 3 agents idle · Thane chamber</span>
          </div>

          <h1 className="rise hero-h1" style={{
            fontFamily:'Fraunces, serif',
            fontSize:'clamp(56px, 8vw, 124px)',
            lineHeight:.92, letterSpacing:'-.04em',
            margin:'28px 0 24px', fontWeight:340,
            animationDelay:'.1s'
          }}>
            <span style={{display:'block'}}>Replace</span>
            <span style={{display:'block', fontStyle:'italic', fontWeight:300, color:'var(--accent)'}}>clerks</span>
            <span style={{display:'block'}}>with <span style={{
              fontWeight:500,
              background:'linear-gradient(90deg,#fff,#5b8def 50%,#9b7eff)',
              WebkitBackgroundClip:'text', backgroundClip:'text', color:'transparent'
            }}>compute</span>.</span>
          </h1>

          <p className="rise" style={{
            maxWidth:520, color:'var(--muted)', fontSize:17, lineHeight:1.55,
            margin:'0 0 36px', animationDelay:'.25s'
          }}>
            Banking-panel home loan counsel operated by six AI agents.
            Bank sends file, SARFAESI-compliant mortgage deed exits — registered and CERSAI-filed by end of day.
            Zero associates, zero missed compliances.
          </p>

          <div className="rise" style={{display:'flex',gap:12, animationDelay:'.4s'}}>
            <a href="#workflow" style={{
              padding:'14px 24px', borderRadius:8, fontSize:14, fontWeight:500,
              background:'linear-gradient(135deg,#5b8def,#9b7eff)', color:'#fff',
              textDecoration:'none', boxShadow:'0 8px 32px rgba(91,141,239,.25)'
            }}>Walk the workflow →</a>
            <a href="#workforce" style={{
              padding:'14px 24px', borderRadius:8, fontSize:14, fontWeight:500,
              border:'1px solid var(--line)', color:'var(--ink)', textDecoration:'none',
              background:'rgba(255,255,255,.03)'
            }}>Meet the agents</a>
          </div>
        </div>

        {/* Right: live agent panel mockup */}
        <AgentPanelMock/>
      </div>

      {/* stats */}
      <div className="container rise stats-grid" style={{
        marginTop:96, paddingTop:32, borderTop:'1px solid var(--line)',
        display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:32, animationDelay:'.6s'
      }}>
        {[
          ['4 hrs',   'File → CERSAI'],
          ['0',       'Human associates'],
          ['6',       'Autonomous agents'],
          ['100%',    'Local inference'],
        ].map(([v,l])=>(
          <div key={l}>
            <div style={{fontFamily:'Fraunces, serif', fontSize:48, fontWeight:300, lineHeight:1, letterSpacing:'-.03em'}}>{v}</div>
            <div style={{fontSize:12, color:'var(--muted)', fontFamily:'IBM Plex Mono,monospace', textTransform:'uppercase', letterSpacing:'.15em', marginTop:8}}>{l}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CornerTicks(){
  const t = {position:'absolute', width:24, height:24, borderColor:'var(--accent)', opacity:.4};
  return <>
    <div style={{...t, top:24, left:24, borderTop:'1px solid', borderLeft:'1px solid'}}/>
    <div style={{...t, top:24, right:24, borderTop:'1px solid', borderRight:'1px solid'}}/>
  </>;
}

function AgentPanelMock(){
  const [active, setActive] = useState(2);
  useEffect(()=>{
    const id = setInterval(()=>setActive(a=>(a+1)%6),1800);
    return ()=>clearInterval(id);
  },[]);
  return (
    <div className="rise" style={{
      animationDelay:'.5s',
      border:'1px solid var(--line)', borderRadius:14,
      background:'rgba(255,255,255,.025)', backdropFilter:'blur(20px)',
      padding:18, fontFamily:'IBM Plex Mono,monospace'
    }}>
      <div style={{display:'flex',alignItems:'center',justifyContent:'space-between', marginBottom:14}}>
        <div style={{display:'flex',alignItems:'center',gap:8}}>
          <LiveDot color="#22c55e"/>
          <span style={{fontSize:11, letterSpacing:'.18em', textTransform:'uppercase', opacity:.7}}>workforce.live</span>
        </div>
        <span style={{fontSize:10, opacity:.45}}>agents.json</span>
      </div>
      {AGENTS.map((a,i)=>(
        <div key={a.name} style={{
          display:'grid', gridTemplateColumns:'28px 1fr auto', alignItems:'center', gap:12,
          padding:'10px 0', borderBottom: i<5 ? '1px dashed var(--line)' : 'none',
          opacity: i===active ? 1 : .55, transition:'opacity .4s'
        }}>
          <span style={{color:'var(--accent)', fontSize:11}}>{a.glyph}</span>
          <div>
            <div style={{fontSize:13, color:'var(--ink)', fontFamily:'IBM Plex Sans, sans-serif', fontWeight:500}}>{a.name}</div>
            <div style={{fontSize:10, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'.1em'}}>{a.role}</div>
          </div>
          <span style={{fontSize:10, color: i===active ? '#22c55e' : 'var(--muted)'}}>
            {i===active ? '● running' : '○ idle'}
          </span>
        </div>
      ))}
    </div>
  );
}

// ── EDITORIAL hero ────────────────────────────────────────────────────
function HeroEditorial({headline}){
  return (
    <section className="hero-padding" style={{padding:'120px 0 80px', position:'relative'}}>
      <div className="container">
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:80, alignItems:'baseline'}}>
          {/* LEFT — masthead */}
          <div>
            <div className="rise" style={{
              fontFamily:'IBM Plex Mono, monospace', fontSize:11,
              letterSpacing:'.3em', textTransform:'uppercase', color:'var(--accent)',
              borderBottom:'1px solid var(--line)', paddingBottom:12, marginBottom:28
            }}>
              VOL. I &nbsp;·&nbsp; NO. 26 &nbsp;·&nbsp; THANE &nbsp;·&nbsp; APRIL MMXXVI
            </div>
            <h1 className="rise hero-h1" style={{
              fontFamily:'Fraunces, serif', fontWeight:300,
              fontSize:'clamp(64px, 9vw, 132px)', lineHeight:.9,
              letterSpacing:'-.04em', margin:'0 0 32px', animationDelay:'.1s'
            }}>
              The banking panel <em style={{fontWeight:300, color:'var(--accent)'}}>without</em> a chamber of associates.
            </h1>
            <p className="rise" style={{
              fontFamily:'Fraunces, serif', fontSize:22, lineHeight:1.4,
              color:'var(--ink)', opacity:.85, fontStyle:'italic', maxWidth:540,
              margin:'0 0 28px', animationDelay:'.2s', fontWeight:300
            }}>
              An essay, in six agents, on what becomes of a banking-panel practice when the title search is instant, the mortgage deed drafts itself, and the CERSAI filing needs no clerk.
            </p>
            <div className="rise" style={{display:'flex', gap:16, alignItems:'center', animationDelay:'.35s'}}>
              <a href="#workflow" style={{
                fontFamily:'Fraunces, serif', fontSize:16, color:'var(--ink)',
                borderBottom:'1px solid var(--accent)', paddingBottom:2,
                textDecoration:'none', fontStyle:'italic'
              }}>Read the dossier →</a>
              <span style={{fontSize:11, fontFamily:'IBM Plex Mono, monospace', color:'var(--muted)', letterSpacing:'.2em'}}>13 MIN</span>
            </div>
          </div>

          {/* RIGHT — opening paragraph as drop cap article */}
          <div className="rise" style={{animationDelay:'.3s'}}>
            <div style={{
              border:'1px solid var(--line)', padding:'32px',
              background:'rgba(255,255,255,.4)',
              fontFamily:'Fraunces, serif', fontSize:17, lineHeight:1.6,
              color:'var(--ink)'
            }}>
              <p style={{margin:0, textIndent:0}}>
                <span style={{
                  float:'left', fontFamily:'Fraunces, serif',
                  fontSize:88, lineHeight:.85, paddingRight:10, paddingTop:6,
                  color:'var(--accent)', fontWeight:400
                }}>A</span>
                t the offices of Maharashtra's bank home loan panels one might still find rooms where title deeds accumulate and junior associates compile reports.
                Adv.&nbsp;Aditya&nbsp;Gade keeps no such rooms. The loan file arrives from the bank; an agent named <em>Aisha</em> receives it.
                Four hours later, a SARFAESI-compliant mortgage deed is registered and the CERSAI charge filed —
                and not one human associate has touched the papers.
              </p>
              <p style={{margin:'18px 0 0', color:'var(--muted)', fontStyle:'italic'}}>
                —&nbsp;On a quiet Tuesday in Thane, the firm cleared twenty-three home loan files before lunch.
              </p>
            </div>

            {/* byline */}
            <div style={{
              marginTop:18, display:'flex', justifyContent:'space-between',
              fontFamily:'IBM Plex Mono, monospace', fontSize:11,
              letterSpacing:'.2em', textTransform:'uppercase', color:'var(--muted)'
            }}>
              <span>Adv. Aditya Gade</span>
              <span>Architect &amp; Counsel</span>
            </div>
          </div>
        </div>

        {/* stats — editorial style: rule + figures */}
        <div className="rise stats-grid" style={{
          marginTop:96, borderTop:'2px solid var(--ink)', paddingTop:24,
          display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:32, animationDelay:'.5s'
        }}>
          {[['IV','hours, file to CERSAI'],['VI','autonomous agents'],['0','human staff'],['100%','local inference']].map(([v,l])=>(
            <div key={l}>
              <div style={{fontFamily:'Fraunces, serif', fontSize:64, fontWeight:300, lineHeight:1, letterSpacing:'-.04em', color:'var(--accent)'}}>{v}</div>
              <div style={{fontSize:11, color:'var(--muted)', textTransform:'uppercase', letterSpacing:'.18em', marginTop:10, fontFamily:'IBM Plex Mono, monospace'}}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── BRUTALIST hero ────────────────────────────────────────────────────
function HeroBrutalist({headline}){
  return (
    <section style={{padding:'48px 0 0', position:'relative', borderBottom:'2px solid var(--ink)'}}>
      <div className="container">
        {/* meta strip */}
        <div className="rise" style={{
          display:'flex', justifyContent:'space-between',
          fontSize:11, letterSpacing:'.18em', textTransform:'uppercase',
          padding:'12px 0', borderBottom:'2px solid var(--ink)'
        }}>
          <span>Index ▸ AG/26.04.001</span>
          <span>{new Date().toLocaleDateString('en-GB',{year:'numeric',month:'short',day:'2-digit'}).toUpperCase()}</span>
          <span>UPTIME 99.94%</span>
          <span>● ONLINE</span>
        </div>

        {/* huge type */}
        <h1 className="rise" style={{
          fontFamily:'JetBrains Mono, monospace', fontWeight:700,
          fontSize:'clamp(72px, 12vw, 200px)', lineHeight:.85,
          letterSpacing:'-.04em', margin:'48px 0 32px', textTransform:'uppercase',
          animationDelay:'.05s'
        }}>
          A_<span style={{background:'var(--accent)', padding:'0 .15em'}}>LAW&nbsp;FIRM</span><br/>
          OF&nbsp;ONE.
        </h1>

        <div className="rise" style={{
          display:'grid', gridTemplateColumns:'2fr 1fr 1fr', gap:0,
          borderTop:'2px solid var(--ink)', borderBottom:'2px solid var(--ink)',
          animationDelay:'.2s'
        }}>
          <div style={{padding:'24px 0', borderRight:'2px solid var(--ink)', paddingRight:24}}>
            <div style={{fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', marginBottom:8, opacity:.6}}>// brief</div>
            <p style={{margin:0, fontSize:17, lineHeight:1.5, fontFamily:'JetBrains Mono, monospace'}}>
              ONE ADVOCATE. SIX AGENTS. ZERO ASSOCIATES.<br/>
              BANK SENDS FILE. REGISTERED MORTGAGE DEED EXITS. SAME DAY.
            </p>
          </div>
          <div style={{padding:'24px', borderRight:'2px solid var(--ink)'}}>
            <div style={{fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', marginBottom:8, opacity:.6}}>// runtime</div>
            <div style={{fontSize:48, fontWeight:700, lineHeight:1}}>04:00</div>
            <div style={{fontSize:11, opacity:.6, marginTop:6}}>SAME-DAY</div>
          </div>
          <div style={{padding:'24px'}}>
            <div style={{fontSize:11, letterSpacing:'.2em', textTransform:'uppercase', marginBottom:8, opacity:.6}}>// staff</div>
            <div style={{fontSize:48, fontWeight:700, lineHeight:1}}>0</div>
            <div style={{fontSize:11, opacity:.6, marginTop:6}}>HUMANS</div>
          </div>
        </div>

        <div className="rise" style={{display:'flex', gap:0, marginTop:0, borderBottom:'2px solid var(--ink)', animationDelay:'.3s'}}>
          <a href="#workflow" style={{
            flex:1, padding:'24px', textAlign:'center', fontSize:14, fontWeight:700, letterSpacing:'.1em',
            textTransform:'uppercase', textDecoration:'none', color:'#0a0a0a',
            background:'var(--accent)', borderRight:'2px solid var(--ink)'
          }}>▸ Trace the workflow</a>
          <a href="#workforce" style={{
            flex:1, padding:'24px', textAlign:'center', fontSize:14, fontWeight:700, letterSpacing:'.1em',
            textTransform:'uppercase', textDecoration:'none', color:'var(--ink)',
            background:'transparent'
          }}>▸ Inspect the workforce</a>
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// MANIFESTO
// ──────────────────────────────────────────────────────────────────────────
function Manifesto({theme}){
  const isBrut = theme==='brutalist';
  const isEd = theme==='editorial';
  return (
    <section id="manifesto" className="section-padding" style={{padding:'120px 0', borderTop: isBrut ? '0' : '1px solid var(--line)'}}>
      <div className="container">
        <div className="manifesto-grid" style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:80, alignItems:'start', marginBottom:48}}>
          <div>
            <Eyebrow color={isBrut ? 'var(--ink)' : 'var(--accent)'}>§ Manifesto</Eyebrow>
            <h2 style={{
              fontFamily: isEd ? 'Fraunces, serif' : isBrut ? 'JetBrains Mono, monospace' : 'Fraunces, serif',
              fontSize:'clamp(40px, 5.5vw, 72px)', lineHeight:1.0, letterSpacing:'-.03em',
              fontWeight: isBrut ? 700 : 320, margin:'24px 0 0',
              textTransform: isBrut ? 'uppercase' : 'none'
            }}>
              {isEd ? <>Linear scaling <em>breaks</em>.<br/>Exponential scaling <em>thrives</em>.</> :
              isBrut ? <>Linear scaling breaks.<br/>Exponential scaling thrives.</> :
              <>Linear scaling <span style={{fontStyle:'italic'}}>breaks.</span><br/>Exponential scaling <span style={{color:'var(--accent)', fontStyle:'italic'}}>thrives</span>.</>}
            </h2>
          </div>
          <p className="manifesto-p" style={{
            fontFamily: isEd ? 'Fraunces, serif' : 'IBM Plex Sans, sans-serif',
            fontSize: isEd ? 19 : 16, lineHeight:1.6, color:'var(--muted)',
            paddingTop: 32, fontStyle: isEd ? 'italic' : 'normal'
          }}>
            The traditional banking-panel practice hires junior associates to chase title chains and draft mortgage deeds. Each new empanelled bank requires another head, another error surface, another compliance gap. We chose the other path: six agents with perfect recall of SARFAESI, RBI circulars, and Maharashtra stamp duty schedules — and zero fatigue.
          </p>
        </div>

        {/* comparison table */}
        <div style={{
          border: isBrut ? '2px solid var(--ink)' : '1px solid var(--line)',
          borderRadius: isBrut ? 0 : 12, overflow:'hidden',
          background: isBrut ? 'transparent' : isEd ? 'rgba(255,255,255,.4)' : 'rgba(255,255,255,.025)'
        }}>
          <div           className="compare-grid"
          style={{
            display:'grid', gridTemplateColumns:'1fr 1.5fr 1.5fr',
            padding:'14px 24px',
            borderBottom: isBrut ? '2px solid var(--ink)' : '1px solid var(--line)',
            background: isBrut ? 'var(--ink)' : 'transparent',
            color: isBrut ? 'var(--bg)' : 'var(--muted)',
            fontFamily:'IBM Plex Mono, monospace', fontSize:11,
            letterSpacing:'.2em', textTransform:'uppercase'
          }}>
            <span>Dimension</span>
            <span style={{color: isBrut ? '#ff4d2e' : '#ff8087'}}>✕ Traditional</span>
            <span style={{color: isBrut ? 'var(--accent)' : '#22c55e'}}>✓ Agentic</span>
          </div>
          {COMPARE.map(([d,t,a],i)=>(
            <div key={d} style={{
              display:'grid', gridTemplateColumns:'1fr 1.5fr 1.5fr',
              padding:'22px 24px',
              borderBottom: i<COMPARE.length-1 ? (isBrut ? '2px solid var(--ink)' : '1px solid var(--line)') : 'none',
              alignItems:'center'
            }}>
              <span style={{fontWeight:500, fontFamily: isEd ? 'Fraunces, serif' : 'inherit', fontSize: isEd ? 17 : 15}}>{d}</span>
              <span style={{color:'var(--muted)', fontSize:14, textDecoration: isBrut ? 'line-through' : 'none'}}>{t}</span>
              <span style={{
                color: isBrut ? 'var(--ink)' : isEd ? 'var(--accent)' : '#22c55e',
                fontSize:14, fontWeight:500
              }}>{a}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// AGENT ROSTER
// ──────────────────────────────────────────────────────────────────────────
function Roster({theme}){
  const isBrut = theme==='brutalist';
  const isEd = theme==='editorial';
  return (
    <section id="workforce" className="section-padding" style={{padding:'120px 0', borderTop: isBrut ? '2px solid var(--ink)' : '1px solid var(--line)'}}>
      <div className="container">
        <div style={{maxWidth:760, marginBottom:64}}>
          <Eyebrow color={isBrut ? 'var(--ink)' : 'var(--accent-2)'}>§ The Workforce</Eyebrow>
          <h2 style={{
            fontFamily: isEd ? 'Fraunces, serif' : isBrut ? 'JetBrains Mono, monospace' : 'Fraunces, serif',
            fontSize:'clamp(40px, 5.5vw, 72px)', lineHeight:1, letterSpacing:'-.03em',
            fontWeight: isBrut ? 700 : 320, margin:'24px 0 16px',
            textTransform: isBrut ? 'uppercase' : 'none'
          }}>
            {isEd ? <>Six agents.<br/><em>One firm.</em></> : 'Six agents. One firm.'}
          </h2>
          <p style={{color:'var(--muted)', fontSize:16, lineHeight:1.6, maxWidth:560}}>
            Each agent owns a deterministic seat — no overlapping responsibilities, no human ambiguity, no shift change.
          </p>
        </div>

        <div className="roster-grid" style={{
          display:'grid',
          gridTemplateColumns: isBrut ? 'repeat(3, 1fr)' : 'repeat(3, 1fr)',
          gap: isBrut ? 0 : 16,
          border: isBrut ? '2px solid var(--ink)' : 'none'
        }}>
          {AGENTS.map((a,i)=> <AgentCard key={a.name} agent={a} theme={theme} idx={i}/>)}
        </div>
      </div>
    </section>
  );
}

function AgentCard({agent, theme, idx}){
  const isBrut = theme==='brutalist';
  const isEd = theme==='editorial';
  const colors = ['var(--accent-2)','var(--accent-3)','var(--accent)','#22c55e','#fb923c','var(--accent-2)'];
  const c = colors[idx];

  if (isBrut) {
    return (
      <div style={{
        padding:24,
        borderRight: idx%3!==2 ? '2px solid var(--ink)' : 'none',
        borderBottom: idx<3 ? '2px solid var(--ink)' : 'none',
        background: idx===2 ? 'var(--accent)' : 'var(--bg)',
        position:'relative', minHeight:240
      }}>
        <div style={{display:'flex', justifyContent:'space-between', alignItems:'baseline', marginBottom:24}}>
          <span style={{fontSize:11, letterSpacing:'.2em', opacity:.6}}>// AGENT_{agent.glyph}</span>
          <span style={{fontSize:11, letterSpacing:'.2em', opacity:.6}}>● ACTIVE</span>
        </div>
        <h3 style={{fontSize:36, fontWeight:700, margin:'0 0 6px', letterSpacing:'-.03em', textTransform:'uppercase'}}>{agent.name}</h3>
        <div style={{fontSize:12, letterSpacing:'.15em', textTransform:'uppercase', marginBottom:18, opacity:.7}}>{agent.role}</div>
        <p style={{fontSize:13, lineHeight:1.55, margin:'0 0 24px', opacity:.85}}>{agent.desc}</p>
        <div style={{
          position:'absolute', bottom:24, left:24, right:24,
          paddingTop:14, borderTop:'1px solid var(--ink)',
          fontSize:11, letterSpacing:'.1em', opacity:.7
        }}>{agent.spec}</div>
      </div>
    );
  }

  if (isEd) {
    return (
      <article style={{
        padding:'32px 28px', background:'rgba(255,255,255,.5)',
        border:'1px solid var(--line)', borderRadius:4,
        position:'relative', overflow:'hidden'
      }}>
        <span style={{
          position:'absolute', top:14, right:18,
          fontFamily:'IBM Plex Mono, monospace', fontSize:11,
          letterSpacing:'.2em', color:'var(--accent)'
        }}>№ {agent.glyph}</span>
        <h3 style={{
          fontFamily:'Fraunces, serif', fontSize:36, fontWeight:400,
          margin:'0 0 4px', letterSpacing:'-.02em',
          color:'var(--ink)'
        }}><em>{agent.name}</em></h3>
        <div style={{
          fontFamily:'IBM Plex Mono, monospace', fontSize:11,
          letterSpacing:'.2em', textTransform:'uppercase',
          color:'var(--accent)', marginBottom:16
        }}>{agent.role}</div>
        <p style={{
          fontFamily:'Fraunces, serif', fontSize:16, lineHeight:1.55,
          color:'var(--ink)', opacity:.85, margin:'0 0 24px',
          fontStyle:'italic', fontWeight:300
        }}>{agent.desc}</p>
        <div style={{
          paddingTop:14, borderTop:'1px solid var(--line)',
          fontFamily:'IBM Plex Mono, monospace', fontSize:11,
          letterSpacing:'.15em', textTransform:'uppercase',
          color:'var(--muted)'
        }}>{agent.spec}</div>
      </article>
    );
  }

  // BLUEPRINT
  return (
    <article style={{
      padding:24, borderRadius:14,
      border:`1px solid var(--line)`,
      background:'rgba(255,255,255,.025)',
      backdropFilter:'blur(14px)',
      transition:'all .35s', cursor:'default',
      position:'relative', overflow:'hidden'
    }}
    onMouseEnter={e=>{ e.currentTarget.style.borderColor=c; e.currentTarget.style.transform='translateY(-2px)'; e.currentTarget.style.background=`${c}10`}}
    onMouseLeave={e=>{ e.currentTarget.style.borderColor='var(--line)'; e.currentTarget.style.transform='none'; e.currentTarget.style.background='rgba(255,255,255,.025)'}}>
      <div style={{display:'flex', justifyContent:'space-between', alignItems:'flex-start', marginBottom:18}}>
        <div style={{
          width:48, height:48, borderRadius:10,
          border:`1px solid ${c}40`, background:`${c}15`,
          display:'grid', placeItems:'center',
          fontFamily:'IBM Plex Mono,monospace', fontSize:13, fontWeight:600,
          color:c, letterSpacing:'-.02em'
        }}>{agent.glyph}</div>
        <span style={{fontSize:10, letterSpacing:'.2em', color:c, fontFamily:'IBM Plex Mono,monospace'}}>● IDLE</span>
      </div>
      <h3 style={{fontFamily:'Fraunces, serif', fontSize:28, fontWeight:400, margin:'0 0 4px', letterSpacing:'-.02em'}}>{agent.name}</h3>
      <div style={{fontFamily:'IBM Plex Mono,monospace', fontSize:10, letterSpacing:'.18em', textTransform:'uppercase', color:c, marginBottom:14}}>{agent.role}</div>
      <p style={{fontSize:13.5, lineHeight:1.55, color:'var(--muted)', margin:'0 0 22px'}}>{agent.desc}</p>
      <div style={{
        paddingTop:14, borderTop:'1px dashed var(--line)',
        fontFamily:'IBM Plex Mono,monospace', fontSize:10, letterSpacing:'.15em',
        textTransform:'uppercase', color:c, opacity:.8
      }}>{agent.spec}</div>
    </article>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// WORKFLOW
// ──────────────────────────────────────────────────────────────────────────
function Workflow({theme}){
  const isBrut = theme==='brutalist';
  const isEd = theme==='editorial';
  return (
    <section id="workflow" className="section-padding" style={{padding:'120px 0', borderTop: isBrut ? '2px solid var(--ink)' : '1px solid var(--line)', position:'relative', overflow:'hidden'}}>
      <div className="container">
        <div style={{maxWidth:760, marginBottom:80}}>
          <Eyebrow color={isBrut ? 'var(--ink)' : '#22c55e'}>§ End-to-End</Eyebrow>
          <h2 style={{
            fontFamily: isEd ? 'Fraunces, serif' : isBrut ? 'JetBrains Mono, monospace' : 'Fraunces, serif',
            fontSize:'clamp(40px, 5.5vw, 72px)', lineHeight:1, letterSpacing:'-.03em',
            fontWeight: isBrut ? 700 : 320, margin:'24px 0 16px',
            textTransform: isBrut ? 'uppercase' : 'none'
          }}>
            {isEd ? <>Same business day,<br/><em>file to registration.</em></> :
              isBrut ? 'SAME DAY. FILE TO CERSAI.' :
              <>Same business day. <span style={{color:'var(--accent)', fontStyle:'italic'}}>File to CERSAI.</span></>}
          </h2>
        </div>

        {isBrut ? <WorkflowBrutalist/> : <WorkflowDefault theme={theme}/>}
      </div>
    </section>
  );
}

function WorkflowDefault({theme}){
  const isEd = theme==='editorial';
  return (
    <div style={{position:'relative'}}>
      {/* connector */}
      <div style={{
        position:'absolute', left:0, right:0, top:32, height:1,
        background: isEd ? 'var(--accent)' : 'linear-gradient(90deg, transparent, var(--accent-2) 20%, var(--accent) 80%, #22c55e)',
        opacity: isEd ? .35 : 1,
        transform:'scaleX(0)', transformOrigin:'left',
        animation:'drawLine 1.4s .3s cubic-bezier(.22,1,.36,1) forwards'
      }}/>
      <div className="workflow-grid" style={{display:'grid', gridTemplateColumns:'repeat(6, 1fr)', gap:12}}>
        {STEPS.map((s,i)=>(
          <div key={s.t} className="rise" style={{textAlign:'center', animationDelay:`${.4+i*.1}s`}}>
            <div style={{
              width:64, height:64, borderRadius:'50%',
              margin:'0 auto 18px',
              border: isEd ? `1px solid var(--accent)` : `1px solid ${i===5 ? '#22c55e' : 'var(--accent-2)'}40`,
              background: isEd ? 'rgba(255,255,255,.6)' : i===5 ? 'rgba(34,197,94,.12)' : 'rgba(91,141,239,.08)',
              display:'grid', placeItems:'center',
              position:'relative', zIndex:1
            }}>
              <span style={{
                fontFamily:'IBM Plex Mono, monospace', fontSize:11, fontWeight:600,
                color: isEd ? 'var(--accent)' : i===5 ? '#22c55e' : 'var(--accent-2)'
              }}>{s.t}</span>
            </div>
            <h4 style={{
              fontFamily: isEd ? 'Fraunces, serif' : 'IBM Plex Sans, sans-serif',
              fontSize: isEd ? 18 : 15, fontWeight:500,
              margin:'0 0 6px',
              fontStyle: isEd ? 'italic' : 'normal'
            }}>{s.label}</h4>
            <p style={{fontSize:12, lineHeight:1.45, color:'var(--muted)', margin:0, padding:'0 6px'}}>{s.note}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

function WorkflowBrutalist(){
  return (
    <div style={{border:'2px solid var(--ink)'}}>
      {STEPS.map((s,i)=>(
        <div key={s.t} style={{
          display:'grid', gridTemplateColumns:'120px 200px 1fr 200px',
          padding:'24px',
          borderBottom: i<STEPS.length-1 ? '2px solid var(--ink)' : 'none',
          background: i===STEPS.length-1 ? 'var(--accent)' : 'transparent',
          alignItems:'center', gap:24
        }}>
          <span style={{fontSize:32, fontWeight:700, letterSpacing:'-.03em'}}>{s.t}</span>
          <span style={{fontSize:18, fontWeight:700, textTransform:'uppercase', letterSpacing:'.05em'}}>{s.label}</span>
          <span style={{fontSize:13, opacity:.85}}>{s.note}</span>
          <span style={{textAlign:'right', fontSize:11, letterSpacing:'.2em', opacity:.6}}>
            {i===STEPS.length-1 ? '✓ FILED' : `STEP ${String(i+1).padStart(2,'0')}/06`}
          </span>
        </div>
      ))}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// FLYWHEEL + closing
// ──────────────────────────────────────────────────────────────────────────
function Flywheel({theme}){
  const isBrut = theme==='brutalist';
  const isEd = theme==='editorial';
  return (
    <section id="flywheel" className="section-padding" style={{padding:'120px 0', borderTop: isBrut ? '2px solid var(--ink)' : '1px solid var(--line)', position:'relative', overflow:'hidden'}}>
      {!isBrut && !isEd && (
        <div style={{
          position:'absolute', left:'50%', top:'50%', width:600, height:600,
          transform:'translate(-50%,-50%)',
          background:'radial-gradient(circle, rgba(155,126,255,.15), transparent 60%)',
          pointerEvents:'none'
        }}/>
      )}
      <div className="container" style={{position:'relative'}}>
        <div style={{textAlign:'center', maxWidth:760, margin:'0 auto 64px'}}>
          <Eyebrow color={isBrut ? 'var(--ink)' : 'var(--accent-3)'}>§ Synthesis</Eyebrow>
          <h2 style={{
            fontFamily: isEd ? 'Fraunces, serif' : isBrut ? 'JetBrains Mono, monospace' : 'Fraunces, serif',
            fontSize:'clamp(40px, 5.5vw, 72px)', lineHeight:1, letterSpacing:'-.03em',
            fontWeight: isBrut ? 700 : 320, margin:'24px 0 16px',
            textTransform: isBrut ? 'uppercase' : 'none'
          }}>
            {isEd ? <>The flywheel <em>compounds.</em></> : isBrut ? 'THE FLYWHEEL COMPOUNDS.' : <>The flywheel <span style={{fontStyle:'italic', color:'var(--accent-3)'}}>compounds.</span></>}
          </h2>
          <p style={{color:'var(--muted)', fontSize:16, lineHeight:1.6, maxWidth:560, margin:'16px auto 0'}}>
            Three forces interlock. Each filing makes the next one cheaper, faster, more accurate.
          </p>
        </div>

        <div className="flywheel-grid" style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: isBrut ? 0 : 24, border: isBrut ? '2px solid var(--ink)' : 'none'}}>
          {FLYWHEEL.map((f,i)=>(
            <div key={f.k} style={{
              padding: isBrut ? 32 : 32,
              borderRight: isBrut && i<2 ? '2px solid var(--ink)' : 'none',
              border: isBrut ? 'none' : '1px solid var(--line)',
              borderRadius: isBrut ? 0 : 14,
              background: isBrut ? (i===1 ? 'var(--accent)' : 'transparent') : isEd ? 'rgba(255,255,255,.5)' : 'rgba(255,255,255,.025)',
              textAlign: isBrut ? 'left' : 'center'
            }}>
              <div style={{
                fontFamily:'IBM Plex Mono, monospace', fontSize:11, letterSpacing:'.25em',
                color: isBrut ? 'var(--ink)' : 'var(--accent-3)',
                marginBottom:14
              }}>0{i+1} / 03</div>
              <h3 style={{
                fontFamily: isEd ? 'Fraunces, serif' : isBrut ? 'JetBrains Mono, monospace' : 'Fraunces, serif',
                fontSize: isBrut ? 22 : 26, fontWeight: isBrut ? 700 : 400,
                margin:'0 0 12px', letterSpacing:'-.02em',
                textTransform: isBrut ? 'uppercase' : 'none'
              }}>{f.k}</h3>
              <p style={{fontSize:14, lineHeight:1.6, color: isBrut ? 'var(--ink)' : 'var(--muted)', margin:0, opacity: isBrut ? .85 : 1}}>{f.v}</p>
            </div>
          ))}
        </div>

        {/* pull quote */}
        <blockquote style={{
          margin:'80px auto 0', maxWidth:880, textAlign:'center',
          padding: isBrut ? '40px' : '40px 32px',
          border: isBrut ? '2px solid var(--ink)' : 'none',
          borderLeft: !isBrut && !isEd ? '2px solid var(--accent)' : (isEd ? '2px solid var(--accent)' : (isBrut ? '2px solid var(--ink)' : 'none')),
        }}>
          <p style={{
            fontFamily: isBrut ? 'JetBrains Mono, monospace' : 'Fraunces, serif',
            fontSize: isBrut ? 18 : 26, lineHeight:1.4, fontWeight: isBrut ? 500 : 320,
            margin:0, fontStyle: isBrut ? 'normal' : 'italic',
            letterSpacing: isBrut ? '0' : '-.01em'
          }}>
            “Agentic AI is not a chatbot. It is a perfectly loyal, hyper-efficient state machine —
            and with every transaction, the database grows smarter, until the marginal cost approaches zero.”
          </p>
          <footer style={{
            marginTop:24, fontFamily:'IBM Plex Mono, monospace',
            fontSize:11, letterSpacing:'.22em', textTransform:'uppercase',
            color:'var(--muted)'
          }}>— Adv. Aditya Gade, AG Associates</footer>
        </blockquote>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// FOOTER
// ──────────────────────────────────────────────────────────────────────────
function Footer({theme}){
  const isBrut = theme==='brutalist';
  const isEd = theme==='editorial';
  return (
    <footer id="dashboard" style={{
      padding: isBrut ? '0' : '64px 0 48px',
      borderTop: isBrut ? '2px solid var(--ink)' : '1px solid var(--line)',
      background: isBrut ? 'var(--ink)' : 'transparent',
      color: isBrut ? 'var(--bg)' : 'inherit'
    }}>
      <div className="container" style={{padding: isBrut ? '48px 32px' : '0 32px'}}>
        <div className="footer-grid" style={{display:'grid', gridTemplateColumns:'2fr 1fr 1fr 1fr', gap:48, alignItems:'start'}}>
          <div>
            <Logo theme={isBrut ? 'inverted' : theme}/>
            <p style={{
              marginTop:18, color: isBrut ? 'rgba(255,255,255,.7)' : 'var(--muted)',
              fontSize:13, lineHeight:1.6, maxWidth:340
            }}>
              Banking-panel home loan counsel, Thane, Maharashtra. Title verification, SARFAESI mortgage deeds, and CERSAI filings — fully automated, end to end.
            </p>
          </div>
          {[
            ['Practice', ['Mortgage Deeds','CERSAI Filing','Title Verification','SARFAESI Compliance']],
            ['System',   ['Live Dashboard','API Status','Audit Log','Templates']],
            ['Contact',  ['advocate@ag-associates.in','+91 · WhatsApp Only','Thane · MH','GitHub']],
          ].map(([h, items])=>(
            <div key={h}>
              <h5 style={{
                fontFamily:'IBM Plex Mono, monospace', fontSize:11,
                letterSpacing:'.22em', textTransform:'uppercase',
                margin:'0 0 16px', color: isBrut ? 'var(--accent)' : 'var(--accent)'
              }}>{h}</h5>
              <ul style={{listStyle:'none', padding:0, margin:0, display:'flex', flexDirection:'column', gap:8}}>
                {items.map(x=><li key={x} style={{fontSize:13, color: isBrut ? 'rgba(255,255,255,.75)' : 'var(--ink)', opacity: isBrut ? 1 : .85}}>{x}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div className="footer-bottom" style={{
          marginTop:48, paddingTop:24,
          borderTop: isBrut ? '1px solid rgba(255,255,255,.2)' : '1px solid var(--line)',
          display:'flex', justifyContent:'space-between',
          fontFamily:'IBM Plex Mono, monospace', fontSize:11,
          letterSpacing:'.18em', textTransform:'uppercase',
          color: isBrut ? 'rgba(255,255,255,.55)' : 'var(--muted)'
        }}>
          <span>© MMXXVI · AG Associates</span>
          <span>Bar Council of Maharashtra · ENR/THN/2024</span>
          <span>Built with the ₹7T prompter methodology</span>
        </div>
      </div>
    </footer>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// Tweaks
// ──────────────────────────────────────────────────────────────────────────
function AGTweaks({t, setTweak}){
  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakRadio label="Variation" value={t.theme}
        options={[
          {value:'blueprint', label:'Blueprint'},
          {value:'editorial', label:'Editorial'},
          {value:'brutalist', label:'Brutalist'},
        ]}
        onChange={(v)=>setTweak('theme', v)} />
      <TweakSection label="Layout" />
      <TweakToggle label="Show workflow section" value={t.showWorkflow}
        onChange={(v)=>setTweak('showWorkflow', v)} />
      <TweakToggle label="Show flywheel section" value={t.showFlywheel}
        onChange={(v)=>setTweak('showFlywheel', v)} />
      <TweakSection label="Notes" />
      <div style={{fontSize:11, lineHeight:1.5, opacity:.7}}>
        Three full landing-page treatments share the same content. Switch <em>Variation</em> to compare visual systems.
      </div>
    </TweaksPanel>
  );
}

// ──────────────────────────────────────────────────────────────────────────
// App
// ──────────────────────────────────────────────────────────────────────────
function App(){
  const [t, setTweak] = useTweaks(window.__AG_DEFAULTS);

  // Sync theme to body for CSS vars + scope
  useEffect(()=>{
    document.body.dataset.theme = t.theme;
  }, [t.theme]);

  return (
    <div data-screen-label={`AG Associates · ${t.theme}`}>
      <Nav theme={t.theme}/>
      <Hero theme={t.theme} headline={t.headline}/>
      <Manifesto theme={t.theme}/>
      <Roster theme={t.theme}/>
      {t.showWorkflow && <Workflow theme={t.theme}/>}
      {t.showFlywheel && <Flywheel theme={t.theme}/>}
      <Footer theme={t.theme}/>
      <AGTweaks t={t} setTweak={setTweak}/>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);
