/* ============================================================
   SALES MEDİKAL — Hakkımızda + İletişim
   →  window.AboutPage, window.ContactPage
   ============================================================ */

/* ====================  HAKKIMIZDA  ==================== */
function AboutPage({ nav, t }) {
  const C = window.SM.COMPANY;
  const radius = t.cardRadius != null ? t.cardRadius : 24;
  const values = [
    { icon: 'baby', title: 'Hassas bakım odağı', text: 'En küçük hastaların en hassas cildi için tasarım. Her ürün nazik koruma önceliğiyle geliştirilir.' },
    { icon: 'shield', title: 'Tıbbi güvenlik', text: 'CE işaretli, MD sınıfı tıbbi cihaz standartları. Lateks içermeyen, hipoalerjenik malzemeler.' },
    { icon: 'sparkle', title: 'Kalite & tutarlılık', text: 'Üretimin her aşamasında izlenebilirlik; LOT, UT ve SKT takibiyle güvenilir parti yönetimi.' },
    { icon: 'leaf', title: 'Sorumlu malzeme', text: 'Cilt dostu hidrokolloid bileşenler ve ölçülü, sade ambalaj yaklaşımı.' },
  ];
  return (
    <main>
      <PageHero kicker="HAKKIMIZDA" crumb="Hakkımızda" nav={nav}
        title="Bebeklerin nazik bakımı için tıbbi çözümler"
        sub="Sales Medikal, hassas ciltler için hidrokolloid burun koruma çözümleri geliştiren bir tıbbi cihaz markasıdır." />

      {/* intro */}
      <section className="sec wrap">
        <div className="about-intro" style={{ display: 'grid', gridTemplateColumns: '1.1fr .9fr', gap: 56, alignItems: 'center' }}>
          <Reveal>
            <div className="kicker"><Crown w={18} /> MARKA HİKÂYESİ</div>
            <h2 className="display" style={{ fontSize: 'clamp(28px,3.8vw,44px)', marginTop: 16, color: 'var(--ink)' }}>
              Küçük detaylar, büyük fark yaratır
            </h2>
            <p style={{ marginTop: 20, fontSize: 17, color: 'var(--body)' }}>
              EPAROX serisi; CPAP ve nazal kanül kullanan bebeklerde burun bölgesinde oluşabilecek
              basınç ve sürtünmeye karşı koruma sağlamak amacıyla geliştirildi. Hidrokolloid yapı,
              kendinden yapışkanlı tasarım ve lateks içermeyen formülasyon ile hassas cilde nazik bir
              dokunuş sunar.
            </p>
            <p style={{ marginTop: 16, fontSize: 17, color: 'var(--body)' }}>
              Adana merkezli üretim altyapımızla, tıbbi cihaz kalite standartlarını sade ve güvenilir
              ürünlerle buluşturuyoruz.
            </p>
            <div style={{ marginTop: 30, display: 'flex', gap: 32, flexWrap: 'wrap' }}>
              {[['5', 'Beden'], ['100%', 'Lateks içermez'], ['CE·MD', 'Sertifikalı']].map(([n, l]) => (
                <div key={l}><div style={{ fontFamily: 'var(--font-display)', fontSize: 34, color: 'var(--navy)' }}>{n}</div><div style={{ fontSize: 14, color: 'var(--muted)', marginTop: 4 }}>{l}</div></div>
              ))}
            </div>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ position: 'relative' }}>
              <div className="card" style={{ borderRadius: 28, overflow: 'hidden', background: 'linear-gradient(160deg, var(--sky-tint), #fff)', boxShadow: 'var(--shadow-lg)' }}>
                <img src={R('assets/pack-blue.jpg')} alt="EPAROX" style={{ width: '100%', height: 440, objectFit: 'contain', padding: '24px' }} />
              </div>
              <div className="float-chip" style={{ position: 'absolute', bottom: 24, left: -20, background: 'var(--navy)', color: '#fff', borderRadius: 16, padding: '16px 20px', boxShadow: 'var(--shadow-md)', display: 'flex', alignItems: 'center', gap: 12 }}>
                <Crown w={26} /> <div><div style={{ fontSize: 15, fontWeight: 600 }}>EPAROX</div><div style={{ fontSize: 12.5, color: 'rgba(255,255,255,.6)' }}>Burun Koruma Bandı</div></div>
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      {/* values */}
      <section style={{ background: 'var(--paper-2)' }}>
        <div className="sec wrap">
          <Reveal className="sec-head center"><div className="kicker center" style={{ display: 'flex', justifyContent: 'center' }}>DEĞERLERİMİZ</div><h2>Bizi yönlendiren ilkeler</h2></Reveal>
          <div className="feat-grid" style={{ marginTop: 48, display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20 }}>
            {values.map((v, i) => (
              <Reveal key={i} delay={i * 80}><div className="card lift" style={{ padding: 30, height: '100%', borderRadius: radius }}>
                <div style={{ width: 56, height: 56, borderRadius: 16, background: 'var(--sky-tint)', display: 'grid', placeItems: 'center', marginBottom: 22 }}><Icon name={v.icon} s={28} c="var(--navy)" sw={1.5} /></div>
                <h3 style={{ fontSize: 18.5, color: 'var(--ink)' }}>{v.title}</h3>
                <p style={{ marginTop: 12, fontSize: 14.5, color: 'var(--body)' }}>{v.text}</p>
              </div></Reveal>
            ))}
          </div>
        </div>
      </section>

      {/* certs band */}
      <section className="sec wrap">
        <Reveal className="center"><div className="crown-rule" style={{ marginBottom: 26 }}><span /><Crown w={30} /><span /></div>
          <h2 className="display center" style={{ fontSize: 'clamp(26px,3.4vw,40px)', color: 'var(--ink)', maxWidth: 640, margin: '0 auto 36px' }}>Uluslararası standartlara uygun üretim</h2>
        </Reveal>
        <Reveal delay={100}><CertStrip /></Reveal>
      </section>

      {/* cta */}
      <section className="wrap" style={{ paddingBottom: 96 }}>
        <Reveal><div style={{ borderRadius: 32, padding: '56px 48px', background: 'var(--navy)', textAlign: 'center', position: 'relative', overflow: 'hidden' }}>
          <div aria-hidden="true" style={{ position: 'absolute', inset: 0, opacity: .14, background: 'radial-gradient(500px 260px at 50% 0%, var(--sky), transparent 60%)' }} />
          <h2 className="display" style={{ position: 'relative', fontSize: 'clamp(26px,3.4vw,40px)', color: '#fff' }}>Birlikte çalışalım</h2>
          <p style={{ position: 'relative', marginTop: 14, fontSize: 17, color: 'rgba(255,255,255,.72)', maxWidth: 540, margin: '14px auto 0' }}>Sağlık kuruluşları ve distribütörler için ürün, numune ve bayilik bilgisi.</p>
          <button className="btn btn-gold" style={{ position: 'relative', marginTop: 30 }} onClick={() => nav('contact')}>İletişime geç <Icon name="arrow" s={16} c="var(--navy)" sw={1.8} /></button>
        </div></Reveal>
      </section>
    </main>
  );
}

/* ====================  İLETİŞİM  ==================== */
function ContactPage({ nav, t }) {
  const C = window.SM.COMPANY;
  const [sent, setSent] = useState(false);
  const [form, setForm] = useState({ name: '', email: '', subject: 'Ürün bilgisi', message: '' });
  const radius = t.cardRadius != null ? t.cardRadius : 24;
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => { e.preventDefault(); setSent(true); };

  const cards = [
    { icon: 'pin', label: 'Adres', value: C.address },
    { icon: 'mail', label: 'E-posta', value: C.email, href: 'mailto:' + C.email },
    { icon: 'web', label: 'Web', value: C.web, href: 'https://' + C.web },
    { icon: 'clock', label: 'Çalışma saatleri', value: 'Hafta içi 09:00 – 18:00' },
  ];

  return (
    <main>
      <PageHero kicker="İLETİŞİM" crumb="İletişim" nav={nav}
        title="Bize ulaşın"
        sub="Ürün bilgisi, numune talebi veya bayilik başvurusu için aşağıdaki formu doldurun ya da doğrudan iletişime geçin." />

      <section className="sec wrap">
        <div className="contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 56, alignItems: 'start' }}>
          {/* info */}
          <div>
            <Reveal><div className="kicker">İLETİŞİM BİLGİLERİ</div>
              <h2 className="display" style={{ fontSize: 'clamp(26px,3.2vw,38px)', marginTop: 14, color: 'var(--ink)' }}>{C.legal}</h2>
            </Reveal>
            <div style={{ marginTop: 30, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              {cards.map((c, i) => (
                <Reveal key={i} delay={i * 70}>
                  <div className="card" style={{ padding: 22, borderRadius: radius, height: '100%' }}>
                    <div style={{ width: 46, height: 46, borderRadius: 12, background: 'var(--sky-tint)', display: 'grid', placeItems: 'center', marginBottom: 14 }}><Icon name={c.icon} s={24} c="var(--navy)" sw={1.6} /></div>
                    <div style={{ fontSize: 12.5, color: 'var(--muted)', letterSpacing: '.04em' }}>{c.label}</div>
                    {c.href
                      ? <a href={c.href} style={{ fontSize: 15.5, fontWeight: 600, color: 'var(--navy)', marginTop: 4, display: 'block' }}>{c.value}</a>
                      : <div style={{ fontSize: 15, fontWeight: 500, color: 'var(--ink)', marginTop: 4, lineHeight: 1.5 }}>{c.value}</div>}
                  </div>
                </Reveal>
              ))}
            </div>
            {/* map placeholder */}
            <Reveal delay={140}>
              <div style={{ marginTop: 16, borderRadius: radius, overflow: 'hidden', border: '1px solid var(--line)', position: 'relative', height: 220, background: 'linear-gradient(135deg, #EAF0F4, #F4F1EA)' }}>
                <div aria-hidden="true" style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px)', backgroundSize: '38px 38px', opacity: .5 }} />
                <div style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center', textAlign: 'center' }}>
                  <div><div style={{ display: 'flex', justifyContent: 'center', marginBottom: 8 }}><Icon name="pin" s={34} c="var(--navy)" /></div>
                    <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--navy)' }}>Çukurova / Adana</div>
                    <div style={{ fontSize: 13, color: 'var(--muted)', marginTop: 2 }}>Harita yer tutucusu</div></div>
                </div>
              </div>
            </Reveal>
          </div>

          {/* form */}
          <Reveal delay={100}>
            <div className="card" style={{ padding: 'clamp(28px,4vw,44px)', borderRadius: 28, boxShadow: 'var(--shadow-md)' }}>
              {sent ? (
                <div style={{ textAlign: 'center', padding: '40px 10px' }}>
                  <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'var(--sky-tint)', display: 'grid', placeItems: 'center', margin: '0 auto 22px' }}><Icon name="check" s={36} c="var(--navy)" sw={2} /></div>
                  <h3 className="display" style={{ fontSize: 28, color: 'var(--ink)' }}>Teşekkürler!</h3>
                  <p style={{ marginTop: 12, fontSize: 16, color: 'var(--body)', maxWidth: 360, margin: '12px auto 0' }}>Mesajınız alındı. Ekibimiz en kısa sürede size geri dönüş yapacaktır.</p>
                  <button className="btn btn-ghost" style={{ marginTop: 26 }} onClick={() => { setSent(false); setForm({ name: '', email: '', subject: 'Ürün bilgisi', message: '' }); }}>Yeni mesaj</button>
                </div>
              ) : (
                <form onSubmit={submit}>
                  <h3 className="display" style={{ fontSize: 26, color: 'var(--ink)', marginBottom: 6 }}>Mesaj gönderin</h3>
                  <p style={{ fontSize: 14.5, color: 'var(--muted)', marginBottom: 24 }}>Tüm alanları doldurmanız önerilir.</p>
                  <div style={{ display: 'grid', gap: 16 }}>
                    <Field label="Ad Soyad"><input required value={form.name} onChange={set('name')} className="inp" placeholder="Adınız" /></Field>
                    <Field label="E-posta"><input required type="email" value={form.email} onChange={set('email')} className="inp" placeholder="ornek@firma.com" /></Field>
                    <Field label="Konu">
                      <select value={form.subject} onChange={set('subject')} className="inp">
                        {['Ürün bilgisi', 'Numune talebi', 'Bayilik başvurusu', 'Diğer'].map((o) => <option key={o}>{o}</option>)}
                      </select>
                    </Field>
                    <Field label="Mesajınız"><textarea required value={form.message} onChange={set('message')} className="inp" rows={5} placeholder="Mesajınızı yazın..." style={{ resize: 'vertical' }} /></Field>
                  </div>
                  <button type="submit" className="btn btn-primary" style={{ marginTop: 24, width: '100%', justifyContent: 'center' }}>Gönder <Icon name="arrow" s={16} c="#fff" sw={1.8} /></button>
                  <p style={{ fontSize: 12.5, color: 'var(--muted)', marginTop: 16, textAlign: 'center' }}>Bu form bir tanıtım prototipidir; gönderim kaydedilmez.</p>
                </form>
              )}
            </div>
          </Reveal>
        </div>
      </section>
    </main>
  );
}

function Field({ label, children }) {
  return (
    <label style={{ display: 'block' }}>
      <span style={{ display: 'block', fontSize: 13.5, fontWeight: 600, color: 'var(--ink)', marginBottom: 8 }}>{label}</span>
      {children}
    </label>
  );
}

Object.assign(window, { AboutPage, ContactPage, Field });