// Pretty Rare Boutique — Hero

function SiteHero({ onBook, onExplore }) {
  const mobile = useMobile();

  if (mobile) {
    return (
      <section data-screen-label="hero" style={{
        position: 'relative',
        paddingTop: 96,
        paddingBottom: 64,
        overflow: 'hidden',
      }}>
        <div style={{ padding: '0 24px' }}>
          <div style={{ marginBottom: 24, position: 'relative', borderRadius: 12, overflow: 'hidden', aspectRatio: '4/3' }}>
            <div style={{ position: 'absolute', inset: 0, backgroundImage: `url('assets/imagery/hero.jpg')`, backgroundSize: 'cover', backgroundPosition: 'center' }} />
          </div>

          <div className="eyebrow" style={{ marginBottom: 20, marginTop: 32 }}>Cosmetic clinic · Palm Beach, Gold Coast</div>

          <h1 style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 'clamp(52px, 13vw, 72px)', lineHeight: 0.92, letterSpacing: '-0.04em', margin: '0 0 8px' }}>
            Pretty
          </h1>
          <div style={{ fontFamily: 'var(--font-script)', fontSize: 'clamp(44px, 11vw, 60px)', color: 'var(--accent)', lineHeight: 1.1, marginBottom: 4 }}>
            should feel
          </div>
          <h1 style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 'clamp(52px, 13vw, 72px)', lineHeight: 0.92, letterSpacing: '-0.04em', margin: '0 0 28px' }}>
            authentic.
          </h1>

          <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 16, lineHeight: 1.7, color: 'var(--fg-soft)', maxWidth: 400, margin: '0 0 32px' }}>
            A cosmetic clinic in Palm Beach where nothing is rushed, nothing is pushed, and you leave feeling like yourself. Only more so.
          </p>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
            <button className="btn btn--fill" onClick={onBook}>Book a complimentary consultation</button>
            <a className="link-cap" onClick={onExplore} style={{ cursor: 'pointer' }}>Explore treatments</a>
          </div>

          <div style={{ display: 'flex', gap: 20, marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--border)', flexWrap: 'wrap' }}>
            {['Registered Nurse', 'Palm Beach GC', 'No obligation'].map(t => (
              <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
                <span style={{ width: 5, height: 5, background: 'var(--accent)', transform: 'rotate(45deg)', display: 'inline-block', flexShrink: 0 }} />
                <span style={{ fontFamily: 'var(--font-sans)', fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500 }}>{t}</span>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  return (
    <section data-screen-label="hero" style={{
      minHeight: '100vh',
      minHeight: '100svh',
      display: 'grid',
      gridTemplateColumns: '1fr 46vw',
      position: 'relative',
      overflow: 'hidden',
      background: 'var(--bg)',
    }}>
      {/* Text column — aligns with the global wrap container */}
      <div style={{
        paddingLeft: 'max(40px, calc(50vw - 600px))',
        paddingRight: 72,
        paddingTop: 120,
        paddingBottom: 80,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
      }}>
        <div className="eyebrow" style={{ marginBottom: 32 }}>Cosmetic clinic · Palm Beach, Gold Coast</div>

        {/* Three-line headline mixing Jost + Pinyon Script */}
        <div style={{ marginBottom: 32 }}>
          <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 'clamp(64px, 6.5vw, 104px)', lineHeight: 0.92, letterSpacing: '-0.04em', color: 'var(--fg)' }}>
            Pretty
          </div>
          <div style={{ fontFamily: 'var(--font-script)', fontSize: 'clamp(56px, 5.8vw, 92px)', color: 'var(--accent)', lineHeight: 1.05, paddingLeft: 4 }}>
            should feel
          </div>
          <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 'clamp(64px, 6.5vw, 104px)', lineHeight: 0.92, letterSpacing: '-0.04em', color: 'var(--fg)' }}>
            authentic.
          </div>
        </div>

        <p style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 17, lineHeight: 1.75, color: 'var(--fg-soft)', maxWidth: 400, margin: '0 0 40px' }}>
          A cosmetic clinic in Palm Beach where nothing is rushed, nothing is pushed, and you leave feeling like yourself. Only more so.
        </p>

        <div style={{ display: 'flex', gap: 24, alignItems: 'center' }}>
          <button className="btn btn--fill" onClick={onBook}>Book a complimentary consultation</button>
          <a className="link-cap" onClick={onExplore} style={{ cursor: 'pointer' }}>Explore treatments</a>
        </div>

        {/* Trust strip */}
        <div style={{ display: 'flex', gap: 28, marginTop: 48, paddingTop: 28, borderTop: '1px solid var(--border)', flexWrap: 'wrap', alignItems: 'center' }}>
          {['Registered Nurse', 'Palm Beach GC', 'No obligation'].map(t => (
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 7 }}>
              <span style={{ width: 5, height: 5, background: 'var(--accent)', transform: 'rotate(45deg)', display: 'inline-block', flexShrink: 0 }} />
              <span style={{ fontFamily: 'var(--font-sans)', fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--fg-muted)', fontWeight: 500 }}>{t}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Image column — bleeds flush to right viewport edge, no border-radius */}
      <div style={{ position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url('assets/imagery/hero.jpg')`,
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          transition: 'transform 8s ease-out',
        }} />
        {/* Left-edge gradient — image bleeds into page bg */}
        <div style={{
          position: 'absolute', top: 0, bottom: 0, left: 0, width: 80,
          background: 'linear-gradient(to right, var(--bg), transparent)',
          pointerEvents: 'none',
        }} />
      </div>

      {/* Scroll indicator */}
      <div style={{
        position: 'absolute', bottom: 28, left: '50%',
        animation: 'scroll-bounce 2.5s ease-in-out infinite',
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 7,
        cursor: 'pointer', zIndex: 2,
      }} onClick={onExplore}>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 9, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'var(--fg-faint)', fontWeight: 500 }}>Scroll</span>
        <svg width="14" height="18" viewBox="0 0 14 18" fill="none">
          <path d="M7 1v12M1 9l6 6 6-6" stroke="var(--fg-faint)" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
    </section>
  );
}

window.SiteHero = SiteHero;