/* ============================================================
   SALES MEDİKAL — Ana Sayfa  →  window.HomePage
   ============================================================ */
function HomePage({ nav, t }) {
  const { SIZES, FEATURES, STEPS } = window.SM;
  const go = (p) => nav(p);
  const heroImg = SIZES[t.heroColor != null ? t.heroColor : 0];
  const radius = t.cardRadius != null ? t.cardRadius : 24;

  return (
    <main>
      {/* ---------------- HERO ---------------- */}
      <section style={{ position: 'relative', overflow: 'hidden', background: 'var(--paper)' }}>
        <div aria-hidden="true" style={{
          position: 'absolute', top: -200, right: -140, width: 720, height: 720, borderRadius: '50%',
          background: `radial-gradient(circle, var(${heroImg.tint}), transparent 66%)`, opacity: .85,
        }} />
        <div aria-hidden="true" style={{
          position: 'absolute', bottom: -240, left: -200, width: 600, height: 600, borderRadius: '50%',
          background: 'radial-gradient(circle, var(--sky-tint), transparent 70%)', opacity: .55,
        }} />
        <div className="wrap" style={{ position: 'relative', paddingBottom: 60 }}>
          {t.heroLayout === 'editorial'
            ? <HeroEditorial SIZES={SIZES} go={go} nav={nav} heroImg={heroImg} />
            : <HeroStage SIZES={SIZES} go={go} nav={nav} heroImg={heroImg} />}
        </div>
      </section>

      {/* ---------------- CERT STRIP ---------------- */}
      <section style={{ background: 'var(--navy)', padding: '34px 0' }}>
        <div className="wrap"><CertStrip dark /></div>
      </section>

      {/* ---------------- INTRO / FEATURES ---------------- */}
      <section className="sec wrap">
        <Reveal className="sec-head center">
          <div className="kicker center" style={{ justifyContent: 'center', display: 'flex' }}>NEDEN EPAROX</div>
          <h2>Hassas bakım, kanıtlanmış malzeme</h2>
          <p>Hidrokolloid teknolojisinin yumuşaklığı ile tıbbi cihaz güvenliğini bir araya getirdik.</p>
        </Reveal>
        <div className="feat-grid" style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
          {FEATURES.map((f, i) => (
            <Reveal key={i} delay={i * 90}>
              <div className="card lift" style={{ padding: 30, height: '100%', borderRadius: radius }}>
                <div style={{
                  width: 56, height: 56, borderRadius: 16, display: 'grid', placeItems: 'center',
                  background: 'var(--sky-tint)', color: 'var(--sky-deep)', marginBottom: 22,
                }}>
                  <Icon name={f.icon} s={28} c="var(--navy)" sw={1.5} />
                </div>
                <h3 style={{ fontSize: 19, color: 'var(--ink)' }}>{f.title}</h3>
                <p style={{ marginTop: 12, fontSize: 15, color: 'var(--body)' }}>{f.text}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </section>

      {/* ---------------- PRODUCT SHOWCASE ---------------- */}
      <section style={{ background: 'var(--paper-2)' }}>
        <div className="sec wrap">
          <Reveal className="sec-head">
            <div className="kicker">BEDEN SİSTEMİ</div>
            <h2>Tek seri, beş hassas beden</h2>
            <p>Prematüreden daha geniş uygulamalara — her bedenin kendi rengi vardır. 0’dan 4’e kadar artan koruma yüzeyi.</p>
          </Reveal>
          <div className="showcase" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16 }}>
            {SIZES.map((s, i) => (
              <Reveal key={s.ref} delay={i * 70}>
                <button onClick={() => go('detail')} className="show-card" style={{
                  width: '100%', textAlign: 'left', border: '1px solid var(--line)', borderRadius: radius,
                  background: '#fff', overflow: 'hidden', cursor: 'pointer', boxShadow: 'var(--shadow-sm)',
                }}>
                  <div style={{ background: '#fff', padding: '22px 16px 0', position: 'relative' }}>
                    <span style={{
                      position: 'absolute', top: 14, left: 14, fontSize: 12, fontWeight: 700,
                      background: `var(${s.tone})`, color: '#fff', padding: '4px 10px', borderRadius: 100,
                    }}>SIZE {s.n}</span>
                    <img src={R(s.img.replace('.jpg', '-cut.png'))} alt={s.name} style={{ width: '100%', height: 190, objectFit: 'contain', objectPosition: 'bottom' }} />
                  </div>
                  <div style={{ padding: '16px 16px 20px', borderTop: '1px solid var(--line-soft)' }}>
                    <div style={{ fontSize: 15.5, fontWeight: 600, color: 'var(--ink)' }}>{s.name}</div>
                    <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>{s.tagline}</div>
                  </div>
                </button>
              </Reveal>
            ))}
          </div>
          <Reveal style={{ marginTop: 36 }}>
            <button className="btn btn-light" onClick={() => go('products')}>
              Ürünler sayfasına git <Icon name="arrow" s={16} c="var(--navy)" sw={1.8} />
            </button>
          </Reveal>
        </div>
      </section>

      {/* ---------------- HOW TO USE ---------------- */}
      <section className="sec wrap">
        <div className="howto-grid" style={{ display: 'grid', gridTemplateColumns: '.85fr 1.15fr', gap: 56, alignItems: 'center' }}>
          <Reveal>
            <div className="kicker">UYGULAMA</div>
            <h2 className="display" style={{ fontSize: 'clamp(30px,4vw,46px)', marginTop: 16, color: 'var(--ink)' }}>
              Beş adımda doğru kullanım
            </h2>
            <p style={{ marginTop: 18, fontSize: 17, color: 'var(--body)' }}>
              EPAROX, hızlı ve hijyenik uygulama için tasarlandı. Adımları izleyerek
              güvenli ve etkili koruma sağlayın.
            </p>
            <button className="btn btn-ghost" style={{ marginTop: 28 }} onClick={() => go('detail')}>
              Detaylı kullanım <Icon name="arrow" s={16} c="var(--navy)" sw={1.8} />
            </button>
          </Reveal>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
            {STEPS.map((s, i) => (
              <Reveal key={i} delay={i * 70}>
                <div className="step-row" style={{
                  display: 'flex', gap: 20, alignItems: 'center', padding: '18px 22px',
                  background: '#fff', border: '1px solid var(--line)', borderRadius: radius,
                }}>
                  <span style={{ fontFamily: 'var(--font-display)', fontSize: 24, color: 'var(--gold)', minWidth: 36 }}>{s.k}</span>
                  <div>
                    <div style={{ fontSize: 16.5, fontWeight: 600, color: 'var(--ink)' }}>{s.title}</div>
                    <div style={{ fontSize: 14.5, color: 'var(--body)', marginTop: 3 }}>{s.text}</div>
                  </div>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* ---------------- QUOTE / BRAND BAND ---------------- */}
      <section style={{ background: 'var(--navy)', position: 'relative', overflow: 'hidden' }}>
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0, opacity: .12,
          background: 'radial-gradient(620px 320px at 80% 20%, var(--sky), transparent 60%)',
        }} />
        <div className="sec wrap" style={{ position: 'relative', textAlign: 'center', maxWidth: 880, marginInline: 'auto' }}>
          <Reveal style={{ display: 'flex', justifyContent: 'center', marginBottom: 26 }}>
            <Crown w={44} />
          </Reveal>
          <Reveal delay={80}>
            <p className="display" style={{ fontSize: 'clamp(26px,3.4vw,40px)', color: '#fff', lineHeight: 1.28 }}>
              “En küçük hastaların en hassas cildi için; <em style={{ color: 'var(--gold-soft)' }}>yumuşaklık</em> ve
              güvenliği aynı bantta buluşturduk.”
            </p>
          </Reveal>
          <Reveal delay={160}>
            <div style={{ marginTop: 28, color: 'rgba(255,255,255,.6)', fontSize: 14.5, letterSpacing: '.04em' }}>
              SALES MEDİKAL · EPAROX Geliştirme Ekibi
            </div>
          </Reveal>
        </div>
      </section>

      {/* ---------------- CTA ---------------- */}
      <section className="sec wrap">
        <Reveal>
          <div className="cta-card" style={{
            borderRadius: 32, padding: '60px 56px', position: 'relative', overflow: 'hidden',
            background: 'linear-gradient(120deg, var(--sky-tint), #fff 60%)',
            border: '1px solid var(--line)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 32, flexWrap: 'wrap',
          }}>
            <div style={{ maxWidth: 560 }}>
              <div className="kicker">İLETİŞİM</div>
              <h2 className="display" style={{ fontSize: 'clamp(28px,3.4vw,42px)', marginTop: 14, color: 'var(--ink)' }}>
                Ürün, bayilik veya numune için bize ulaşın
              </h2>
              <p style={{ marginTop: 14, fontSize: 16.5, color: 'var(--body)' }}>
                Sağlık kuruluşları ve distribütörler için detaylı bilgi ve numune talebi.
              </p>
            </div>
            <button className="btn btn-gold" onClick={() => go('contact')} style={{ padding: '16px 30px', fontSize: 16 }}>
              İletişime geç <Icon name="arrow" s={17} c="var(--navy)" sw={1.8} />
            </button>
          </div>
        </Reveal>
      </section>
    </main>
  );
}

function HeroStage({ heroImg, SIZES, go, nav }) {
  return (
    <div>
      <div className="hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.02fr .98fr', alignItems: 'center', gap: 48, padding: '46px 0 0' }}>
        <div style={{ maxWidth: 560 }}>
          <Reveal>
            <div className="kicker"><span style={{ display: 'inline-flex' }}><Crown w={20} /></span> EPAROX SERİSİ</div>
          </Reveal>
          <Reveal delay={80}>
            <h1 className="display" style={{ fontSize: 'clamp(36px, 5vw, 60px)', marginTop: 20, color: 'var(--ink)', fontWeight: 600 }}>
              Bebeğin burnu için<br /><em>nazik</em> hidrokolloid koruma
            </h1>
          </Reveal>
          <Reveal delay={160}>
            <p style={{ marginTop: 22, fontSize: 18, color: 'var(--body)', maxWidth: 488 }}>
              EPAROX Burun Koruma Bandı; CPAP ve nazal kanül kullanan bebeklerde hassas burun
              cildini basınçtan korur. Kendinden yapışkanlı, lateks içermeyen, tek kullanımlık tıbbi cihaz.
            </p>
          </Reveal>
          <Reveal delay={240}>
            <div style={{ marginTop: 30, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={() => go('detail')}>Ürünü incele <Icon name="arrow" s={17} c="#fff" sw={1.8} /></button>
              <button className="btn btn-ghost" onClick={() => go('products')}>Tüm seriyi gör</button>
            </div>
          </Reveal>
          <Reveal delay={300}>
            <div style={{ marginTop: 28, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
              {['Kendinden yapışkanlı', 'Hidrokolloid', 'Lateks içermez'].map((x) => (
                <span key={x} className="pill"><Icon name="check" s={15} c="var(--sky-deep)" sw={2.2} /> {x}</span>
              ))}
            </div>
          </Reveal>
        </div>

        {/* product stage */}
        <Reveal delay={180} style={{ justifySelf: 'center' }}>
          <div className="hero-stage" style={{ position: 'relative', width: 'min(440px, 86vw)', aspectRatio: '1 / 1', display: 'grid', placeItems: 'center' }}>
            <div aria-hidden="true" style={{ position: 'absolute', width: '46%', height: 22, bottom: '15%', left: '27%', borderRadius: '50%', background: 'rgba(21,36,60,.10)', filter: 'blur(15px)' }} />
            <img src={R(heroImg.img.replace('.jpg', '-cut.png'))} alt={heroImg.name} style={{ position: 'relative', width: '66%', objectFit: 'contain', filter: 'drop-shadow(0 22px 26px rgba(21,36,60,.16))' }} />
            <span style={{ position: 'absolute', top: '11%', right: '11%', background: `var(${heroImg.tone})`, color: '#fff', fontSize: 12.5, fontWeight: 700, padding: '6px 13px', borderRadius: 100, fontFamily: 'var(--font-nav)' }}>SIZE {heroImg.n}</span>
            <div className="float-chip" style={{ position: 'absolute', top: '24%', left: '-5%', background: '#fff', borderRadius: 100, padding: '10px 15px', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 9, fontFamily: 'var(--font-nav)' }}>
              <Icon name="leaf" s={18} c="var(--sky-deep)" /> <span style={{ fontSize: 13, fontWeight: 600 }}>Lateks içermez</span>
            </div>
            <div className="float-chip" style={{ position: 'absolute', bottom: '19%', right: '-6%', background: '#fff', borderRadius: 100, padding: '10px 15px', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 9, fontFamily: 'var(--font-nav)' }}>
              <Icon name="hydro" s={18} c="var(--gold)" /> <span style={{ fontSize: 13, fontWeight: 600 }}>Hidrokolloid</span>
            </div>
          </div>
        </Reveal>
      </div>

      {/* color-coded beden strip */}
      <Reveal delay={120}>
        <div className="hero-swatches" style={{ marginTop: 40, paddingTop: 26, borderTop: '1px solid var(--line)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 18, flexWrap: 'wrap' }}>
          <span style={{ fontSize: 14, color: 'var(--muted)', fontFamily: 'var(--font-nav)', fontWeight: 500 }}>Ağırlığa göre beden ailesi</span>
          <div style={{ display: 'flex', gap: 9, flexWrap: 'wrap' }}>
            {SIZES.map((s) => (
              <button key={s.ref} onClick={() => nav('detail', s.n)} title={s.name} className="swatch-pill"
                style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '7px 14px', borderRadius: 100, border: '1px solid var(--line)', background: '#fff', cursor: 'pointer' }}>
                <span style={{ width: 13, height: 13, borderRadius: '50%', background: `var(${s.tone})`, flexShrink: 0 }} />
                <span style={{ fontSize: 13, fontWeight: 700, fontFamily: 'var(--font-nav)', color: 'var(--ink)', whiteSpace: 'nowrap' }}>{s.wShort}</span>
              </button>
            ))}
          </div>
        </div>
      </Reveal>
    </div>
  );
}

function HeroEditorial({ SIZES, go, nav }) {
  return (
    <div style={{ textAlign: 'center', padding: '50px 0 0' }}>
      <Reveal><div className="kicker center" style={{ display: 'inline-flex' }}><span style={{ display: 'inline-flex' }}><Crown w={20} /></span> EPAROX SERİSİ</div></Reveal>
      <Reveal delay={80}>
        <h1 className="display" style={{ fontSize: 'clamp(36px, 5.4vw, 62px)', marginTop: 16, color: 'var(--ink)', maxWidth: 880, marginInline: 'auto', fontWeight: 600 }}>
          Bebeğin burnu için <em>nazik</em> hidrokolloid koruma
        </h1>
      </Reveal>
      <Reveal delay={150}>
        <p style={{ marginTop: 20, fontSize: 18, color: 'var(--body)', maxWidth: 560, margin: '20px auto 0' }}>
          CPAP ve nazal kanül kullanan bebeklerde hassas burun cildini basınçtan korur.
          Kendinden yapışkanlı, lateks içermeyen tek kullanımlık tıbbi cihaz.
        </p>
      </Reveal>
      <Reveal delay={220}>
        <div style={{ marginTop: 28, display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <button className="btn btn-primary" onClick={() => go('detail')}>Ürünü incele <Icon name="arrow" s={17} c="#fff" sw={1.8} /></button>
          <button className="btn btn-ghost" onClick={() => go('products')}>Tüm seriyi gör</button>
        </div>
      </Reveal>
      <Reveal delay={260}>
        <div className="hero-fan" style={{ marginTop: 46, display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 16, alignItems: 'end' }}>
          {SIZES.map((s, i) => (
            <button key={s.ref} onClick={() => nav('detail', s.n)} className="show-card"
              style={{ background: `linear-gradient(180deg, var(${s.tint}), #fff)`, border: '1px solid var(--line)', borderRadius: 20, padding: '16px 10px 0', cursor: 'pointer', transform: i % 2 ? 'translateY(16px)' : 'none' }}>
              <span style={{ fontSize: 11.5, fontWeight: 700, color: '#fff', background: `var(${s.tone})`, padding: '3px 10px', borderRadius: 100, fontFamily: 'var(--font-nav)' }}>SIZE {s.n}</span>
              <img src={R(s.img.replace('.jpg', '-cut.png'))} alt={s.name} style={{ width: '100%', height: 178, objectFit: 'contain', objectPosition: 'bottom' }} />
            </button>
          ))}
        </div>
      </Reveal>
    </div>
  );
}

Object.assign(window, { HomePage });