// Round 2 — Hero (2 variations), repositioned

// Smooth-scroll to the "How it works" section. Used by the hero secondary CTA.
function scrollToHowItWorks(e) {
  if (e && e.preventDefault) e.preventDefault();
  const el = typeof document !== 'undefined' && document.getElementById('how-it-works');
  if (el && typeof el.scrollIntoView === 'function') {
    el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

function Hero({ variant = 'A', copy, onCta }) {
  if (variant === 'B') return <HeroSplit copy={copy} onCta={onCta} />;
  return <HeroTypographic copy={copy} onCta={onCta} />;
}

function HeroTypographic({ copy, onCta }) {
  const h = copy.hero;
  // Track viewport so we can switch to vertical layout on mobile.
  const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const onR = () => setW(window.innerWidth);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);
  const isMobile = w < 768;
  const isTablet = w >= 768 && w < 1024;
  // 50/50 on tablet, 55/45 on desktop
  const cols = isTablet ? '1fr 1fr' : '55fr 45fr';

  // Mobile: keep the original vertical layout
  if (isMobile) {
    return (
      <Section pad="lg" style={{ paddingTop: 'clamp(40px, 7vw, 100px)', paddingBottom: 48 }}>
        <Eyebrow>{h.eyebrowA}</Eyebrow>
        <div style={{ height: 28 }} />
        <Display size="xl">
          {h.titleA[0]}<br />
          <em style={{ fontStyle: 'italic', fontWeight: 320 }}>
            <span style={{ borderBottom: `1px solid ${TOKENS.color.pink}`, paddingBottom: 2 }}>
              {h.titleA[1]}
            </span>
          </em>
        </Display>
        <div style={{ height: 28 }} />
        <p style={{
          maxWidth: 580, margin: 0,
          fontFamily: TOKENS.font.sans, fontSize: 'clamp(15px, 1.4vw, 17px)',
          lineHeight: 1.55, color: TOKENS.color.inkSoft, textWrap: 'pretty',
        }}>{h.subA}</p>
        <div style={{ height: 36 }} />
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <Btn variant="primary" size="lg" onClick={onCta}>{copy.cta}</Btn>
          <Btn variant="ghost" size="lg" onClick={scrollToHowItWorks}>{h.ctaSecondary}</Btn>
        </div>
      </Section>
    );
  }

  // Desktop / tablet: split-screen, image full-bleed to the right edge.
  return (
    <section style={{
      width: '100%',
      background: TOKENS.color.ivory,
      position: 'relative',
      paddingBottom: 80,
    }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: cols,
        alignItems: 'stretch',
      }}>
        {/* LEFT — content, vertically centered with generous padding */}
        <div style={{
          display: 'flex', flexDirection: 'column', justifyContent: 'center',
          padding: 'clamp(48px, 7vw, 110px) clamp(32px, 6vw, 96px)',
          paddingRight: 'clamp(28px, 4vw, 72px)',
        }}>
          <div style={{ maxWidth: 640 }}>
            <Eyebrow>{h.eyebrowA}</Eyebrow>
            <div style={{ height: 28 }} />
            <Display size={isTablet ? 'lg' : 'xl'} style={{ lineHeight: 1.02 }}>
              {h.titleA[0]}<br />
              <em style={{ fontStyle: 'italic', fontWeight: 320 }}>
                <span style={{ borderBottom: `1px solid ${TOKENS.color.pink}`, paddingBottom: 2 }}>
                  {h.titleA[1]}
                </span>
              </em>
            </Display>
            <div style={{ height: 44 }} />
            <p style={{
              maxWidth: 540, margin: 0,
              fontFamily: TOKENS.font.sans, fontSize: 'clamp(15px, 1.2vw, 17px)',
              lineHeight: 1.55, color: TOKENS.color.inkSoft, textWrap: 'pretty',
            }}>{h.subA}</p>
            <div style={{ height: 36 }} />
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Btn variant="primary" size="lg" onClick={onCta}>{copy.cta}</Btn>
              <Btn variant="ghost" size="lg" onClick={scrollToHowItWorks}>{h.ctaSecondary}</Btn>
            </div>
          </div>
        </div>

        {/* RIGHT — full-bleed image, flush to viewport right edge */}
        <div style={{ position: 'relative', overflow: 'hidden' }}>
          <img
            src="assets/images/hero.webp"
            alt="Sunlit Colombian medical consult interior with physician"
            style={{
              position: 'absolute', inset: 0,
              width: '100%', height: '100%',
              objectFit: 'cover',
              objectPosition: '78% center',
              display: 'block',
              borderTopLeftRadius: 'clamp(8px, 1vw, 14px)',
            }}
          />
        </div>
      </div>
    </section>
  );
}

function HeroSplit({ copy, onCta }) {
  const h = copy.hero;
  return (
    <Section pad="lg" style={{ paddingTop: 'clamp(32px, 5vw, 80px)' }}>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
        gap: 'clamp(32px, 4vw, 64px)', alignItems: 'center',
      }}>
        <div>
          <Eyebrow>{h.eyebrowA}</Eyebrow>
          <div style={{ height: 24 }} />
          <Display size="xl">
            {h.titleB[0]}<br />
            {h.titleB[1]}<br />
            <em style={{ fontStyle: 'italic', fontWeight: 320, color: TOKENS.color.navySoft }}>
              <span style={{ borderBottom: `1px solid ${TOKENS.color.pink}`, paddingBottom: 2 }}>{h.titleB[2]}</span>
            </em>
          </Display>
          <div style={{ height: 24 }} />
          <p style={{
            margin: 0, fontFamily: TOKENS.font.sans,
            fontSize: 'clamp(15px, 1.3vw, 17px)',
            lineHeight: 1.55, color: TOKENS.color.inkSoft, textWrap: 'pretty',
          }}>{h.subB}</p>
          <div style={{ height: 32 }} />
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Btn variant="primary" size="lg" onClick={onCta}>{copy.cta}</Btn>
            <Btn variant="ink" size="lg" onClick={scrollToHowItWorks}>{h.ctaSecondary} →</Btn>
          </div>
        </div>
        <div>
          <Imagery label="[ PORTRAIT — POST-RECOVERY, CONFIDENT SMILE ]" aspect="4/5" tone="warm" />
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { Hero });