/* GoldenPharm — Home page. */
const { Card: HCard, Badge: HBadge, Stat: HStat } = window.GoldenPharmDesignSystem_2b9ade;
const I = window.GPIcons;

function Pill({ children, active }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 7,
      padding: '8px 16px', borderRadius: 'var(--radius-pill)',
      fontSize: 13.5, fontWeight: 600,
      background: active ? 'var(--accent)' : 'rgba(255,255,255,0.9)',
      color: active ? '#fff' : 'var(--gp-navy-800)',
      border: `1px solid ${active ? 'transparent' : 'var(--border-hairline)'}`,
      boxShadow: 'var(--shadow-1)', whiteSpace: 'nowrap',
    }}>{children}</span>
  );
}

/* ---------------- Hero ---------------- */
function Hero() {
  return (
    <section style={{ background: 'linear-gradient(180deg, var(--accent-soft) 0%, #fff 100%)', position: 'relative', overflow: 'hidden' }}>
      <div className="hero-aurora" aria-hidden="true"><span className="a1"></span><span className="a2"></span><span className="a3"></span></div>
      <div className="hero-grid-lines" aria-hidden="true"></div>
      <div className="gp-wrap" style={{ paddingTop: 64, paddingBottom: 72, position: 'relative', zIndex: 1 }}>
        <div className="stack-sm" style={{ display: 'grid', gridTemplateColumns: '1.04fr 0.96fr', gap: 56, alignItems: 'center' }}>
          {/* left */}
          <div className="hero-anim">
            <span className="eyebrow" style={{ marginBottom: 22, display: 'inline-flex' }}>
              <span style={{ width: 16, height: 16, display: 'inline-flex', color: 'var(--accent-light)' }}>{I.sparkle()}</span>
              Delivering Quality Service
            </span>
            <h1 className="display" style={{ fontSize: 'clamp(44px, 5.2vw, 68px)', marginBottom: 22 }}>
              The trusted partner for every <span className="two-tone-accent">aesthetic</span> need
            </h1>
            <p className="lede" style={{ maxWidth: 480, marginBottom: 32 }}>
              GoldenPharm distributes premium European dermocosmetic and aesthetic brands to
              licensed pharmacies, clinics and physicians — with full cold-chain integrity and
              batch traceability on every order.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 40 }}>
              <window.PillButton size="lg" variant="primary" href="brands.html" iconLeft={I.sparkles()}>Explore our brands</window.PillButton>
              <window.PillButton size="lg" variant="light" href="contact.html" iconRight={I.arrowRight()}>Book a consult</window.PillButton>
            </div>
          </div>

          {/* right visual */}
          <div className="hero-visual" style={{ position: 'relative' }}>
            <window.ImageSlot id="home-hero" src="assets/photos/home-hero.jpg" label="Clinical · treatment photography" radius={24} style={{ height: 540 }} />
            {/* top product chip */}
            <div className="float-soft" style={{ position: 'absolute', top: 26, left: -26, width: 250, zIndex: 2 }}>
              <HCard padding={16} style={{ boxShadow: 'var(--shadow-4)' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 12 }}>
                  <div style={{ display: 'flex', gap: 11, alignItems: 'center' }}>
                    <span style={{ width: 40, height: 40, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center' }}>
                      <span style={{ width: 20, height: 20, display: 'block' }}>{I.droplet()}</span>
                    </span>
                    <div>
                      <div style={{ fontSize: 14.5, fontWeight: 700, color: 'var(--text-strong)' }}>Rejuvea HA</div>
                      <div style={{ fontSize: 12, color: 'var(--text-muted)' }}>Multi-molecular serum</div>
                    </div>
                  </div>
                </div>
                <HBadge tone="success" dot>In stock · ships next day</HBadge>
              </HCard>
            </div>
            {/* consult chip */}
            <div className="float-soft--b" style={{ position: 'absolute', top: 220, right: -22, zIndex: 2 }}>
              <span className="float-chip"><span style={{ width: 22, height: 22, borderRadius: '50%', background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center' }}><span style={{ width: 13, height: 13, display: 'inline-flex' }}>{I.calendar()}</span></span>Consults · Mon–Fri</span>
            </div>
            {/* specialist mini card */}
            <div className="float-soft--c" style={{ position: 'absolute', bottom: 86, right: -10, width: 220, zIndex: 2 }}>
              <HCard padding={16} style={{ boxShadow: 'var(--shadow-4)' }}>
                <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--text-strong)', marginBottom: 4 }}>Authentic, certified supply</div>
                <div style={{ fontSize: 12.5, lineHeight: 1.5, color: 'var(--text-muted)', marginBottom: 12 }}>Every batch traceable to its European manufacturer.</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 9 }}>
                  <span className="avatar" style={{ width: 30, height: 30, fontSize: 12 }}>QA</span>
                  <div style={{ fontSize: 12 }}><b style={{ color: 'var(--text-strong)' }}>Quality team</b><br /><span style={{ color: 'var(--text-muted)' }}>GoldenPharm</span></div>
                </div>
              </HCard>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Standards bar ---------------- */
function StandardsBar() {
  const items = [
    ['GMP certified', 'shield'], ['ISO 13485', 'fileCheck'], ['ISO 22716', 'award'],
    ['CE marked', 'check'], ['2–8 °C cold chain', 'thermometer'],
  ];
  return (
    <div style={{ borderTop: '1px solid var(--border-hairline)', borderBottom: '1px solid var(--border-hairline)', background: '#fff' }}>
      <div className="gp-wrap" style={{ padding: '22px var(--container-gutter)', display: 'flex', alignItems: 'center', gap: 34, flexWrap: 'wrap', justifyContent: 'center' }}>
        {items.map(([label, icon], i) => (
          <span key={label} className="reveal" style={{ display: 'inline-flex', alignItems: 'center', gap: 9, fontSize: 14, fontWeight: 700, color: 'var(--text-muted)', transitionDelay: `${i * 60}ms` }}>
            <span style={{ width: 19, height: 19, display: 'inline-flex', color: 'var(--accent-light)' }}>{I[icon]()}</span>{label}
          </span>
        ))}
      </div>
    </div>
  );
}

/* ---------------- Brands strip ---------------- */
function BrandsStrip() {
  return (
    <section className="section-sm" style={{ background: '#fff' }}>
      <div className="gp-wrap">
        <div className="stack-sm" style={{ display: 'grid', gridTemplateColumns: '0.7fr 1.3fr', gap: 40, alignItems: 'center' }}>
          <div>
            <window.Eyebrow>Brands we distribute</window.Eyebrow>
            <h2 className="h2" style={{ fontSize: 'clamp(26px,2.6vw,34px)', marginTop: 12 }}>Premium European labels, brought to your shelf</h2>
            <a href="brands.html" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginTop: 18, fontWeight: 700, color: 'var(--accent)', fontSize: 15 }}>
              View all brands <span style={{ width: 16, height: 16, display: 'inline-flex' }}>{I.arrowRight()}</span>
            </a>
          </div>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            {window.GP_BRANDS.map((b) => (
              <a key={b.id} href="brands.html" style={{ flex: '1 1 200px' }}>
                <HCard interactive padding={22} style={{ height: '100%' }}>
                  <window.BrandMark brand={b} />
                  <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 14 }}>{b.category}</div>
                </HCard>
              </a>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- Why ---------------- */
function Why() {
  const feats = [
    { icon: 'sparkles', title: 'Authentic European brands', body: 'Direct, authorised distribution agreements — never grey-market. Every product is the genuine article.' },
    { icon: 'thermometer', title: 'Uninterrupted cold chain', body: 'Temperature-sensitive boosters and biologics held and shipped within validated 2–8 °C conditions.' },
    { icon: 'fileCheck', title: 'Full regulatory compliance', body: 'ISO 13485, ISO 22716 and CE documentation available on request for every lot we supply.' },
    { icon: 'truck', title: 'Reliable nationwide delivery', body: 'Next-day distribution to licensed clinics and pharmacies, with 99.8% on-time performance.' },
  ];
  return (
    <section className="section" style={{ background: 'var(--gp-surface)' }}>
      <div className="gp-wrap">
        <div style={{ maxWidth: 640, marginBottom: 48 }} className="reveal">
          <window.Eyebrow>Why GoldenPharm</window.Eyebrow>
          <h2 className="h2" style={{ marginTop: 14, marginBottom: 14 }}>Quality and reliability, built into every order</h2>
          <p className="lede">We are the dependable partner behind the pharmacist and the practitioner — precise, compliant, and on time.</p>
        </div>
        <div className="why-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
          {feats.map((f, i) => (
            <HCard key={f.title} interactive padding={26} className="reveal" style={{ transitionDelay: `${i * 70}ms` }}>
              <span style={{ width: 48, height: 48, borderRadius: 14, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center', marginBottom: 20 }}>
                <span style={{ width: 24, height: 24, display: 'block' }}>{I[f.icon]()}</span>
              </span>
              <div style={{ fontSize: 17.5, fontWeight: 700, color: 'var(--text-strong)', marginBottom: 9, letterSpacing: '-0.01em' }}>{f.title}</div>
              <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-body)' }}>{f.body}</div>
            </HCard>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------------- Stats band ---------------- */
function StatsBand() {
  const stats = [['99.8%', 'On-time delivery'], ['3', 'Exclusive brands'], ['140+', 'Products supplied'], ['26+', 'Years of service']];
  return (
    <section style={{ background: '#fff' }}>
      <div className="gp-wrap" style={{ paddingBottom: 'var(--rhythm)' }}>
        <div className="reveal gp-band" style={{ background: 'var(--gp-navy-900)', borderRadius: 'var(--radius-2xl)', padding: '54px 48px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(720px 420px at 88% 130%, rgba(65,138,193,0.32), transparent 60%)' }} />
          <div className="stats-grid" style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 36 }}>
            {stats.map(([v, l]) => <window.AnimatedStat key={l} value={v} label={l} />)}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- About teaser ---------------- */
function AboutTeaser() {
  return (
    <section className="section" style={{ background: 'var(--gp-surface)' }}>
      <div className="gp-wrap">
        <div className="stack-sm" style={{ display: 'grid', gridTemplateColumns: '0.92fr 1.08fr', gap: 48, alignItems: 'center' }}>
          <div style={{ position: 'relative' }} className="reveal">
            <window.ImageSlot id="home-team" src="assets/photos/home-team.jpg" label="Our distribution & quality team" radius={24} style={{ height: 420 }} />
            <div style={{ position: 'absolute', bottom: 18, left: 18, right: 18, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
              <span className="float-chip" style={{ background: 'var(--gp-navy-900)', color: '#fff', border: 'none' }}>
                <span style={{ width: 20, height: 20, display: 'inline-flex', color: 'var(--gp-blue-300)' }}>{I.award()}</span>Trusted since 2000
              </span>
              <window.CircleArrow href="about.html" tone="dark" size={52} />
            </div>
          </div>
          <div className="reveal" style={{ transitionDelay: '90ms' }}>
            <window.Eyebrow>About us</window.Eyebrow>
            <h2 className="h2" style={{ marginTop: 14, marginBottom: 18 }}>
              Our team is here to deliver the <span className="two-tone-accent">best possible</span> care
            </h2>
            <p className="lede" style={{ marginBottom: 24 }}>
              For more than two decades, GoldenPharm has connected European innovation in dermocosmetics
              with the practitioners who use it. We handle sourcing, compliance, cold-chain logistics and
              support — so clinics can focus on results.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 28 }}>
              {[['Authorised distribution', 'shield'], ['Cold-chain certified', 'thermometer'], ['Practitioner support', 'headset'], ['Documented compliance', 'fileCheck']].map(([t, ic]) => (
                <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 11 }}>
                  <span style={{ width: 34, height: 34, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'grid', placeItems: 'center', flex: '0 0 auto' }}><span style={{ width: 17, height: 17, display: 'inline-flex' }}>{I[ic]()}</span></span>
                  <span style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--text-strong)' }}>{t}</span>
                </div>
              ))}
            </div>
            <window.PillButton variant="primary" href="about.html" iconRight={I.arrowRight()}>Learn more about us</window.PillButton>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------------- CTA ---------------- */
function Cta() {
  return (
    <section style={{ background: 'var(--gp-surface)' }}>
      <div className="gp-wrap" style={{ paddingBottom: 'var(--rhythm)' }}>
        <div className="reveal gp-band" style={{ background: 'var(--accent)', borderRadius: 'var(--radius-2xl)', padding: '54px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32, flexWrap: 'wrap', position: 'relative', overflow: 'hidden' }}>
          <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(600px 360px at 92% 130%, rgba(255,255,255,0.16), transparent 60%)' }} />
          <div style={{ position: 'relative' }}>
            <h2 style={{ fontSize: 'clamp(28px,3vw,38px)', fontWeight: 800, letterSpacing: '-0.02em', color: '#fff', margin: '0 0 10px' }}>Open a wholesale account</h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: 'rgba(255,255,255,0.88)', margin: 0, maxWidth: 540 }}>
              Licensed pharmacies and clinics can order online with next-day delivery and a dedicated account manager.
            </p>
          </div>
          <window.PillButton size="lg" variant="onDark" href="contact.html" iconRight={I.arrowRight()} style={{ position: 'relative' }}>Become a partner</window.PillButton>
        </div>
      </div>
    </section>
  );
}

function HomePage() {
  window.useReveal();
  return (
    <React.Fragment>
      <window.Nav current="home" />
      <Hero />
      <BrandsStrip />
      <Why />
      <StatsBand />
      <AboutTeaser />
      <Cta />
      <window.Footer />
      <window.TweaksController />
    </React.Fragment>
  );
}
window.HomePage = HomePage;