// Noctavia subpages content + components
const { useState: useStateN, useEffect: useEffectN } = React;

// Reusable detail layout
function DetailHero({ eyebrow, h1, h2, lead, mockSrc, ctaAppId = 'com.kolabs.noctavia', extraCta }) {
  const t = useT();
  return (
    <div className="detail-hero">
      <div>
        <div className="detail-eyebrow">
          <span className="pill">{eyebrow}</span>
          <span>{t.noctavia.brand}</span>
        </div>
        <h1 className="detail-h1">{h1}</h1>
        <p className="detail-h2">{h2}</p>
        <p className="detail-lead">{lead}</p>
        <div className="detail-cta">
          <PlayButton appId={ctaAppId} variant="accent">{t.common.download}</PlayButton>
          {extraCta}
        </div>
      </div>
      {mockSrc && (
        <div className="detail-mock">
          <img src={mockSrc} alt="Noctavia screenshot" />
        </div>
      )}
    </div>
  );
}

// Steps
function Steps({ items }) {
  const t = useT();
  return (
    <section className="steps">
      <div className="section-head">
        <div className="section-num">{t.noctavia.sectionStepsNum}</div>
        <h2 className="section-title-h">{t.noctavia.sectionStepsTitle}</h2>
        <div className="section-desc">{t.noctavia.sectionStepsDesc}</div>
      </div>
      <div className="steps-grid">
        {items.map((s, i) => (
          <div className="step" key={i}>
            <div className="step-num">{String(i + 1).padStart(2, '0')} / {String(items.length).padStart(2, '0')}</div>
            <h3 className="step-title">{s.title}</h3>
            <p className="step-desc">{s.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// FAQ
function FAQ({ items }) {
  const t = useT();
  return (
    <section className="faq">
      <div className="section-head">
        <div className="section-num">{t.noctavia.sectionFaqNum}</div>
        <h2 className="section-title-h">{t.noctavia.sectionFaqTitle}</h2>
        <div className="section-desc">{t.noctavia.sectionFaqDesc}</div>
      </div>
      <div>
        {items.map((f, i) => (
          <div className="faq-item" key={i}>
            <h3 className="faq-q">{f.q}</h3>
            <p className="faq-a">{f.a}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// CTA strip
function CtaStrip({ title, sub, appId = 'com.kolabs.noctavia' }) {
  const t = useT();
  return (
    <section className="cta-strip">
      <h3>{title}</h3>
      <p>{sub}</p>
      <div className="row-flex" style={{justifyContent: 'center'}}>
        <PlayButton appId={appId} variant="accent">{t.common.download}</PlayButton>
        <Link to="/noctavia" className="btn btn-ghost">{t.common.allFeatures}</Link>
      </div>
    </section>
  );
}

// ─── Noctavia Home ───────────────────────────────────────────────
function NoctaviaHome() {
  const t = useT();
  const { lang } = useLang();
  const n = t.noctavia.home;
  return (
    <main>
      <div className="detail-wrap">
        <Crumbs items={[{label:'kolabs', to:'/'},{label:t.noctavia.crumb}]} />
        <VideoHero
          youtubeId="gqFKvhNwTvY"
          fallbackSlug="noctavia"
          eyebrow={n.eyebrow}
          eyebrowExtra={t.noctavia.brand}
          logo="assets/noctavia-logo.png"
          h1={n.h1}
          h2={n.h2}
          lead={n.lead}
          appId="com.kolabs.noctavia"
          ctaLabel={t.common.download}
          ctaVariant="accent"
        />

        <section className="steps" style={{borderBottom:0}}>
          <div className="section-head">
            <div className="section-num">{n.featuresNum}</div>
            <h2 className="section-title-h">{n.featuresQ}</h2>
            <div className="section-desc">{n.featuresDesc}</div>
          </div>
          <div className="apps-grid" style={{gridTemplateColumns:'repeat(3, 1fr)'}}>
            {n.features.map((f, i) => (
              <div key={i} className="app-card" onClick={()=>navigate(applyLang(f.to, lang))} role="button" tabIndex="0">
                <div className="app-card-head">
                  <div style={{width:48, height:48, borderRadius:12, background:'color-mix(in oklab, var(--noctavia) 25%, var(--bg-2))', display:'grid', placeItems:'center', fontFamily:'var(--mono)', color:'var(--noctavia)', fontWeight:600, fontSize:14, border:'1px solid var(--line-2)'}}>
                    {String(i+1).padStart(2,'0')}
                  </div>
                  <span className="app-tag" style={{color:'var(--noctavia)', borderColor:'color-mix(in oklab, var(--noctavia) 40%, transparent)'}}>{f.tag}</span>
                </div>
                <h3 className="app-name" style={{fontSize:24}}>{f.title}</h3>
                <p className="app-desc">{f.desc}</p>
                <div className="app-card-foot">
                  <span>{t.common.detail}</span>
                  <span className="arrow">→</span>
                </div>
              </div>
            ))}
          </div>
        </section>

        <div className="mock-row">
          {[1,2,3,4,5,6].map(i => (
            <img key={i} src={`assets/noctavia-${i}.png`} alt={`Noctavia screenshot ${i}`} />
          ))}
        </div>

        <CtaStrip title={n.ctaTitle} sub={n.ctaSub} />
      </div>
    </main>
  );
}

// ─── Sesli Yorum ────────────────────────────────────────────────
function SesliYorum() {
  const t = useT();
  const n = t.noctavia.sesliYorum;
  return (
    <main>
      <div className="detail-wrap">
        <Crumbs items={[{label:'kolabs',to:'/'},{label:t.noctavia.crumb,to:'/noctavia'},{label:n.crumb}]} />
        <DetailHero
          eyebrow={n.eyebrow}
          h1={n.h1}
          h2={n.h2}
          lead={n.lead}
          mockSrc="assets/noctavia-2.png"
        />

        <div className="chart-card" style={{margin:'48px 0'}}>
          <div className="chart-head">
            <h4>{n.recordHead}</h4>
            <span className="meta">{n.recordMeta}</span>
          </div>
          <div className="waveform">
            {Array.from({length: 60}).map((_, i) => (
              <div key={i} className="wbar" style={{
                height: `${20 + Math.abs(Math.sin(i*0.4)) * 60}%`,
                animationDelay: `${i * 0.04}s`
              }} />
            ))}
          </div>
          <div className="row-flex" style={{justifyContent:'center', fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-dim)', textTransform:'uppercase', letterSpacing:'0.12em'}}>
            <span style={{color:'var(--noctavia)'}}>{n.recordRec}</span>
            <span>{n.recordTime}</span>
            <span>{n.recordLatency}</span>
          </div>
        </div>

        <Steps items={n.steps} />
        <FAQ items={n.faq} />
        <CtaStrip title={n.ctaTitle} sub={n.ctaSub} />
      </div>
    </main>
  );
}

// ─── Rüya Sözlüğü ───────────────────────────────────────────────
function RuyaSozlugu() {
  const t = useT();
  const n = t.noctavia.ruyaSozlugu;
  const [q, setQ] = useStateN('');
  const [active, setActive] = useStateN('ALL');
  const filtered = n.symbols.filter(s =>
    (active === 'ALL' || s.l === active) &&
    (q === '' || s.name.toLowerCase().includes(q.toLowerCase()) || s.mean.toLowerCase().includes(q.toLowerCase()))
  );

  return (
    <main>
      <div className="detail-wrap">
        <Crumbs items={[{label:'kolabs',to:'/'},{label:t.noctavia.crumb,to:'/noctavia'},{label:n.crumb}]} />
        <DetailHero
          eyebrow={n.eyebrow}
          h1={n.h1}
          h2={n.h2}
          lead={n.lead}
          mockSrc="assets/noctavia-3.png"
        />

        <div className="dict-search">
          <input value={q} onChange={e=>setQ(e.target.value)} placeholder={n.searchPlaceholder} />
          <span className="dict-search-icon">{n.searchHint}</span>
        </div>
        <div className="alphabet">
          {n.letters.map(l => (
            <button key={l} onClick={()=>setActive(l)} className={active===l?'active':''}>{l}</button>
          ))}
        </div>
        <div className="symbols-grid">
          {filtered.length === 0 ? (
            <div className="symbol" style={{gridColumn:'1/-1', textAlign:'center', color:'var(--ink-muted)'}}>
              {n.noResults}
            </div>
          ) : filtered.map((s, i) => (
            <div key={i} className="symbol">
              <h4 className="symbol-name">{s.name} <span style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-muted)', marginLeft:8}}>{s.l}</span></h4>
              <p className="symbol-meaning">{s.mean}</p>
            </div>
          ))}
        </div>

        <FAQ items={n.faq} />
        <CtaStrip title={n.ctaTitle} sub={n.ctaSub} />
      </div>
    </main>
  );
}

// ─── Tema Analizi ───────────────────────────────────────────────
function TemaAnalizi() {
  const t = useT();
  const n = t.noctavia.temaAnalizi;
  return (
    <main>
      <div className="detail-wrap">
        <Crumbs items={[{label:'kolabs',to:'/'},{label:t.noctavia.crumb,to:'/noctavia'},{label:n.crumb}]} />
        <DetailHero
          eyebrow={n.eyebrow}
          h1={n.h1}
          h2={n.h2}
          lead={n.lead}
          mockSrc="assets/noctavia-4.png"
        />

        <div className="chart-card">
          <div className="chart-head">
            <h4>{n.themesHead}</h4>
            <span className="meta">{n.themesMeta}</span>
          </div>
          {n.themes.map((th, i) => (
            <div key={i} className="bar-row">
              <span className="label">{th.name}</span>
              <div className="bar"><div className="bar-fill" style={{width: th.pct + '%'}}></div></div>
              <span className="pct">{th.pct}% · {th.count}</span>
            </div>
          ))}
        </div>

        <div className="chart-card">
          <div className="chart-head">
            <h4>{n.heatmapHead}</h4>
            <span className="meta">{n.heatmapMeta}</span>
          </div>
          <div className="cal-grid" style={{gridTemplateColumns:'repeat(7, 1fr)'}}>
            {Array.from({length:42}).map((_, i) => {
              const v = Math.floor((Math.sin(i*0.7)*0.5+0.5) * 4);
              const cls = v >= 3 ? 'has-entry' : v === 2 ? 'dim-2' : v === 1 ? 'dim-1' : '';
              return <div key={i} className={'cal-cell '+cls}>{v > 0 ? v : ''}</div>;
            })}
          </div>
          <div className="row-flex" style={{justifyContent:'space-between', fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-muted)', textTransform:'uppercase', letterSpacing:'0.1em', marginTop:16}}>
            <span>{n.heatmapLow}</span>
            <span>{n.heatmapHigh}</span>
          </div>
        </div>

        <FAQ items={n.faq} />
        <CtaStrip title={n.ctaTitle} sub={n.ctaSub} />
      </div>
    </main>
  );
}

// ─── Premium ────────────────────────────────────────────────────
function Premium() {
  const t = useT();
  const n = t.noctavia.premium;
  const [period, setPeriod] = useStateN('monthly');
  const prices = {
    free: { monthly: '0', yearly: '0' },
    standard: { monthly: '3.99', yearly: '32.99' },
    premium: { monthly: '9.99', yearly: '79.99' },
  };
  const periodUnit = period === 'monthly' ? n.perMonth : n.perYear;
  return (
    <main>
      <div className="detail-wrap">
        <Crumbs items={[{label:'kolabs',to:'/'},{label:t.noctavia.crumb,to:'/noctavia'},{label:n.crumb}]} />
        <DetailHero
          eyebrow={n.eyebrow}
          h1={n.h1}
          h2={n.h2}
          lead={n.lead}
        />

        <div className="row-flex" style={{justifyContent:'center', margin:'40px 0 0'}}>
          <div style={{display:'inline-flex', border:'1px solid var(--line-2)', borderRadius:999, padding:4}}>
            {[['monthly', n.periodMonthly], ['yearly', n.periodYearly]].map(([p, label]) => (
              <button key={p} onClick={()=>setPeriod(p)}
                className={period===p?'btn btn-primary':'btn btn-ghost'}
                style={{padding:'8px 18px', border:0, borderRadius:999, background: period===p?'var(--ink)':'transparent', color: period===p?'var(--bg)':'var(--ink-dim)'}}>
                {label}
              </button>
            ))}
          </div>
        </div>

        <div className="pricing-grid">
          <div className="price-card">
            <div className="price-name">{n.tierFree}</div>
            <div className="price-amount"><span className="num">{prices.free[period]}</span><span className="unit">$ / {periodUnit}</span></div>
            <p className="price-sub">{n.freeSub}</p>
            <ul className="price-list">
              {n.freeFeatures.map((f, i) => (
                <li key={i} className={f.no ? 'no' : ''}>{f.text}</li>
              ))}
            </ul>
            <PlayButton appId="com.kolabs.noctavia" variant="ghost">{n.freeCta}</PlayButton>
          </div>

          <div className="price-card">
            <div className="price-name">{n.tierStandard}</div>
            <div className="price-amount"><span className="num">{prices.standard[period]}</span><span className="unit">$ / {periodUnit}</span></div>
            <p className="price-sub">{n.standardSub}</p>
            <ul className="price-list">
              {n.standardFeatures.map((f, i) => (
                <li key={i} className={f.no ? 'no' : ''}>{f.text}</li>
              ))}
            </ul>
            <PlayButton appId="com.kolabs.noctavia">{n.standardCta}</PlayButton>
          </div>

          <div className="price-card featured-tier">
            <span className="price-tag">{n.recommended}</span>
            <div className="price-name">{n.tierPremium}</div>
            <div className="price-amount"><span className="num">{prices.premium[period]}</span><span className="unit">$ / {periodUnit}</span></div>
            <p className="price-sub">{n.premiumSub}</p>
            <ul className="price-list">
              {n.premiumFeatures.map((f, i) => (
                <li key={i} className={f.no ? 'no' : ''}>{f.text}</li>
              ))}
            </ul>
            <PlayButton appId="com.kolabs.noctavia" variant="accent">{n.premiumCta}</PlayButton>
          </div>
        </div>

        <div className="compare-table">
          <div className="compare-row head">
            <span>{n.compareFeature}</span>
            <span className="col">{n.tierFree}</span>
            <span className="col">{n.tierStandard}</span>
            <span className="col featured-col">{n.tierPremium}</span>
          </div>
          {n.compareRows.map((r, i) => (
            <div className="compare-row" key={i}>
              <span className="feat">{r[0]}</span>
              <span className="col">{r[1]==='✓'?<span className="check">✓</span>:r[1]==='—'?<span className="cross">—</span>:r[1]}</span>
              <span className="col">{r[2]==='✓'?<span className="check">✓</span>:r[2]==='—'?<span className="cross">—</span>:r[2]}</span>
              <span className="col">{r[3]==='✓'?<span className="check">✓</span>:r[3]==='—'?<span className="cross">—</span>:r[3]}</span>
            </div>
          ))}
        </div>

        <FAQ items={n.faq} />
        <CtaStrip title={n.ctaTitle} sub={n.ctaSub} />
      </div>
    </main>
  );
}

// ─── Rüya Günlüğü ───────────────────────────────────────────────
function RuyaGunlugu() {
  const t = useT();
  const n = t.noctavia.ruyaGunlugu;
  return (
    <main>
      <div className="detail-wrap">
        <Crumbs items={[{label:'kolabs',to:'/'},{label:t.noctavia.crumb,to:'/noctavia'},{label:n.crumb}]} />
        <DetailHero
          eyebrow={n.eyebrow}
          h1={n.h1}
          h2={n.h2}
          lead={n.lead}
          mockSrc="assets/noctavia-5.png"
        />

        <div className="chart-card">
          <div className="chart-head">
            <h4>{n.monthHead}</h4>
            <span className="meta">{n.monthMeta}</span>
          </div>
          <div className="cal-grid">
            {n.weekDays.map((d, i) => (
              <div key={i} style={{textAlign:'center', fontFamily:'var(--mono)', fontSize:10, color:'var(--ink-muted)', textTransform:'uppercase', letterSpacing:'0.12em', padding:'8px 0'}}>{d}</div>
            ))}
            {Array.from({length:30}).map((_, i) => {
              const day = i + 1;
              const has = [3,5,8,12,14,18,20,22,25,27].includes(day);
              const dim = [6,9,15,21,28].includes(day);
              return (
                <div key={i} className={'cal-cell '+(has?'has-entry':dim?'dim-1':'')}>
                  {day}
                </div>
              );
            })}
          </div>
        </div>

        <div className="dict-search">
          <input placeholder={n.searchPlaceholder} />
          <span className="dict-search-icon">{n.searchHint}</span>
        </div>

        <div className="diary-list">
          {n.entries.map((e, i) => (
            <div key={i} className="diary-entry">
              <div className="diary-meta">
                <span>{e.date}</span>
                <span className="tag">{e.tag}</span>
                <span style={{color:'var(--noctavia)'}}>{n.favoriteLabel}</span>
              </div>
              <h4 className="diary-title">{e.title}</h4>
              <p className="diary-excerpt">{e.excerpt}</p>
            </div>
          ))}
        </div>

        <FAQ items={n.faq} />

        <CtaStrip title={n.ctaTitle} sub={n.ctaSub} />
      </div>
    </main>
  );
}

Object.assign(window, { NoctaviaHome, SesliYorum, RuyaSozlugu, TemaAnalizi, Premium, RuyaGunlugu });