function Demo() {
  const [sent, setSent] = React.useState(false);
  const [kvkk, setKvkk] = React.useState(false);
  return (
    <section className="section container" id="demo">
      <div className="demo-wrap">
        <div className="demo-grid">
          <div className="demo-left">
            <span className="kicker">demo talep et</span>
            <h2 style={{marginTop:16,marginBottom:20,fontSize:36}}>Bize bir saat verin, büronuzu tanıyalım</h2>
            <p style={{fontSize:15,marginBottom:8}}>Form gönderin, ekibimiz 24 saat içinde dönsün; canlı demoda dosya yönetiminden otomatik imzaya kadar her modülü birlikte gezelim.</p>
            <ul className="demo-list">
              <li>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                Kendi dava örneğinizle canlı Karar Arama
              </li>
              <li>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                UYAP ve e-imza agent'ın ofisinizde kurulum planı
              </li>
              <li>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                Büronuza özel deneme planı
              </li>
            </ul>
            <div style={{marginTop:36,paddingTop:24,borderTop:'1px solid var(--line)',display:'flex',flexDirection:'column',gap:6,fontSize:13.5,color:'var(--ink-mute)'}}>
              <div style={{fontFamily:'var(--font-mono)',fontSize:11,letterSpacing:'0.06em',textTransform:'uppercase',color:'var(--ink-dim)',marginBottom:6}}>Doğrudan iletişim</div>
              <div><strong style={{color:'var(--ink)'}}>Telefon</strong> · 0543 909 90 80</div>
              <div><strong style={{color:'var(--ink)'}}>E-posta</strong> · info@amayazilim.com</div>
              <div><strong style={{color:'var(--ink)'}}>Adres</strong> · DAP Vadisi İ Ofis, Kat 1 No: 28, Merkez Mh. Kağıthane / İstanbul</div>
            </div>
          </div>

          <div className="demo-right">
            {sent ? (
              <div style={{display:'flex',flexDirection:'column',alignItems:'flex-start',gap:16,paddingTop:40}}>
                <div style={{width:48,height:48,borderRadius:12,background:'var(--accent-dim)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--accent)'}}>
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none"><path d="M20 6L9 17l-5-5" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </div>
                <h3 style={{fontSize:26,fontFamily:'var(--font-display)',fontWeight:500,letterSpacing:'-0.02em'}}>Talebiniz bize ulaştı.</h3>
                <p style={{fontSize:15}}>24 saat içinde ekibimizden biri sizinle iletişime geçecek. Aciliyet varsa 0543 909 90 80 numarasını doğrudan arayabilirsiniz.</p>
                <button className="btn btn-ghost" onClick={()=>setSent(false)}>Başka bir form gönder</button>
              </div>
            ) : (
              <form style={{display:'flex',flexDirection:'column',gap:16}} action="https://formsubmit.co/info@amayazilim.com" method="POST" onSubmit={()=>setSent(true)}>
                <input type="hidden" name="_subject" value="Titan Hukuk — Demo talebi"/>
                <input type="hidden" name="_captcha" value="false"/>
                <input type="hidden" name="_template" value="table"/>
                <div className="field-row">
                  <div className="field">
                    <label className="field-label">Ad Soyad</label>
                    <input name="ad_soyad" className="field-input" placeholder="Av. Deniz Yıldız" required/>
                  </div>
                  <div className="field">
                    <label className="field-label">Büro / Şirket</label>
                    <input name="buro" className="field-input" placeholder="Yıldız Hukuk Bürosu" required/>
                  </div>
                </div>
                <div className="field-row">
                  <div className="field">
                    <label className="field-label">E-posta</label>
                    <input name="email" type="email" className="field-input" placeholder="deniz@yildizhukuk.av.tr" required/>
                  </div>
                  <div className="field">
                    <label className="field-label">Telefon</label>
                    <input name="telefon" className="field-input" placeholder="0532 ..."/>
                  </div>
                </div>
                <div className="field">
                  <label className="field-label">Büro büyüklüğü</label>
                  <select name="buro_boyutu" className="field-select">
                    <option>Bireysel avukat</option>
                    <option>2-10 kişilik küçük büro</option>
                    <option>10-30 kişilik orta büro</option>
                    <option>30+ kişilik büyük büro</option>
                    <option>Şirket hukuk departmanı</option>
                  </select>
                </div>
                <div className="field">
                  <label className="field-label">İhtiyaçlar (opsiyonel)</label>
                  <textarea name="ihtiyaclar" className="field-textarea" placeholder="Hangi modülleri öncelikli olarak değerlendiriyorsunuz?"/>
                </div>
                <button className="btn btn-primary" type="submit" disabled={!kvkk} style={{justifyContent:'center',marginTop:8,opacity:kvkk?1:0.5,cursor:kvkk?'pointer':'not-allowed'}}>
                  Demo talebimi gönder
                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 5l7 7-7 7" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
                </button>
                <label className="kvkk-check">
                  <input type="checkbox" checked={kvkk} onChange={e=>setKvkk(e.target.checked)} required/>
                  <span>Kişisel verilerimin <a href="legal/kvkk.html" target="_blank" rel="noopener">KVKK Aydınlatma Metni</a> kapsamında işlenmesini kabul ediyorum.</span>
                </label>
                <div style={{fontFamily:'var(--font-mono)',fontSize:10.5,color:'var(--ink-dim)',letterSpacing:'0.04em'}}>Verileriniz KVKK kapsamında işlenir. Üçüncü taraflarla paylaşılmaz.</div>
              </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}
window.Demo = Demo;