/* ============================================================
   SALES MEDİKAL — Ürünler + Ürün Detayı
   →  window.ProductsPage, window.DetailPage
   ============================================================ */

/* ---------------- Sayfa başlığı (ortak) ---------------- */
function PageHero({ kicker, title, sub, crumb, nav }) {
  return (
    <section style={{ background: 'var(--navy)', position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0, opacity: .14,
        background: 'radial-gradient(560px 300px at 85% 0%, var(--sky), transparent 60%)',
      }} />
      <div className="wrap" style={{ position: 'relative', padding: '60px 0 56px' }}>
        {crumb && (
          <div style={{ display: 'flex', gap: 8, alignItems: 'center', fontSize: 13.5, color: 'rgba(255,255,255,.55)', marginBottom: 22 }}>
            <a href="#/" onClick={(e) => { e.preventDefault(); nav('home'); }} style={{ color: 'rgba(255,255,255,.7)' }}>Ana Sayfa</a>
            <span>/</span><span style={{ color: 'var(--gold-soft)' }}>{crumb}</span>
          </div>
        )}
        <div className="kicker" style={{ color: 'var(--gold-soft)' }}>{kicker}</div>
        <h1 className="display" style={{ fontSize: 'clamp(34px,5vw,58px)', color: '#fff', marginTop: 16, maxWidth: 820 }}>{title}</h1>
        {sub && <p style={{ marginTop: 18, fontSize: 18, color: 'rgba(255,255,255,.74)', maxWidth: 640 }}>{sub}</p>}
      </div>
    </section>
  );
}

/* ====================  ÜRÜNLER  ==================== */
function ProductsPage({ nav, t }) {
  const { SIZES } = window.SM;
  const radius = t.cardRadius != null ? t.cardRadius : 24;
  return (
    <main>
      <PageHero kicker="ÜRÜN SERİSİ" crumb="Ürünler" nav={nav}
        title="EPAROX Burun Koruma Bandı serisi"
        sub="Hidrokolloid yapıya sahip, kendinden yapışkanlı tek kullanımlık burun koruma bandı — beş bedende." />

      {/* Seri özet kartı */}
      <section className="sec wrap">
        <Reveal>
          <div className="series-card" style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, borderRadius: 28, overflow: 'hidden',
            border: '1px solid var(--line)', boxShadow: 'var(--shadow-md)', background: '#fff',
          }}>
            <div style={{ background: 'linear-gradient(160deg, var(--sky-tint), #fff)', display: 'grid', placeItems: 'center', padding: 30, position: 'relative' }}>
              <span style={{ position: 'absolute', top: 22, left: 22 }} className="pill"><Crown w={16} /> EPAROX</span>
              <img src={R(SIZES[0].img)} alt="EPAROX" style={{ height: 360, objectFit: 'contain' }} />
            </div>
            <div style={{ padding: '46px 44px' }}>
              <div className="kicker">TEK SERİ · BEŞ BEDEN</div>
              <h2 className="display" style={{ fontSize: 34, marginTop: 14, color: 'var(--ink)' }}>EPAROX Burun Koruma Bandı</h2>
              <p style={{ marginTop: 16, fontSize: 16, color: 'var(--body)' }}>
                CPAP ve nazal kanül kullanan bebeklerde burun köprüsünü basınç ve sürtünmeden korur.
                Hidrokolloid yapısı sayesinde hassas cilde nazikçe uyum sağlar.
              </p>
              <div style={{ marginTop: 22, display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                {['Kendinden yapışkanlı', 'Hidrokolloid', 'Lateks içermez', 'Tek kullanımlık'].map((x) => (
                  <span key={x} className="pill"><Icon name="check" s={15} c="var(--sky-deep)" sw={2} /> {x}</span>
                ))}
              </div>
              <button className="btn btn-primary" style={{ marginTop: 30 }} onClick={() => nav('detail')}>
                Ürün detayını gör <Icon name="arrow" s={16} c="#fff" sw={1.8} />
              </button>
            </div>
          </div>
        </Reveal>
      </section>

      {/* Beden kartları */}
      <section style={{ background: 'var(--paper-2)' }}>
        <div className="sec wrap">
          <Reveal className="sec-head"><div className="kicker">BEDENLER</div><h2>Renk kodlu beden ailesi</h2>
            <p>Her bedenin kendi rengi ve referans kodu vardır. Karta tıklayarak ürün detayına gidebilirsiniz.</p></Reveal>
          <div className="prod-grid" style={{ marginTop: 46, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22 }}>
            {SIZES.map((s, i) => (
              <Reveal key={s.ref} delay={(i % 3) * 90}>
                <button onClick={() => nav('detail', s.n)} className="show-card" style={{
                  width: '100%', textAlign: 'left', background: '#fff', border: '1px solid var(--line)',
                  borderRadius: radius, overflow: 'hidden', cursor: 'pointer', boxShadow: 'var(--shadow-sm)',
                }}>
                  <div style={{ background: `var(${s.tint})`, padding: '26px 22px 0', position: 'relative' }}>
                    <span style={{ position: 'absolute', top: 16, left: 16, fontSize: 12, fontWeight: 700, background: `var(${s.tone})`, color: '#fff', padding: '5px 12px', borderRadius: 100 }}>SIZE {s.n}</span>
                    <span style={{ position: 'absolute', top: 16, right: 16, fontSize: 11.5, fontWeight: 600, color: 'var(--navy)', background: 'rgba(255,255,255,.7)', padding: '5px 10px', borderRadius: 100 }} className="mono">{s.ref}</span>
                    <img src={R(s.img)} alt={s.name} style={{ width: '100%', height: 230, objectFit: 'contain', objectPosition: 'bottom' }} />
                  </div>
                  <div style={{ padding: '22px 22px 26px' }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
                      <h3 style={{ fontSize: 19, color: 'var(--ink)' }}>{s.name}</h3>
                      <span style={{ fontSize: 13, color: 'var(--muted)' }}>{s.tagline}</span>
                    </div>
                    <p style={{ marginTop: 10, fontSize: 14.5, color: 'var(--body)' }}>{s.desc}</p>
                    <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 8, color: 'var(--navy)', fontSize: 14, fontWeight: 600 }}>
                      Detayı gör <Icon name="arrow" s={15} c="var(--navy)" sw={1.8} />
                    </div>
                  </div>
                </button>
              </Reveal>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

/* ====================  ÜRÜN DETAYI  ==================== */
function DetailPage({ nav, t, params }) {
  const { SIZES, FEATURES, STEPS, FAQS } = window.SM;
  const startIdx = Math.max(0, SIZES.findIndex((s) => s.n === (params && params.size)));
  const [idx, setIdx] = useState(startIdx === -1 ? 0 : startIdx);
  const [view, setView] = useState('pack'); // pack | band
  const [openFaq, setOpenFaq] = useState(0);
  const s = SIZES[idx];
  const radius = t.cardRadius != null ? t.cardRadius : 24;

  return (
    <main>
      {/* breadcrumb bar */}
      <section style={{ borderBottom: '1px solid var(--line)', background: 'var(--paper)' }}>
        <div className="wrap" style={{ padding: '18px 0', display: 'flex', gap: 8, alignItems: 'center', fontSize: 13.5, color: 'var(--muted)' }}>
          <a href="#/" onClick={(e) => { e.preventDefault(); nav('home'); }}>Ana Sayfa</a><span>/</span>
          <a href="#/products" onClick={(e) => { e.preventDefault(); nav('products'); }}>Ürünler</a><span>/</span>
          <span style={{ color: 'var(--ink)', fontWeight: 600 }}>{s.name}</span>
        </div>
      </section>

      {/* main detail */}
      <section className="sec wrap" style={{ paddingTop: 56 }}>
        <div className="detail-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'start' }}>
          {/* gallery */}
          <div style={{ position: 'sticky', top: 96 }}>
            <div className="card" style={{
              borderRadius: 28, overflow: 'hidden', background: `linear-gradient(160deg, var(${s.tint}), #fff)`,
              boxShadow: 'var(--shadow-md)', position: 'relative',
            }}>
              <span style={{ position: 'absolute', top: 20, left: 20, fontSize: 12.5, fontWeight: 700, background: `var(${s.tone})`, color: '#fff', padding: '6px 14px', borderRadius: 100, zIndex: 2 }}>SIZE {s.n}</span>
              <img src={R(view === 'pack' ? s.img : s.band)} alt={s.name}
                   style={{ width: '100%', height: 460, objectFit: 'contain', objectPosition: 'center', padding: '30px 20px' }} />
            </div>
            <div style={{ marginTop: 16, display: 'flex', gap: 12 }}>
              {[['pack', 'Ambalaj', s.img], ['band', 'Ürün', s.band]].map(([k, label, src]) => (
                <button key={k} onClick={() => setView(k)} style={{
                  flex: 1, padding: 8, borderRadius: 16, cursor: 'pointer',
                  border: `1.5px solid ${view === k ? 'var(--navy)' : 'var(--line)'}`,
                  background: view === k ? '#fff' : 'rgba(255,255,255,.5)', display: 'flex', alignItems: 'center', gap: 10,
                }}>
                  <div style={{ width: 54, height: 54, borderRadius: 10, background: `var(${s.tint})`, overflow: 'hidden', flexShrink: 0 }}>
                    <img src={R(src)} alt={label} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
                  </div>
                  <span style={{ fontSize: 14, fontWeight: 600, color: view === k ? 'var(--navy)' : 'var(--muted)' }}>{label}</span>
                </button>
              ))}
            </div>
          </div>

          {/* info */}
          <div>
            <div className="kicker"><Crown w={18} /> EPAROX SERİSİ</div>
            <h1 className="display" style={{ fontSize: 'clamp(32px,4.4vw,52px)', marginTop: 16, color: 'var(--ink)' }}>{s.name}</h1>
            <p style={{ marginTop: 10, fontSize: 15, color: 'var(--muted)' }} className="mono">REF {s.ref} · Barkod {s.barcode}</p>
            <p style={{ marginTop: 20, fontSize: 17.5, color: 'var(--body)' }}>{s.desc}</p>

            {/* spec mini */}
            <div style={{ marginTop: 30, display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
              {[['Ağırlık aralığı', s.weight], ['Adet / Kutu', s.pack], ['Kullanım', 'Tek kullanım']].map(([k, v]) => (
                <div key={k} style={{ padding: '16px 18px', borderRadius: 16, background: 'var(--paper-2)', border: '1px solid var(--line)' }}>
                  <div style={{ fontSize: 12.5, color: 'var(--muted)' }}>{k}</div>
                  <div style={{ fontSize: 17, fontWeight: 600, color: 'var(--ink)', marginTop: 4 }}>{v}</div>
                </div>
              ))}
            </div>

            {/* checklist */}
            <div style={{ marginTop: 26, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {['Kendinden yapışkanlı, kalıntısız çıkar', 'Hidrokolloid hassas cilt koruması', 'Lateks içermez, hipoalerjenik', 'CE işaretli tıbbi cihaz (MD)'].map((x) => (
                <div key={x} style={{ display: 'flex', gap: 12, alignItems: 'center', fontSize: 15.5, color: 'var(--body)' }}>
                  <span style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--sky-tint)', color: 'var(--sky-deep)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
                    <Icon name="check" s={15} c="var(--navy)" sw={2.2} />
                  </span>{x}
                </div>
              ))}
            </div>

            {/* warning */}
            <div style={{ marginTop: 24, padding: '16px 20px', borderRadius: 14, background: '#FBF1E8', border: '1px solid #F0D9C2', display: 'flex', gap: 12, alignItems: 'center' }}>
              <Icon name="latex" s={22} c="#B4762E" />
              <span style={{ fontSize: 14.5, color: '#7A4E1E', fontWeight: 500 }}>Yüksek akış (high-flow) kanülleri ile birlikte KULLANMAYINIZ.</span>
            </div>

            <div style={{ marginTop: 30, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => nav('contact')}>Bilgi / Numune talep et <Icon name="arrow" s={16} c="#fff" sw={1.8} /></button>
              <button className="btn btn-ghost" onClick={() => nav('contact')}>Bayilik başvurusu</button>
            </div>
          </div>
        </div>
      </section>

      {/* features */}
      <section style={{ background: 'var(--paper-2)' }}>
        <div className="sec wrap">
          <Reveal className="sec-head center"><div className="kicker center" style={{ display: 'flex', justifyContent: 'center' }}>ÖZELLİKLER</div><h2>Neden EPAROX?</h2></Reveal>
          <div className="feat-grid" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20 }}>
            {FEATURES.map((f, i) => (
              <Reveal key={i} delay={i * 80}><div className="card lift" style={{ padding: 28, height: '100%', borderRadius: radius }}>
                <div style={{ width: 52, height: 52, borderRadius: 14, background: '#fff', border: '1px solid var(--line)', display: 'grid', placeItems: 'center', marginBottom: 20 }}><Icon name={f.icon} s={26} c="var(--navy)" sw={1.5} /></div>
                <h3 style={{ fontSize: 18, color: 'var(--ink)' }}>{f.title}</h3>
                <p style={{ marginTop: 10, fontSize: 14.5, color: 'var(--body)' }}>{f.text}</p>
              </div></Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* size guide table */}
      <section className="sec wrap">
        <div className="howto-grid" style={{ display: 'grid', gridTemplateColumns: '.8fr 1.2fr', gap: 48, alignItems: 'start' }}>
          <Reveal>
            <div className="kicker"><Icon name="ruler" s={18} c="var(--sky-deep)" /> BEDEN REHBERİ</div>
            <h2 className="display" style={{ fontSize: 'clamp(28px,3.6vw,42px)', marginTop: 14, color: 'var(--ink)' }}>Doğru bedeni seçin</h2>
            <p style={{ marginTop: 16, fontSize: 16.5, color: 'var(--body)' }}>
              Bedenler bebeğin ağırlığına göre seçilir; 0 (en küçük) bedenden 4 (en geniş) bedene doğru artan koruma yüzeyi sunar.
              Uygun beden seçimi için sağlık personeline danışınız.
            </p>
            <p style={{ marginTop: 14, fontSize: 13.5, color: 'var(--muted)' }}>* Ağırlık aralıkları temsilîdir, kesin değerler için ürün etiketini esas alınız.</p>
          </Reveal>
          <Reveal delay={120}>
            <div className="card" style={{ borderRadius: radius, overflow: 'hidden' }}>
              <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 15 }}>
                <thead>
                  <tr style={{ background: 'var(--navy)', color: '#fff', textAlign: 'left' }}>
                    {['Beden', 'Referans', 'Ağırlık', 'Grup'].map((h) => <th key={h} style={{ padding: '15px 18px', fontWeight: 600, fontSize: 13.5, letterSpacing: '.03em' }}>{h}</th>)}
                  </tr>
                </thead>
                <tbody>
                  {SIZES.map((x, i) => (
                    <tr key={x.ref} onClick={() => setIdx(i)} style={{ cursor: 'pointer', background: i === idx ? `var(${x.tint})` : (i % 2 ? 'var(--paper)' : '#fff'), borderTop: '1px solid var(--line)' }}>
                      <td style={{ padding: '14px 18px' }}><span style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontWeight: 600 }}><span style={{ width: 16, height: 16, borderRadius: '50%', background: `var(${x.tone})` }} /> Size {x.n}</span></td>
                      <td style={{ padding: '14px 18px', color: 'var(--body)' }} className="mono">{x.ref}</td>
                      <td style={{ padding: '14px 18px', color: 'var(--body)', fontWeight: 600 }}>{x.weight}</td>
                      <td style={{ padding: '14px 18px', color: 'var(--body)' }}>{x.weightNote}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </Reveal>
        </div>
      </section>

      {/* how to use */}
      <section style={{ background: 'var(--navy)' }}>
        <div className="sec wrap">
          <Reveal className="sec-head center" style={{ color: '#fff' }}>
            <div className="kicker center" style={{ color: 'var(--gold-soft)', display: 'flex', justifyContent: 'center' }}>UYGULAMA ADIMLARI</div>
            <h2 style={{ color: '#fff' }}>Nasıl kullanılır?</h2>
          </Reveal>
          <div className="steps5" style={{ marginTop: 50, display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 16 }}>
            {STEPS.map((st, i) => (
              <Reveal key={i} delay={i * 70}>
                <div style={{ padding: '26px 20px', borderRadius: radius, background: 'rgba(255,255,255,.05)', border: '1px solid rgba(255,255,255,.12)', height: '100%' }}>
                  <div style={{ fontFamily: 'var(--font-display)', fontSize: 30, color: 'var(--gold-soft)' }}>{st.k}</div>
                  <div style={{ fontSize: 16.5, fontWeight: 600, color: '#fff', marginTop: 12 }}>{st.title}</div>
                  <p style={{ fontSize: 14, color: 'rgba(255,255,255,.66)', marginTop: 8 }}>{st.text}</p>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="sec wrap" style={{ maxWidth: 860 }}>
        <Reveal className="sec-head center" style={{ margin: '0 auto' }}><div className="kicker center" style={{ display: 'flex', justifyContent: 'center' }}>SIKÇA SORULANLAR</div><h2>Merak edilenler</h2></Reveal>
        <div style={{ marginTop: 40 }}>
          {FAQS.map((f, i) => (
            <Reveal key={i} delay={i * 50}>
              <div style={{ borderBottom: '1px solid var(--line)' }}>
                <button onClick={() => setOpenFaq(openFaq === i ? -1 : i)} style={{
                  width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
                  padding: '22px 4px', background: 'transparent', border: 'none', textAlign: 'left',
                }}>
                  <span style={{ fontSize: 18, fontWeight: 600, color: 'var(--ink)' }}>{f.q}</span>
                  <span style={{ flexShrink: 0, transform: openFaq === i ? 'rotate(45deg)' : 'none', transition: 'transform .3s', color: 'var(--sky-deep)' }}><Icon name="plus" s={22} c="var(--navy)" /></span>
                </button>
                <div style={{ maxHeight: openFaq === i ? 200 : 0, overflow: 'hidden', transition: 'max-height .4s var(--ease)' }}>
                  <p style={{ padding: '0 4px 24px', fontSize: 16, color: 'var(--body)', maxWidth: 720 }}>{f.a}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </section>
    </main>
  );
}

Object.assign(window, { ProductsPage, DetailPage, PageHero });