// ─────────────────────────────────────────────────────────────
// NAV
// ─────────────────────────────────────────────────────────────
const Nav = ({onToggleTheme, theme}) => (
  <nav className="nav">
    <div className="nav-inner">
      <a href="#top" className="nav-logo">
        <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
          <rect x="2" y="2" width="18" height="5" stroke="currentColor" strokeWidth="1.5"/>
          <rect x="2" y="9" width="18" height="5" stroke="currentColor" strokeWidth="1.5" fill="var(--accent)" fillOpacity=".25"/>
          <rect x="2" y="16" width="18" height="4" stroke="currentColor" strokeWidth="1.5"/>
        </svg>
        StackVerse
      </a>
      <div className="nav-links">
        <a href="#services">Services</a>
        <a href="#work">Work</a>
        <a href="#how">Process</a>
        <a href="#contact">Contact</a>
      </div>
      <a href="#contact" className="nav-cta">
        Start a project
        <span style={{fontSize:12}}>→</span>
      </a>
    </div>
  </nav>
);

// ─────────────────────────────────────────────────────────────
// MARQUEE — implied trust row
// ─────────────────────────────────────────────────────────────
const TrustMarquee = () => {
  const tags = [
    'Series B logistics platform',
    'Public e-comm brand · $400M GMV',
    'Cross-border treasury fintech',
    'Healthcare AI startup',
    'EU marketplace · 2M users',
    'Direct-to-consumer apparel',
    'Industrial IoT operator',
    'Series C SaaS unicorn',
  ];
  const items = [...tags, ...tags];
  return (
    <div style={{
      borderTop:'1px solid var(--border)',
      borderBottom:'1px solid var(--border)',
      padding:'20px 0',
      background:'var(--bg)',
    }}>
      <div className="container" style={{display:'flex',alignItems:'center',gap:32}}>
        <span style={{
          fontFamily:'Geist Mono,monospace',fontSize:11,
          letterSpacing:'.14em',textTransform:'uppercase',
          color:'var(--text-faint)',whiteSpace:'nowrap',
        }}>Trusted by operators at →</span>
        <div className="marquee" style={{flex:1}}>
          <div className="marquee-track">
            {items.map((t,i)=>(
              <span key={i} style={{
                fontSize:14,color:'var(--text-dim)',
                whiteSpace:'nowrap',display:'inline-flex',alignItems:'center',gap:12,
              }}>
                <span style={{width:6,height:6,background:'var(--text-faint)',borderRadius:1,opacity:.6}}></span>
                {t}
              </span>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};

// ─────────────────────────────────────────────────────────────
// FINAL CTA / Contact
// ─────────────────────────────────────────────────────────────
const FinalCTA = () => {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const submit = (e) => { e.preventDefault(); if(email) setSubmitted(true); };

  return (
    <section className="section-pad" id="contact" data-screen-label="07 Contact" style={{
      borderTop:'1px solid var(--border)',
      position:'relative',overflow:'hidden',
    }}>
      <div className="grid-bg" style={{maskImage:'radial-gradient(ellipse at 50% 50%, #000 30%, transparent 75%)'}}></div>
      <div className="container" style={{position:'relative',zIndex:2}}>
        <div className="eyebrow" style={{justifyContent:'center',display:'flex'}}>Let's talk</div>

        <h2 className="h-display" style={{
          textAlign:'center',marginTop:24,maxWidth:'18ch',marginLeft:'auto',marginRight:'auto',
          fontSize:'clamp(40px, 6.5vw, 92px)',
        }}>
          Tell us what's<br/>
          <span className="serif" style={{color:'var(--text-dim)'}}>actually&nbsp;breaking.</span>
        </h2>
        <p className="lede" style={{textAlign:'center',margin:'28px auto 0',maxWidth:'52ch'}}>
          We reply within one business day with a short response from a principal —
          not a sequence. If we're not the right fit, we'll say so.
        </p>

        <form onSubmit={submit} style={{
          margin:'48px auto 0',maxWidth:560,
          display:'flex',gap:8,padding:6,
          border:'1px solid var(--border-strong)',borderRadius:12,
          background:'var(--surface)',
        }}>
          <input
            type="email"
            value={email}
            placeholder="you@company.com"
            onChange={(e)=>setEmail(e.target.value)}
            style={{
              flex:1,background:'transparent',border:0,outline:0,
              color:'var(--text)',fontFamily:'inherit',fontSize:15,
              padding:'10px 14px',
            }}
          />
          <button type="submit" className="btn btn-primary" style={{borderRadius:8}}>
            {submitted ? '✓  We\'ll be in touch' : <>Request intro call <span className="btn-arrow">→</span></>}
          </button>
        </form>

        <div style={{
          display:'grid',gridTemplateColumns:'repeat(3, 1fr)',gap:1,
          marginTop:80,border:'1px solid var(--border)',borderRadius:12,
          overflow:'hidden',background:'var(--border)',
        }} className="contact-grid">
          {[
            { label:'Direct', val:'hello@stackverse.studio', sub:'For project inquiries' },
            { label:'On-call', val:'+1 (415) 555 · 0118', sub:'Existing partners only' },
            { label:'Offices', val:'NYC · Berlin · Singapore', sub:'GMT−5 / +1 / +8' },
          ].map((c,i)=>(
            <div key={i} style={{
              background:'var(--bg)',padding:28,
              display:'flex',flexDirection:'column',gap:6,
            }}>
              <span className="eyebrow">{c.label}</span>
              <span style={{fontSize:20,fontWeight:500,letterSpacing:'-0.015em',marginTop:6}}>{c.val}</span>
              <span style={{fontSize:13,color:'var(--text-dim)'}}>{c.sub}</span>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media(max-width:760px){
          .contact-grid{grid-template-columns:1fr !important;}
        }
      `}</style>
    </section>
  );
};

// ─────────────────────────────────────────────────────────────
// FOOTER
// ─────────────────────────────────────────────────────────────
const Footer = () => (
  <footer style={{
    borderTop:'1px solid var(--border)',
    padding:'56px 0 32px',
    background:'var(--bg)',
  }}>
    <div className="container">
      <div className="shimmer-line" style={{marginBottom:48,opacity:.4}}></div>
      <div style={{
        display:'grid',gridTemplateColumns:'2fr 1fr 1fr 1fr',gap:48,
      }} className="footer-grid">
        <div>
          <div style={{display:'flex',alignItems:'center',gap:10,fontWeight:600,fontSize:18,letterSpacing:'-0.02em'}}>
            <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
              <rect x="2" y="2" width="18" height="5" stroke="currentColor" strokeWidth="1.5"/>
              <rect x="2" y="9" width="18" height="5" stroke="currentColor" strokeWidth="1.5" fill="var(--accent)" fillOpacity=".25"/>
              <rect x="2" y="16" width="18" height="4" stroke="currentColor" strokeWidth="1.5"/>
            </svg>
            StackVerse
          </div>
          <p style={{
            marginTop:16,fontSize:14,color:'var(--text-dim)',lineHeight:1.55,
            maxWidth:'36ch',
          }}>
            A custom software studio for operationally complex businesses.
            We build the systems off-the-shelf can't.
          </p>
        </div>
        {[
          { h:'Practice', links:['Commerce','Internal platforms','Workflow automation','AI tools','Dashboards','Integrations','Fintech'] },
          { h:'Work', links:['Case studies','Industries','Process','Open positions'] },
          { h:'Company', links:['About','Writing','Security','Contact'] },
        ].map(col=>(
          <div key={col.h}>
            <span style={{
              fontFamily:'Geist Mono,monospace',fontSize:11,
              letterSpacing:'.12em',textTransform:'uppercase',
              color:'var(--text-faint)',
            }}>{col.h}</span>
            <ul style={{margin:'16px 0 0',padding:0,listStyle:'none',display:'flex',flexDirection:'column',gap:10}}>
              {col.links.map(l=>(
                <li key={l}><a href="#" style={{fontSize:14,color:'var(--text-dim)',transition:'color .15s'}}
                  onMouseEnter={e=>e.currentTarget.style.color='var(--text)'}
                  onMouseLeave={e=>e.currentTarget.style.color='var(--text-dim)'}
                >{l}</a></li>
              ))}
            </ul>
          </div>
        ))}
      </div>

      <div style={{
        display:'flex',justifyContent:'space-between',alignItems:'center',
        marginTop:64,paddingTop:24,borderTop:'1px solid var(--border)',
        flexWrap:'wrap',gap:16,
      }}>
        <span style={{
          fontFamily:'Geist Mono,monospace',fontSize:11,
          color:'var(--text-faint)',letterSpacing:'.04em',
        }}>© 2026 StackVerse Studio Ltd · Build {String(0xC0FFEE).slice(0,6).toUpperCase()}</span>
        <div style={{display:'flex',gap:24}}>
          {['Privacy','Terms','SOC 2 · Type II','Status'].map(x=>(
            <a key={x} href="#" style={{
              fontFamily:'Geist Mono,monospace',fontSize:11,
              color:'var(--text-faint)',letterSpacing:'.04em',
            }}>{x}</a>
          ))}
        </div>
      </div>
    </div>
    <style>{`
      @media(max-width:760px){
        .footer-grid{grid-template-columns:1fr 1fr !important; gap:32px !important;}
      }
    `}</style>
  </footer>
);

// ─────────────────────────────────────────────────────────────
// APP
// ─────────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "dark",
  "accent": "#7CFC9E",
  "showTrust": true
}/*EDITMODE-END*/;

const ACCENTS = {
  "#7CFC9E": "#06210F",     // phosphor green
  "#5B8DEF": "#0A1635",     // electric blue
  "#FF7A45": "#2B1208",     // ember
  "#E4E4E4": "#0A0A0B",     // mono (pure)
  "#C4F542": "#1A2305",     // lime
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => {
    document.documentElement.setAttribute('data-theme', t.theme);
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.style.setProperty('--accent-ink', ACCENTS[t.accent] || '#000');
  }, [t.theme, t.accent]);

  return (
    <div id="top">
      <Nav theme={t.theme} />
      <Hero/>
      {t.showTrust && <TrustMarquee/>}
      <Problem/>
      <Services/>
      <CaseStudies/>
      <HowWeWork/>
      <Industries/>
      <FinalCTA/>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakRadio
          label="Mode"
          value={t.theme}
          options={['dark','light']}
          onChange={(v) => setTweak('theme', v)}
        />
        <TweakColor
          label="Accent"
          value={t.accent}
          options={Object.keys(ACCENTS)}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSection label="Sections" />
        <TweakToggle
          label="Trusted-by marquee"
          value={t.showTrust}
          onChange={(v) => setTweak('showTrust', v)}
        />
      </TweaksPanel>
    </div>
  );
}

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