// Longevium — Audience sections (patients, doctors, companies)

// ─────────────────────────────────────────────────────────────────────
// PATIENTS
// ─────────────────────────────────────────────────────────────────────
function AudiencePatients() {
  const t = useT();
  const isMobile = useIsMobile();
  // index.html loads patient-mobile-screens-1/2.jsx synchronously before this file,
  // so the screen components are guaranteed to exist on `window` at render time.
  const screens = [
    { c: <PtScoreScreen T={PM}/> },
    { c: <PtPlanScreen T={PM}/> },
    { c: <PtMealScreen T={PM}/> },
    { c: <PtSleepScreen T={PM}/> },
    { c: <PtMessagesScreen T={PM}/> },
  ];
  const blockIcons = [<LVIcon.Heart size={18}/>, <LVIcon.Activity size={18}/>, <LVIcon.Lock size={18}/>];
  const fallbackIcon = <LVIcon.Sparkles size={18}/>;

  return (
    <div style={{
      background: LV.creamWarm,
      borderTop: `1px solid ${LV.border}`,
      padding: isMobile ? '56px 0 48px' : '100px 0 80px',
      overflowX: 'hidden',
      maxWidth: '100vw',
    }}>
      <LVContainer>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '0.9fr 1.1fr',
          gap: isMobile ? 48 : 80,
          alignItems: 'center',
          marginBottom: isMobile ? 48 : 80,
        }}>
          <div>
            <LVKicker color={LV.teal700}>{t.patients.kicker}</LVKicker>
            <LVHeading size="lg" style={{ marginTop: 20 }}>
              {t.patients.title1}<span style={{ fontStyle: 'italic', color: LV.teal700 }}>{t.patients.titleEm}</span>{t.patients.title2}<br/>
              {t.patients.title3}
            </LVHeading>
            <LVLead style={{ marginTop: 24, maxWidth: 480 }}>
              {t.patients.lead}
            </LVLead>

            <div style={{ display: 'grid', gap: 14, marginTop: 36 }}>
              {t.patients.blocks.map((b, i) => (
                <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                  <span style={{
                    width: 38, height: 38, borderRadius: 10,
                    background: LV.teal50, color: LV.teal700,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>{blockIcons[i] || fallbackIcon}</span>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600, color: LV.ink }}>{b.t}</div>
                    <div style={{ fontSize: 14, color: LV.textSoft, marginTop: 4, lineHeight: 1.55 }}>{b.d}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ marginTop: 36, padding: 20, background: LV.paper, border: `1px solid ${LV.border}`, borderRadius: 14 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{
                  width: 44, height: 44, borderRadius: '50%',
                  background: 'linear-gradient(135deg, #ccfbf1, #5eead4)',
                  color: LV.teal900, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: LV.fontDisplay, fontSize: 18, fontWeight: 700,
                }}>MC</span>
                <div>
                  <div style={{ fontSize: 14, fontWeight: 600, color: LV.ink }}>{t.patients.testimonialName}</div>
                  <div style={{ fontSize: 12, color: LV.textMute }}>{t.patients.testimonialMeta}</div>
                </div>
              </div>
              <div style={{
                marginTop: 14, fontSize: 14, color: LV.textSoft, lineHeight: 1.55,
                fontFamily: LV.fontDisplay, fontStyle: 'italic',
              }}>
                {t.patients.testimonialQuote}
              </div>
            </div>
          </div>

          {/* phones row — fanned (desktop) / auto-rotating carousel (mobile) */}
          {isMobile ? (
            <PhoneCarousel screens={screens}/>
          ) : (
            <div style={{
              position: 'relative', height: 600,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              {screens.map((s, i) => {
                const totalCount = screens.length;
                const center = (totalCount - 1) / 2;
                const offset = i - center;
                const z = totalCount - Math.abs(offset);
                return (
                  <div key={i} style={{
                    position: 'absolute',
                    left: `calc(50% + ${offset * 88}px)`,
                    top: 0,
                    transform: `translateX(-50%) rotate(${offset * 4}deg) translateY(${Math.abs(offset) * 12}px)`,
                    zIndex: z,
                    filter: `drop-shadow(0 ${20 + Math.abs(offset)*6}px ${30 + Math.abs(offset)*6}px rgba(15,55,55,0.18))`,
                  }}>
                    <PhoneShell>
                      <div className="lv-scaled" style={{ width: 402, height: 840, transform: 'scale(0.62)', transformOrigin: 'top left' }}>
                        {s.c}
                      </div>
                    </PhoneShell>
                  </div>
                );
              })}
            </div>
          )}
        </div>

        {/* feature row */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          gap: 0,
          background: LV.paper, border: `1px solid ${LV.border}`,
          borderRadius: 16, overflow: 'hidden',
        }}>
          {t.patients.stats.map((s, i, arr) => {
            const cols = isMobile ? 2 : 4;
            const col = i % cols;
            const row = Math.floor(i / cols);
            const lastRow = Math.floor((arr.length - 1) / cols);
            return (
              <div key={i} style={{
                padding: isMobile ? '20px 20px' : '28px 28px',
                borderRight: col < cols - 1 ? `1px solid ${LV.border}` : 'none',
                borderBottom: row < lastRow ? `1px solid ${LV.border}` : 'none',
              }}>
                <div style={{
                  fontFamily: LV.fontDisplay, fontSize: isMobile ? 36 : 48, color: LV.ink,
                  lineHeight: 1, letterSpacing: -1.5,
                }}>{s.v}</div>
                <div style={{ fontSize: 13.5, color: LV.text, marginTop: 8, fontWeight: 600 }}>{s.l}</div>
                <div style={{ fontSize: 12.5, color: LV.textMute, marginTop: 4 }}>{s.s}</div>
              </div>
            );
          })}
        </div>
      </LVContainer>
    </div>
  );
}

// Auto-rotating phone carousel for mobile — fades through `screens`,
// pauses on user interaction, respects prefers-reduced-motion, dots are clickable.
function PhoneCarousel({ screens, intervalMs = 4000 }) {
  const t = useT();
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');
  // Track resume-from-pause timers so unmount or rapid taps don't stack pending state updates.
  const resumeTimerRef = React.useRef(null);
  const scheduleResume = React.useCallback((delay) => {
    if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current);
    resumeTimerRef.current = setTimeout(() => {
      resumeTimerRef.current = null;
      setPaused(false);
    }, delay);
  }, []);
  React.useEffect(() => () => {
    if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current);
  }, []);

  React.useEffect(() => {
    if (!screens || !screens.length || paused || reducedMotion) return;
    const id = setInterval(() => {
      setActive((prev) => (prev + 1) % screens.length);
    }, intervalMs);
    return () => clearInterval(id);
  }, [paused, reducedMotion, screens && screens.length, intervalMs]);

  if (!screens || !screens.length) return null;

  return (
    <div
      style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}
      onTouchStart={() => { if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current); setPaused(true); }}
      onTouchEnd={() => scheduleResume(4000)}
      onMouseEnter={() => { if (resumeTimerRef.current) clearTimeout(resumeTimerRef.current); setPaused(true); }}
      onMouseLeave={() => setPaused(false)}
      role="region"
      aria-roledescription="carousel"
      aria-label={t.patients.carousel.regionLabel}
    >
      <div style={{ position: 'relative', width: 280, height: 580 }}>
        {screens.map((s, i) => (
          <div key={i}
            aria-hidden={i !== active}
            style={{
              position: 'absolute', inset: 0,
              opacity: i === active ? 1 : 0,
              transform: i === active ? 'scale(1)' : 'scale(0.96)',
              transition: reducedMotion ? 'none' : 'opacity .55s ease, transform .55s ease',
              pointerEvents: i === active ? 'auto' : 'none',
              filter: 'drop-shadow(0 24px 40px rgba(15,55,55,0.20))',
            }}>
            <PhoneShell>
              <div className="lv-scaled" style={{ width: 402, height: 840, transform: 'scale(0.66)', transformOrigin: 'top left' }}>
                {s.c}
              </div>
            </PhoneShell>
          </div>
        ))}
      </div>

      {/* dot indicators */}
      <div style={{ display: 'flex', gap: 8, marginTop: 4 }}>
        {screens.map((_, i) => {
          const isActive = i === active;
          return (
            <button key={i}
              type="button"
              onClick={() => { setActive(i); setPaused(true); scheduleResume(6000); }}
              aria-label={t.patients.carousel.dotLabel(i, screens.length)}
              aria-current={isActive ? 'true' : undefined}
              style={{
                width: isActive ? 28 : 8,
                height: 8, borderRadius: 4,
                background: isActive ? LV.teal700 : LV.borderStrong,
                border: 'none', padding: 0, cursor: 'pointer',
                transition: reducedMotion ? 'none' : 'width .25s ease, background .25s ease',
              }}
            />
          );
        })}
      </div>
    </div>
  );
}

// reusable iPhone-style shell (smaller than full IOSDevice frame)
function PhoneShell({ children, w = 280, h = 580 }) {
  return (
    <div style={{
      width: w, height: h,
      borderRadius: 38,
      background: '#0a0a0a',
      padding: 8,
      boxShadow: '0 0 0 1px #1a1a1a, inset 0 0 0 1px #2a2a2a',
    }}>
      <div style={{
        width: '100%', height: '100%',
        borderRadius: 30,
        overflow: 'hidden',
        background: PM.bg,
        position: 'relative',
      }}>
        {children}
        {/* dynamic island */}
        <div style={{
          position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
          width: 100, height: 28, borderRadius: 14, background: '#0a0a0a', zIndex: 10,
        }}/>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// DOCTORS
// ─────────────────────────────────────────────────────────────────────
function AudienceDoctors({ T }) {
  const t = useT();
  const isMobile = useIsMobile();
  const blockIcons = [<LVIcon.Layers size={18}/>, <LVIcon.Shield size={18}/>, <LVIcon.Activity size={18}/>, <LVIcon.Sparkles size={18}/>];
  const fallbackBlockIcon = <LVIcon.Sparkles size={18}/>;
  return (
    <div id="medicos" style={{
      padding: isMobile ? '64px 0' : '120px 0',
      background: LV.cream,
      borderTop: `1px solid ${LV.border}`,
      overflowX: 'hidden',
      maxWidth: '100vw',
    }}>
      <LVContainer>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '0.95fr 1.05fr',
          gap: isMobile ? 40 : 64,
          alignItems: 'center',
          marginBottom: isMobile ? 48 : 80,
        }}>
          <div style={{
            position: 'relative',
            display: 'flex', justifyContent: 'center',
            minWidth: 0,
            transform: isMobile ? 'none' : 'rotate(-1deg)',
            filter: 'drop-shadow(0 30px 50px rgba(15,55,55,0.16))',
          }}>
            <ScreenFrame width={1280} height={760} scale={isMobile ? 0.24 : 0.48}>
              <AppShell T={T} screen="patient" title="Mariana Corrêa" breadcrumbs={['Pacientes', 'Mariana Corrêa']}>
                <PatientOverviewScreen T={T}/>
              </AppShell>
            </ScreenFrame>
            {/* floating chip — desktop only (overhangs on mobile) */}
            <div style={{
              position: 'absolute', right: isMobile ? 8 : -24, top: isMobile ? 8 : -24,
              display: isMobile ? 'none' : 'flex',
              background: LV.paper, padding: '10px 14px', borderRadius: 12,
              border: `1px solid ${LV.border}`,
              boxShadow: '0 12px 24px -8px rgba(15,55,55,0.12)',
              alignItems: 'center', gap: 10,
              transform: 'rotate(2deg)',
            }}>
              <LVIcon.Trend size={16}/>
              <div>
                <div style={{ fontSize: 11, color: LV.textMute, letterSpacing: 0.4, textTransform: 'uppercase', fontWeight: 600 }}>{t.doctors.chipLabel}</div>
                <div style={{ fontFamily: LV.fontDisplay, fontSize: 18, color: LV.ink }}>74 <span style={{ fontSize: 13, color: LV.teal700 }}>+4</span></div>
              </div>
            </div>
          </div>

          <div>
            <LVKicker>{t.doctors.kicker}</LVKicker>
            <LVHeading size="lg" style={{ marginTop: 20 }}>
              {t.doctors.title1}<span style={{ fontStyle: 'italic', color: LV.teal700 }}>{t.doctors.titleEm}</span>
            </LVHeading>
            <LVLead style={{ marginTop: 24 }}>
              {t.doctors.lead}
            </LVLead>

            <div style={{
              display: 'grid',
              gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
              gap: isMobile ? 12 : 20,
              marginTop: 36,
            }}>
              {t.doctors.blocks.map((b, i) => (
                <div key={i} style={{
                  padding: 18, background: LV.paper, border: `1px solid ${LV.border}`, borderRadius: 14,
                }}>
                  <span style={{
                    display: 'inline-flex', width: 36, height: 36, borderRadius: 10,
                    background: LV.teal50, color: LV.teal700,
                    alignItems: 'center', justifyContent: 'center', marginBottom: 12,
                  }}>{blockIcons[i] || fallbackBlockIcon}</span>
                  <div style={{ fontSize: 14.5, fontWeight: 600, color: LV.ink }}>{b.t}</div>
                  <div style={{ fontSize: 13, color: LV.textMute, marginTop: 6, lineHeight: 1.5 }}>{b.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* dashboard preview big */}
        <div style={{
          background: LV.paper, border: `1px solid ${LV.border}`,
          borderRadius: 20, padding: isMobile ? 20 : 32,
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '0.85fr 1.15fr',
          gap: isMobile ? 24 : 40,
          alignItems: 'center',
        }}>
          <div>
            <LVPill tone="cream"><LVIcon.Stethoscope size={12}/> {t.doctors.pill}</LVPill>
            <LVHeading size="md" style={{ marginTop: 16 }}>
              {t.doctors.dashTitle}
            </LVHeading>
            <LVLead size="sm" style={{ marginTop: 14 }}>
              {t.doctors.dashLead}
            </LVLead>
            <div style={{ display: 'flex', gap: 24, marginTop: 28, paddingTop: 24, borderTop: `1px solid ${LV.border}` }}>
              <div>
                <div style={{ fontFamily: LV.fontDisplay, fontSize: 36, color: LV.ink, lineHeight: 1, letterSpacing: -1 }}>−42%</div>
                <div style={{ fontSize: 12, color: LV.textMute, marginTop: 6 }}>{t.doctors.dashStat1Label}</div>
              </div>
              <div>
                <div style={{ fontFamily: LV.fontDisplay, fontSize: 36, color: LV.ink, lineHeight: 1, letterSpacing: -1 }}>3.4×</div>
                <div style={{ fontSize: 12, color: LV.textMute, marginTop: 6 }}>{t.doctors.dashStat2Label}</div>
              </div>
            </div>
          </div>

          <div style={{
            display: 'flex', justifyContent: 'center',
            minWidth: 0,
            transform: isMobile ? 'none' : 'rotate(0.6deg)',
            filter: 'drop-shadow(0 24px 40px rgba(15,55,55,0.14))',
          }}>
            <ScreenFrame width={1280} height={760} scale={isMobile ? 0.24 : 0.46}>
              <AppShell T={T} screen="dashboard" title="Dashboard" breadcrumbs={['Longevium', 'Médico']}>
                <DashboardScreen T={T}/>
              </AppShell>
            </ScreenFrame>
          </div>
        </div>
      </LVContainer>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────
// COMPANIES — B2B2C
// ─────────────────────────────────────────────────────────────────────
function AudienceCompanies() {
  const t = useT();
  const isMobile = useIsMobile();
  return (
    <div id="empresas" style={{
      padding: isMobile ? '64px 0' : '120px 0',
      background: LV.ink,
      color: LV.cream,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* grid bg */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)`,
        backgroundSize: '64px 64px',
        maskImage: 'linear-gradient(180deg, transparent, black 30%, black 70%, transparent)',
        pointerEvents: 'none',
      }}/>
      {/* glow */}
      <div style={{
        position: 'absolute', top: -200, right: -200, width: 720, height: 720,
        background: `radial-gradient(circle, rgba(20,184,166,0.18) 0%, transparent 60%)`,
        pointerEvents: 'none',
      }}/>

      <LVContainer style={{ position: 'relative' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
          gap: isMobile ? 40 : 64,
          alignItems: 'center',
        }}>
          <div>
            <LVKicker color={LV.teal300}>{t.companies.kicker}</LVKicker>
            <LVHeading size="lg" style={{ marginTop: 20, color: LV.cream }}>
              {t.companies.title1}<span style={{ fontStyle: 'italic', color: LV.teal300 }}>{t.companies.titleEm}</span>{t.companies.title2}<br/>
              {t.companies.title3}
            </LVHeading>
            <LVLead style={{ marginTop: 24, color: 'rgba(250,248,243,0.7)' }}>
              {t.companies.lead}
            </LVLead>

            <div style={{ display: 'grid', gap: 16, marginTop: 36 }}>
              {t.companies.items.map((b, i) => (
                <div key={i} style={{ display: 'flex', gap: 14, paddingBottom: 16, borderBottom: '1px solid rgba(255,255,255,0.08)' }}>
                  <span style={{
                    width: 26, height: 26, borderRadius: 7,
                    background: 'rgba(20,184,166,0.15)', color: LV.teal300,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>
                    <LVIcon.Check size={14}/>
                  </span>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600, color: LV.cream }}>{b.t}</div>
                    <div style={{ fontSize: 13.5, color: 'rgba(250,248,243,0.6)', marginTop: 4, lineHeight: 1.55 }}>{b.d}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
              <LVButton kind="primary" size="md" iconRight={<LVIcon.Arrow size={14}/>} style={{ background: LV.teal500, borderColor: LV.teal500, color: LV.ink }}>
                {t.companies.ctaSales}
              </LVButton>
              <LVButton kind="ghost" size="md" style={{ color: LV.cream, border: `1px solid rgba(255,255,255,0.18)` }}>
                {t.companies.ctaOnePager}
              </LVButton>
            </div>
          </div>

          {/* RH dashboard mock */}
          <CorporateDashboardMock/>
        </div>

        {/* big numbers row */}
        <div style={{
          marginTop: isMobile ? 48 : 80, paddingTop: isMobile ? 32 : 48,
          borderTop: '1px solid rgba(255,255,255,0.08)',
          display: 'grid',
          gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          gap: isMobile ? 24 : 32,
        }}>
          {t.companies.stats.map((s, i) => (
            <div key={i}>
              <div style={{
                fontFamily: LV.fontDisplay, fontSize: isMobile ? 36 : 56, color: LV.teal300,
                lineHeight: 0.95, letterSpacing: isMobile ? -1 : -2,
              }}>{s.v}</div>
              <div style={{ fontSize: 13, color: 'rgba(250,248,243,0.62)', marginTop: 12, lineHeight: 1.5, maxWidth: 240 }}>{s.l}</div>
            </div>
          ))}
        </div>
      </LVContainer>
    </div>
  );
}

function CorporateDashboardMock() {
  const t = useT();
  const m = t.companies.mock;
  return (
    <div style={{
      background: 'rgba(255,255,255,0.04)',
      border: '1px solid rgba(255,255,255,0.10)',
      borderRadius: 16, padding: 24,
      backdropFilter: 'blur(10px)',
    }}>
      {/* header */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 20 }}>
        <div>
          <div style={{ fontSize: 11, color: 'rgba(250,248,243,0.5)', letterSpacing: 1.2, textTransform: 'uppercase', fontWeight: 600 }}>{m.hr}</div>
          <div style={{ fontFamily: LV.fontDisplay, fontSize: 22, color: LV.cream, marginTop: 4 }}>{m.panel}</div>
        </div>
        <div style={{
          padding: '5px 10px', borderRadius: 999,
          background: 'rgba(20,184,166,0.16)', color: LV.teal300,
          fontSize: 11, fontWeight: 600,
        }}>
          {m.active}
        </div>
      </div>

      {/* big metric */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
        <div style={{
          padding: 18, borderRadius: 12,
          background: 'rgba(255,255,255,0.03)',
          border: '1px solid rgba(255,255,255,0.08)',
        }}>
          <div style={{ fontSize: 11, color: 'rgba(250,248,243,0.5)', letterSpacing: 0.4, textTransform: 'uppercase' }}>{m.score}</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
            <span style={{ fontFamily: LV.fontDisplay, fontSize: 44, color: LV.cream, lineHeight: 1 }}>67</span>
            <span style={{ fontSize: 14, color: LV.teal300, fontWeight: 600 }}>+5.2</span>
          </div>
          <div style={{ fontSize: 11, color: 'rgba(250,248,243,0.5)', marginTop: 6 }}>{m.scoreSub}</div>
        </div>
        <div style={{
          padding: 18, borderRadius: 12,
          background: 'rgba(255,255,255,0.03)',
          border: '1px solid rgba(255,255,255,0.08)',
        }}>
          <div style={{ fontSize: 11, color: 'rgba(250,248,243,0.5)', letterSpacing: 0.4, textTransform: 'uppercase' }}>{m.lpr}</div>
          <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginTop: 8 }}>
            <span style={{ fontFamily: LV.fontDisplay, fontSize: 44, color: LV.cream, lineHeight: 1 }}>184</span>
            <span style={{ fontSize: 14, color: 'rgba(250,248,243,0.5)' }}>{m.lprDenominator}</span>
          </div>
          <div style={{ fontSize: 11, color: 'rgba(250,248,243,0.5)', marginTop: 6 }}>{m.lprSub}</div>
        </div>
      </div>

      {/* domain bars */}
      <div style={{ marginTop: 20 }}>
        <div style={{ fontSize: 11, color: 'rgba(250,248,243,0.5)', letterSpacing: 0.4, textTransform: 'uppercase', marginBottom: 14 }}>
          {m.domainsLabel}
        </div>
        {m.domains.map((d, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 10 }}>
            <span style={{ fontSize: 12, color: 'rgba(250,248,243,0.7)', width: 70 }}>{d.l}</span>
            <div style={{ flex: 1, height: 8, borderRadius: 4, background: 'rgba(255,255,255,0.06)', overflow: 'hidden' }}>
              <div style={{ width: `${d.v}%`, height: '100%', background: `linear-gradient(90deg, ${LV.teal500}, ${LV.teal300})` }}/>
            </div>
            <span style={{ fontFamily: LV.fontMono, fontSize: 12, color: LV.cream, width: 32, textAlign: 'right' }}>{d.v}</span>
            <span style={{ fontSize: 11, color: LV.teal300, fontWeight: 600, width: 28 }}>{d.d}</span>
          </div>
        ))}
      </div>

      <div style={{
        marginTop: 18, padding: 12, borderRadius: 10,
        background: 'rgba(20,184,166,0.08)', border: '1px solid rgba(20,184,166,0.20)',
        fontSize: 12, color: 'rgba(250,248,243,0.85)', lineHeight: 1.5,
      }}>
        <b style={{ color: LV.teal300 }}>{m.insightLabel}</b>{m.insightText}
      </div>
    </div>
  );
}

// expose
Object.assign(window, { AudiencePatients, AudienceDoctors, AudienceCompanies });