/* GoldenPharm — Brands page. */
const { Card: BCard, Badge: BBadge } = window.GoldenPharmDesignSystem_2b9ade;
const BI = window.GPIcons;

function BrandsHero() {
  return (
    <section style={{ background: 'linear-gradient(180deg, var(--accent-soft) 0%, #fff 100%)' }}>
      <div className="gp-wrap hero-anim" style={{ paddingTop: 64, paddingBottom: 56, textAlign: 'center', maxWidth: 760, marginInline: 'auto' }}>
        <window.Eyebrow style={{ justifyContent: 'center' }}>Our brands</window.Eyebrow>
        <h1 className="display" style={{ fontSize: 'clamp(40px,4.8vw,62px)', margin: '16px 0 20px' }}>
          Premium European brands, <span className="two-tone-accent">exclusively distributed</span>
        </h1>
        <p className="lede" style={{ marginInline: 'auto', maxWidth: 560 }}>
          GoldenPharm holds authorised distribution agreements with leading European dermocosmetic
          and aesthetic manufacturers — bringing clinically-backed innovation to providers you trust.
        </p>
      </div>
    </section>
  );
}

function BrandShowcase() {
  return (
    <section className="section" style={{ background: '#fff', paddingTop: 24 }}>
      <div className="gp-wrap" style={{ display: 'flex', flexDirection: 'column', gap: 28 }}>
        {window.GP_BRANDS.map((b, i) => (
          <BCard key={b.id} padding={0} className="reveal img-zoom" style={{ overflow: 'hidden' }}>
            <div className="brand-row stack-sm" style={{ display: 'grid', gridTemplateColumns: i % 2 ? '1fr 0.85fr' : '0.85fr 1fr', minHeight: 340 }}>
              {/* visual + text, alternating order */}
              <div style={{ order: i % 2 ? 2 : 1, position: 'relative' }}>
                <window.ImageSlot id={`brand-${b.id}`} src={`assets/photos/brand-${b.id}.jpg`} label={`${b.name} · ${b.origin}`} radius={0} style={{ height: '100%', minHeight: 300 }} />
                <span style={{ position: 'absolute', top: 18, left: 18 }}>
                  <BBadge tone="brand" variant="solid">{b.origin}</BBadge>
                </span>
              </div>
              <div style={{ order: i % 2 ? 1 : 2, padding: '40px 44px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
                <window.BrandMark brand={b} size="lg" />
                <div style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--accent)', margin: '20px 0 10px' }}>{b.tagline}</div>
                <p style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 22px', maxWidth: 460 }}>{b.blurb}</p>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 28 }}>
                  {b.products.map((p) => (
                    <span key={p} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '7px 13px', borderRadius: 'var(--radius-pill)', background: 'var(--accent-soft)', color: 'var(--gp-blue-700)', fontSize: 13, fontWeight: 600 }}>
                      <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent-light)' }} />{p}
                    </span>
                  ))}
                </div>
                <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                  <window.PillButton variant="primary" href={`brand.html?b=${b.id}`} iconRight={BI.arrowRight()}>Learn more</window.PillButton>
                  <window.PillButton variant="light" href={b.url} iconRight={BI.arrowUpRight()}>Visit website</window.PillButton>
                </div>
              </div>
            </div>
          </BCard>
        ))}
      </div>
    </section>
  );
}

function Standards() {
  const items = [
    { icon: 'fileCheck', t: 'ISO 13485', d: 'Medical-device quality management across our aesthetic device lines.' },
    { icon: 'award', t: 'ISO 22716', d: 'Cosmetic Good Manufacturing Practice for dermocosmetic ranges.' },
    { icon: 'shield', t: 'CE marked', d: 'European conformity on every regulated medical device we distribute.' },
    { icon: 'thermometer', t: 'Validated cold chain', d: '2–8 °C integrity maintained from manufacturer to your clinic door.' },
  ];
  return (
    <section className="section" style={{ background: 'var(--gp-surface)' }}>
      <div className="gp-wrap">
        <div style={{ maxWidth: 600, marginBottom: 44 }} className="reveal">
          <window.Eyebrow>Why these brands</window.Eyebrow>
          <h2 className="h2" style={{ marginTop: 14, marginBottom: 14 }}>Every brand we carry meets the same standard</h2>
          <p className="lede">We only partner with manufacturers whose certifications, traceability and clinical evidence match our own commitment to quality.</p>
        </div>
        <div className="why-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 22 }}>
          {items.map((f, i) => (
            <BCard key={f.t} 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: 18 }}>
                <span style={{ width: 24, height: 24, display: 'block' }}>{BI[f.icon]()}</span>
              </span>
              <div style={{ fontSize: 17.5, fontWeight: 700, color: 'var(--text-strong)', marginBottom: 8 }}>{f.t}</div>
              <div style={{ fontSize: 14, lineHeight: 1.6, color: 'var(--text-body)' }}>{f.d}</div>
            </BCard>
          ))}
        </div>
      </div>
    </section>
  );
}

function PartnerCta() {
  return (
    <section style={{ background: 'var(--gp-surface)' }}>
      <div className="gp-wrap" style={{ paddingBottom: 'var(--rhythm)' }}>
        <div className="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(620px 380px at 90% 130%, rgba(65,138,193,0.3), transparent 60%)' }} />
          <div className="stack-sm" style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 0.7fr', gap: 28, alignItems: 'center' }}>
            <div>
              <h2 style={{ fontSize: 'clamp(26px,2.8vw,36px)', fontWeight: 800, letterSpacing: '-0.02em', color: '#fff', margin: '0 0 12px' }}>Represent your brand in our market</h2>
              <p style={{ fontSize: 17, lineHeight: 1.55, color: 'var(--text-on-dark-muted)', margin: 0, maxWidth: 560 }}>
                Are you a manufacturer seeking a trusted, compliant distribution partner? We'd welcome the conversation.
              </p>
            </div>
            <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
              <window.PillButton size="lg" variant="onDark" href="contact.html" iconRight={BI.arrowRight()}>Partner with us</window.PillButton>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function BrandsPage() {
  window.useReveal();
  return (
    <React.Fragment>
      <window.Nav current="brands" />
      <BrandsHero />
      <BrandShowcase />
      <Standards />
      <PartnerCta />
      <window.Footer />
      <window.TweaksController />
    </React.Fragment>
  );
}
window.BrandsPage = BrandsPage;