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

function ServicesPage({ setRoute }) {
  const { lang } = React.useContext(LangCtx);
  const S = window.GAUNG_CONTENT.services;
  const tiers = window.GAUNG_TIERS;
  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(S.h, lang).split(',')[0]},<br/>
            <span className="serif">{(t(S.h, lang).split(',')[1] || '').trim()}</span>
          </h1>
          <p className="lead mt-6">{t(S.lead, lang)}</p>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          <div className="grid grid-3">
            {tiers.map((tier, i) => (
              <div key={i} className={tier.popular ? 'card-dark' : 'card'} style={{display:'flex',flexDirection:'column',gap:18,position:'relative',padding: tier.popular ? 36 : 32}}>
                {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(window.GAUNG_CONTENT.pricing.mostPopular, lang)}
                  </span>
                )}
                <div>
                  <div style={{fontSize:12,color: tier.popular ? 'oklch(70% 0.008 70)' : 'var(--muted)',marginBottom:4}}>{t(tier.tag, lang)}</div>
                  <h3 style={{fontSize:24,fontWeight:500,letterSpacing:'-0.02em'}}>{t(tier.name, lang)}</h3>
                </div>
                <p style={{fontSize:14,color: tier.popular ? 'oklch(75% 0.008 70)' : 'var(--ink-2)',lineHeight:1.5,minHeight: 60}}>{t(tier.desc, lang)}</p>
                <div style={{display:'flex',alignItems:'baseline',gap:6,paddingTop:6}}>
                  <div className="stat-n" style={{fontSize:28, letterSpacing:'-0.02em'}}>{lang === 'en' ? tier.priceEn : tier.price}</div>
                  <div style={{fontSize:13,color: tier.popular ? 'oklch(70% 0.008 70)' : 'var(--muted)'}}>{t(window.GAUNG_CONTENT.pricing.perMonth, lang)}</div>
                </div>
                <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:10,flex:1,paddingTop:18,borderTop: tier.popular ? '1px solid var(--dark-line)' : '1px solid var(--line)'}}>
                  {tier.items.map((it, j) => (
                    <li key={j} style={{fontSize:14,display:'flex',gap:10,color: tier.popular ? 'oklch(85% 0.008 70)' : 'var(--ink-2)'}}>
                      <span style={{width:4,height:4,borderRadius:99,background:'var(--gm)',marginTop:9,flexShrink:0}}/>
                      {t(it, lang)}
                    </li>
                  ))}
                </ul>
                <a href="#contact" onClick={(e)=>{e.preventDefault();setRoute('pricing')}} className={tier.popular ? 'btn btn-grad' : 'btn btn-ghost'} style={{width:'100%'}}>
                  {t(window.GAUNG_CONTENT.pricing.cta, lang)} →
                </a>
              </div>
            ))}
          </div>
        </div>
      </section>

      <NumbersSection/>
      <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">
            {tiers.map((tier, i) => (
              <div key={i} className={tier.popular ? 'card-dark' : 'card'} style={{display:'flex',flexDirection:'column',gap:16,position:'relative',padding: 32}}>
                {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>
                )}
                <div>
                  <div style={{fontSize:12,color: tier.popular ? 'oklch(70% 0.008 70)' : 'var(--muted)',marginBottom:4}}>{t(tier.tag, lang)}</div>
                  <h3 style={{fontSize:20,fontWeight:500,letterSpacing:'-0.01em'}}>{t(tier.name, lang)}</h3>
                </div>
                <div style={{display:'flex',alignItems:'baseline',gap:6,padding:'8px 0 14px',borderBottom: tier.popular ? '1px solid var(--dark-line)' : '1px solid var(--line)'}}>
                  <div className="stat-n" style={{fontSize: 34, letterSpacing:'-0.03em'}}>{lang === 'en' ? tier.priceEn : tier.price}</div>
                  <div style={{fontSize:13,color: tier.popular ? 'oklch(70% 0.008 70)' : 'var(--muted)'}}>{t(P.perMonth, lang)}</div>
                </div>
                <div style={{fontSize:11,textTransform:'uppercase',letterSpacing:'.1em',color: tier.popular ? 'oklch(65% 0.008 70)' : 'var(--muted)',fontWeight:600,marginTop:4}}>{t(P.includes, lang)}</div>
                <ul style={{listStyle:'none',display:'flex',flexDirection:'column',gap:10,flex:1}}>
                  {tier.items.map((it, j) => (
                    <li key={j} style={{fontSize:13.5,display:'flex',gap:10,color: tier.popular ? 'oklch(85% 0.008 70)' : 'var(--ink-2)'}}>
                      <svg width="14" height="14" viewBox="0 0 14 14" style={{flexShrink:0,marginTop:3}}>
                        <path d="M3 7l2.5 2.5L11 4" stroke={tier.popular ? '#fff' : 'var(--gm)'} strokeWidth="1.6" fill="none"/>
                      </svg>
                      {t(it, lang)}
                    </li>
                  ))}
                </ul>
                <a href="#contact" onClick={(e)=>{e.preventDefault();setRoute('contact')}} className={tier.popular ? 'btn btn-grad' : 'btn btn-ghost'} style={{width:'100%'}}>
                  {t(P.cta, lang)} →
                </a>
              </div>
            ))}
          </div>

          {/* Orchestration Support add-ons */}
          <div style={{marginTop:64,paddingTop:48,borderTop:'1px solid var(--line)'}}>
            <div className="split-1-2" style={{alignItems:'start',marginBottom:32}}>
              <div>
                <div className="eyebrow mb-4">{t(window.GAUNG_CONTENT.services.orch, lang)}</div>
                <h2 style={{fontSize:'clamp(26px, 2.6vw, 34px)',fontWeight:500,letterSpacing:'-0.02em',lineHeight:1.15}}>
                  {t({id:'Add-on opsional', en:'Optional add-ons'}, lang)}<br/>
                  <span className="serif">{t({id:'di atas paket utama.', en:'on top of the core plan.'}, lang)}</span>
                </h2>
              </div>
              <p className="lead" style={{marginTop:0}}>{t(window.GAUNG_CONTENT.services.orchLead, lang)}</p>
            </div>
            <div className="split-2" style={{gap:16}}>
              {window.GAUNG_ADDONS.map((a, i) => (
                <div key={i} className="card" style={{padding:'28px 32px',display:'flex',flexDirection:'column',gap:14}}>
                  <h3 style={{fontSize:20,fontWeight:500,letterSpacing:'-0.01em'}}>{t(a.name, lang)}</h3>
                  <div style={{display:'flex',alignItems:'baseline',gap:8}}>
                    <span style={{fontSize:11,color:'var(--muted)',textTransform:'uppercase',letterSpacing:'.08em',fontWeight:600}}>{t(a.priceSub, lang)}</span>
                  </div>
                  <div className="stat-n" style={{fontSize:28, marginTop:-4}}>{a.price}</div>
                  <p style={{fontSize:14,color:'var(--ink-2)',lineHeight:1.55,marginTop:4}}>{t(a.desc, lang)}</p>
                </div>
              ))}
            </div>
            <div style={{marginTop:16,fontSize:12,color:'var(--muted)',textAlign:'center'}}>
              {t({id:'Kontrak minimum 3 bulan · Hemat 20% dengan berlangganan tahunan', en:'3-month minimum contract · Save 20% with annual billing'}, lang)}
            </div>
          </div>

          {/* Comparison note */}
          <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:'Termasuk di semua paket',en:'Across all plans'}, lang)}</div>
              <p className="body-s" style={{color:'var(--ink-2)',fontSize:14}}>{t({id:'Semua paket termasuk akses dashboard realtime, Business DNA Workshop, implementasi 14 hari, dan dukungan dalam Bahasa + Inggris.', en:'Every plan includes realtime dashboard access, Business DNA Workshop, 14-day rollout, and support in Bahasa + English.'}, lang)}</p>
            </div>
            <div>
              <div className="eyebrow mb-4">{t({id:'Tidak Anda bayar',en:'What you don’t pay for'}, lang)}</div>
              <p className="body-s" style={{color:'var(--ink-2)',fontSize:14}}>{t({id:'Lisensi SaaS (Apollo, HubSpot, Lemlist). Jam kerja SDR. Setup fee. Biaya per-seat. Biaya per-email.', en:'SaaS licenses (Apollo, HubSpot, Lemlist). SDR hours. Setup fees. Per-seat fees. Per-email fees.'}, lang)}</p>
            </div>
            <div>
              <div className="eyebrow mb-4">{t({id:'Kontrak',en:'Contract'}, lang)}</div>
              <p className="body-s" style={{color:'var(--ink-2)',fontSize:14}}>{t({id:'Komitmen 2 bulan awal untuk setup + go-live. Setelahnya bulanan, batal kapan saja dengan notice 30 hari.', en:'2-month initial commitment for setup + go-live. Monthly thereafter, cancel anytime with 30-day 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>
                  <a href="#" className="btn-link" style={{alignSelf:'flex-start'}}>{t(C.read, lang)} →</a>
                </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)'}}>{cs['stat'+j]}</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}/>
    </>
  );
}

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

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.company) return;
    setSubmitted(true);
  };

  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).split(' — ')[0]} <br/>
              <span className="serif">{t(C.h, lang).split(' — ')[1] || ''}</span>
            </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:gaungelevasidigital@gmail.com" style={{fontSize:16,fontWeight:500,borderBottom:'1px solid var(--line-2)'}}>gaungelevasidigital@gmail.com</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="#" style={{fontSize:16,fontWeight:500,borderBottom:'1px solid var(--line-2)'}}>+62 812 0000 0000</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>
            {submitted ? (
              <div className="card-grad" style={{padding:48,borderRadius:14}}>
                <div style={{fontSize:32,fontFamily:'var(--serif)',fontStyle:'italic',marginBottom:8}}>
                  {t({id:'Terima kasih, '+form.name.split(' ')[0]+'.', en:'Thanks, '+form.name.split(' ')[0]+'.'}, lang)}
                </div>
                <p style={{fontSize:16,opacity:.9}}>{t({id:'Tim kami akan membalas dalam 1 hari kerja dengan 3 slot demo yang tersedia.', en:'Our team will reply within 1 business day with 3 available demo slots.'}, lang)}</p>
              </div>
            ) : (
            <form onSubmit={submit} className="card" style={{padding:40,display:'flex',flexDirection:'column',gap:18}}>
              <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')} required/>
              <div className="split-2" style={{gap:18}}>
                <FormField label={t(C.company, lang)} value={form.company} onChange={update('company')} required/>
                <FormField label={t(C.role, lang)} value={form.role} onChange={update('role')}/>
              </div>
              <FormSelect label={t(C.size, lang)} value={form.size} onChange={update('size')} options={[
                {v:'', l:'—'},
                {v:'1-5', l:'1–5'},
                {v:'6-20', l:'6–20'},
                {v:'21-50', l:'21–50'},
                {v:'50+', l:'50+'},
              ]}/>
              <FormField label={t(C.msg, lang)} value={form.msg} onChange={update('msg')} textarea/>
              <button type="submit" className="btn btn-grad" style={{alignSelf:'flex-start',marginTop:8}}>{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>
  );
}

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