// Noctavia: uygulama sayfasının içindeki bölümler.
// Eski alt sayfa adresleri (/noctavia/sesli-yorum …) hâlâ çalışıyor; AppPage
// o adreste açılınca ilgili bölüme kaydırıyor. Bölüm id'leri = TR slug'ları.
const { useState: useStateN } = React;

function Chapter({ id, num, title, lead, children, img }) {
  return (
    <section id={id} className="ch wrap">
      <div className="ch-head">
        <SectionLabel num={num}>{title}</SectionLabel>
        <div className="ch-grid">
          <h2 className="h-xl">{title}</h2>
          <p className="ch-lead">{lead}</p>
        </div>
      </div>
      <div className={img ? 'ch-body ch-body-img' : 'ch-body'}>
        <div className="ch-main">{children}</div>
        {img && <Reveal className="ch-img"><Phone><img src={img} alt="" /></Phone></Reveal>}
      </div>
    </section>
  );
}

function Voice({ n }) {
  return (
    <>
      <div className="card">
        <div className="card-head"><span>{n.recordHead}</span><span>{n.recordMeta}</span></div>
        <div className="wave">{Array.from({ length: 48 }).map((_, i) => <i key={i} style={{ height: `${20 + Math.abs(Math.sin(i * 0.45)) * 75}%`, animationDelay: `${i * 0.045}s` }}></i>)}</div>
        <div className="card-foot"><span className="c">{n.recordRec}</span><span>{n.recordTime}</span><span>{n.recordLatency}</span></div>
      </div>
      <div className="steps">
        {n.steps.map((s, i) => (
          <div key={i} className="step"><span>{String(i + 1).padStart(2, '0')}</span><b>{s.title}</b><p>{s.desc}</p></div>
        ))}
      </div>
    </>
  );
}

function Dictionary({ n }) {
  const t = useT();
  const ALL = n.letters[0];
  const [q, setQ] = useStateN('');
  const [active, setActive] = useStateN(ALL);
  const { lang: loc } = useLang();
  // Sadece sembolü olan harfleri göster; 29 harflik tam alfabe bu örnekte boş düğmeler bırakıyordu.
  const letters = [ALL, ...n.letters.filter(l => l !== ALL && n.symbols.some(s => s.l === l))];
  const list = n.symbols.filter(s =>
    (active === ALL || s.l === active) &&
    (!q || (s.name + ' ' + s.mean).toLocaleLowerCase(loc).includes(q.toLocaleLowerCase(loc))));
  return (
    <>
      <div className="search"><input value={q} onChange={e => setQ(e.target.value)} placeholder={n.searchPlaceholder} /><span>{t.ui.results(list.length)}</span></div>
      <div className="letters">{letters.map(l => <button key={l} className={active === l ? 'on' : ''} onClick={() => setActive(l)}>{l === ALL ? t.ui.all : l}</button>)}</div>
      <div className="sym">
        {list.length ? list.map((s, i) => <div key={i} className="sym-i"><b>{s.name}</b><p>{s.mean}</p></div>) : <div className="sym-i sym-empty">{n.noResults}</div>}
      </div>
    </>
  );
}

function Themes({ n }) {
  return (
    <div className="card">
      <div className="card-head"><span>{n.themesHead}</span><span>{n.themesMeta}</span></div>
      {n.themes.map((th, i) => (
        <div key={i} className="bar"><span>{th.name}</span><div className="bar-t"><Reveal className="bar-f" style={{ '--w': th.pct + '%' }}></Reveal></div><span>{th.pct}%</span></div>
      ))}
    </div>
  );
}

function Journal({ n }) {
  const t = useT();
  const has = [3, 5, 8, 12, 14, 18, 20, 22, 25, 27];
  return (
    <>
      <div className="card">
        <div className="card-head"><span>{n.monthHead}</span><span>{n.monthMeta}</span></div>
        <div className="cal">{Array.from({ length: 30 }).map((_, i) => <i key={i} className={has.includes(i + 1) ? 'on' : ''}>{i + 1}</i>)}</div>
      </div>
      <div className="jr">{n.entries.map((e, i) => <div key={i} className="jr-i"><span>{e.date}</span><span className="chip">{e.tag}</span><b>{e.title}</b></div>)}</div>
    </>
  );
}

function Pricing({ n, app }) {
  const [period, setPeriod] = useStateN('monthly');
  const pr = { free: '0', standard: { monthly: '3.99', yearly: '32.99' }, premium: { monthly: '9.99', yearly: '79.99' } };
  const unit = '/ ' + (period === 'monthly' ? n.perMonth : n.perYear);
  const tiers = [
    { n: n.tierFree, p: pr.free, s: n.freeSub, f: n.freeFeatures, v: 'line', l: n.freeCta },
    { n: n.tierStandard, p: pr.standard[period], s: n.standardSub, f: n.standardFeatures, v: 'solid', l: n.standardCta },
    { n: n.tierPremium, p: pr.premium[period], s: n.premiumSub, f: n.premiumFeatures, v: 'c', l: n.premiumCta, hot: true },
  ];
  return (
    <>
      <div className="toggle">{[['monthly', n.periodMonthly], ['yearly', n.periodYearly]].map(([k, l]) => <button key={k} className={period === k ? 'on' : ''} onClick={() => setPeriod(k)}>{l}</button>)}</div>
      <div className="tiers">
        {tiers.map((tr, i) => (
          <div key={i} className={'tier ' + (tr.hot ? 'hot' : '')}>
            <div className="tier-top"><span>{tr.n}</span>{tr.hot && <span className="chip chip-c">{n.recommended}</span>}</div>
            <div className="tier-p">${tr.p}<small>{unit}</small></div>
            <p className="tier-s">{tr.s}</p>
            <ul>{tr.f.map((f, k) => <li key={k} className={f.no ? 'no' : ''}>{f.text}</li>)}</ul>
            <PlayButton appId={app.play} variant={tr.v}>{tr.l}</PlayButton>
          </div>
        ))}
      </div>
      <div className="cmp">
        <div className="cmp-r cmp-h"><span>{n.compareFeature}</span><span>{n.tierFree}</span><span>{n.tierStandard}</span><span className="c">{n.tierPremium}</span></div>
        {n.compareRows.map((r, i) => <div key={i} className="cmp-r">{r.map((c, k) => <span key={k} className={c === '✓' ? 'c' : c === '—' ? 'mute' : ''}>{c}</span>)}</div>)}
      </div>
    </>
  );
}

function NoctaviaChapters({ app }) {
  const t = useT();
  const N = t.noctavia;
  return (
    <>
      <Chapter id="sesli-yorum" num="02" title={N.sesliYorum.crumb} img="assets/noctavia-2.png" lead={N.sesliYorum.lead}><Voice n={N.sesliYorum} /></Chapter>
      <Chapter id="ruya-sozlugu" num="03" title={N.ruyaSozlugu.crumb} lead={N.ruyaSozlugu.lead}><Dictionary n={N.ruyaSozlugu} /></Chapter>
      <Chapter id="tema-analizi" num="04" title={N.temaAnalizi.crumb} img="assets/noctavia-4.png" lead={N.temaAnalizi.lead}><Themes n={N.temaAnalizi} /></Chapter>
      <Chapter id="ruya-gunlugu" num="05" title={N.ruyaGunlugu.crumb} img="assets/noctavia-5.png" lead={N.ruyaGunlugu.lead}><Journal n={N.ruyaGunlugu} /></Chapter>
      <Chapter id="premium" num="06" title={N.premium.crumb} lead={N.premium.lead}><Pricing n={N.premium} app={app} /></Chapter>
    </>
  );
}

Object.assign(window, { NoctaviaChapters });