/* global React, Icon, Button, Badge, Stars */

function Hero({ onShop }) {
  return (
    <section style={{ background: 'linear-gradient(180deg, var(--green-050), var(--cream))' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '64px 28px 56px',
        display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 48, alignItems: 'center' }}>
        <div>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 20 }}>
            <Stars n={5} size={15} />
            <span style={{ fontSize: 14, fontWeight: 600, color: 'var(--green-900)' }}>15,000+ happy customers</span>
          </div>
          <h1 style={{ margin: '0 0 20px', fontSize: 'clamp(38px, 4vw, 54px)', fontWeight: 800,
            letterSpacing: '-.025em', lineHeight: 1.08, color: '#000', textWrap: 'balance' }}>
            Stay regular, even on GLP&#8209;1s.
          </h1>
          <p style={{ fontSize: 20, lineHeight: 1.55, color: 'var(--ink-600)', maxWidth: 460, margin: '0 0 28px' }}>
            Gentle 4000mg psyllium husk fibre with acidophilus. The simple daily capsule
            that eases GLP-1 constipation and keeps digestion comfortable.
          </p>
          <div style={{ display: 'flex', gap: 16, alignItems: 'center', marginBottom: 26 }}>
            <Button variant="primary" onClick={onShop}>Save 61% + Free Gifts</Button>
            <Button variant="ghost" onClick={onShop}>How it works</Button>
          </div>
          <div style={{ display: 'flex', gap: 18, flexWrap: 'wrap' }}>
            <Badge tone="green"><Icon name="leaf" size={14} color="var(--green-600)" />Vegan</Badge>
            <Badge tone="outline">UK made</Badge>
            <Badge tone="outline"><Icon name="flask-conical" size={14} color="var(--green-900)" />3rd-party lab tested</Badge>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{ position: 'absolute', inset: '6% 8%', background: 'radial-gradient(circle, rgba(46,139,98,.18), transparent 70%)', borderRadius: 32 }} />
          <img src="../../assets/product-hero.png" alt="Psyllify bottle"
            style={{ position: 'relative', width: '100%', borderRadius: 24, boxShadow: 'var(--shadow-pop)' }} />
        </div>
      </div>
    </section>
  );
}

function TrustRow() {
  const items = [
    ['truck', 'Fast worldwide shipping'],
    ['headset', '24/7 customer support'],
    ['shield-check', 'Secure payment'],
    ['rotate-ccw', '60-day guarantee']
  ];
  return (
    <div style={{ borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)', background: 'var(--white)' }}>
      <div style={{ maxWidth: 1100, margin: '0 auto', padding: '18px 28px', display: 'flex',
        justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
        {items.map(([ic, t]) => (
          <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 15,
            fontWeight: 600, color: 'var(--green-900)' }}>
            <Icon name={ic} size={20} color="var(--green-600)" />{t}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { Hero, TrustRow });