/* Gaung AI — Remaining pages: Services, Cases, Pricing, Blog, Contact */

function ServicesPage({ setRoute }) {
  const { lang } = React.useContext(LangCtx);
  const S = window.GAUNG_CONTENT.services;
  const H = window.GAUNG_CONTENT.home;
  const engines = [
    { n:'01', t:H.e1t, d:H.e1d, role:{id:'Stage 1 — Strategy', en:'Stage 1 — Strategy'} },
    { n:'02', t:H.e2t, d:H.e2d, role:{id:'Stage 2 — Sourcing', en:'Stage 2 — Sourcing'} },
    { n:'03', t:H.e3t, d:H.e3d, role:{id:'Stage 3 — Outreach', en:'Stage 3 — Outreach'} },
    { n:'04', t:H.e4t, d:H.e4d, role:{id:'Stage 3 — Conversation', en:'Stage 3 — Conversation'} },
    { n:'05', t:H.e5t, d:H.e5d, role:{id:'Stage 3 — Nurture', en:'Stage 3 — Nurture'} },
    { n:'06', t:H.e6t, d:H.e6d, role:{id:'Stage 4 — Optimization', en:'Stage 4 — Optimization'} },
  ];
  return (
    <>
      <section className="section-tight">
        <div className="wrap">
          <div className="eyebrow mb-4">{t(S.eyebrow, lang)}</div>
          <h1 className="h-section" style={{maxWidth:900}}>
            {t({id:'Enam agent yang menjalankan', en:'Six agents that run'}, lang)},<br/>
            <span className="serif">{t({id:'sales pipeline Anda otomatis.', en:'your sales pipeline on autopilot.'}, lang)}</span>
          </h1>
          <p className="lead mt-6" style={{maxWidth:680}}>{t({id:'Setiap agent fokus satu pekerjaan. Bersama, mereka mengganti tim sales 5–10 orang — dengan output lebih konsisten, biaya lebih rendah, dan visibility lebih tinggi.', en:'Each agent does one job. Together they replace a 5–10 person sales team — with more consistent output, lower cost, and higher visibility.'}, lang)}</p>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          <div style={{display:'grid',gap:48}}>
            {engines.map((e, i) => (
              <div key={i} style={{display:'grid',gridTemplateColumns:'120px 1fr',gap:32,paddingBottom:48,borderBottom: i < engines.length - 1 ? '1px solid var(--line)' : 'none'}}>
                <div>
                  <div className="stat-n" style={{fontSize:48,color:'var(--muted)',letterSpacing:'-0.04em'}}>{e.n}</div>
                  <div className="eyebrow" style={{marginTop:8,fontSize:10}}>{t(e.role, lang)}</div>
                </div>
                <div>
                  <h3 style={{fontSize:28,fontWeight:500,letterSpacing:'-0.02em',marginBottom:12}}>{t(e.t, lang)}</h3>
                  <p style={{fontSize:16,lineHeight:1.6,color:'var(--ink-2)',maxWidth:640}}>{t(e.d, lang)}</p>
                </div>
              </div>
            ))}
          </div>
          <div style={{marginTop:64,padding:'32px 40px',background:'var(--bg-2)',border:'1px solid var(--line)',borderRadius:14,textAlign:'center'}}>
            <p style={{fontSize:15,color:'var(--ink-2)',marginBottom:16}}>{t({id:'Mau lihat harga dan apa yang masuk di tiap paket?', en:'Want to see pricing and what each plan includes?'}, lang)}</p>
            <a href="#pricing" className="btn btn-grad" onClick={(e)=>{e.preventDefault();setRoute('pricing');}}>
              {t({id:'Lihat paket', en:'See pricing'}, lang)} →
            </a>
          </div>
        </div>
      </section>

      <FinalCTA setRoute={setRoute}/>
    </>
  );
}

function PricingPage({ setRoute }) {
  const { lang } = React.useContext(LangCtx);
  const P = window.GAUNG_CONTENT.pricing;
  const tiers = window.GAUNG_TIERS;
  return (
    <>
      <section className="section-tight">
        <div className="wrap">
          <div className="eyebrow mb-4">{t(P.eyebrow, lang)}</div>
          <h1 className="h-section" style={{maxWidth:900}}>
            {t(P.h, lang).split('.')[0]}.<br/>
            <span style={{color:'var(--muted)'}}>{t(P.h, lang).split('.')[1]}.</span><br/>
            <span className="serif">{t(P.h, lang).split('.')[2]}.</span>
          </h1>
          <p className="lead mt-6">{t(P.lead, lang)}</p>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          <div className="grid grid-3" style={{alignItems:'stretch'}}>
            {tiers.map((tier, i) => {
              const tierName = t(tier.name, lang);

              // Card style variants
              let cardStyle = {
                display:'flex', flexDirection:'column', gap:16,
                position:'relative', padding:32, borderRadius:16,
                border:'1px solid var(--line)',
                background:'var(--bg)',
              };
              let tagColor = 'var(--muted)';
              let textColor = 'var(--ink-2)';
              let checkColor = 'var(--gm)';
              let borderColor = '1px solid var(--line)';
              let priceColor = 'var(--ink)';
              let btnClass = 'btn btn-ghost';

              if (tier.popular) {
                cardStyle = { ...cardStyle, background:'var(--dark)', border:'none', boxShadow:'0 20px 60px rgba(0,0,0,0.18)' };
                tagColor = 'oklch(70% 0.008 70)';
                textColor = 'oklch(78% 0.008 70)';
                checkColor = '#fff';
                borderColor = '1px solid var(--dark-line)';
                priceColor = '#fff';
                btnClass = 'btn btn-grad';
              }

              if (tier.featured) {
                cardStyle = {
                  ...cardStyle,
                  background:'var(--bg)',
                  border:'2px solid transparent',
                  backgroundClip:'padding-box',
                  boxShadow:'0 0 0 2px #ea008c44, 0 12px 40px rgba(234,0,140,0.12)',
                };
                btnClass = 'btn btn-grad';
              }

              return (
                <div key={i} style={cardStyle}>
                  {/* Badges */}
                  {tier.popular && (
                    <span style={{position:'absolute',top:-10,left:24,background:'var(--grad)',color:'#fff',padding:'4px 12px',borderRadius:99,fontSize:10.5,fontWeight:600,letterSpacing:'.08em',textTransform:'uppercase'}}>
                      {t(P.mostPopular, lang)}
                    </span>
                  )}
                  {tier.featured && (
                    <span style={{position:'absolute',top:-10,left:24,background:'var(--bg)',border:'1.5px solid #ea008c',color:'var(--gm)',padding:'4px 12px',borderRadius:99,fontSize:10.5,fontWeight:600,letterSpacing:'.08em',textTransform:'uppercase'}}>
                      {t({id:'Untuk skala besar',en:'Best for scale'}, lang)}
                    </span>
                  )}

                  {/* Header */}
                  <div>
                    <div style={{fontSize:11,color:tagColor,marginBottom:6,textTransform:'uppercase',letterSpacing:'.08em',fontWeight:600}}>{t(tier.tag, lang)}</div>
                    <h3 style={{fontSize:22,fontWeight:700,letterSpacing:'-0.02em',color:priceColor}}>{tierName}</h3>
                  </div>

                  {/* Price */}
                  <div style={{display:'flex',alignItems:'baseline',gap:6,padding:'10px 0 16px',borderBottom:borderColor}}>
                    <div style={{fontSize:36,fontWeight:700,letterSpacing:'-0.03em',color:priceColor}}>{lang === 'en' ? tier.priceEn : tier.price}</div>
                    <div style={{fontSize:13,color:tagColor}}>{t(P.perMonth, lang)}</div>
                  </div>

                  {/* Description */}
                  <p style={{fontSize:13.5,color:textColor,lineHeight:1.6,margin:0}}>{t(tier.desc, lang)}</p>

                  {/* Features */}
                  <div style={{fontSize:10,textTransform:'uppercase',letterSpacing:'.1em',color:tagColor,fontWeight:700,marginTop:4}}>{t(P.includes, lang)}</div>
                  <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:10,flex:1,margin:0,padding:0}}>
                    {tier.items.map((it, j) => (
                      <li key={j} style={{fontSize:13.5,display:'flex',gap:10,alignItems:'flex-start',color:textColor}}>
                        <svg width="16" height="16" viewBox="0 0 16 16" style={{flexShrink:0,marginTop:2}}>
                          <circle cx="8" cy="8" r="7" fill={checkColor === '#fff' ? 'rgba(255,255,255,0.15)' : tier.featured ? '#ea008c18' : 'var(--bg-2)'} stroke={checkColor === '#fff' ? 'none' : checkColor} strokeWidth="1"/>
                          <path d="M5 8l2 2 4-4" stroke={checkColor} strokeWidth="1.6" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                        </svg>
                        {t(it, lang)}
                      </li>
                    ))}
                  </ul>

                  {/* CTA — all tiers go to signup with plan param so billing dashboard pre-selects */}
                  <a
                    href={`https://dashboard.gaung.app/signup?plan=${t(tier.name, 'en').toLowerCase()}`}
                    className={btnClass}
                    style={{width:'100%',marginTop:8,textAlign:'center'}}
                  >
                    {t({id:'Mulai sekarang →',en:'Get started →'}, lang)}
                  </a>
                </div>
              );
            })}
          </div>

          {/* Comparison notes */}
          <div className="case-stats-3" style={{marginTop:48,padding:'32px 40px',background:'var(--bg-2)',border:'1px solid var(--line)',borderRadius:14,gap:32}}>
            <div>
              <div className="eyebrow mb-4">{t({id:'Semua paket sudah termasuk',en:'Included in every plan'}, lang)}</div>
              <p className="body-s" style={{color:'var(--ink-2)',fontSize:14}}>{t({id:'Go-live dalam 3 hari. Dashboard pipeline real-time. AI yang langsung bekerja begitu setup selesai. Tidak ada biaya setup.', en:'Go-live in 3 days. Realtime pipeline dashboard. AI that works the moment setup is done. No setup fee.'}, lang)}</p>
            </div>
            <div>
              <div className="eyebrow mb-4">{t({id:'Tidak perlu bayar extra',en:'No hidden costs'}, lang)}</div>
              <p className="body-s" style={{color:'var(--ink-2)',fontSize:14}}>{t({id:'Tidak ada biaya lisensi tools pihak ketiga, biaya per-seat, biaya per-email, atau biaya SDR. Satu harga flat, semua sudah di dalamnya.', en:'No third-party tool licenses, per-seat fees, per-email fees, or SDR costs. One flat price, everything included.'}, lang)}</p>
            </div>
            <div>
              <div className="eyebrow mb-4">{t({id:'Kontrak & pembayaran',en:'Contract & billing'}, lang)}</div>
              <p className="body-s" style={{color:'var(--ink-2)',fontSize:14}}>{t({id:'Tidak ada kontrak minimum. Bayar bulanan, batalkan kapan saja dengan notice 30 hari.', en:'No minimum contract. Monthly billing, cancel anytime with 30 days notice.'}, lang)}</p>
            </div>
          </div>
        </div>
      </section>

      <FinalCTA setRoute={setRoute}/>
    </>
  );
}

function CasesPage({ setRoute }) {
  const { lang } = React.useContext(LangCtx);
  const C = window.GAUNG_CONTENT.cases;
  const cases = window.GAUNG_CASES;
  return (
    <>
      <section className="section-tight">
        <div className="wrap">
          <div className="eyebrow mb-4">{t(C.eyebrow, lang)}</div>
          <h1 className="h-section" style={{maxWidth:1000}}>
            {t(C.h, lang).split(',')[0]},<br/>
            <span className="serif">{(t(C.h, lang).split(',')[1] || '').trim()}</span>
          </h1>
          <p className="lead mt-6">{t(C.lead, lang)}</p>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap" style={{display:'flex',flexDirection:'column',gap:24}}>
          {cases.map((cs, i) => (
            <article key={i} className="card" style={{padding:0,overflow:'hidden'}}>
              <div className="split-1-1-3">
                <div className="case-body" style={{padding:'40px 40px',display:'flex',flexDirection:'column',justifyContent:'space-between',gap:32}}>
                  <div>
                    <div style={{display:'flex',gap:8,marginBottom:16}}>
                      <span className="chip">{t(cs.industry, lang)}</span>
                      <span className="chip">{t(cs.size, lang)}</span>
                    </div>
                    <h2 style={{fontSize:28,fontWeight:500,letterSpacing:'-0.02em',lineHeight:1.15}}>{t(cs.title, lang)}</h2>
                  </div>
                </div>
                <div className="case-stats-3" style={{padding:'40px 40px',background:'var(--bg-2)',alignItems:'center'}}>
                  {[1,2,3].map(j => (
                    <div key={j}>
                      <div className="stat-n" style={{fontSize:'clamp(28px, 3vw, 40px)',color:'var(--gm)'}}>{t(cs['stat'+j], lang)}</div>
                      <div style={{fontSize:12,color:'var(--muted)',marginTop:8,lineHeight:1.4}}>{t(cs['stat'+j+'l'], lang)}</div>
                    </div>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>

      <FinalCTA setRoute={setRoute}/>
    </>
  );
}

function BlogPage({ setRoute }) {
  const { lang } = React.useContext(LangCtx);
  const B = window.GAUNG_CONTENT.blog;
  const posts = window.GAUNG_POSTS;
  const [featured, ...rest] = posts;
  const fmt = (d) => new Date(d).toLocaleDateString(lang === 'id' ? 'id-ID' : 'en-US', { month:'short', day:'numeric', year:'numeric' });

  return (
    <>
      <section className="section-tight">
        <div className="wrap">
          <div className="eyebrow mb-4">{t(B.eyebrow, lang)}</div>
          <h1 className="h-section" style={{maxWidth:1000}}>
            {t(B.h, lang).split(' dari')[0]}
            {t(B.h, lang).includes(' dari') && <span className="serif"> dari{t(B.h, lang).split(' dari')[1]}</span>}
            {t(B.h, lang).includes(' from') && <span className="serif"> from{t(B.h, lang).split(' from')[1]}</span>}
          </h1>
          <p className="lead mt-6">{t(B.lead, lang)}</p>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          {/* Featured */}
          <a href="#" className="card split-2" style={{padding:40,marginBottom:48,alignItems:'center'}}>
            <div>
              <div style={{display:'flex',gap:10,marginBottom:16,fontSize:12,color:'var(--muted)'}}>
                <span className="tag">{t(B.featured, lang)}</span>
                <span>{t(featured.tag, lang)}</span>
                <span>·</span>
                <span>{fmt(featured.date)}</span>
                <span>·</span>
                <span>{featured.min} {t(B.minRead, lang)}</span>
              </div>
              <h2 style={{fontSize:32,fontWeight:500,letterSpacing:'-0.022em',lineHeight:1.15,marginBottom:16}}>{t(featured.title, lang)}</h2>
              <p style={{fontSize:16,color:'var(--ink-2)',lineHeight:1.55}}>{t(featured.excerpt, lang)}</p>
              <div className="btn-link mt-8" style={{display:'inline-block'}}>{t(B.readMore, lang)}</div>
            </div>
            <Placeholder label="hero illustration" ratio="4 / 3"/>
          </a>

          {/* Grid */}
          <div className="grid grid-3">
            {rest.map((p, i) => (
              <a key={i} href="#" className="card" style={{padding:0,display:'flex',flexDirection:'column',overflow:'hidden'}}>
                <Placeholder label={`${t(p.tag, lang).toLowerCase()} — post image`} ratio="16 / 10" style={{borderRadius:0,border:'none',borderBottom:'1px solid var(--line)'}}/>
                <div style={{padding:'24px 26px',display:'flex',flexDirection:'column',gap:12,flex:1}}>
                  <div style={{display:'flex',gap:10,fontSize:11.5,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.06em',fontWeight:600}}>
                    <span>{t(p.tag, lang)}</span>
                    <span>·</span>
                    <span>{p.min} {t(B.minRead, lang)}</span>
                  </div>
                  <h3 style={{fontSize:18,fontWeight:500,letterSpacing:'-0.012em',lineHeight:1.25}}>{t(p.title, lang)}</h3>
                  <p style={{fontSize:13.5,color:'var(--ink-2)',lineHeight:1.55,flex:1}}>{t(p.excerpt, lang)}</p>
                  <div style={{fontSize:12,color:'var(--muted)',marginTop:4}}>{fmt(p.date)}</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      <FinalCTA setRoute={setRoute}/>
    </>
  );
}

const WA_NUMBER = '6282177748668';
const WA_DISPLAY = '+62 821-7774-8668';
const CONTACT_EMAIL = 'gaungelevasidigital@gmail.com';

function ContactPage() {
  const { lang } = React.useContext(LangCtx);
  const C = window.GAUNG_CONTENT.contact;
  const [submitted, setSubmitted] = useState(false);
  const [form, setForm] = useState({ name:'', email:'', msg:'' });
  const update = (k) => (e) => setForm(f => ({...f, [k]: e.target.value}));

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.msg) return;
    const text = encodeURIComponent(`[Kritik & Saran]\nNama: ${form.name}\nEmail: ${form.email}\nPesan: ${form.msg}`);
    window.open(`https://wa.me/${WA_NUMBER}?text=${text}`, '_blank');
    setSubmitted(true);
    setForm({ name:'', email:'', msg:'' });
  };

  return (
    <section className="section-tight">
      <div className="wrap">
        <div className="split-2" style={{gap:'clamp(40px, 6vw, 80px)',alignItems:'start'}}>
          <div>
            <div className="eyebrow mb-4">{t(C.eyebrow, lang)}</div>
            <h1 className="h-section">
              {t(C.h, lang)}
            </h1>
            <p className="lead mt-6">{t(C.lead, lang)}</p>

            <div style={{marginTop:56,paddingTop:32,borderTop:'1px solid var(--line)'}}>
              <div className="eyebrow mb-6">{t(C.other, lang)}</div>
              <div style={{display:'flex',flexDirection:'column',gap:20}}>
                <div>
                  <div style={{fontSize:12,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.08em',fontWeight:600,marginBottom:4}}>{t(C.emailLbl, lang)}</div>
                  <a href={`mailto:${CONTACT_EMAIL}`} style={{fontSize:16,fontWeight:500,borderBottom:'1px solid var(--line-2)'}}>{CONTACT_EMAIL}</a>
                </div>
                <div>
                  <div style={{fontSize:12,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.08em',fontWeight:600,marginBottom:4}}>{t(C.waLbl, lang)}</div>
                  <a href={`https://wa.me/${WA_NUMBER}`} target="_blank" rel="noopener" style={{fontSize:16,fontWeight:500,borderBottom:'1px solid var(--line-2)'}}>{WA_DISPLAY}</a>
                </div>
                <div>
                  <div style={{fontSize:12,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.08em',fontWeight:600,marginBottom:4}}>{t(C.officeLbl, lang)}</div>
                  <div style={{fontSize:16,fontWeight:500}}>{t(C.officeCity, lang)}</div>
                </div>
              </div>
            </div>
          </div>

          <div>
            <div style={{marginBottom:8,fontSize:18,fontWeight:600,letterSpacing:'-0.01em'}}>{t(C.feedbackH, lang)}</div>
            <p style={{fontSize:14,color:'var(--muted)',marginBottom:24}}>{t(C.feedbackSub, lang)}</p>
            {submitted ? (
              <div className="card-grad" style={{padding:40,borderRadius:14}}>
                <div style={{fontSize:28,fontFamily:'var(--serif)',fontStyle:'italic',marginBottom:8}}>
                  {t({id:'Terima kasih!', en:'Thanks!'}, lang)}
                </div>
                <p style={{fontSize:15,opacity:.9}}>{t({id:'Pesan Anda sudah terkirim via WhatsApp.', en:'Your message was sent via WhatsApp.'}, lang)}</p>
              </div>
            ) : (
            <form onSubmit={submit} className="card" style={{padding:36,display:'flex',flexDirection:'column',gap:16}}>
              <FormField label={t(C.name, lang)} value={form.name} onChange={update('name')} required/>
              <FormField label={t(C.email, lang)} type="email" value={form.email} onChange={update('email')}/>
              <FormField label={t({id:'Pesan', en:'Message'}, lang)} value={form.msg} onChange={update('msg')} textarea required/>
              <button type="submit" className="btn btn-grad" style={{alignSelf:'flex-start',marginTop:4}}>{t(C.send, lang)} →</button>
            </form>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

function FormField({ label, value, onChange, type='text', textarea=false, required=false }) {
  return (
    <label style={{display:'flex',flexDirection:'column',gap:6}}>
      <span style={{fontSize:12,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.08em',fontWeight:600}}>
        {label}{required && <span style={{color:'var(--gm)'}}> *</span>}
      </span>
      {textarea ? (
        <textarea value={value} onChange={onChange} rows={4} style={{
          background:'var(--bg-2)',border:'1px solid var(--line)',borderRadius:8,padding:'12px 14px',
          font:'inherit',fontSize:14,color:'var(--ink)',outline:'none',resize:'vertical'
        }}/>
      ) : (
        <input type={type} value={value} onChange={onChange} required={required} style={{
          background:'var(--bg-2)',border:'1px solid var(--line)',borderRadius:8,padding:'12px 14px',
          font:'inherit',fontSize:14,color:'var(--ink)',outline:'none'
        }}/>
      )}
    </label>
  );
}

function FormSelect({ label, value, onChange, options }) {
  return (
    <label style={{display:'flex',flexDirection:'column',gap:6}}>
      <span style={{fontSize:12,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.08em',fontWeight:600}}>{label}</span>
      <select value={value} onChange={onChange} style={{
        background:'var(--bg-2)',border:'1px solid var(--line)',borderRadius:8,padding:'12px 14px',
        font:'inherit',fontSize:14,color:'var(--ink)',outline:'none'
      }}>
        {options.map(o => <option key={o.v} value={o.v}>{o.l}</option>)}
      </select>
    </label>
  );
}

function PrivacyPage() {
  const { lang } = React.useContext(LangCtx);
  const EFFECTIVE = lang === 'id' ? '1 Mei 2026' : '1 May 2026';
  return (
    <section className="section">
      <div className="wrap" style={{maxWidth:720}}>
        <div className="eyebrow mb-4">Legal</div>
        <h1 className="h-section">{lang === 'id' ? 'Kebijakan Privasi' : 'Privacy Policy'}</h1>
        <p style={{color:'var(--muted)',marginTop:8,marginBottom:40}}>{lang === 'id' ? 'Berlaku sejak:' : 'Effective:'} {EFFECTIVE}</p>
        <div style={{display:'flex',flexDirection:'column',gap:28,fontSize:15,lineHeight:1.7,color:'var(--ink-2)'}}>
          <div><h2 style={{fontSize:17,fontWeight:600,marginBottom:8}}>{lang==='id'?'1. Pengenalan':'1. Introduction'}</h2>
            <p>{lang==='id'?'PT Gaung Elevasi Digital ("Gaung") mengoperasikan platform gaung.app. Kebijakan ini menjelaskan bagaimana kami mengumpulkan, menggunakan, dan melindungi data pribadi Anda.':'PT Gaung Elevasi Digital ("Gaung") operates the gaung.app platform. This policy explains how we collect, use, and protect your personal data.'}</p></div>
          <div><h2 style={{fontSize:17,fontWeight:600,marginBottom:8}}>{lang==='id'?'2. Data yang Kami Kumpulkan':'2. Data We Collect'}</h2>
            <ul style={{paddingLeft:20,display:'flex',flexDirection:'column',gap:6}}><li>{lang==='id'?'Data akun: nama, email, nama perusahaan, nomor telepon':'Account data: name, email, company name, phone number'}</li><li>{lang==='id'?'Data penggunaan: log aktivitas, pesan AI, leads yang diproses':'Usage data: activity logs, AI messages, processed leads'}</li><li>{lang==='id'?'Data teknis: IP address, user agent, waktu akses':'Technical data: IP address, user agent, access timestamps'}</li></ul></div>
          <div><h2 style={{fontSize:17,fontWeight:600,marginBottom:8}}>{lang==='id'?'3. Cara Kami Menggunakan Data':'3. How We Use Data'}</h2>
            <p>{lang==='id'?'Untuk menyediakan layanan Gaung.ai, memproses leads atas instruksi klien, mengirim notifikasi operasional, dan mematuhi kewajiban hukum.':'To provide the Gaung.ai service, process leads on client instructions, send operational notifications, and comply with legal obligations.'}</p></div>
          <div><h2 style={{fontSize:17,fontWeight:600,marginBottom:8}}>{lang==='id'?'4. Keamanan':'4. Security'}</h2>
            <p>{lang==='id'?'Data dienkripsi saat transit (TLS 1.3) dan saat istirahat (AES-256). Akses dibatasi berdasarkan prinsip least-privilege.':'Data is encrypted in transit (TLS 1.3) and at rest (AES-256). Access is restricted on a least-privilege basis.'}</p></div>
          <div><h2 style={{fontSize:17,fontWeight:600,marginBottom:8}}>{lang==='id'?'5. Hak Anda':'5. Your Rights'}</h2>
            <p>{lang==='id'?'Akses, koreksi, penghapusan data, dan pembatasan pemrosesan. Kirim permintaan ke:':'Access, correction, erasure, and restriction of processing. Send requests to:'} <a href="mailto:gaungelevasidigital@gmail.com" style={{color:'var(--gm)'}}>gaungelevasidigital@gmail.com</a></p></div>
          <div><h2 style={{fontSize:17,fontWeight:600,marginBottom:8}}>{lang==='id'?'6. Kontak':'6. Contact'}</h2>
            <p><a href="mailto:gaungelevasidigital@gmail.com" style={{color:'var(--gm)'}}>gaungelevasidigital@gmail.com</a><br/>PT Gaung Elevasi Digital, BSD, Tangerang Selatan, Indonesia</p></div>
        </div>
      </div>
    </section>
  );
}

function TermsPage() {
  const { lang } = React.useContext(LangCtx);
  const EFFECTIVE = lang === 'id' ? '1 Mei 2026' : '1 May 2026';
  return (
    <section className="section">
      <div className="wrap" style={{maxWidth:720}}>
        <div className="eyebrow mb-4">Legal</div>
        <h1 className="h-section">{lang === 'id' ? 'Syarat Layanan' : 'Terms of Service'}</h1>
        <p style={{color:'var(--muted)',marginTop:8,marginBottom:40}}>{lang === 'id' ? 'Berlaku sejak:' : 'Effective:'} {EFFECTIVE}</p>
        <div style={{display:'flex',flexDirection:'column',gap:28,fontSize:15,lineHeight:1.7,color:'var(--ink-2)'}}>
          <div><h2 style={{fontSize:17,fontWeight:600,marginBottom:8}}>{lang==='id'?'1. Layanan':'1. Services'}</h2>
            <p>{lang==='id'?'Gaung menyediakan platform SaaS AI Sales & Growth termasuk lead generation, AI outreach via WhatsApp & email, Business DNA extraction, dan analytics dashboard.':'Gaung provides a SaaS AI Sales & Growth platform including lead generation, AI outreach via WhatsApp & email, Business DNA extraction, and analytics dashboard.'}</p></div>
          <div><h2 style={{fontSize:17,fontWeight:600,marginBottom:8}}>{lang==='id'?'2. Pembayaran':'2. Payments'}</h2>
            <ul style={{paddingLeft:20,display:'flex',flexDirection:'column',gap:6}}>
              <li>{lang==='id'?'Starter Rp 2.500.000 / Business Rp 8.000.000 / Enterprise Rp 15.000.000 per bulan':'Starter IDR 2,500,000 / Business IDR 8,000,000 / Enterprise IDR 15,000,000 per month'}</li>
              <li>{lang==='id'?'Annual: 1 bulan gratis (bayar 11, dapat 12)':'Annual: 1 month free (pay 11, get 12)'}</li>
              <li>{lang==='id'?'Tidak ada pengembalian dana untuk periode yang sudah berjalan':'No refunds for periods already commenced'}</li>
            </ul></div>
          <div><h2 style={{fontSize:17,fontWeight:600,marginBottom:8}}>{lang==='id'?'3. Kewajiban Klien':'3. Client Obligations'}</h2>
            <p>{lang==='id'?'Klien wajib mematuhi regulasi komunikasi yang berlaku dan tidak menggunakan platform untuk spam atau konten ilegal.':'Clients must comply with applicable communication regulations and not use the platform for spam or illegal content.'}</p></div>
          <div><h2 style={{fontSize:17,fontWeight:600,marginBottom:8}}>{lang==='id'?'4. Penghentian':'4. Termination'}</h2>
            <p>{lang==='id'?'Klien dapat membatalkan kapan saja. Data tersedia untuk diunduh selama 30 hari setelah penghentian.':'Clients may cancel at any time. Data is available for download for 30 days after termination.'}</p></div>
          <div><h2 style={{fontSize:17,fontWeight:600,marginBottom:8}}>{lang==='id'?'5. Kontak':'5. Contact'}</h2>
            <p><a href="mailto:gaungelevasidigital@gmail.com" style={{color:'var(--gm)'}}>gaungelevasidigital@gmail.com</a><br/>PT Gaung Elevasi Digital, BSD, Tangerang Selatan, Banten, Indonesia</p></div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesPage, PricingPage, CasesPage, BlogPage, ContactPage, PrivacyPage, TermsPage });