// Hero.jsx - Red Pill Medical Webinar Landing Hero
// Background framing copied from YCR webinar (ig-physician-portrait + cover/top)
const Hero = ({ onNavigate, onReserve }) => {
  const { isMobile, isTablet, isCompact, width } = window.useRPMBreakpoint();
  const sp = 32;
  const InfoIcon = ({ type }) => {
    const common = { width: 21, height: 21, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 1.8, strokeLinecap: 'round', strokeLinejoin: 'round', 'aria-hidden': true };
    if (type === 'host') return (
      <svg {...common}><path d="M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z" /><path d="M4.5 21a7.5 7.5 0 0 1 15 0" /></svg>
    );
    if (type === 'calendar') return (
      <svg {...common}><path d="M7 3v3" /><path d="M17 3v3" /><path d="M4 8h16" /><rect x="4" y="5" width="16" height="16" rx="2" /><path d="M8 13h.01" /><path d="M12 13h.01" /><path d="M16 13h.01" /></svg>
    );
    return (
      <svg {...common}><path d="M12 21s7-4.6 7-11a7 7 0 1 0-14 0c0 6.4 7 11 7 11Z" /><circle cx="12" cy="10" r="2.4" /></svg>
    );
  };

  const s = {
    section: {
      position: 'relative', minHeight: isMobile ? 'auto' : '100vh',
      overflow: 'hidden', background: '#040404',
    },
    // Same photo setup as YCR webinar
    photo: {
      position: 'absolute',
      top: 0,
      right: 0,
      bottom: isMobile ? 'auto' : 0,
      height: isMobile ? '640px' : 'auto',
      width: isCompact ? '100%' : '60%',
      backgroundImage: 'url(../../assets/ig-physician-portrait.png)',
      backgroundSize: 'cover',
      backgroundPosition: isMobile ? '32% top' : isTablet ? 'center top' : 'center top',
      opacity: isMobile ? 0.82 : 1,
    },
    photoFade: {
      position: 'absolute', inset: 0,
      background: isMobile
        ? 'linear-gradient(180deg, rgba(4,4,4,0.24) 0%, rgba(4,4,4,0.58) 30%, #040404 72%, #040404 100%)'
        : isTablet
          ? 'linear-gradient(90deg, rgba(4,4,4,0.96) 0%, rgba(4,4,4,0.72) 48%, rgba(4,4,4,0.46) 100%)'
          : 'linear-gradient(90deg, #040404 36%, rgba(4,4,4,0.55) 62%, rgba(4,4,4,0.15) 100%)',
    },
    bottomFade: {
      position: 'absolute', bottom: 0, left: 0, right: 0, height: '160px',
      background: 'linear-gradient(to top, #040404, transparent)',
      zIndex: 2,
    },
    inner: {
      position: 'relative', zIndex: 3,
      display: 'grid',
      gridTemplateColumns: isCompact ? '1fr' : '1fr 1fr',
      alignItems: 'center',
      minHeight: isMobile ? 'auto' : '100vh',
      maxWidth: '1280px', margin: '0 auto',
      padding: isMobile ? '104px 20px 72px' : isTablet ? '118px 48px 72px' : `112px ${sp * 2}px 120px`,
      gap: isMobile ? '24px' : isTablet ? '36px' : `${sp * 2}px`,
    },
    left: { display: 'flex', flexDirection: 'column', gap: 0 },
    eyebrow: {
      fontSize: '11px', fontWeight: 700, letterSpacing: '0.25em',
      textTransform: 'uppercase', color: '#C52223',
      marginBottom: isMobile ? `${sp * 0.625}px` : '16px', display: 'block',
    },
    h1: {
      fontFamily: "'Syne', 'Helvetica Neue', Arial, sans-serif",
      fontSize: isMobile ? 'clamp(38px, 10.4vw, 48px)' : isTablet ? 'clamp(48px, 6.8vw, 62px)' : 'clamp(42px, 3.45vw, 58px)', fontWeight: 700,
      color: '#FFFFFF', lineHeight: isMobile ? 1.02 : 1.03, letterSpacing: '-0.02em',
      marginBottom: isMobile ? '18px' : '20px',
    },
    accentWord: { color: '#C52223' },
    body: {
      fontSize: isMobile ? '14px' : '15px', color: '#CBCBCB', lineHeight: isMobile ? 1.56 : 1.6,
      maxWidth: isCompact ? '600px' : '560px', marginBottom: isMobile ? '18px' : '26px',
    },
    ctaRow: {
      display: 'flex', gap: `${sp * 0.375}px`, alignItems: 'center',
      flexWrap: 'wrap', marginBottom: isMobile ? '16px' : `${sp * 0.875}px`,
    },
    btnPrimary: {
      display: 'inline-flex', alignItems: 'center', gap: '8px',
      background: '#C52223', color: '#FFFFFF', fontSize: '14px', fontWeight: 700,
      padding: isMobile ? '13px 20px' : '13px 26px', borderRadius: '0', border: 'none',
      cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap',
      justifyContent: 'center',
      letterSpacing: '0.12em', textTransform: 'uppercase',
      flex: isMobile ? '1 1 100%' : '0 0 auto',
      boxShadow: '0 14px 32px rgba(197,34,35,0.28)',
    },
    trust: {
      display: isMobile ? 'none' : 'flex', alignItems: 'flex-start', gap: '10px',
      fontSize: '13px', color: '#888888', lineHeight: 1.55, maxWidth: '360px',
    },
    trustIcon: {
      width: '20px', height: '20px', borderRadius: '50%', flexShrink: 0,
      border: '1.5px solid rgba(197,34,35,0.45)', marginTop: '1px',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: '10px', color: '#C52223',
    },
    right: {
      display: isCompact ? 'grid' : 'flex',
      gridTemplateColumns: isTablet && width >= 860 ? 'repeat(3, minmax(0, 1fr))' : '1fr',
      flexDirection: 'column',
      gap: isMobile ? '12px' : '14px',
      alignItems: isCompact ? 'stretch' : 'flex-end',
      marginTop: isMobile ? '190px' : 0,
    },
    panel: {
      background: 'rgba(8, 8, 8, 0.84)',
      backdropFilter: 'blur(26px)', WebkitBackdropFilter: 'blur(26px)',
      border: '1px solid rgba(255,255,255,0.10)',
      borderRadius: '0',
      padding: isMobile ? '16px' : '18px',
      width: isCompact ? '100%' : '282px',
      display: 'grid',
      gridTemplateColumns: '42px 1fr',
      gap: '14px',
      alignItems: 'center',
      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.04)',
    },
    panelIcon: {
      width: '42px', height: '42px', borderRadius: '50%',
      border: '1px solid rgba(197,34,35,0.36)',
      color: '#C52223',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'rgba(197,34,35,0.10)',
      marginTop: 0,
    },
    panelContent: { minWidth: 0 },
    panelLabel: {
      fontSize: '9px', fontWeight: 700, letterSpacing: '0.18em',
      textTransform: 'uppercase', color: '#888888', marginBottom: '6px',
    },
    panelValue: { fontSize: '14px', fontWeight: 700, color: '#FFFFFF', lineHeight: 1.45 },
    panelSub:   { fontSize: '12px', color: '#888888', marginTop: '3px' },
    panelAccent:{ fontSize: '13px', color: '#C52223', fontWeight: 600, marginTop: '5px' },
  };

  return (
    <section style={s.section} id="about">
      <div style={s.photo} className="rpm-reveal-soft"></div>
      <div style={s.photoFade}></div>
      <div style={s.bottomFade}></div>

      <div style={s.inner}>
        <div style={s.left} className="rpm-reveal rpm-delay-1">
          <span style={s.eyebrow}>Live online webinar series</span>
          <h1 style={s.h1}>
            Medical CBD<br />
            and stem cell therapy<br />
            <span style={s.accentWord}>how they work together.</span>
          </h1>
          <p style={s.body}>
            A physician-led webinar with Gregory A. Smith, M.D., on medical CBD and its relationship with stem cell therapy. Clear science for providers and patients who want signal, not hype.
          </p>
          <div style={s.ctaRow}>
            <button type="button" style={s.btnPrimary} onClick={()=>{ onReserve && onReserve(); }}>Register for Webinar</button>
          </div>
          <div style={s.trust}>
            <div style={s.trustIcon}>✓</div>
            Trusted guidance. Evidence-backed science. No hype. Just the facts that matter.
          </div>
        </div>

        <div style={s.right}>
          <div style={s.panel} className="rpm-reveal rpm-delay-2">
            <div style={s.panelIcon}><InfoIcon type="host" /></div>
            <div style={s.panelContent}>
              <div style={s.panelLabel}>Hosted By</div>
              <div style={s.panelValue}>Gregory A. Smith, M.D.</div>
              <div style={s.panelSub}>CEO, Red Pill Medical<br />20+ Years of Clinical Experience</div>
            </div>
          </div>
          <div style={s.panel} className="rpm-reveal rpm-delay-3">
            <div style={s.panelIcon}><InfoIcon type="calendar" /></div>
            <div style={s.panelContent}>
              <div style={s.panelLabel}>Upcoming Webinars</div>
              <div style={s.panelValue}>July 27</div>
              <div style={s.panelAccent}>Limited availability</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
Object.assign(window, { Hero });