// Detail pages for non-Noctavia apps
const { useState: useStateP } = React;

// Reusable simple detail hero (no italic, single sans-serif)
function AppHero({ logo, eyebrow, h1, h2, lead, mockSrc, appId, accent = '#b9ff3a' }) {
  return (
    <div className="detail-hero" style={{'--page-accent': accent}}>
      <div>
        <div className="detail-eyebrow">
          <span className="pill">{eyebrow}</span>
        </div>
        <div style={{display:'flex', alignItems:'center', gap:16, marginBottom:24}}>
          <img src={logo} alt="" style={{width:64, height:64, borderRadius:16, border:'1px solid var(--line-2)'}} />
        </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={appId} />
        </div>
      </div>
      {mockSrc && (
        <div className="detail-mock">
          <img src={mockSrc} alt="screenshot" />
        </div>
      )}
    </div>
  );
}

function AppFeatures({ items, num = '01' }) {
  const t = useT();
  return (
    <section className="steps" style={{borderBottom:'1px solid var(--line)'}}>
      <div className="section-head">
        <div className="section-num">[ {num} ] {t.common.features}</div>
        <h2 className="section-title-h">{t.common.featuresQ}</h2>
        <div className="section-desc">{t.common.featuresDesc}</div>
      </div>
      <div className="steps-grid">
        {items.map((f, i) => (
          <div className="step" key={i}>
            <div className="step-num">{String(i+1).padStart(2,'0')}</div>
            <h3 className="step-title">{f.title}</h3>
            <p className="step-desc">{f.desc}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function AppFAQ({ items }) {
  const t = useT();
  return (
    <section className="faq">
      <div className="section-head">
        <div className="section-num">[ 02 ] {t.common.faq}</div>
        <h2 className="section-title-h">{t.common.faq}</h2>
        <div className="section-desc">{t.common.faqDesc}</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>
  );
}

function AppMockRow({ slug, count = 3 }) {
  return (
    <div className="mock-row">
      {Array.from({length: count}).map((_, i) => (
        <img key={i} src={`assets/${slug}-${i+1}.png`} alt={`${slug} screenshot ${i+1}`} />
      ))}
    </div>
  );
}

// Cinematic video hero (shared across detail pages)
function VideoHero({ youtubeId, fallbackSlug, eyebrow, eyebrowExtra, logo, h1, h2, lead, appId, ctaLabel, ctaVariant }) {
  const t = useT();
  if (ctaLabel === undefined) ctaLabel = t.common.download;
  const fallbackStyle = fallbackSlug ? {
    backgroundImage: `url('assets/${fallbackSlug}-1.png'), url('assets/${fallbackSlug}-2.png')`,
  } : undefined;
  return (
    <div className="video-hero">
      <div className="video-hero-bg">
        <div className="video-hero-fallback" style={fallbackStyle}></div>
        <iframe
          src={`https://www.youtube.com/embed/${youtubeId}?autoplay=1&mute=1&loop=1&playlist=${youtubeId}&controls=0&showinfo=0&modestbranding=1&rel=0&playsinline=1&iv_load_policy=3&disablekb=1&fs=0&enablejsapi=1&origin=${encodeURIComponent(window.location.origin)}`}
          title="background video"
          frameBorder="0"
          allow="autoplay; encrypted-media"
          allowFullScreen
        ></iframe>
      </div>
      <div className="video-hero-overlay"></div>
      <div className="video-hero-content">
        <div className="detail-eyebrow">
          <span className="pill">{eyebrow}</span>
          {eyebrowExtra && <span>{eyebrowExtra}</span>}
        </div>
        {logo && (
          <div style={{display:'flex', alignItems:'center', gap:16, marginBottom:24}}>
            <img src={logo} alt="" style={{width:64, height:64, borderRadius:16, border:'1px solid var(--line-2)'}} />
          </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={appId} variant={ctaVariant}>{ctaLabel}</PlayButton>
        </div>
      </div>
    </div>
  );
}

// ─── Zikirmatik ──────────────────────────────────────────────────
function Zikirmatik() {
  const t = useT();
  const a = t.apps.zikirmatik;
  return (
    <main>
      <div className="detail-wrap">
        <Crumbs items={[{label:'kolabs',to:'/'},{label:a.crumb}]} />
        <VideoHero
          youtubeId="tkZ7tQ_YLM0"
          fallbackSlug="zikirmatik"
          eyebrow={a.eyebrow}
          logo="assets/zikirmatik-logo.png"
          h1={a.h1}
          h2={a.h2}
          lead={a.lead}
          appId="com.kolabs.zikirmatik"
        />
        <AppFeatures items={a.features} />
        <AppMockRow slug="zikirmatik" />
        <AppFAQ items={a.faq} />
        <CtaStrip title={a.ctaTitle} sub={a.ctaSub} appId="com.kolabs.zikirmatik" />
      </div>
    </main>
  );
}

// ─── Ramazan İmsakiyesi ──────────────────────────────────────────
function RamazanImsakiyesi() {
  const t = useT();
  const a = t.apps.ramazan;
  return (
    <main>
      <div className="detail-wrap">
        <Crumbs items={[{label:'kolabs',to:'/'},{label:a.crumb}]} />
        <VideoHero
          youtubeId="q_ctbszurLQ"
          fallbackSlug="ramazan"
          eyebrow={a.eyebrow}
          logo="assets/ramazan-logo.jpg"
          h1={a.h1}
          h2={a.h2}
          lead={a.lead}
          appId="com.kolabs.imsakiye"
        />
        <AppFeatures items={a.features} />
        <AppMockRow slug="ramazan" />
        <AppFAQ items={a.faq} />
        <CtaStrip title={a.ctaTitle} sub={a.ctaSub} appId="com.kolabs.imsakiye" />
      </div>
    </main>
  );
}

// ─── Kelime Bul ──────────────────────────────────────────────────
function KelimeBul() {
  const t = useT();
  const a = t.apps.kelimebul;
  return (
    <main>
      <div className="detail-wrap">
        <Crumbs items={[{label:'kolabs',to:'/'},{label:a.crumb}]} />
        <VideoHero
          youtubeId="maW_PTYIIEg"
          fallbackSlug="kelimebul"
          eyebrow={a.eyebrow}
          logo="assets/kelimebul-logo.jpg"
          h1={a.h1}
          h2={a.h2}
          lead={a.lead}
          appId="com.kolabs.kelimebul"
        />
        <AppFeatures items={a.features} />
        <AppMockRow slug="kelimebul" />
        <AppFAQ items={a.faq} />
        <CtaStrip title={a.ctaTitle} sub={a.ctaSub} appId="com.kolabs.kelimebul" />
      </div>
    </main>
  );
}

// ─── Hesap Vakti ─────────────────────────────────────────────────
function HesapVakti() {
  const t = useT();
  const a = t.apps.hesapvakti;
  return (
    <main>
      <div className="detail-wrap">
        <Crumbs items={[{label:'kolabs',to:'/'},{label:a.crumb}]} />
        <VideoHero
          youtubeId="C04hQT9sNX0"
          fallbackSlug="hesapvakti"
          eyebrow={a.eyebrow}
          logo="assets/hesapvakti-logo.png"
          h1={a.h1}
          h2={a.h2}
          lead={a.lead}
          appId="com.kolabs.hesapvakti"
        />
        <AppFeatures items={a.features} />
        <AppMockRow slug="hesapvakti" />
        <AppFAQ items={a.faq} />
        <CtaStrip title={a.ctaTitle} sub={a.ctaSub} appId="com.kolabs.hesapvakti" />
      </div>
    </main>
  );
}

// ─── Tasarrufçu (yakında) ────────────────────────────────────────
function Tasarrufcu() {
  const t = useT();
  const a = t.apps.tasarrufcu;
  const [email, setEmail] = useStateP('');
  const [sent, setSent] = useStateP(false);
  return (
    <main>
      <div className="detail-wrap">
        <Crumbs items={[{label:'kolabs',to:'/'},{label:a.crumb}]} />
        <div className="detail-hero">
          <div>
            <div className="detail-eyebrow">
              <span className="pill" style={{color:'var(--warn)', borderColor:'color-mix(in oklab, var(--warn) 40%, transparent)'}}>{a.eyebrow}</span>
            </div>
            <div style={{display:'flex', alignItems:'center', gap:16, marginBottom:24}}>
              <img src="assets/tasarrufcu-logo.png" alt="" style={{width:64, height:64, borderRadius:16, border:'1px solid var(--line-2)'}} />
            </div>
            <h1 className="detail-h1">{a.h1}</h1>
            <p className="detail-h2">{a.h2}</p>
            <p className="detail-lead">{a.lead}</p>
            {!sent ? (
              <form onSubmit={(e)=>{e.preventDefault(); setSent(true);}} style={{display:'flex', gap:8, maxWidth:420, marginTop:8}}>
                <input
                  type="email" required value={email} onChange={(e)=>setEmail(e.target.value)}
                  placeholder={a.emailPlaceholder}
                  style={{flex:1, background:'var(--bg-2)', border:'1px solid var(--line-2)', borderRadius:999, padding:'12px 18px', color:'var(--ink)', fontFamily:'var(--sans)', fontSize:14, outline:'none'}}
                />
                <button type="submit" className="btn btn-primary" style={{border:0}}>{a.emailButton}</button>
              </form>
            ) : (
              <div style={{padding:'14px 18px', border:'1px solid var(--line-2)', borderRadius:999, display:'inline-block', fontFamily:'var(--mono)', fontSize:12, textTransform:'uppercase', letterSpacing:'0.1em', color:'var(--accent)'}}>
                {a.emailSent}
              </div>
            )}
          </div>
          <div className="detail-mock">
            <div style={{
              width:'100%', maxWidth:320, aspectRatio:'9/19',
              border:'1px solid var(--line-2)', borderRadius:24,
              background:'linear-gradient(180deg, var(--bg-2), var(--bg))',
              display:'grid', placeItems:'center', color:'var(--ink-muted)',
              fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.16em', textTransform:'uppercase'
            }}>
              <div style={{textAlign:'center'}}>
                <div style={{fontSize:48, marginBottom:8}}>⏳</div>
                <div>{a.noScreenshot}</div>
              </div>
            </div>
          </div>
        </div>
        <AppFeatures items={a.features} />
        <CtaStrip title={a.ctaTitle} sub={a.ctaSub} appId="com.kolabs.tasarrufcu" />
      </div>
    </main>
  );
}

// ─── Legal: shared layout ─────────────────────────────────────────
function LegalPage({ crumbLabel, eyebrow, title, lastUpdated, children }) {
  const t = useT();
  return (
    <main>
      <div className="detail-wrap" style={{maxWidth: 840}}>
        <Crumbs items={[{label:'kolabs',to:'/'},{label:crumbLabel}]} />
        <header style={{borderTop:'1px solid var(--line)', paddingTop: 56, paddingBottom: 8}}>
          <div className="detail-eyebrow"><span className="pill">{eyebrow}</span></div>
          <h1 className="detail-h1" style={{fontSize:'clamp(40px, 6vw, 64px)', marginBottom: 20}}>{title}</h1>
          <p style={{fontFamily:'var(--mono)', fontSize:11, color:'var(--ink-muted)', textTransform:'uppercase', letterSpacing:'0.14em'}}>
            {t.legalLastUpdated} {lastUpdated}
          </p>
        </header>
        <div className="legal-body">{children}</div>
      </div>
    </main>
  );
}

// ─── Privacy Policy ───────────────────────────────────────────────
function PrivacyPolicy() {
  const t = useT();
  const p = t.privacy;
  return (
    <LegalPage crumbLabel={p.crumb} eyebrow={p.eyebrow} title={p.title} lastUpdated={p.lastUpdated}>
      {p.body}
    </LegalPage>
  );
}

// ─── Terms of Service ─────────────────────────────────────────────
function TermsOfService() {
  const t = useT();
  const p = t.terms;
  return (
    <LegalPage crumbLabel={p.crumb} eyebrow={p.eyebrow} title={p.title} lastUpdated={p.lastUpdated}>
      {p.body}
    </LegalPage>
  );
}

Object.assign(window, { Zikirmatik, RamazanImsakiyesi, KelimeBul, HesapVakti, Tasarrufcu, VideoHero, PrivacyPolicy, TermsOfService });