// Sections.jsx — InsideSeminar + Testimonials + ClarityStatement
const InsideSeminar = ({ onNavigate, onReserve }) => {
  const { isMobile, isTablet, isCompact } = useYCRBreakpoint();
  const features = [
    { eyebrow: 'Strategy That Lasts', title: 'Generational bank planning', body: 'Understand how stem cell banking fits into a long-view plan for your children, grandchildren, and the decisions that shape their options.', link: 'Explore the approach', target: 'science' },
    { eyebrow: 'Systems Thinking', title: 'Longevity is multifactorial.', body: 'We look at the whole system — cells, inflammation, brain health, resilience, and environment — so your plan makes sense in the real world.', link: 'See the big picture', target: 'science' },
    { eyebrow: 'Topics Covered', title: null, items: ['The difference between adipose (fat) derived stem cells vs. umbilical cord and bone-marrow derived stem cells', 'Autologous vs donor stem cells', 'Stem cell applications for neurodegenerative disease, heart, lung, kidney disease, longevity, cosmetic, and wellness', 'The advantages of having your own stem cell bank'], link: 'View all topics covered', target: 'faq' },
  ];

  const s = {
    section: { background: '#050B16', 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: 800, letterSpacing: '0.20em', textTransform: 'uppercase', color: '#4A9EDB', marginBottom: '14px', display: 'block' },
    h2: { fontSize: 'clamp(36px, 4vw, 52px)', fontWeight: 800, color: '#FFFFFF', lineHeight: 1.06, letterSpacing: 0, marginBottom: '16px' },
    body: { fontSize: '16px', color: '#C8D6E8', 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: '16px', overflow: 'hidden', position: 'relative',
      aspectRatio: isMobile ? '4 / 3' : '16 / 7',
      minHeight: isMobile ? '300px' : 'auto',
      backgroundImage: 'url("../../assets/inside-room-clean.png")',
      backgroundSize: 'cover',
      backgroundPosition: isMobile ? 'center' : 'center',
      backgroundRepeat: 'no-repeat',
      border: '1px solid rgba(126,194,240,0.20)',
      boxShadow: '0 18px 60px rgba(0,0,0,0.45)',
    },
    imagePanelChip: {
      display: 'inline-flex', alignItems: 'center', gap: '7px',
      background: 'rgba(74,158,219,0.10)', border: '1px solid rgba(74,158,219,0.24)',
      borderRadius: '9999px', color: '#D6E3F1', fontSize: '12px', fontWeight: 600,
      padding: '7px 10px',
    },
    imagePanelChipDot: { width: '6px', height: '6px', borderRadius: '50%', background: '#4A9EDB', boxShadow: '0 0 10px rgba(74,158,219,0.65)' },
    cards: { display: 'grid', gridTemplateColumns: isMobile ? '1fr' : isTablet ? '1fr 1fr' : '1fr 1fr 1fr', gap: isMobile ? '14px' : '18px' },
    card: {
      background: '#0A1728', border: '1px solid rgba(126,194,240,0.22)',
      borderRadius: '14px', 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.035)',
    },
    cardEyebrow: { fontSize: '9px', fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#7EC2F0', marginBottom: '10px' },
    cardTitle: { fontSize: '20px', fontWeight: 800, color: '#FFFFFF', lineHeight: 1.22, marginBottom: '12px', flex: 1 },
    cardBody: { fontSize: '14px', color: '#C8D6E8', 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: '#D6E3F1', lineHeight: 1.45 },
    itemDot: { width: '18px', height: '18px', borderRadius: '50%', border: '1.5px solid rgba(74,158,219,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '9px', color: '#4A9EDB', flexShrink: 0 },
    cardLink: { display: 'flex', alignItems: 'center', gap: '8px', marginTop: '20px', fontSize: '13px', color: '#62B4EA', fontWeight: 700, cursor: 'pointer', background: 'none', border: 'none', fontFamily: 'inherit', padding: 0 },
    arrowCircle: { width: '22px', height: '22px', borderRadius: '50%', border: '1.5px solid #4A9EDB', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '10px' },
    cardGenerational: {
      backgroundImage: 'linear-gradient(90deg, rgba(10,23,40,1) 0%, rgba(10,23,40,1) 70%, rgba(10,23,40,0.42) 88%, rgba(10,23,40,0.08) 100%), url("../../assets/inside-card-generational.png")',
      backgroundSize: 'cover, cover',
      backgroundPosition: 'center, right center',
      backgroundRepeat: 'no-repeat',
    },
    cardLongevity: {
      backgroundImage: 'linear-gradient(90deg, rgba(10,23,40,1) 0%, rgba(10,23,40,0.99) 48%, rgba(10,23,40,0.64) 76%, rgba(10,23,40,0.14) 100%), url("../../assets/inside-card-longevity.png")',
      backgroundSize: 'cover, 108%',
      backgroundPosition: 'center, 68% center',
      backgroundRepeat: 'no-repeat',
    },
  };

  return (
    <section style={s.section} id="seminar">
      <div style={s.inner}>
        <div style={s.topRow}>
          <div style={s.leftHead} className="ycr-reveal ycr-delay-1">
            <span style={s.eyebrow}>Inside the Seminar</span>
            <h2 style={s.h2}>Inside the seminar.</h2>
            <p style={s.body}>
              <span style={s.bodyStrong}>A private, focused setting for better questions.</span>
              A high-value, small-group session designed for clear physician guidance, direct discussion, and meaningful conversations about regenerative medicine.
            </p>
            <div style={s.leftMeta}>
              {['Private room', 'Small group', 'Doctor-led'].map(item => (
                <span key={item} style={s.imagePanelChip}>
                  <span style={s.imagePanelChipDot}></span>
                  {item}
                </span>
              ))}
            </div>
          </div>
          <div style={s.imagePanel} className="ycr-reveal ycr-delay-2"></div>
        </div>
        <div style={s.cards}>
          {features.map((f, i) => (
            <div
              key={i}
              className={`ycr-reveal ycr-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(74,158,219,0.10)' : '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 } = useYCRBreakpoint();
  const quotes = [
    { text: "Finally, a conversation that's not sleazy — just science and options.", attr: "Matthew G.", role: "Father of two", tag: "Signal", avatar: '../../assets/testimonial-avatar-matthew.jpg' },
    { text: "The best 90 minutes I've spent thinking about my family's future health.", attr: "John A.", role: "Business Owner", tag: "Planning", avatar: '../../assets/testimonial-avatar-john.jpg' },
    { text: "I came in with questions. I left with a plan I feel good about.", attr: "Sarah L.", role: "Mother & Entrepreneur", tag: "Answers", avatar: '../../assets/testimonial-avatar-sarah.jpg' },
    { text: "Clear, respectful, and focused on what matters most for my parents.", attr: "Daniel S.", role: "Son & Caregiver", tag: "Family", avatar: '../../assets/testimonial-avatar-daniel.jpg' },
  ];
  const proof = ['No hype', 'Real data', 'Direct Q&A', 'Clear next steps'];
  const s = {
    section: { background: '#050B16', padding: isMobile ? '58px 20px 68px' : isTablet ? '70px 48px 78px' : '76px 5vw 88px', position: 'relative', overflow: 'hidden' },
    inner: { maxWidth: '1200px', margin: '0 auto' },
    row: { display:'grid', gridTemplateColumns: isCompact ? '1fr' : '340px 1fr', gap: isMobile ? '28px' : '44px', alignItems:'center' },
    left: { display: 'flex', flexDirection: 'column', gap: '18px' },
    grid: { display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? '12px' : '16px' },
    card: {
      background: 'linear-gradient(180deg, rgba(13,27,46,0.98), rgba(9,20,36,0.98))',
      border: '1px solid rgba(74,158,219,0.18)',
      borderRadius: '14px',
      padding: '22px 24px',
      minHeight: isMobile ? 'auto' : '154px',
      display: 'grid',
      gridTemplateRows: '1fr auto',
      gap: '16px',
      boxShadow: 'inset 0 1px 0 rgba(255,255,255,0.035)',
    },
    tag: {
      fontSize: '9px', fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase',
      color: '#7EC2F0', border: '1px solid rgba(74,158,219,0.18)', borderRadius: '9999px',
      padding: '4px 7px', background: 'rgba(74,158,219,0.06)', flexShrink: 0,
    },
    text: {
      margin: 0,
      fontSize: '14px',
      color: '#D6E3F1',
      lineHeight: 1.58,
      borderLeft: '2px solid rgba(74,158,219,0.55)',
      paddingLeft: '12px',
    },
    attr: { display: 'grid', gridTemplateColumns: isMobile ? '30px 1fr' : '34px 1fr', gap: '10px', alignItems: 'center', fontSize: '12px', color: '#5D718A', lineHeight: 1.35 },
    attrAvatar: {
      width: isMobile ? '30px' : '34px',
      height: isMobile ? '30px' : '34px',
      borderRadius: '50%',
      padding: '2px',
      border: '1px solid rgba(74,158,219,0.32)',
      background: 'linear-gradient(135deg, rgba(126,194,240,0.34), rgba(10,23,40,0.45))',
      boxShadow: '0 0 18px rgba(74,158,219,0.14)',
      overflow: 'hidden',
    },
    attrAvatarImg: {
      width: '100%',
      height: '100%',
      display: 'block',
      borderRadius: '50%',
      objectFit: 'cover',
      filter: 'saturate(0.92) contrast(1.02)',
    },
    attrCopy: { minWidth: 0 },
    attrNameRow: { display: 'flex', alignItems: 'center', gap: '8px', flexWrap: 'wrap', marginBottom: '1px' },
    attrName: { color: '#B8C9DE', fontWeight: 700, display: 'inline-block' },
    clarityWord: {
      fontFamily: "'Cormorant Garamond', Georgia, serif",
      fontSize: isMobile ? 'clamp(70px, 22vw, 96px)' : 'clamp(76px, 8.6vw, 112px)',
      fontWeight: 300, color: '#FFFFFF',
      letterSpacing: 0, lineHeight: 1,
      display: 'block',
    },
    clarityBody: { fontSize: '16px', color: '#B8C9DE', maxWidth: '360px', lineHeight: 1.55 },
    notGeneric: {
      fontFamily: "'Manrope', sans-serif",
      fontSize: 'clamp(30px, 3.2vw, 44px)',
      fontWeight: 800, color: '#FFFFFF',
      letterSpacing: 0, lineHeight: 1.1,
    },
    proof: {
      display: 'grid',
      gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
      gap: isMobile ? '8px 12px' : '10px 14px',
      marginTop: '4px',
      maxWidth: isMobile ? '100%' : '310px',
    },
    proofItem: { display: 'flex', alignItems: 'center', gap: '10px', color: '#D6E3F1', fontSize: '13px', fontWeight: 600 },
    proofIcon: {
      width: '22px', height: '22px', borderRadius: '50%',
      border: '1px solid rgba(74,158,219,0.32)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      color: '#4A9EDB', fontSize: '12px', flexShrink: 0,
    },
  };
  return (
    <section style={s.section} id="clarity">
      <div style={s.inner}>
        <div style={s.row}>
          <div style={s.left} className="ycr-reveal ycr-delay-1">
            <span style={s.clarityWord}>Clarity.</span>
            <div style={s.notGeneric}>Not a generic consultation.</div>
            <p style={s.clarityBody}>This is a private, physician-led seminar with real answers, real data, and time for the questions others don't have time for.</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={`ycr-reveal ycr-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} />
                    </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 });