/* SolarDose — paylaşılan atomlar + içerik sayfaları (Hakkında, Bilim) */
const { useState: useStateP } = React;

function Logo({ size = 14 }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontFamily: SDT.mono, fontSize: size, letterSpacing: '0.16em', fontWeight: 500, color: SDT.text }}>
      <svg width={size + 4} height={size + 4} viewBox="0 0 16 16" fill="none">
        <circle cx="8" cy="8" r="3" fill="var(--accent)" />
        <circle cx="8" cy="8" r="6.5" stroke="var(--accent)" strokeWidth="0.9" strokeDasharray="1 2" />
      </svg>
      <span>SOLARDOSE</span>
    </div>
  );
}

function Mono({ children, s = 11, c = SDT.mute, ls = '0.14em', style = {} }) {
  return <div style={{ fontFamily: SDT.mono, fontSize: s, letterSpacing: ls, color: c, textTransform: 'uppercase', ...style }}>{children}</div>;
}

function TopNav({ page, nav, lang, setLang, t }) {
  const items = [['calc', t.navCalc], ['science', t.navSci], ['faq', t.navFaq], ['about', t.navAbout]];
  return (
    <header className="topnav">
      <button className="logo-btn" onClick={() => nav('calc')}><Logo /></button>
      <nav>
        {items.map(([k, l]) => (
          k === 'science'
            ? <button key={k} className={page === k ? 'on' : ''} onClick={() => window.location.href = lang === 'en' ? '/en/science.html' : '/science.html'}>{l}</button>
            : k === 'about'
              ? <button key={k} className={page === k ? 'on' : ''} onClick={() => window.location.href = lang === 'en' ? '/en/about.html' : '/about.html'}>{l}</button>
              : k === 'faq'
                ? <button key={k} className={page === k ? 'on' : ''} onClick={() => window.location.href = lang === 'en' ? '/en/faq.html' : '/faq.html'}>{l}</button>
                : <button key={k} className={page === k ? 'on' : ''} onClick={() => nav(k)}>{l}</button>
        ))}
      </nav>
      <div className="lang">
        <button className={lang === 'tr' ? 'on' : ''} onClick={() => setLang('tr')}>TR</button>
        <span>/</span>
        <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
      </div>
      <div className="nav-mobile">
        <select value={page} onChange={(e) => {
          if (e.target.value === 'science') {
            window.location.href = lang === 'en' ? '/en/science.html' : '/science.html';
          } else if (e.target.value === 'about') {
            window.location.href = lang === 'en' ? '/en/about.html' : '/about.html';
          } else if (e.target.value === 'faq') {
            window.location.href = lang === 'en' ? '/en/faq.html' : '/faq.html';
          } else {
            nav(e.target.value);
          }
        }}>
          {items.map(([k, l]) => <option key={k} value={k}>{l}</option>)}
        </select>
        <div className="lang">
          <button className={lang === 'tr' ? 'on' : ''} onClick={() => setLang('tr')}>TR</button>
          <span>/</span>
          <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
      </div>
    </header>
  );
}

/* küçük line ikonları */
const Ic = {
  pin: (<svg className="ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M12 21s7-6.3 7-11a7 7 0 1 0-14 0c0 4.7 7 11 7 11Z"/><circle cx="12" cy="10" r="2.4"/></svg>),
  sun: (<svg className="ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="12" cy="12" r="4"/><path d="M12 2v2.5M12 19.5V22M4.2 4.2l1.8 1.8M18 18l1.8 1.8M2 12h2.5M19.5 12H22M4.2 19.8 6 18M18 6l1.8-1.8"/></svg>),
  dna: (<svg className="ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><path d="M7 3c0 5 10 7 10 12M17 3c0 5-10 7-10 12M7 21c0-3 10-5 10-9M17 21c0-3-10-5-10-9"/><path d="M8.5 6h7M9 9.5h6M9 14.5h6M8.5 18h7"/></svg>),
  globe: (<svg className="ic" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c2.5 2.5 2.5 15 0 18M12 3c-2.5 2.5-2.5 15 0 18"/></svg>),
};

function PageShell({ page, nav, lang, setLang, t, children }) {
  return (
    <div className="page">
      <TopNav page={page} nav={nav} lang={lang} setLang={setLang} t={t} />
      <div className="page-body"><div className="wrap">{children}</div></div>
      <footer className="botbar">
        <Mono s={10} c={SDT.mute2}>{t.disclaimer}</Mono>
        <Mono s={10} c={SDT.mute2}>© 2026 SOLARDOSE.APP</Mono>
      </footer>
    </div>
  );
}

/* ── HAKKINDA ── */
function AboutPage({ t, lang, setLang, nav }) {
  return (
    <PageShell page="about" nav={nav} lang={lang} setLang={setLang} t={t}>
      <div className="page-hero">
        <Mono className="eyebrow" style={{ marginBottom: 18 }}>{t.navAbout}</Mono>
        <h1>SolarDose neden yapıldı?</h1>
        <p className="lede">Milyarlarca insan D vitamini eksikliği çekiyor. Çözüm basit: doğru saatte birkaç dakika güneş. Ama hangi saat? SolarDose tam bu soruyu yanıtlıyor.</p>
        <div className="pills">
          <span className="pill"><span className="dot">●</span>AI-assisted</span>
          <span className="pill"><span className="dot">●</span>Open source</span>
          <span className="pill"><span className="dot">●</span>Science-backed</span>
        </div>
      </div>

      <section className="sec">
        <div className="sec-head"><span className="sec-num">§ 01</span><h2>Projenin Amacı</h2></div>
        <div style={{ textAlign: 'center', padding: 'clamp(24px,4vw,40px) 0' }}>
          <div style={{ fontFamily: SDT.mono, fontSize: 'clamp(32px,6vw,56px)', color: 'var(--accent)', letterSpacing: '0.04em', marginBottom: 16 }}>%47,9</div>
          <p style={{ color: SDT.mute, maxWidth: 480, margin: '0 auto' }}>Dünya nüfusunun yetersiz D vitamini seviyesinde olduğu tahmin ediliyor — neredeyse iki kişiden biri.</p>
        </div>
        <div className="prose">
          <p>D vitamini eksikliği dünya nüfusunun neredeyse yarısını etkiliyor. Gelişmiş ülkeler dahil, kapalı ofislerde çalışan, güneşsiz şehirlerde yaşayan milyarlarca insan farkında bile olmadan eksiklik çekiyor.</p>
          <p>Oysa çözüm çoğu zaman ilaç değil, <strong>bilgi</strong>. Doğru saatte on dakika güneş, haftalar süren takviye tedavisinin yerini tutabiliyor. Sorun şu: o "doğru saat" konuma, mevsime ve deri tipine göre değişiyor — ve bunu hesaplamak için gereken araç bugüne kadar ya çok karmaşık ya da erişilemez durumdaydı.</p>
          <p>SolarDose bu boşluğu doldurmak için tasarlandı. <strong>Kayıt yok, ücret yok, gereksiz karmaşıklık yok.</strong> Sadece bilim ve senin konumun.</p>
        </div>
      </section>

      <section className="sec">
        <div className="sec-head"><span className="sec-num">§ 02</span><h2>Nasıl Çalışır?</h2></div>
        <div className="howgrid">
          {[
            [Ic.pin, 'Konum', 'Nominatim (OpenStreetMap) ile şehir araması ve otomatik konum tespiti. Seçilen konum için Open-Meteo’dan rakım, bulutluluk ve timezone verisi alınır. Hiçbir veri sunucuya kaydedilmez.'],
            [Ic.sun, 'SunCalc.js', 'Açık kaynak astronomik kütüphane. Enlem, boylam ve zaman girerek güneşin dakika hassasiyetinde yükseklik açısını hesaplar. API veya internet bağlantısı gerektirmez.'],
            [Ic.dna, 'Holick Kuralı', 'Süre hesabı Fitzpatrick deri tipine ve vücut maruziyetine göre kişiselleştirilir. Temel formül: ¼ MED × ¼ vücut alanı ≈ 1000 IU D3.'],
            [Ic.globe, 'Şeffaflık', 'Tüm hesaplama mantığı açık kaynak. Hangi formüllerin kullanıldığını Bilimsel Temel sayfasında görebilirsin.'],
          ].map(([ic, h, p]) => (
            <div className="howcard" key={h}><span className="ic">{ic}</span><h3>{h}</h3><p>{p}</p></div>
          ))}
        </div>
      </section>

      <section className="sec">
        <div className="sec-head"><span className="sec-num">§ 03</span><h2>Hesaplamanın Sınırları</h2></div>
        <div className="limits">
          {[
            ['ok', 'Hava durumu entegre edildi', 'Anlık bulutluluk verisi Open-Meteo API\u2019den alınarak hesaplamaya dahil edilir. Kapalı havada süre otomatik uzar.'],
            ['ok', 'Rakım hesaba katıldı', 'EPA formülüne göre her 1000 m için UV %6 artar. Kar/su yansıması henüz dahil değil.'],
            ['warn', 'Cam filtresi', 'Pencere camı UVB\u2019yi tamamen filtreler. Araç içinde veya cam arkasında güneşlenmek D vitamini sentezi sağlamaz.'],
            ['warn', 'Tıbbi tavsiye değil', 'Bu araç bilgilendirme amaçlıdır. D vitamini eksikliği veya sağlık kararları için doktorunuza danışın.'],
          ].map(([m, h, p]) => (
            <div className="limit" key={h}>
              <span className={'mark ' + m}>{m === 'ok' ? '✓' : '⚠'}</span>
              <div><h3>{h}</h3><p>{p}</p></div>
            </div>
          ))}
        </div>
      </section>

      <section className="sec">
        <div className="sec-head"><span className="sec-num">§ 04</span><h2>Gelecek Planlar</h2></div>
        <div className="road">
          {[
            ['done', 'Tamamlandı', 'Konum bazlı sentez penceresi hesaplama'],
            ['done', 'Tamamlandı', 'Fitzpatrick deri tipi ve süre önerisi'],
            ['done', 'Tamamlandı', 'TR / EN çok dilli destek'],
            ['done', 'Tamamlandı', 'Open-Meteo API — anlık bulutluluk, rakım ve timezone entegrasyonu'],
            ['done', 'Tamamlandı', 'Nominatim autocomplete — serbest konum girişi'],
            ['done', 'Tamamlandı', 'Yeni UI tasarımı — kadran enstrümanı, güneş yörüngesi'],
            ['plan', 'Planlandı', 'Şehir bazlı SEO sayfaları (/city/istanbul, /city/london)'],
            ['plan', 'Planlandı', 'Yıllık D vitamini takvimi (12 aylık sentez grafiği)'],
            ['later', 'İleride', 'PWA — telefona yüklenebilir uygulama'],
            ['later', 'İleride', 'Mobil uygulama (iOS / Android widget)'],
            ['later', 'İleride', 'Kan değeri → güneşlenme planı hesabı'],
          ].map(([s, lbl, txt], i) => (
            <div className="roaditem" key={i}>
              <span className={'road-status ' + s}>{s === 'done' ? '✓ ' : ''}{lbl}</span>
              <span className="txt">{txt}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="sec">
        <div className="sec-head"><span className="sec-num">§ 05</span><h2>İletişim</h2></div>
        <div className="contact-box">
          <p>Geri bildirim, hata bildirimi veya katkı için GitHub üzerinden ulaşabilirsiniz.</p>
          <a className="gh-link" href="https://github.com/kuzeykoltuk/solardose" target="_blank" rel="noopener">GITHUB · KUZEYKOLTUK/SOLARDOSE ↗</a>
        </div>
      </section>
    </PageShell>
  );
}

/* ── BİLİMSEL TEMEL ──
   Sağlanan metodolojiden (SunCalc, Holick, EPA, Fitzpatrick) derlendi.
   Cevaplar/rakamlar tahminîdir; sitenin nihai metniyle değiştirilebilir. */
function SciencePage({ t, lang, setLang, nav }) {
  return (
    <PageShell page="science" nav={nav} lang={lang} setLang={setLang} t={t}>
      <div className="page-hero">
        <Mono className="eyebrow" style={{ marginBottom: 18 }}>{t.navSci}</Mono>
        <h1>Bilimsel Temel</h1>
        <p className="lede">SolarDose hangi formülleri kullanıyor? Güneş geometrisinden D vitamini dozuna kadar hesaplamanın her adımı, kaynaklarıyla birlikte.</p>
      </div>

      <section className="sec">
        <div className="sec-head"><span className="sec-num">§ 01</span><h2>Temel İlke: UVB → D Vitamini</h2></div>
        <div className="prose">
          <p>Vücudun D vitamini ihtiyacının <strong>%90’ı güneşten</strong> karşılanır. Ama bunun için güneşin doğru açıda olması şart — her saatteki güneş D vitamini üretmez.</p>
          <p>Deri <strong>290–315 nm dalga boyundaki UVB ışınlarına</strong> maruz kaldığında D vitamini sentezi başlar. Bu ışınlar atmosferden ancak güneş yeterince yüksekteyken geçebilir.</p>
          <p>Pratik eşik: güneşin yükseklik açısı (<strong>α</strong>) <strong>35°</strong> üzerinde olmalıdır. Bunun altında UVB atmosferde dağılır ve sentez durur — sabah erken ve akşam geç saatlerinin "boş" geçmesinin nedeni budur.</p>
        </div>
      </section>

      <section className="sec">
        <div className="sec-head"><span className="sec-num">§ 02</span><h2>Güneş Geometrisi · SunCalc.js</h2></div>
        <div className="prose">
          <p>Enlem, boylam ve tarihten yola çıkarak güneşin gün boyunca yükseklik açısı <strong>SunCalc.js</strong> ile dakika hassasiyetinde hesaplanır. Bu tamamen astronomik bir hesaptır; internet veya API gerektirmez ve tarayıcıda çalışır.</p>
          <p>α ≥ 35° koşulunun sağlandığı saat aralığı <strong>sentez penceresi</strong> olarak işaretlenir. Pencerenin tam ortası (solar öğle) günün en verimli anıdır — UVB en yoğun, gereken süre en kısadır.</p>
        </div>
      </section>

      <section className="sec">
        <div className="sec-head"><span className="sec-num">§ 03</span><h2>Doz: Holick Kuralı</h2></div>
        <div className="prose">
          <p>Tüm vücut 1 MED (Minimal Eritem Dozu — derinin hafif kızarmaya başladığı eşik) güneş aldığında yaklaşık <strong>10.000–20.000 IU</strong> D3 üretir. Güvenli, yanıksız hedef bunun küçük bir kesridir:</p>
        </div>
        <div style={{ textAlign: 'center', padding: 'clamp(24px,4vw,40px) 0' }}>
          <div style={{ fontFamily: SDT.mono, fontSize: 'clamp(22px,4vw,38px)', color: 'var(--accent)', letterSpacing: '0.04em', marginBottom: 16 }}>¼ MED × ¼ vücut ≈ 1000 IU</div>
          <p style={{ color: SDT.mute, maxWidth: 480, margin: '0 auto' }}>Süre, bu hedefe ulaşmak için gereken dakikadır. Anlık UV indeksi ve açık vücut alanına göre kişisel olarak ölçeklenir.</p>
        </div>
      </section>

      <section className="sec">
        <div className="sec-head"><span className="sec-num">§ 04</span><h2>Fitzpatrick Deri Tipi</h2></div>
        <div className="prose"><p>Melanin UVB\u2019yi emerek sentezi yavaşlatır. Aynı dozu almak için koyu tenli bir kişiye, açık tenliden kat kat daha uzun süre gerekir. SolarDose her tip için göreli bir çarpan uygular:</p></div>
        <div className="road">
          {SD.SKIN.map((s) => (
            <div className="roaditem" key={s.id} style={{ gridTemplateColumns: '90px 1fr 70px' }}>
              <span className="road-status done" style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                <span className="swatch" style={{ width: 16, height: 16, borderRadius: '50%', background: s.color }} /> TİP {s.roman}
              </span>
              <span className="txt">{s.name} · {s.desc}</span>
              <span className="txt" style={{ fontFamily: SDT.mono, color: 'var(--accent)', textAlign: 'right' }}>×{s.factor.toFixed(1)}</span>
            </div>
          ))}
        </div>
      </section>

      <section className="sec">
        <div className="sec-head"><span className="sec-num">§ 05</span><h2>Çevresel Düzeltmeler</h2></div>
        <div className="limits">
          {[
            ['ok', 'Bulutluluk · Open-Meteo', 'Anlık bulut örtüsü UV\u2019yi azaltır; süre buna göre uzatılır. Örn. %24 bulut ≈ ×0,89 UV → süre ~%12 artar.'],
            ['ok', 'Rakım · EPA', 'Atmosfer inceldikçe UV güçlenir: her 1000 m için yaklaşık %6 artış. Yüksek rakımlı şehirlerde sentez penceresi biraz daha geniş olur.'],
            ['warn', 'Yansıma', 'Kar ve su UV\u2019yi yansıtarak maruziyeti artırır — bu faktör henüz modele dahil değil.'],
            ['warn', 'Cam', 'Pencere ve araç camı UVB\u2019yi tamamen keser; cam arkasında sentez olmaz.'],
          ].map(([m, h, p]) => (
            <div className="limit" key={h}>
              <span className={'mark ' + m}>{m === 'ok' ? '✓' : '⚠'}</span>
              <div><h3>{h}</h3><p>{p}</p></div>
            </div>
          ))}
        </div>
      </section>

      <section className="sec">
        <div className="sec-head"><span className="sec-num">§ 06</span><h2>Kaynaklar</h2></div>
        <div className="prose">
          <div style={{ fontFamily: SDT.mono, fontSize: 13, color: SDT.mute, lineHeight: 2.4, display: 'flex', flexDirection: 'column', gap: 6 }}>
            {[
              ['Holick MF (2004) — Vitamin D & sunlight', 'https://pubmed.ncbi.nlm.nih.gov/15585788/'],
              ['Webb AR, Kline L, Holick MF (1988) — Influence of season and latitude on vitamin D synthesis', 'https://pubmed.ncbi.nlm.nih.gov/2839537/'],
              ['Webb AR, Holick MF (1988) — The role of sunlight in cutaneous production of vitamin D3', 'https://pubmed.ncbi.nlm.nih.gov/2849469/'],
              ['Fitzpatrick TB (1988) — The validity and practicality of sun-reactive skin types I–VI', 'https://pubmed.ncbi.nlm.nih.gov/3377516/'],
              ['U.S. EPA — UV Index & altitude', 'https://www.epa.gov/sunsafety/uv-index-scale-0'],
              ['SunCalc.js — Open source sun position library', 'https://github.com/mourner/suncalc'],
              ['Open-Meteo API — Free weather API', 'https://open-meteo.com/'],
              ['Nominatim — OpenStreetMap geocoding', 'https://nominatim.openstreetmap.org/'],
            ].map(([label, url]) => (
              <a key={url} href={url} target="_blank" rel="noopener noreferrer" style={{
                color: SDT.mute, textDecoration: 'none', borderBottom: `1px solid ${SDT.line}`,
                paddingBottom: 4, transition: 'color .15s',
              }}
                onMouseEnter={(e) => e.currentTarget.style.color = 'var(--accent)'}
                onMouseLeave={(e) => e.currentTarget.style.color = SDT.mute}
              >{label} ↗</a>
            ))}
          </div>
        </div>
      </section>
    </PageShell>
  );
}

Object.assign(window, { Logo, Mono, TopNav, PageShell, AboutPage, SciencePage });