/* global React, INK, CREAM, PULSE, GENS, Sparkle, GradText, CopyHead, PCChip,
   Reveal, useReveal, useCountUp, Shimmer, SectionShell, SB_EASE */
// New sections: § 02 Character builder · § 07 Video studio · § 12 Calendar · § 13 Analytics

const { useState: m2S } = React;

// § 02 Character builder — CB_WIZ + CBTile live in site/site-bits.jsx (shared with mobile)
const { CB_WIZ, CBTile } = window;

const CharBuilderCard = ({ framed = true }) => {
  const [step, setStep] = m2S(CB_WIZ.length);
  const [picks, setPicks] = m2S(() => CB_WIZ.map(w => w.sel));
  const review = step >= CB_WIZ.length;
  const w = CB_WIZ[Math.min(step, CB_WIZ.length - 1)];
  const pct = review ? 100 : Math.round(((step + 1) / CB_WIZ.length) * 100);
  const pick = (i) => setPicks(p => p.map((v, k) => (k === step ? i : v)));
  return (
      <div style={{ borderRadius: 20, background: '#fff', padding: 22,
        boxShadow: framed ? '0 20px 40px rgba(28,27,27,0.10), inset 0 0 0 1px rgba(28,27,27,0.08)' : '0 24px 48px rgba(28,27,27,0.14), inset 0 0 0 1px rgba(28,27,27,0.08)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16 }}>
              <span style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-tertiary)', whiteSpace: 'nowrap' }}>
                {review ? 'Review & generate' : `Step ${step + 1} of ${CB_WIZ.length}`}</span>
              <span style={{ flex: 1, height: 5, borderRadius: 9999, background: 'rgb(235,231,231)', overflow: 'hidden' }}>
                <span style={{ display: 'block', height: '100%', width: `${pct}%`, borderRadius: 9999, background: PULSE, transition: `width 0.4s ${SB_EASE}` }} /></span>
            </div>
            {review ? (
              <div>
                <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', color: INK, marginBottom: 12 }}>Review &amp; generate</div>
                <div style={{ borderRadius: 14, background: CREAM, boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 12 }}>
                  <div style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.09em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 9 }}>Your choices — tap to edit</div>
                  <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 7 }}>
                    {CB_WIZ.map((s, i) => (
                      <span key={s.t} onClick={() => setStep(i)} style={{ display: 'block' }}>
                        <CBTile small name={s.o[picks[i]][0]} src={s.o[picks[i]][1]} on />
                        <span style={{ display: 'block', fontSize: 8, fontWeight: 700, letterSpacing: '0.07em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginTop: 4 }}>{s.t}</span>
                      </span>))}
                  </div>
                </div>
              </div>
            ) : (
              <div>
                <div style={{ fontSize: 22, fontWeight: 800, letterSpacing: '-0.02em', color: INK, marginBottom: 3 }}>{w.t}</div>
                <div style={{ fontSize: 12.5, color: 'var(--text-secondary)', marginBottom: 13 }}>{w.s}</div>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 8 }}>
                  {w.o.map(([n, c], i) => <CBTile key={n} name={n} src={c} on={picks[step] === i} onClick={() => pick(i)} />)}
                </div>
              </div>
            )}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: 16 }}>
              <span onClick={() => setStep(s => Math.max(0, s - 1))} style={{ borderRadius: 9999, padding: '9px 20px', fontSize: 11.5, fontWeight: 600, color: 'rgba(28,27,27,0.62)',
                boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.14)', cursor: 'pointer' }}>Back</span>
              <span onClick={() => setStep(s => (s >= CB_WIZ.length ? 0 : s + 1))} style={{ display: 'inline-flex', alignItems: 'center', gap: 7, borderRadius: 9999, padding: '10px 22px', background: PULSE, color: '#fff',
                fontSize: 11.5, fontWeight: 700, letterSpacing: '0.04em', boxShadow: '0 8px 20px -4px rgba(104,19,212,0.4)', cursor: 'pointer' }}>
                {review ? 'Generate character ✦' : 'Continue →'}</span>
          </div>
      </div>
  );
};

const CharBuilderInner = () => (
  <div style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 64, alignItems: 'center' }}>
    <CopyHead k="builder" />
    <Reveal delay={160}><CharBuilderCard /></Reveal>
  </div>
);

// Combined: Clone Yourself / AI Influencer switcher
const CharacterSection = () => {
  const [who, setWho] = m2S(0);
  return (
    <section style={{ background: CREAM, minHeight: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center',
      padding: '72px 56px', boxSizing: 'border-box' }}>
      <div style={{ maxWidth: 1220, margin: '0 auto', width: '100%' }}>
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 64 }}>
        <div style={{ display: 'inline-flex', gap: 4, padding: 5, borderRadius: 9999, background: '#fff',
          boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.1), 0 4px 14px rgba(28,27,27,0.06)' }}>
          {['Clone Yourself', 'Build AI Influencers'].map((l, i) => (
            <span key={l} onClick={() => setWho(i)} style={{ borderRadius: 9999, padding: '13px 30px', fontSize: 15, fontWeight: 700,
              letterSpacing: '0.02em', cursor: 'pointer', transition: 'all 0.2s',
              background: i === who ? 'linear-gradient(135deg, #6813D4, #813CED)' : 'transparent',
              color: i === who ? '#fff' : 'rgba(28,27,27,0.6)',
              boxShadow: i === who ? '0 8px 20px -4px rgba(104,19,212,0.4)' : 'none' }}>{l}</span>
          ))}
        </div>
      </div>
      {who === 0 ? React.createElement(window.TrainInner) : <CharBuilderInner />}
      </div>
    </section>
  );
};
const VS_TABS = ['Starting image', 'Explore video', 'Clone reel', 'Describe an idea'];

const VSPanel = ({ tab }) => {
  if (tab === 0) return (
    <div>
      <div style={{ display: 'flex', gap: 9, marginBottom: 14 }}>
        {[GENS[1], GENS[3], GENS[7]].map((g, i) => (
          <div key={i} style={{ width: 64, height: 80, borderRadius: 10, overflow: 'hidden', flexShrink: 0,
            backgroundImage: `url(${g.src})`, backgroundSize: 'cover', backgroundPosition: 'center 15%',
            outline: i === 0 ? '2.5px solid var(--brand-purple-500)' : '1px solid rgba(28,27,27,0.1)', outlineOffset: i === 0 ? 2 : 0, opacity: i === 0 ? 1 : 0.6 }} />
        ))}
      </div>
      <div style={{ borderRadius: 12, background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: '11px 14px', fontSize: 12.5, color: INK, marginBottom: 10 }}>
        slow push-in, she turns to camera
      </div>
      <div style={{ display: 'flex', gap: 7, flexWrap: 'wrap' }}>
        {['Slow push-in', 'She turns to camera', 'Hair in the breeze'].map((c, i) => <PCChip key={c} active={i < 2}>{c}</PCChip>)}
      </div>
    </div>
  );
  if (tab === 1) return (
    <div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 9, marginBottom: 12 }}>
        {[GENS[3], GENS[5], GENS[7]].map((g, i) => (
          <div key={i} style={{ position: 'relative', borderRadius: 11, overflow: 'hidden', aspectRatio: '3/4' }}>
            <img loading="lazy" decoding="async" src={g.src} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 15%' }} />
            <span style={{ position: 'absolute', inset: 0, display: 'grid', placeItems: 'center' }}>
              <span style={{ width: 30, height: 30, borderRadius: '50%', background: 'rgba(20,16,23,0.55)', backdropFilter: 'blur(4px)', display: 'grid', placeItems: 'center' }}>
                <svg width="11" height="11" viewBox="0 0 16 16"><path d="M5.5 4l7 4-7 4z" fill="#fff"/></svg>
              </span>
            </span>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
        <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>One-click video-to-video from the reference library.</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11, fontWeight: 600, color: 'rgba(28,27,27,0.55)' }}>
          18+ <svg width="11" height="11" viewBox="0 0 16 16" fill="none"><rect x="3.5" y="7" width="9" height="6.5" rx="1.5" stroke="currentColor" strokeWidth="1.5"/><path d="M5.5 7V5.5a2.5 2.5 0 0 1 5 0V7" stroke="currentColor" strokeWidth="1.5"/></svg>
        </span>
      </div>
    </div>
  );
  if (tab === 2) return (
    <div>
      <div style={{ display: 'flex', gap: 9, marginBottom: 12 }}>
        <div style={{ flex: 1, borderRadius: 12, background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)',
          display: 'flex', alignItems: 'center', gap: 8, padding: '0 14px', height: 44, fontSize: 12.5, color: INK }}>
          <svg width="13" height="13" viewBox="0 0 16 16" fill="none"><path d="M6.5 9.5a3 3 0 0 0 4.2 0l2.4-2.4a3 3 0 1 0-4.2-4.2l-1 1M9.5 6.5a3 3 0 0 0-4.2 0L2.9 8.9a3 3 0 1 0 4.2 4.2l1-1" stroke="rgba(28,27,27,0.5)" strokeWidth="1.5" strokeLinecap="round"/></svg>
          tiktok.com/@sozee.scarlett/video/98…
        </div>
        <span style={{ display: 'inline-flex', alignItems: 'center', borderRadius: 12, padding: '0 16px', height: 44, background: PULSE, color: '#fff',
          fontSize: 11, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', cursor: 'pointer' }}>Clone</span>
      </div>
      <span style={{ fontSize: 12, color: 'var(--text-secondary)' }}>Instagram, TikTok or YouTube — the full story lives one section down.</span>
    </div>
  );
  return (
    <div>
      <div style={{ borderRadius: 12, background: 'rgb(246,243,242)', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.08)', padding: '11px 14px', fontSize: 12.5, color: INK, marginBottom: 10 }}>
        her walking on the beach
      </div>
      <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
        <span style={{ fontSize: 12, lineHeight: 1.5, color: 'var(--text-secondary)', fontStyle: 'italic' }}>
          Enhanced: golden-hour beach walk, barefoot at the waterline, handheld 35mm follow shot, wind in her hair, warm backlight — <b style={{ color: 'var(--brand-purple-700)', fontStyle: 'normal' }}>review before it runs</b>.
        </span>
      </div>
    </div>
  );
};

const VideoStudioSection = () => {
  const [tab, setTab] = m2S(0);
  return (
    <SectionShell>
      <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 64, alignItems: 'center' }}>
        <Reveal>
          <div style={{ borderRadius: 20, background: '#fff', boxShadow: '0 20px 40px rgba(28,27,27,0.10), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 20 }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: INK, marginBottom: 12 }}>Choose your source</div>
            <div style={{ display: 'flex', gap: 3, borderBottom: '1px solid rgba(28,27,27,0.08)', marginBottom: 16, flexWrap: 'wrap' }}>
              {VS_TABS.map((t, i) => (
                <span key={t} onClick={() => setTab(i)} style={{ padding: '7px 11px 9px', fontSize: 12, fontWeight: i === tab ? 700 : 500, cursor: 'pointer',
                  color: i === tab ? 'var(--brand-purple-700)' : 'rgba(28,27,27,0.55)',
                  borderBottom: i === tab ? '2px solid var(--brand-purple-500)' : '2px solid transparent', marginBottom: -1 }}>{t}</span>
              ))}
            </div>
            <div style={{ minHeight: 170 }}><VSPanel tab={tab} /></div>
            <div style={{ display: 'flex', gap: 7, alignItems: 'center', borderTop: '1px solid rgba(28,27,27,0.08)', paddingTop: 13, marginTop: 14 }}>
              {['9:16', '720p'].map(c => <PCChip key={c} active>{c}</PCChip>)}
              <PCChip active>5s</PCChip>
              <PCChip>10s</PCChip>
              <PCChip>15s</PCChip>
              <span style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--text-tertiary)' }}>10–15s · Creator & Agency</span>
            </div>
          </div>
        </Reveal>
        <CopyHead k="video" />
      </div>
    </SectionShell>
  );
};

// ---------- § 12 — Calendar ----------
const CAL_DAYS = [
  ['Mon', [[GENS[0], '#E1306C', '9:00'], [GENS[6], '#1FB85A', '5:00']]],
  ['Tue', [[GENS[3], '#1C1B1B', '1:00']]],
  ['Wed', [[GENS[1], '#E1306C', '9:00'], [GENS[8], '#2699F7', '7:00']]],
  ['Thu', [[GENS[7], '#1FB85A', '12:30']]],
  ['Fri', [[GENS[4], '#E1306C', '9:00'], [GENS[2], '#1C1B1B', '6:00']]],
  ['Sat', [[GENS[5], '#1FB85A', '11:00']]],
  ['Sun', [[GENS[8], '#E1306C', '10:00'], [GENS[0], '#2699F7', '8:00']]],
];

const CalendarSection = () => {
  const [ref, on] = useReveal(0.3);
  return (
    <SectionShell bg="#fff">
      <div ref={ref}>
        <CopyHead center k="calendar" />
        <Reveal delay={160}>
          <div style={{ maxWidth: 980, margin: '48px auto 0', borderRadius: 20, background: CREAM, boxShadow: '0 20px 40px rgba(28,27,27,0.08), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 20 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, flexWrap: 'wrap' }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 12.5, fontWeight: 700, color: INK }}>
                <span style={{ width: 22, height: 22, borderRadius: '50%', backgroundImage: `url(${GENS[0].src})`, backgroundSize: 'cover', backgroundPosition: 'center 15%' }} />
                Scarlett's queue
              </span>
              <span style={{ fontSize: 11.5, color: 'var(--text-tertiary)' }}>Connected: Instagram · TikTok · Fanvue · Fansly</span>
              <span style={{ marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11.5, fontWeight: 700, color: '#22C55E' }}>
                <span style={{ width: 7, height: 7, borderRadius: '50%', background: '#22C55E', animation: 'sz-pulse-dot 1.4s ease-in-out infinite' }} />
                12 posts queued · auto-publish on
              </span>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 8 }}>
              {CAL_DAYS.map(([day, posts], di) => (
                <div key={day} style={{ borderRadius: 12, background: '#fff', boxShadow: 'inset 0 0 0 1px rgba(28,27,27,0.07)', padding: 8, minHeight: 150,
                  opacity: on ? 1 : 0, transform: on ? 'none' : 'translateY(16px)',
                  transition: `opacity 0.5s ${SB_EASE} ${di * 70}ms, transform 0.5s ${SB_EASE} ${di * 70}ms` }}>
                  <div style={{ fontSize: 9.5, fontWeight: 700, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-tertiary)', marginBottom: 7, textAlign: 'center' }}>{day}</div>
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                    {posts.map(([g, c, t], pi) => {
                      const live = di === 0 && pi === 0;
                      return (
                        <div key={pi} style={{ display: 'flex', alignItems: 'center', gap: 6, borderRadius: 8, padding: 4,
                          background: live ? 'var(--brand-purple-50)' : 'rgb(250,248,247)',
                          boxShadow: live ? 'inset 0 0 0 1.5px var(--brand-purple-300)' : 'inset 0 0 0 1px rgba(28,27,27,0.05)' }}>
                          <div style={{ width: 24, height: 30, borderRadius: 5, overflow: 'hidden', flexShrink: 0,
                            backgroundImage: `url(${g.src})`, backgroundSize: 'cover', backgroundPosition: 'center 18%' }} />
                          <div style={{ minWidth: 0 }}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
                              <span style={{ width: 6, height: 6, borderRadius: '50%', background: c, flexShrink: 0,
                                animation: live ? 'sz-pulse-dot 1.2s ease-in-out infinite' : 'none' }} />
                              <span style={{ fontSize: 9, fontWeight: 700, color: live ? 'var(--brand-purple-700)' : 'rgba(28,27,27,0.65)' }}>{live ? 'Now' : t}</span>
                            </div>
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>
      </div>
    </SectionShell>
  );
};

// ---------- § 13 — Analytics ----------
const AN_ROWS = [
  [GENS[3], 'TikTok', '#1C1B1B', 892000, 96200, '9.1%'],
  [GENS[0], 'Instagram', '#E1306C', 214000, 12400, '6.2%'],
  [GENS[1], 'Instagram', '#E1306C', 148000, 11000, '7.4%'],
  [GENS[7], 'Fanvue', '#1FB85A', 68000, 8300, '12.2%'],
];
const anFmt = n => n >= 1000000 ? (n / 1000000).toFixed(1) + 'M' : n >= 1000 ? (n / 1000).toFixed(n >= 100000 ? 0 : 1) + 'k' : n;

const AnCell = ({ v, on }) => {
  const n = useCountUp(v, on, 1400);
  return <span style={{ fontVariantNumeric: 'tabular-nums' }}>{anFmt(n)}</span>;
};

const AnalyticsSection = () => {
  const [ref, on] = useReveal(0.3);
  return (
    <SectionShell>
      <div ref={ref} style={{ display: 'grid', gridTemplateColumns: '0.85fr 1.15fr', gap: 64, alignItems: 'center' }}>
        <div>
          <CopyHead k="analytics" />
          <Reveal delay={240}>
            <div style={{ display: 'flex', gap: 7, marginTop: 26, flexWrap: 'wrap' }}>
              <PCChip>All posts</PCChip>
              <PCChip active>Via Sozee</PCChip>
              <PCChip>Organic</PCChip>
              <span style={{ width: 1, background: 'rgba(28,27,27,0.1)', margin: '0 4px' }} />
              <PCChip>7d</PCChip>
              <PCChip active>30d</PCChip>
              <PCChip>90d</PCChip>
            </div>
          </Reveal>
        </div>
        <Reveal delay={140}>
          <div style={{ borderRadius: 20, background: '#fff', boxShadow: '0 20px 40px rgba(28,27,27,0.08), inset 0 0 0 1px rgba(28,27,27,0.08)', overflow: 'hidden' }}>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 90px 74px 66px', gap: 10, padding: '12px 18px', borderBottom: '1px solid rgba(28,27,27,0.08)',
              fontSize: 10, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-tertiary)' }}>
              <span>Post</span><span style={{ textAlign: 'right' }}>Impressions</span><span style={{ textAlign: 'right' }}>Likes</span><span style={{ textAlign: 'right' }}>Eng.</span>
            </div>
            {AN_ROWS.map(([g, plat, c, imp, likes, eng], i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '1fr 90px 74px 66px', gap: 10, alignItems: 'center', padding: '10px 18px',
                borderBottom: i < AN_ROWS.length - 1 ? '1px solid rgba(28,27,27,0.06)' : 'none' }}>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 10, minWidth: 0 }}>
                  <span style={{ width: 34, height: 42, borderRadius: 7, overflow: 'hidden', flexShrink: 0, backgroundImage: `url(${g.src})`, backgroundSize: 'cover', backgroundPosition: 'center 18%' }} />
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12, fontWeight: 600, color: INK }}>
                    <span style={{ width: 7, height: 7, borderRadius: '50%', background: c }} />{plat}
                    <span style={{ fontSize: 9, fontWeight: 700, letterSpacing: '0.05em', textTransform: 'uppercase', color: 'var(--brand-purple-600)', background: 'var(--brand-purple-50)', borderRadius: 9999, padding: '2px 7px' }}>Via Sozee</span>
                  </span>
                </span>
                <span style={{ textAlign: 'right', fontSize: 13, fontWeight: 700, color: INK }}><AnCell v={imp} on={on} /></span>
                <span style={{ textAlign: 'right', fontSize: 13, fontWeight: 700, color: INK }}><AnCell v={likes} on={on} /></span>
                <span style={{ textAlign: 'right', fontSize: 12.5, fontWeight: 700, color: '#22C55E' }}>{eng}</span>
              </div>
            ))}
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '11px 18px', background: 'rgb(252,248,248)', borderTop: '1px solid rgba(28,27,27,0.08)' }}>
              <span style={{ fontSize: 11.5, color: 'var(--text-secondary)' }}>Via Sozee drove <b style={{ color: 'var(--brand-purple-700)' }}>78%</b> of reach this month</span>
              <span style={{ fontSize: 11.5, fontWeight: 700, color: 'var(--brand-purple-700)', cursor: 'pointer' }}>Open analytics →</span>
            </div>
          </div>
        </Reveal>
      </div>
    </SectionShell>
  );
};

// ---------- Testimonial wall (section 2 — no feature number) ----------
const QUOTES = [
  { q: 'I used to spend 20 hours a week on content. Now it\u2019s 2. Sozee gave me my life back.', who: 'Verified Creator', badge: 'Top 0.2% \u00b7 OF', dark: true },
  { q: 'I post every day now without lifting a camera. My subscribers think I never stop working.', who: 'Verified Creator', badge: 'Top 0.5% \u00b7 Fansly', dark: false },
  { q: 'Went from burnt out to booked out \u2014 the content runs itself now.', who: 'Verified Creator', badge: 'Top 0.3% \u00b7 FanVue', dark: true },
  { q: 'My agency runs 12 creators on Sozee. The ROI is unreal compared to traditional shoots.', who: 'Agency Partner', badge: '12 Characters', dark: false },
  { q: 'No shoots. No burnout. Just endless, on-brand content. My fans have never been more engaged.', who: 'Verified Creator', badge: 'Top 1% \u00b7 OF', dark: true },
];

const QuoteCard = ({ t }) => (
  <div style={{ width: 330, height: '100%', borderRadius: 18, flexShrink: 0, boxSizing: 'border-box',
    background: t.dark ? PULSE : 'var(--brand-purple-100)', color: t.dark ? '#fff' : INK,
    display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '26px 26px 22px' }}>
    <p style={{ margin: 0, fontSize: 18.5, lineHeight: 1.32, fontWeight: 800, letterSpacing: '-0.01em', textWrap: 'pretty' }}>{t.q}</p>
    <div>
      <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 4 }}>{t.who}</div>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 5, fontSize: 11.5, fontWeight: 600, opacity: t.dark ? 0.85 : 0.7 }}>
        <svg width="11" height="11" viewBox="0 0 16 16" fill="none"><path d="M2.5 8.4l3.2 3.2L13.5 4" stroke={t.dark ? '#fff' : '#22C55E'} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        {t.badge}
      </div>
    </div>
  </div>
);

const WallPhoto = ({ g, w = 240 }) => (
  <div style={{ width: w, height: '100%', borderRadius: 18, overflow: 'hidden', flexShrink: 0,
    backgroundImage: `url(${g.src})`, backgroundSize: 'cover', backgroundPosition: 'center 18%' }} />
);

const WallRow = ({ items, speed = 70, reverse = false }) => (
  <div style={{ overflow: 'hidden', height: 330,
    WebkitMaskImage: 'linear-gradient(to right, transparent, #000 5%, #000 95%, transparent)',
    maskImage: 'linear-gradient(to right, transparent, #000 5%, #000 95%, transparent)' }}>
    <div style={{ display: 'flex', gap: 14, height: '100%', width: 'max-content', willChange: 'transform',
      animation: `sz-marquee-x ${speed}s linear infinite ${reverse ? 'reverse' : 'normal'}` }}>
      {[...items, ...items].map((it, i) => it.q ? <QuoteCard key={i} t={it} /> : <WallPhoto key={i} g={it.g} w={it.w} />)}
    </div>
  </div>
);

const wallRow1 = [{ g: GENS[6], w: 230 }, QUOTES[0], { g: GENS[5], w: 250 }, QUOTES[1], { g: GENS[1], w: 230 }, QUOTES[2]];
const wallRow2 = [QUOTES[3], { g: GENS[2], w: 250 }, QUOTES[4], { g: GENS[7], w: 230 }, { g: GENS[4], w: 250 }];

const TestimonialSection = () => {
  const [trackRef, prog] = window.useSmoothScroll();
  const t = Math.min(1, Math.max(0, (prog - 0.3) / 0.35)); // 0 = knockout title · 1 = clear scrolling wall
  const wall = React.useMemo(() => (
    <React.Fragment>
      <WallRow items={wallRow1} speed={74} />
      <WallRow items={wallRow2} speed={88} reverse />
    </React.Fragment>
  ), []);
  return (
    <section style={{ background: '#fff' }}>
      <div ref={trackRef} style={{ height: '220vh' }}>
        <div style={{ position: 'sticky', top: 0, height: '100vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', overflow: 'hidden' }}>
          <div style={{ position: 'relative', isolation: 'isolate' }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 14, transform: 'translateZ(0)',
              filter: t < 1 ? `blur(${((1 - t) * 5).toFixed(1)}px)` : 'none' }}>
              {wall}
            </div>
            {/* cream veil with knockout headline — black text + lighten blend lets the wall show through the letters */}
            <div style={{ position: 'absolute', inset: '-8vh -56px', display: 'grid', placeItems: 'center', pointerEvents: 'none',
              background: 'rgba(252,248,248,0.9)', mixBlendMode: 'lighten',
              opacity: (1 - t).toFixed(3), display: t >= 1 ? 'none' : 'grid' }}>
              <h2 style={{ font: '800 min(108px, 8.2vw)/0.95 var(--font-sans)', letterSpacing: '-0.03em', textTransform: 'uppercase',
                color: '#000', margin: 0, textAlign: 'center',
                transform: `translateY(${(t * -46).toFixed(1)}px) scale(${(1 + t * 0.06).toFixed(4)})`, willChange: 'transform' }}>
                Built for creators<br />who monetize.
              </h2>
            </div>
          </div>
          <div style={{ textAlign: 'center', marginTop: 40 }}>
            {React.createElement(window.CTAButton, {}, 'Join for free')}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { CharacterSection, CharBuilderCard, VideoStudioSection, CalendarSection, AnalyticsSection, TestimonialSection });