// Sections.jsx - InsideWebinar + Testimonials (Red Pill Medical)
const InsideSeminar = ({ onNavigate, onReserve }) => {
  const { isMobile, isTablet, isCompact } = window.useRPMBreakpoint();
  const features = [
    {
      eyebrow: 'Medical CBD',
      title: 'Protocols that providers can use.',
      body: 'Symptom-specific CBD schedules, wholesale product access, and training your staff can actually apply in clinic.',
      link: 'Explore CBD protocols',
      target: 'science',
    },
    {
      eyebrow: 'Stem Cell Therapy',
      title: 'Stem cells with clinical context.',
      body: 'Regenerative options, stem cell banking, and when cellular therapy fits a patient plan, explained in plain clinical language.',
      link: 'Explore stem cell options',
      target: 'science',
    },
    {
      eyebrow: 'Topics Covered',
      title: null,
      items: [
        'How medical CBD, peptides, and stem cell therapy relate in practice',
        'Cannabinoid and peptide techniques for providers',
        'SMART age-reversal protocols and regenerative options',
        'Stem cell banking and when it fits a patient plan',
      ],
      link: 'View all topics covered',
      target: 'faq',
    },
  ];

  const s = {
    section: { background: '#040404', padding: isMobile ? '58px 20px' : isTablet ? '72px 48px' : '92px 5vw', },
    inner: { maxWidth: '1200px', margin: '0 auto' },
    topRow: {
      display: 'grid',
      gridTemplateColumns: isCompact ? '1fr' : 'repeat(3, minmax(0, 1fr))',
      columnGap: isMobile ? '0' : '18px',
      rowGap: isMobile ? '22px' : '28px',
      alignItems: 'stretch',
      marginBottom: isMobile ? '24px' : '40px',
    },
    leftHead: {
      maxWidth: isCompact ? '620px' : '340px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      gridColumn: isCompact ? '1 / -1' : '1 / 2',
      paddingRight: isCompact ? 0 : '12px',
    },
    eyebrow: { fontSize: '11px', fontWeight: 700, letterSpacing: '0.25em', textTransform: 'uppercase', color: '#C52223', marginBottom: '14px', display: 'block' },
    h2: { fontFamily: "'Syne', 'Helvetica Neue', Arial, sans-serif", fontSize: 'clamp(36px, 4vw, 52px)', fontWeight: 700, color: '#FFFFFF', lineHeight: 1.06, letterSpacing: '-0.02em', marginBottom: '16px' },
    body: { fontSize: '16px', color: '#CBCBCB', lineHeight: 1.72 },
    bodyStrong: { display: 'block', color: '#FFFFFF', fontWeight: 700, marginBottom: '8px' },
    leftMeta: { display: 'flex', gap: '8px', flexWrap: 'wrap', marginTop: '22px' },
    imagePanel: {
      gridColumn: isCompact ? '1 / -1' : '2 / 4',
      width: '100%',
      borderRadius: '0', overflow: 'hidden', position: 'relative',
      aspectRatio: isMobile ? '4 / 3' : '16 / 7',
      minHeight: isMobile ? '300px' : 'auto',
      backgroundImage: 'url("../../assets/inside-webinar-clinical.jpg")',
      backgroundSize: 'cover',
      backgroundPosition: 'center',
      backgroundRepeat: 'no-repeat',
      border: '1px solid rgba(255,255,255,0.10)',
      boxShadow: '0 18px 60px rgba(0,0,0,0.45)',
    },
    imagePanelChip: {
      display: 'inline-flex', alignItems: 'center', gap: '7px',
      background: 'rgba(197,34,35,0.10)', border: '1px solid rgba(197,34,35,0.28)',
      borderRadius: '0', color: '#CBCBCB', fontSize: '12px', fontWeight: 600,
      padding: '7px 10px',
    },
    imagePanelChipDot: { width: '6px', height: '6px', borderRadius: '50%', background: '#C52223' },
    cards: { display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : '1fr 1fr 1fr', gap: isMobile ? '14px' : '18px' },
    card: {
      background: '#121212', border: '1px solid rgba(255,255,255,0.10)',
      borderRadius: '0', padding: isMobile ? '22px' : '24px', display: 'flex', flexDirection: 'column',
      minHeight: isMobile ? '230px' : '214px',
      overflow: 'hidden',
      position: 'relative',
      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.03)',
    },
    cardEyebrow: { fontSize: '9px', fontWeight: 700, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#C52223', marginBottom: '10px' },
    cardTitle: { fontFamily: "'Syne', sans-serif", fontSize: '20px', fontWeight: 700, color: '#FFFFFF', lineHeight: 1.22, marginBottom: '12px', flex: 1 },
    cardBody: { fontSize: '14px', color: '#CBCBCB', lineHeight: 1.68, flex: 1, maxWidth: isMobile ? '320px' : 'none' },
    cardItems: { listStyle: 'none', display: 'flex', flexDirection: 'column', gap: '9px', flex: 1 },
    cardItem: { display: 'flex', alignItems: 'flex-start', gap: '8px', fontSize: '14px', color: '#CBCBCB', lineHeight: 1.45 },
    itemDot: { width: '18px', height: '18px', borderRadius: '50%', border: '1.5px solid rgba(197,34,35,0.45)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '9px', color: '#C52223', flexShrink: 0 },
    cardLink: { display: 'flex', alignItems: 'center', gap: '8px', marginTop: '20px', fontSize: '13px', color: '#C52223', fontWeight: 700, cursor: 'pointer', background: 'none', border: 'none', fontFamily: 'inherit', padding: 0 },
    arrowCircle: { width: '22px', height: '22px', borderRadius: '50%', border: '1.5px solid #C52223', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '10px' },
    cardGenerational: {
      backgroundImage: 'linear-gradient(90deg, rgba(4,4,4,0.97) 0%, rgba(4,4,4,0.88) 42%, rgba(4,4,4,0.35) 72%, rgba(4,4,4,0.08) 100%), url("../../assets/card-cbd-protocols.jpg")',
      backgroundSize: 'cover, cover',
      backgroundPosition: 'center, 78% center',
      backgroundRepeat: 'no-repeat',
    },
    cardLongevity: {
      backgroundImage: 'linear-gradient(90deg, rgba(4,4,4,0.97) 0%, rgba(4,4,4,0.88) 42%, rgba(4,4,4,0.35) 72%, rgba(4,4,4,0.08) 100%), url("../../assets/inside-card-longevity.png")',
      backgroundSize: 'cover, cover',
      backgroundPosition: 'center, 82% center',
      backgroundRepeat: 'no-repeat',
    },
  };

  return (
    <section style={s.section} id="seminar">
      <div style={s.inner}>
        <div style={s.topRow}>
          <div style={s.leftHead} className="rpm-reveal rpm-delay-1">
            <span style={s.eyebrow}>Inside the Webinar</span>
            <h2 style={s.h2}>Inside the webinar.</h2>
            <p style={s.body}>
              <span style={s.bodyStrong}>A focused online session for better questions.</span>
              High-value physician guidance on medical CBD, peptides, and stem cell therapy. Practical discussion for providers and patients.
            </p>
            <div style={s.leftMeta}>
              {['Live webinar', 'Doctor-led', 'Direct Q&A'].map(item => (
                <span key={item} style={s.imagePanelChip}>
                  <span style={s.imagePanelChipDot}></span>
                  {item}
                </span>
              ))}
            </div>
          </div>
          <div style={s.imagePanel} className="rpm-reveal rpm-delay-2"></div>
        </div>
        <div style={s.cards}>
          {features.map((f, i) => (
            <div
              key={i}
              className={`rpm-reveal rpm-delay-${Math.min(i + 2, 6)}`}
              id={i===1 ? 'science' : i===2 ? 'faq' : undefined}
              style={{
                ...s.card,
                ...(i===0 ? s.cardGenerational : i===1 ? s.cardLongevity : {}),
                ...(isTablet && i===2 ? { gridColumn: '1 / -1' } : {}),
                boxShadow: i===0 ? '0 0 40px rgba(197,34,35,0.08)' : 'none'
              }}
            >
              <div style={s.cardEyebrow}>{f.eyebrow}</div>
              {f.title && <div style={s.cardTitle}>{f.title}</div>}
              {f.body && <div style={s.cardBody}>{f.body}</div>}
              {f.items && (
                <ul style={s.cardItems}>
                  {f.items.map((item, j) => (
                    <li key={j} style={s.cardItem}>
                      <div style={s.itemDot}>›</div>
                      {item}
                    </li>
                  ))}
                </ul>
              )}
              <button type="button" style={s.cardLink} onClick={()=>{ onReserve && onReserve(); }}>
                <div style={s.arrowCircle}>→</div>
                {f.link}
              </button>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const Testimonials = () => {
  const { isMobile, isTablet, isCompact } = window.useRPMBreakpoint();
  const quotes = [
    {
      text: "I can go to sleep and, more importantly, stay asleep all night, and I don't feel drugged in the morning.",
      attr: 'Patty S.',
      role: 'Patient · Palm Springs, CA',
      tag: 'Rest',
      avatar: '../../assets/testimonial-patty.jpg',
      avatarPosition: '52% 22%',
    },
    {
      text: 'It has really helped my tremors after I took it for about 3 weeks.',
      attr: 'Raymond Z.',
      role: 'Patient · Bristol, CT',
      tag: 'Relief',
      avatar: '../../assets/testimonial-raymond.jpg',
      avatarPosition: '50% 18%',
    },
    {
      text: "I just take it to maintain great health. If you learn about how it works, you know it just keeps your body in balance. I rarely get sick, and I'm almost 80 years old.",
      attr: 'Vera G.',
      role: 'Patient · Henderson, NV',
      tag: 'Balance',
      avatar: '../../assets/testimonial-vera.jpg',
      avatarPosition: '50% 16%',
    },
    {
      text: "I didn't know they were going to put me on the phone with Dr. Smith, and he spent 45 minutes talking to me about everything that was going on with me. I cannot say enough how much this company has helped me.",
      attr: 'Laura F.',
      role: 'Patient · Salt Lake City, UT',
      tag: 'Care',
      avatar: '../../assets/testimonial-laura.jpg',
      avatarPosition: '50% 24%',
    },
  ];
  const proof = ['No hype', 'Real data', 'Direct Q&A', 'Clear next steps'];
  const s = {
    section: { background: '#040404', padding: isMobile ? '64px 20px 72px' : isTablet ? '80px 48px 88px' : '96px 5vw 108px', position: 'relative', overflow: 'hidden' },
    inner: { maxWidth: '1200px', margin: '0 auto' },
    row: {
      display: 'grid',
      gridTemplateColumns: isCompact ? '1fr' : 'minmax(280px, 360px) minmax(0, 1fr)',
      gap: isMobile ? '36px' : isTablet ? '40px' : '64px',
      alignItems: isCompact ? 'stretch' : 'start',
    },
    left: {
      display: 'flex',
      flexDirection: 'column',
      gap: 0,
      paddingTop: isCompact ? 0 : '8px',
    },
    grid: { display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? '12px' : '14px' },
    card: {
      background: 'linear-gradient(180deg, rgba(18,18,18,0.98), rgba(12,12,12,0.98))',
      border: '1px solid rgba(255,255,255,0.10)',
      borderRadius: '0',
      padding: '22px 24px',
      minHeight: isMobile ? 'auto' : '154px',
      display: 'grid',
      gridTemplateRows: '1fr auto',
      gap: '16px',
    },
    tag: {
      fontSize: '9px', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase',
      color: '#C52223', border: '1px solid rgba(197,34,35,0.28)', borderRadius: '0',
      padding: '4px 7px', background: 'rgba(197,34,35,0.08)', flexShrink: 0,
    },
    text: {
      margin: 0,
      fontSize: '14px',
      color: '#CBCBCB',
      lineHeight: 1.58,
      borderLeft: '2px solid #C52223',
      paddingLeft: '12px',
    },
    attr: { display: 'grid', gridTemplateColumns: isMobile ? '40px 1fr' : '44px 1fr', gap: '10px', alignItems: 'center', fontSize: '12px', color: '#888888', lineHeight: 1.35 },
    attrAvatar: {
      width: isMobile ? '40px' : '44px',
      height: isMobile ? '40px' : '44px',
      borderRadius: '50%',
      border: '1px solid rgba(197,34,35,0.36)',
      background: 'rgba(197,34,35,0.10)',
      overflow: 'hidden',
      flexShrink: 0,
    },
    attrAvatarImg: {
      width: '100%',
      height: '100%',
      display: 'block',
      objectFit: 'cover',
    },
    attrCopy: { minWidth: 0 },
    attrNameRow: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', marginBottom: '1px' },
    attrName: { color: '#FFFFFF', fontWeight: 700, display: 'inline-block' },
    clarityWord: {
      fontFamily: "'Syne', 'Helvetica Neue', Arial, sans-serif",
      fontSize: isMobile ? 'clamp(56px, 16vw, 72px)' : 'clamp(64px, 7vw, 88px)',
      fontWeight: 700, color: '#FFFFFF',
      letterSpacing: '-0.03em', lineHeight: 0.95,
      display: 'block',
      margin: 0,
    },
    clarityBody: {
      fontSize: '15px',
      color: '#CBCBCB',
      maxWidth: '34ch',
      lineHeight: 1.65,
      margin: '0 0 28px',
    },
    notGeneric: {
      fontFamily: "'Syne', 'Helvetica Neue', Arial, sans-serif",
      fontSize: isMobile ? 'clamp(24px, 6vw, 32px)' : 'clamp(28px, 2.8vw, 36px)',
      fontWeight: 700, color: '#FFFFFF',
      letterSpacing: '-0.02em', lineHeight: 1.15,
      margin: '14px 0 16px',
      maxWidth: '16ch',
    },
    proof: {
      display: 'grid',
      gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
      gap: isMobile ? '10px 14px' : '12px 16px',
      maxWidth: isMobile ? '100%' : '300px',
    },
    proofItem: { display: 'flex', alignItems: 'center', gap: '10px', color: '#CBCBCB', fontSize: '13px', fontWeight: 600 },
    proofIcon: {
      width: '22px', height: '22px', borderRadius: '50%',
      border: '1px solid rgba(197,34,35,0.36)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#C52223', fontSize: '12px', flexShrink: 0,
    },
  };
  return (
    <section style={s.section} id="clarity">
      <div style={s.inner}>
        <div style={s.row}>
          <div style={s.left} className="rpm-reveal rpm-delay-1">
            <span style={s.clarityWord}>Clarity.</span>
            <div style={s.notGeneric}>Not a generic consultation.</div>
            <p style={s.clarityBody}>Physician-led webinar with real answers on CBD, peptides, and stem cell therapy, and time for the questions others skip.</p>
            <div style={s.proof}>
              {proof.map(item => (
                <div key={item} style={s.proofItem}>
                  <span style={s.proofIcon}>✓</span>
                  {item}
                </div>
              ))}
            </div>
          </div>
          <div>
            <div style={s.grid}>
              {quotes.map((q, i) => (
                <div key={i} style={s.card} className={`rpm-reveal rpm-delay-${Math.min(i + 2, 6)}`}>
                  <blockquote style={s.text}>"{q.text}"</blockquote>
                  <div style={s.attr}>
                    <span style={s.attrAvatar}>
                      <img src={q.avatar} alt="" style={{ ...s.attrAvatarImg, objectPosition: q.avatarPosition }} />
                    </span>
                    <div style={s.attrCopy}>
                      <div style={s.attrNameRow}>
                        <span style={s.attrName}>{q.attr}</span>
                        <span style={s.tag}>{q.tag}</span>
                      </div>
                      <span>{q.role}</span>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { InsideSeminar, Testimonials });