// Hero.jsx — YCR Seminar Landing Page Hero Section
const Hero = ({ onNavigate, onReserve }) => {
  const { isMobile, isTablet, isCompact, width } = useYCRBreakpoint();
  const sp = 32; // base unit
  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: '#050B16',
    },
    // Photo covers right 58% of viewport
    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,
    },
    // Gradient: strong dark on left, fades out toward right
    photoFade: {
      position: 'absolute', inset: 0,
      background: isMobile
        ? 'linear-gradient(180deg, rgba(5,11,22,0.24) 0%, rgba(5,11,22,0.58) 30%, #050B16 72%, #050B16 100%)'
        : isTablet
          ? 'linear-gradient(90deg, rgba(5,11,22,0.96) 0%, rgba(5,11,22,0.72) 48%, rgba(5,11,22,0.46) 100%)'
          : 'linear-gradient(90deg, #050B16 36%, rgba(5,11,22,0.55) 62%, rgba(5,11,22,0.15) 100%)',
    },
    bottomFade: {
      position: 'absolute', bottom: 0, left: 0, right: 0, height: '160px',
      background: 'linear-gradient(to top, #050B16, transparent)',
      zIndex: 2,
    },
    // Inner layout grid
    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: text content ──
    left: { display: 'flex', flexDirection: 'column', gap: 0 },
    eyebrow: {
      fontSize: '11px', fontWeight: 800, letterSpacing: '0.20em',
      textTransform: 'uppercase', color: '#4A9EDB',
      marginBottom: isMobile ? `${sp * 0.625}px` : '16px', display: 'block',
    },
    h1: {
      fontSize: isMobile ? 'clamp(38px, 10.4vw, 48px)' : isTablet ? 'clamp(48px, 6.8vw, 62px)' : 'clamp(42px, 3.45vw, 58px)', fontWeight: 800,
      color: '#FFFFFF', lineHeight: isMobile ? 1.02 : 1.03, letterSpacing: 0,
      marginBottom: isMobile ? '18px' : '20px',
    },
    accentWord: { color: '#4A9EDB' },
    body: {
      fontSize: isMobile ? '14px' : '15px', color: '#C8D6E8', 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: '#FFFFFF', color: '#050B16', fontSize: '15px', fontWeight: 800,
      padding: isMobile ? '13px 20px' : '13px 26px', borderRadius: '9999px', border: 'none',
      cursor: 'pointer', fontFamily: 'inherit', whiteSpace: 'nowrap',
      justifyContent: 'center',
      flex: isMobile ? '1 1 100%' : '0 0 auto',
    },
    btnGhost: {
      display: 'inline-flex', alignItems: 'center', gap: '8px',
      background: 'transparent', color: '#FFFFFF', fontSize: '15px', fontWeight: 500,
      padding: isMobile ? '13px 20px' : '13px 26px', borderRadius: '9999px',
      border: '1.5px solid rgba(255,255,255,0.28)', cursor: 'pointer',
      fontFamily: 'inherit', whiteSpace: 'nowrap',
      justifyContent: 'center',
      flex: isMobile ? '1 1 100%' : '0 0 auto',
    },
    trust: {
      display: isMobile ? 'none' : 'flex', alignItems: 'flex-start', gap: '10px',
      fontSize: '13px', color: '#7A8FA8', lineHeight: 1.55, maxWidth: '360px',
    },
    trustIcon: {
      width: '20px', height: '20px', borderRadius: '50%', flexShrink: 0,
      border: '1.5px solid rgba(74,158,219,0.4)', marginTop: '1px',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      fontSize: '10px', color: '#4A9EDB',
    },
    // ── Right: glass panels ──
    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, 18, 38, 0.84)',
      backdropFilter: 'blur(26px)', WebkitBackdropFilter: 'blur(26px)',
      border: '1px solid rgba(126,194,240,0.24)',
      borderRadius: '14px',
      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.05)',
    },
    panelIcon: {
      width: '42px', height: '42px', borderRadius: '50%',
      border: '1px solid rgba(126,194,240,0.34)',
      color: '#7EC2F0',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      background: 'linear-gradient(145deg, rgba(126,194,240,0.16), rgba(74,158,219,0.06))',
      boxShadow: '0 0 22px rgba(74,158,219,0.16)',
      marginTop: 0,
    },
    panelContent: { minWidth: 0 },
    panelLabel: {
      fontSize: '9px', fontWeight: 800, letterSpacing: '0.18em',
      textTransform: 'uppercase', color: '#7A8FA8', marginBottom: '6px',
    },
    panelValue: { fontSize: '14px', fontWeight: 700, color: '#D6E3F1', lineHeight: 1.45 },
    panelSub:   { fontSize: '12px', color: '#7A8FA8', marginTop: '3px' },
    panelAccent:{ fontSize: '13px', color: '#00C4A7', fontWeight: 600, marginTop: '5px' },
  };

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

      {/* Content */}
      <div style={s.inner}>
        {/* Left: copy */}
        <div style={s.left} className="ycr-reveal ycr-delay-1">
          <span style={s.eyebrow}>Live in-person seminars and online webinars</span>
          <h1 style={s.h1}>
            Stem cell treatment for serious disease,<br />
            longevity, and wellness<br />
            <span style={s.accentWord}>for the entire family.</span>
          </h1>
          <p style={s.body}>
            A private, physician-led seminar with Gregory A. Smith, M.D., for people who want clear answers about stem cell therapy for serious disease, age reversal, wellness, and stem cell banking that can cover the entire family for great health now and into the future.
          </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>

        {/* Right: glass info panels */}
        <div style={s.right}>
          <div style={s.panel} className="ycr-reveal ycr-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}>Regenerative Medicine Physician<br />20+ Years of Clinical Experience</div>
            </div>
          </div>
          <div style={s.panel} className="ycr-reveal ycr-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}>May 16, 2026<br />June 20, 2026</div>
              <div style={s.panelAccent}>Limited availability</div>
            </div>
          </div>
          <div style={s.panel} className="ycr-reveal ycr-delay-4">
            <div style={s.panelIcon}><InfoIcon type="location" /></div>
            <div style={s.panelContent}>
              <div style={s.panelLabel}>Location</div>
              <div style={s.panelValue}>California, Utah, Georgia<br />Online</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};
Object.assign(window, { Hero });