// landing.jsx — responsive (mobile + desktop) + i18n

const CDN = '/frontend/assets/';

const REFERENCE_SLIDES = [
  { images: [CDN+'reference1-1-9e52dff8.webp', CDN+'reference1-2-4e4525f1.webp', CDN+'reference1-3-f8ca8a9a.webp'], video: CDN+'reference1.mp4' },
  { images: [CDN+'referenceChina2-1-fa6ce117.webp', CDN+'referenceChina2-2-6305572a.webp', CDN+'referenceChina2-3-1da23e96.webp'], video: CDN+'referenceChina2.mp4' },
  { images: [CDN+'reference3-1-aacd1e93.webp', CDN+'reference3-2-4dcf1a34.webp', CDN+'reference3-3-e48eac56.webp'], video: CDN+'reference3.mp4' },
];
const I2V_SLIDES = [
  { from: CDN+'man-first-b1805e6c.webp',     video: CDN+'i2v-man.mp4' },
  { from: CDN+'imageChina1-1-59866e85.webp', video: CDN+'i2v-china1.mp4' },
  { from: CDN+'image3-1-3ef70758.webp',       video: CDN+'i2v-image3.mp4' },
];
const FEATURE_IMGS = [CDN+'ability1-f6937f83.webp', CDN+'ability2-ce0109cb.webp', CDN+'ability3-fae52eca.webp'];
const TEMPLATE_IMGS = [CDN+'template1-a3871cf5.webp', CDN+'template2-d00aa5ec.webp', CDN+'template3-2929203a.webp', CDN+'chineseWomen-578147cd.webp', CDN+'tamplate3-08aa58fc.webp', CDN+'banner5-f5f8e907.webp'];
const CASE_IMGS = [CDN+'case-new1.webp', CDN+'creat4-3d0d2761.webp', CDN+'case-new2.webp', CDN+'creat6-fa1a4a32.webp', CDN+'case-new3.webp', CDN+'creat2-9767a973.webp', CDN+'creat3-f3991d9c.webp'];
const COMMUNITY_IMGS = [CDN+'image13-0bff0a93.webp', CDN+'image1-65c70b29.webp', CDN+'image2-2bd38261.webp', CDN+'image3-2365f902.webp', CDN+'image5-026301b6.webp', CDN+'image9-7780b44b.webp', CDN+'image7-ad3b6592.webp', CDN+'image15-e2b3524a.webp', CDN+'image11-983b87c9.webp'];
const USER_AVATARS = [CDN+'userImageChina1-70ed1a18.webp', CDN+'userImageChina2-a4d679d9.webp', CDN+'userImageChina3-97972b0d.webp', CDN+'userImageChina4-5a2c61f5.webp', CDN+'userImageChina5-d968467b.webp', CDN+'userImageChina6-9a3d5358.webp'];

// useCarousel + Carousel are now global from shared.jsx

// useBreakpoint() is now global from shared.jsx

// ─── Section Badge ────────────────────────────────────────────────────────────
const SectionBadge = ({ text, color = 'var(--accent)' }) => (
  <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px', borderRadius: 999, background: `${color}14`, border: `1px solid ${color}33`, fontSize: 12, color, fontWeight: 600, letterSpacing: '0.06em', textTransform: 'uppercase', marginBottom: 20 }}>
    <span style={{ width: 6, height: 6, borderRadius: '50%', background: color, display: 'inline-block' }} />
    {text}
  </div>
);

const SectionTitle = ({ children, size, mb = 16 }) => (
  <h2 style={{ fontSize: size || 48, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.03em', margin: `0 0 ${mb}px`, background: 'linear-gradient(135deg,#fff 0%,rgba(255,255,255,0.7) 100%)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', whiteSpace: 'pre-line' }}>
    {children}
  </h2>
);

// ─── Dot indicators ───────────────────────────────────────────────────────────
const Dots = ({ count, active, onSelect, color = 'var(--accent)' }) => (
  <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
    {Array.from({ length: count }).map((_, i) => (
      <button key={i} onClick={() => onSelect(i)} style={{ width: i === active ? 24 : 8, height: 8, borderRadius: 4, border: 'none', cursor: 'pointer', transition: 'all .3s', background: i === active ? color : 'rgba(255,255,255,0.15)', padding: 0 }} />
    ))}
  </div>
);

// ─── Reference Section ────────────────────────────────────────────────────────
const ReferenceSection = () => {
  const { t } = useI18n();
  const { isMobile } = useBreakpoint();
  const [slide, setSlide] = useCarousel(REFERENCE_SLIDES.length);
  const videoRefs = React.useRef([]);
  // Pause/play videos on slide change
  React.useEffect(() => {
    videoRefs.current.forEach((v, i) => {
      if (!v) return;
      if (i === slide) { v.currentTime = 0; v.play().catch(() => {}); }
      else { v.pause(); }
    });
  }, [slide]);
  const visual = (
    <div style={{ display: 'flex', gap: isMobile ? 10 : 14, alignItems: 'center' }}>
      {/* Left: preload all ref image sets, show active */}
      <div style={{ display: 'flex', flexDirection: 'column', gap: 8, flex: '0 0 auto', width: isMobile ? 100 : 130 }}>
        {[0, 1, 2].map(imgIdx => (
          <div key={imgIdx} style={{ borderRadius: 12, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.1)', aspectRatio: '3/4', position: 'relative', background: 'rgba(255,255,255,0.03)' }}>
            {REFERENCE_SLIDES.map((s, si) => (
              <img key={si} src={s.images[imgIdx]} alt="" style={{ position: si === 0 ? 'relative' : 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: si === slide ? 'block' : 'none' }} />
            ))}
            <div style={{ position: 'absolute', bottom: 6, left: 6, padding: '2px 6px', borderRadius: 4, background: 'rgba(0,0,0,0.72)', fontSize: 9, color: 'var(--fg-2)', fontWeight: 500, zIndex: 1 }}>{t('landing.ref.refLabel')} {imgIdx + 1}</div>
          </div>
        ))}
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5, flexShrink: 0 }}>
        <div style={{ width: 34, height: 34, borderRadius: '50%', background: 'linear-gradient(135deg,rgba(34,211,238,0.18),rgba(167,139,250,0.18))', border: '1px solid rgba(34,211,238,0.35)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
        </div>
        <div style={{ fontSize: 9, color: 'var(--accent)', letterSpacing: '0.05em', fontWeight: 600 }}>AI</div>
      </div>
      {/* All videos preloaded, only active one visible */}
      <div style={{ flex: 1, borderRadius: 14, overflow: 'hidden', border: '1px solid rgba(34,211,238,0.35)', boxShadow: '0 0 40px rgba(34,211,238,0.15)', aspectRatio: '9/16', position: 'relative', background: '#06080f' }}>
        {REFERENCE_SLIDES.map((s, i) => (
          <video key={i} ref={el => videoRefs.current[i] = el} src={s.video} muted loop playsInline preload="auto"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: i === slide ? 'block' : 'none' }} />
        ))}
        <div style={{ position: 'absolute', bottom: 8, left: 8, padding: '3px 8px', borderRadius: 5, background: 'rgba(34,211,238,0.9)', fontSize: 10, color: '#06080f', fontWeight: 700, zIndex: 1 }}>{t('landing.ref.genLabel')}</div>
      </div>
    </div>
  );
  return (
    <section style={{ padding: isMobile ? '60px 20px' : '100px 60px', background: 'linear-gradient(180deg,#06080f 0%,#080d18 100%)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '10%', right: '5%', width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle,rgba(34,211,238,0.07) 0%,transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1440, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 80, alignItems: 'center' }}>
        <div>
          <SectionBadge text={t('landing.ref.badge')} />
          <SectionTitle size={isMobile ? 34 : 52}>{t('landing.ref.title')}</SectionTitle>
          <p style={{ fontSize: isMobile ? 15 : 16, color: 'var(--fg-2)', lineHeight: 1.65, margin: '0 0 12px' }}>{t('landing.ref.desc1')}</p>
          <p style={{ fontSize: isMobile ? 14 : 15, color: 'var(--fg-3)', lineHeight: 1.6, margin: '0 0 28px' }}>{t('landing.ref.desc2')}</p>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <a href="/create2video?tab=ref" className="yt-btn yt-btn-primary" style={{ height: 44, padding: '0 22px', fontSize: 14, textDecoration: 'none' }}>{t('landing.ref.tryBtn')}</a>
            <a href="/discover" className="yt-btn yt-btn-ghost" style={{ height: 44, padding: '0 22px', fontSize: 14, textDecoration: 'none' }}>{t('landing.ref.casesBtn')}</a>
          </div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {visual}
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Dots count={REFERENCE_SLIDES.length} active={slide} onSelect={setSlide} />
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── I2V Section ──────────────────────────────────────────────────────────────
const I2VSection = () => {
  const { t } = useI18n();
  const { isMobile } = useBreakpoint();
  const [slide, setSlide] = useCarousel(I2V_SLIDES.length, 4200);
  const i2vVideoRefs = React.useRef([]);
  React.useEffect(() => {
    i2vVideoRefs.current.forEach((v, i) => {
      if (!v) return;
      if (i === slide) { v.currentTime = 0; v.play().catch(() => {}); }
      else { v.pause(); }
    });
  }, [slide]);
  const cur = I2V_SLIDES[slide];
  const imgPair = (
    <div style={{ display: 'flex', gap: isMobile ? 12 : 20, alignItems: 'center', justifyContent: 'center' }}>
      <div style={{ flex: 1, borderRadius: 14, overflow: 'hidden', border: '1px solid rgba(255,255,255,0.08)', aspectRatio: '3/4', position: 'relative' }}>
        {/* Preload all first-frame images, show active */}
        {I2V_SLIDES.map((s, i) => (
          <img key={i} src={s.from} alt="" style={{ position: i === 0 ? 'relative' : 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: i === slide ? 'block' : 'none' }} />
        ))}
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, textAlign: 'center', fontSize: 10, color: 'var(--fg-3)', background: 'rgba(0,0,0,0.6)', padding: '3px 0', zIndex: 1 }}>{t('landing.i2v.firstLabel')}</div>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, flexShrink: 0 }}>
        <div style={{ width: 36, height: 36, borderRadius: '50%', background: 'linear-gradient(135deg,rgba(34,211,238,0.15),rgba(167,139,250,0.15))', border: '1px solid rgba(34,211,238,0.3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="9 18 15 12 9 6"/></svg>
        </div>
        <div style={{ fontSize: 9, color: 'var(--fg-3)', letterSpacing: '0.04em' }}>AI</div>
      </div>
      <div style={{ flex: 1, borderRadius: 14, overflow: 'hidden', border: '1px solid rgba(167,139,250,0.3)', aspectRatio: '3/4', position: 'relative', boxShadow: '0 0 30px rgba(167,139,250,0.12)', background: '#06080f' }}>
        {I2V_SLIDES.map((s, i) => (
          <video key={i} ref={el => i2vVideoRefs.current[i] = el} src={s.video} muted loop playsInline preload="auto"
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', display: i === slide ? 'block' : 'none' }} />
        ))}
        <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, textAlign: 'center', fontSize: 10, color: '#fff', background: 'rgba(167,139,250,0.75)', padding: '3px 0', fontWeight: 600, zIndex: 1 }}>{t('landing.i2v.resultLabel')}</div>
      </div>
    </div>
  );
  return (
    <section style={{ padding: isMobile ? '60px 20px' : '100px 60px', background: '#080d18', position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: '20%', left: 0, width: 400, height: 400, borderRadius: '50%', background: 'radial-gradient(circle,rgba(167,139,250,0.07) 0%,transparent 70%)', pointerEvents: 'none' }} />
      <div style={{ maxWidth: 1440, margin: '0 auto', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 80, alignItems: 'center' }}>
        {isMobile ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {imgPair}
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Dots count={I2V_SLIDES.length} active={slide} onSelect={setSlide} color="#a78bfa" />
            </div>
          </div>
        ) : null}
        <div>
          <SectionBadge text={t('landing.i2v.badge')} color="#a78bfa" />
          <SectionTitle size={isMobile ? 34 : 52}>{t('landing.i2v.title')}</SectionTitle>
          <p style={{ fontSize: isMobile ? 15 : 16, color: 'var(--fg-2)', lineHeight: 1.65, margin: '0 0 12px' }}>{t('landing.i2v.desc1')}</p>
          <p style={{ fontSize: isMobile ? 14 : 15, color: 'var(--fg-3)', lineHeight: 1.6, margin: '0 0 28px' }}>{t('landing.i2v.desc2')}</p>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 12, marginBottom: 28 }}>
            {['feat1','feat2','feat3'].map(k => (
              <div key={k} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
                <span style={{ color: '#a78bfa', fontWeight: 700, flexShrink: 0 }}>→</span>
                <span style={{ fontSize: 14, color: 'var(--fg-1)', lineHeight: 1.5 }}>{t('landing.i2v.'+k)}</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
            <a href="/create2video?tab=frames" className="yt-btn yt-btn-primary" style={{ height: 44, padding: '0 22px', fontSize: 14, textDecoration: 'none' }}>{t('landing.i2v.startBtn')}</a>
          </div>
        </div>
        {!isMobile ? (
          <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
            {imgPair}
            <div style={{ display: 'flex', justifyContent: 'center' }}>
              <Dots count={I2V_SLIDES.length} active={slide} onSelect={setSlide} color="#a78bfa" />
            </div>
          </div>
        ) : null}
      </div>
    </section>
  );
};

// ─── Why Choose Us ────────────────────────────────────────────────────────────
const WhyUsSection = () => {
  const { t } = useI18n();
  const { isMobile, isTablet } = useBreakpoint();
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const timer = setInterval(() => setActive(i => (i + 1) % 3), 3500);
    return () => clearInterval(timer);
  }, []);
  return (
    <section style={{ padding: isMobile ? '60px 20px' : '100px 60px', background: 'linear-gradient(180deg,#080d18 0%,#06080f 100%)', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 40 : 64 }}>
          <SectionBadge text={t('landing.why.badge')} />
          <SectionTitle size={isMobile ? 30 : 48}>{t('landing.why.title')}</SectionTitle>
          <p style={{ fontSize: isMobile ? 15 : 17, color: 'var(--fg-2)', maxWidth: 560, margin: '0 auto' }}>{t('landing.why.subtitle')}</p>
        </div>
        {/* Stats */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : 'repeat(4,1fr)', gap: 1, marginBottom: isMobile ? 40 : 80, background: 'var(--line)', borderRadius: 16, overflow: 'hidden', border: '1px solid var(--line)' }}>
          {['1','2','3','4'].map(k => (
            <div key={k} style={{ padding: isMobile ? '20px 16px' : '32px 28px', background: 'rgba(8,13,24,0.98)', textAlign: 'center' }}>
              <div style={{ fontSize: isMobile ? 32 : 44, fontWeight: 700, letterSpacing: '-0.03em', background: 'linear-gradient(135deg,var(--accent),var(--accent-2))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', marginBottom: 6 }}>{t('landing.why.stat'+k+'val')}</div>
              <div style={{ fontSize: isMobile ? 11 : 13, color: 'var(--fg-3)' }}>{t('landing.why.stat'+k+'label')}</div>
            </div>
          ))}
        </div>
        {/* Feature cards */}
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : (isTablet ? 'repeat(2,1fr)' : 'repeat(3,1fr)'), gap: 16 }}>
          {[{k:'1',img:FEATURE_IMGS[0]},{k:'2',img:FEATURE_IMGS[1]},{k:'3',img:FEATURE_IMGS[2]}].map((f,i) => (
            <div key={f.k} onMouseEnter={() => setActive(i)} style={{ borderRadius: 18, overflow: 'hidden', border: '1px solid '+(active===i ? 'rgba(34,211,238,0.3)' : 'var(--line-2)'), background: active===i ? 'rgba(34,211,238,0.03)' : 'rgba(255,255,255,0.02)', cursor: 'pointer', transition: 'all .3s' }}>
              <div style={{ aspectRatio: '16/9', overflow: 'hidden', position: 'relative' }}>
                <img src={f.img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', transition: 'transform .5s', transform: active===i ? 'scale(1.04)' : 'scale(1)' }} onError={e => { e.target.style.display='none'; e.target.parentNode.style.background='rgba(255,255,255,0.04)'; }} />
                <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,transparent 40%,rgba(6,8,15,0.9))' }} />
              </div>
              <div style={{ padding: '18px 20px 22px' }}>
                <div style={{ fontSize: 20, marginBottom: 8 }}>{t('landing.why.feat'+f.k+'icon')}</div>
                <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--fg-0)', marginBottom: 6 }}>{t('landing.why.feat'+f.k+'title')}</div>
                <div style={{ fontSize: 13, color: 'var(--fg-2)', lineHeight: 1.55 }}>{t('landing.why.feat'+f.k+'desc')}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Templates ────────────────────────────────────────────────────────────────
const TemplateSection = () => {
  const { t } = useI18n();
  const { isMobile, isTablet } = useBreakpoint();
  const cols = isMobile ? 3 : (isTablet ? 4 : 6);
  return (
    <section style={{ padding: isMobile ? '60px 20px' : '100px 60px', background: '#06080f', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ display: 'flex', alignItems: isMobile ? 'flex-start' : 'flex-end', justifyContent: 'space-between', marginBottom: isMobile ? 28 : 48, flexDirection: isMobile ? 'column' : 'row', gap: isMobile ? 12 : 0 }}>
          <div>
            <SectionBadge text={t('landing.tpl.badge')} color="#f472b6" />
            <SectionTitle size={isMobile ? 28 : 44} mb={12}>{t('landing.tpl.title')}</SectionTitle>
            <p style={{ fontSize: isMobile ? 14 : 16, color: 'var(--fg-2)', maxWidth: 520, margin: 0, lineHeight: 1.6 }}>{t('landing.tpl.subtitle')}</p>
          </div>
          <a href="/template/_" className="yt-btn yt-btn-ghost" style={{ height: 40, padding: '0 18px', fontSize: 13, textDecoration: 'none', flexShrink: 0 }}>{t('landing.tpl.allBtn')}</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols},1fr)`, gap: isMobile ? 8 : 12 }}>
          {[1,2,3,4,5,6].map((n,i) => (
            <a key={n} href="/template/_" style={{ borderRadius: 12, overflow: 'hidden', position: 'relative', cursor: 'pointer', border: '1px solid var(--line-2)', aspectRatio: '9/16', transition: 'transform .2s,border-color .2s', display: 'block', textDecoration: 'none' }}
              onMouseEnter={e => { e.currentTarget.style.transform='translateY(-3px) scale(1.02)'; e.currentTarget.style.borderColor='rgba(244,114,182,0.4)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform=''; e.currentTarget.style.borderColor=''; }}>
              <img src={TEMPLATE_IMGS[i]} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={e => { e.target.style.display='none'; e.target.parentNode.style.background=`hsl(${i*60},40%,10%)`; }} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg,transparent 50%,rgba(0,0,0,0.88))' }} />
              <div style={{ position: 'absolute', bottom: isMobile ? 6 : 10, left: isMobile ? 6 : 10, right: isMobile ? 6 : 10 }}>
                <div style={{ fontSize: isMobile ? 10 : 12, fontWeight: 600, color: '#fff', marginBottom: 1 }}>{t('landing.tpl.'+n)}</div>
                {!isMobile && <div style={{ fontSize: 10, color: 'rgba(255,255,255,0.6)' }}>{t('landing.tpl.'+n+'en')}</div>}
              </div>
              <div style={{ position: 'absolute', top: 8, right: 8, width: 24, height: 24, borderRadius: '50%', background: 'rgba(0,0,0,0.6)', backdropFilter: 'blur(8px)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2.5"><polygon points="5 3 19 12 5 21 5 3"/></svg>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Cases — uses shared Carousel component ─────────────────────────────────
const CasesSection = () => {
  const { t } = useI18n();
  const { isMobile } = useBreakpoint();
  const radius = isMobile ? 12 : 18;
  return (
    <section style={{ padding: isMobile ? '60px 20px' : '100px 60px', background: 'linear-gradient(180deg,#06080f 0%,#080d18 100%)', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <SectionBadge text={t('landing.cases.badge')} />
        <SectionTitle size={isMobile ? 28 : 48} mb={12}>{t('landing.cases.title')}</SectionTitle>
        <p style={{ fontSize: isMobile ? 14 : 16, color: 'var(--fg-2)', maxWidth: 520, margin: '0 0 40px', lineHeight: 1.6 }}>{t('landing.cases.subtitle')}</p>
        <Carousel items={CASE_IMGS} show={isMobile ? 2 : 4} gap={isMobile ? 10 : 16} interval={3000}
          renderItem={(img) => (
            <a href="/discover" style={{ aspectRatio: '3/4', borderRadius: radius, overflow: 'hidden', display: 'block', border: '1px solid var(--line-2)', textDecoration: 'none' }}>
              <img src={img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
            </a>
          )} />
      </div>
    </section>
  );
};

// ─── Community ────────────────────────────────────────────────────────────────
const CommunitySection = () => {
  const { t } = useI18n();
  const { isMobile } = useBreakpoint();
  return (
    <section style={{ padding: isMobile ? '60px 20px' : '100px 60px', background: '#080d18', position: 'relative', overflow: 'hidden' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 36 : 56 }}>
          <SectionBadge text={t('landing.comm.badge')} />
          <SectionTitle size={isMobile ? 28 : 48} mb={14}>{t('landing.comm.title')}</SectionTitle>
          <p style={{ fontSize: isMobile ? 15 : 17, color: 'var(--fg-2)', maxWidth: 500, margin: '0 auto 28px' }}>{t('landing.comm.subtitle')}</p>
          <a href="/discover" className="yt-btn yt-btn-primary" style={{ height: 44, padding: '0 24px', fontSize: 14, textDecoration: 'none', display: 'inline-flex', alignItems: 'center' }}>{t('landing.comm.exploreBtn')}</a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(3,1fr)' : 'repeat(9,1fr)', gap: isMobile ? 6 : 8 }}>
          {COMMUNITY_IMGS.map((img, i) => (
            <a key={i} href="/discover" style={{ borderRadius: 10, overflow: 'hidden', aspectRatio: '1', border: '1px solid var(--line-2)', transition: 'transform .2s,border-color .2s', cursor: 'pointer', display: 'block' }}
              onMouseEnter={e => { e.currentTarget.style.transform='scale(1.04)'; e.currentTarget.style.borderColor='rgba(34,211,238,0.3)'; }}
              onMouseLeave={e => { e.currentTarget.style.transform=''; e.currentTarget.style.borderColor=''; }}>
              <img src={img} alt="" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} onError={e => { e.target.style.display='none'; e.target.parentNode.style.background=`hsl(${i*40},30%,10%)`; }} />
            </a>
          ))}
        </div>
      </div>
    </section>
  );
};

// ─── Testimonials ─────────────────────────────────────────────────────────────
const TestimonialsSection = () => {
  const { t } = useI18n();
  const { isMobile } = useBreakpoint();
  const pages = isMobile ? 6 : 2;
  const perPage = isMobile ? 1 : 3;
  const [slide, setSlide] = useCarousel(pages, 5000);
  const reviews = [1,2,3,4,5,6].map(n => ({ q: t('landing.rev.q'+n), name: t('landing.rev.n'+n), title: t('landing.rev.t'+n), avatar: USER_AVATARS[n-1] }));
  return (
    <section style={{ padding: isMobile ? '60px 20px' : '100px 60px', background: 'linear-gradient(180deg,#080d18 0%,#06080f 100%)' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 36 : 56 }}>
          <SectionBadge text={t('landing.rev.badge')} color="#a78bfa" />
          <SectionTitle size={isMobile ? 28 : 48}>{t('landing.rev.title')}</SectionTitle>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3,1fr)', gap: 16, marginBottom: 32 }}>
          {reviews.map((r, i) => {
            const inPage = i >= slide * perPage && i < (slide + 1) * perPage;
            return (
              <div key={i} style={{ borderRadius: 18, padding: '24px 24px 20px', border: '1px solid var(--line-2)', background: 'rgba(255,255,255,0.02)', display: inPage ? 'block' : 'none' }}>
                <div style={{ fontSize: 48, lineHeight: 0.6, color: 'rgba(167,139,250,0.2)', fontFamily: 'Georgia,serif', marginBottom: 16 }}>"</div>
                <p style={{ fontSize: isMobile ? 14 : 14.5, color: 'var(--fg-1)', lineHeight: 1.7, margin: '0 0 20px' }}>{r.q}</p>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                  <div style={{ width: 40, height: 40, borderRadius: '50%', overflow: 'hidden', border: '2px solid rgba(167,139,250,0.3)', flexShrink: 0 }}>
                    <img src={r.avatar} alt={r.name} style={{ width: '100%', height: '100%', objectFit: 'cover' }} onError={e => { e.target.style.display='none'; e.target.parentNode.style.background='rgba(167,139,250,0.15)'; }} />
                  </div>
                  <div>
                    <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-0)' }}>{r.name}</div>
                    <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>{r.title}</div>
                  </div>
                  <div style={{ marginLeft: 'auto', display: 'flex', gap: 2 }}>
                    {[1,2,3,4,5].map(s => <span key={s} style={{ color: '#fbbf24', fontSize: 12 }}>★</span>)}
                  </div>
                </div>
              </div>
            );
          })}
        </div>
        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <Dots count={pages} active={slide} onSelect={setSlide} color="#a78bfa" />
        </div>
      </div>
    </section>
  );
};

// ─── Pricing (dynamic from API) ──────────────────────────────────────────────
const LandingPricing = () => {
  const { t } = useI18n();
  const { isMobile } = useBreakpoint();
  const [plans, setPlans] = React.useState(null);
  const [coins, setCoins] = React.useState(null);
  const [tab, setTab] = React.useState('plans');

  React.useEffect(() => {
    fetch('/api/v1/subscriptions/plans').then(r => r.json()).then(d => setPlans((d.items || []).sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0)))).catch(() => setPlans([]));
    fetch('/api/v1/subscriptions/coin-packages').then(r => r.json()).then(d => setCoins((d.items || []).sort((a, b) => (a.sort_order || 0) - (b.sort_order || 0)))).catch(() => setCoins([]));
  }, []);

  // Hide entire section if no data
  if (plans !== null && coins !== null && plans.length === 0 && coins.length === 0) return null;

  return (
    <section style={{ padding: isMobile ? '60px 20px' : '80px 60px', background: 'linear-gradient(180deg,#06080f 0%,#080d18 100%)', maxWidth: 1180, margin: '0 auto' }}>
      <div style={{ textAlign: 'center', marginBottom: isMobile ? 32 : 40 }}>
        <SectionBadge text={t('landing.pricingLabel')} />
        <SectionTitle size={isMobile ? 28 : 44} mb={10}>{t('landing.pricingTitle')}</SectionTitle>
        <p style={{ fontSize: isMobile ? 14 : 16, color: 'var(--fg-2)', margin: 0 }}>{t('landing.pricingSubtitle')}</p>
      </div>

      {/* Tab toggle */}
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 32 }}>
        <div style={{ display: 'flex', borderRadius: 10, border: '1px solid var(--line-2)', overflow: 'hidden' }}>
          {[{ id: 'plans', label: '订阅套餐' }, { id: 'coins', label: '额度充值' }].map(tb => (
            <button key={tb.id} onClick={() => setTab(tb.id)} style={{
              height: 40, padding: '0 22px', border: 'none', cursor: 'pointer', fontSize: 13, fontWeight: tab === tb.id ? 600 : 400,
              background: tab === tb.id ? 'rgba(34,211,238,0.1)' : 'transparent', color: tab === tb.id ? 'var(--fg-0)' : 'var(--fg-3)',
            }}>{tb.label}</button>
          ))}
        </div>
      </div>

      {tab === 'plans' ? (
        /* Subscription plans */
        <div>
          {plans && plans.length > 0 ? (
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : `repeat(${Math.min(plans.length, 4)},1fr)`, gap: 14 }}>
              {plans.map((p, i) => {
                const isFeatured = i === 1 || p.type === 'month';
                const price = p.current_price || p.base_price;
                const isFree = price === 0;
                return (
                  <div key={p.id} style={{ position: 'relative', borderRadius: 18, padding: 22, background: isFeatured ? 'linear-gradient(180deg,rgba(34,211,238,0.06),transparent)' : 'rgba(255,255,255,0.025)', border: '1px solid ' + (isFeatured ? 'rgba(34,211,238,0.4)' : 'var(--line-2)'), boxShadow: isFeatured ? '0 0 40px rgba(34,211,238,0.08)' : 'none' }}>
                    {isFeatured && <div style={{ position: 'absolute', top: -11, left: 22, padding: '3px 12px', borderRadius: 999, background: 'linear-gradient(90deg,#22d3ee,#a78bfa)', color: '#06080f', fontSize: 11, fontWeight: 700 }}>Most popular</div>}
                    <div style={{ fontSize: 12, color: 'var(--fg-3)', fontWeight: 500, marginBottom: 4 }}>{p.name}</div>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 5, marginBottom: 18 }}>
                      <span style={{ fontSize: 38, fontWeight: 700, letterSpacing: '-0.03em' }}>{isFree ? '$0' : '$' + price}</span>
                      {!isFree && <span style={{ fontSize: 13, color: 'var(--fg-3)' }}>/{p.type === 'year' ? 'year' : p.type === 'week' ? 'week' : 'month'}</span>}
                    </div>
                    <a href={isFree ? '/discover' : '/pricing'} className={isFeatured ? 'yt-btn yt-btn-primary' : 'yt-btn yt-btn-ghost'} style={{ width: '100%', marginBottom: 18, height: 40, textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14 }}>
                      {isFree ? 'Get started free' : isFeatured ? 'Start creating' : 'Subscribe'}
                    </a>
                    <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>
                      {p.bonus_coins > 0 && (
                        <div style={{ display: 'flex', gap: 9, alignItems: 'center', fontSize: 13, color: 'var(--fg-1)' }}>
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={isFeatured ? 'var(--accent)' : 'var(--fg-3)'} strokeWidth="2.5" style={{ flexShrink: 0 }}><polyline points="20 6 9 17 4 12"/></svg>
                          {p.bonus_coins.toLocaleString()} credits
                        </div>
                      )}
                      {p.duration_days > 0 && (
                        <div style={{ display: 'flex', gap: 9, alignItems: 'center', fontSize: 13, color: 'var(--fg-1)' }}>
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke={isFeatured ? 'var(--accent)' : 'var(--fg-3)'} strokeWidth="2.5" style={{ flexShrink: 0 }}><polyline points="20 6 9 17 4 12"/></svg>
                          {p.duration_days} days access
                        </div>
                      )}
                      {p.first_purchase_price > 0 && (
                        <div style={{ display: 'flex', gap: 9, alignItems: 'center', fontSize: 13, color: '#4ade80' }}>
                          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#4ade80" strokeWidth="2.5" style={{ flexShrink: 0 }}><polyline points="20 6 9 17 4 12"/></svg>
                          First purchase ${p.first_purchase_price}
                        </div>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          ) : null}
        </div>
      ) : (
        /* Coin packages */
        <div>
          {coins && coins.length > 0 ? (
            <div style={{ display: 'grid', gridTemplateColumns: isMobile ? 'repeat(2,1fr)' : `repeat(${Math.min(coins.length, 5)},1fr)`, gap: 14 }}>
              {coins.map(pkg => {
                const total = pkg.coins + (pkg.bonus_coins || 0);
                const isPopular = pkg.tag === 'popular';
                return (
                  <div key={pkg.id} style={{ position: 'relative', borderRadius: 16, padding: '22px 18px', textAlign: 'center', background: isPopular ? 'linear-gradient(180deg,rgba(34,211,238,0.06),transparent)' : 'rgba(255,255,255,0.025)', border: '1px solid ' + (isPopular ? 'rgba(34,211,238,0.4)' : 'var(--line-2)') }}>
                    {pkg.tag && <div style={{ position: 'absolute', top: -10, left: '50%', transform: 'translateX(-50%)', padding: '2px 10px', borderRadius: 999, background: isPopular ? 'var(--accent)' : '#a78bfa', color: '#06080f', fontSize: 10, fontWeight: 700 }}>{pkg.tag === 'popular' ? 'HOT' : pkg.tag === 'recommended' ? '推荐' : pkg.tag}</div>}
                    <div style={{ fontSize: 24, fontWeight: 700, color: 'var(--fg-0)', marginBottom: 2 }}>{total.toLocaleString()}</div>
                    <div style={{ fontSize: 12, color: 'var(--fg-3)', marginBottom: 12 }}>额度</div>
                    {pkg.bonus_coins > 0 && <div style={{ fontSize: 11, color: '#4ade80', marginBottom: 8 }}>含赠送 {pkg.bonus_coins.toLocaleString()}</div>}
                    <div style={{ fontSize: 20, fontWeight: 700, color: 'var(--accent)', marginBottom: 12 }}>${pkg.amount}</div>
                    <a href="/pricing" className="yt-btn yt-btn-ghost" style={{ width: '100%', height: 38, fontSize: 13, textDecoration: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>购买</a>
                  </div>
                );
              })}
            </div>
          ) : null}
        </div>
      )}

      <div style={{ textAlign: 'center', marginTop: 20, fontSize: 12, color: 'var(--fg-3)' }}>
        {t('landing.pricing.payNote')}
        <a href="/pricing" style={{ color: 'var(--accent)', textDecoration: 'none' }}> {t('landing.pricing.cmpLink')}</a>
      </div>
    </section>
  );
};

// ─── CTA Banner ───────────────────────────────────────────────────────────────
const CTABanner = () => {
  const { t } = useI18n();
  const { isMobile } = useBreakpoint();
  return (
    <section style={{ padding: isMobile ? '0 16px 60px' : '0 60px 100px' }}>
      <div style={{ maxWidth: 1440, margin: '0 auto', borderRadius: isMobile ? 20 : 28, overflow: 'hidden', position: 'relative', minHeight: isMobile ? 260 : 320, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <img src={CDN+'footerBanner-c97e6b56.webp'} alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} onError={e => e.target.style.display='none'} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(135deg,rgba(6,8,15,0.88) 0%,rgba(34,211,238,0.08) 50%,rgba(6,8,15,0.8) 100%)' }} />
        <div style={{ position: 'relative', zIndex: 2, textAlign: 'center', padding: isMobile ? '40px 20px' : '60px 40px' }}>
          <h2 style={{ fontSize: isMobile ? 28 : 52, fontWeight: 700, letterSpacing: '-0.03em', margin: '0 0 14px', background: 'linear-gradient(135deg,#fff 30%,var(--accent))', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', whiteSpace: 'pre-line' }}>{t('landing.cta.title')}</h2>
          <p style={{ fontSize: isMobile ? 14 : 18, color: 'rgba(255,255,255,0.75)', margin: '0 0 28px', maxWidth: 440, marginLeft: 'auto', marginRight: 'auto' }}>{t('landing.cta.subtitle')}</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="/discover" className="yt-btn yt-btn-primary" style={{ height: isMobile ? 44 : 52, padding: isMobile ? '0 22px' : '0 32px', fontSize: isMobile ? 14 : 16, textDecoration: 'none', fontWeight: 700 }}>{t('landing.cta.mainBtn')}</a>
            <a href="/pricing" className="yt-btn yt-btn-ghost" style={{ height: isMobile ? 44 : 52, padding: isMobile ? '0 18px' : '0 28px', fontSize: isMobile ? 13 : 15, textDecoration: 'none' }}>{t('landing.cta.planBtn')}</a>
          </div>
        </div>
      </div>
    </section>
  );
};

// ─── FAQ ──────────────────────────────────────────────────────────────────────
const FAQSection = () => {
  const { t } = useI18n();
  const { isMobile } = useBreakpoint();
  const [open, setOpen] = React.useState(null);
  return (
    <section style={{ padding: isMobile ? '60px 20px 80px' : '80px 60px 100px', background: '#06080f' }}>
      <div style={{ maxWidth: 800, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 40 }}>
          <SectionBadge text={t('landing.faq.badge')} />
          <SectionTitle size={isMobile ? 28 : 44}>{t('landing.faq.title')}</SectionTitle>
        </div>
        {[1,2,3,4,5,6].map(n => (
          <div key={n} style={{ borderBottom: '1px solid var(--line)' }}>
            <button onClick={() => setOpen(open===n ? null : n)} style={{ width: '100%', padding: '18px 0', display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', gap: 12 }}>
              <span style={{ fontSize: isMobile ? 14 : 15.5, fontWeight: 500, color: 'var(--fg-0)' }}>{t('landing.faq.q'+n)}</span>
              <span style={{ color: 'var(--fg-3)', fontSize: 20, transition: 'transform .2s', transform: open===n ? 'rotate(45deg)' : 'none', flexShrink: 0 }}>+</span>
            </button>
            {open===n && <div style={{ paddingBottom: 18, fontSize: isMobile ? 13.5 : 14.5, color: 'var(--fg-2)', lineHeight: 1.7, paddingRight: isMobile ? 0 : 40 }}>{t('landing.faq.a'+n)}</div>}
          </div>
        ))}
      </div>
    </section>
  );
};

// ─── Hero Prompt Bar ──────────────────────────────────────────────────────────
const HeroPromptBar = () => {
  const { t } = useI18n();
  const { isMobile } = useBreakpoint();
  const [mode, setMode] = React.useState('image');
  const [prompt, setPrompt] = React.useState('cinematic shot of a calico cat astronaut floating above a neon Tokyo, soft volumetric light, 35mm');
  return (
    <div style={{ borderRadius: 18, overflow: 'hidden', border: '1px solid var(--line-2)', background: 'rgba(10,14,26,0.85)', backdropFilter: 'blur(20px)', boxShadow: '0 20px 60px rgba(0,0,0,0.5),0 0 0 1px rgba(34,211,238,0.15)' }}>
      <div style={{ display: 'flex', borderBottom: '1px solid var(--line)', padding: '0 8px' }}>
        {[{id:'image',labelKey:'landing.imgMode',icon:'image'},{id:'video',labelKey:'landing.vidMode',icon:'video',hot:true}].map(m => (
          <button key={m.id} onClick={() => setMode(m.id)} style={{ padding: isMobile ? '12px 14px' : '14px 20px', display: 'inline-flex', alignItems: 'center', gap: 6, background: 'none', border: 'none', cursor: 'pointer', color: mode===m.id ? 'var(--fg-0)' : 'var(--fg-3)', fontSize: isMobile ? 12.5 : 13.5, fontWeight: 600, borderBottom: '2px solid '+(mode===m.id ? 'var(--accent)' : 'transparent'), marginBottom: -1 }}>
            <Icon name={m.icon} size={13} color={mode===m.id ? 'var(--accent)' : 'var(--fg-3)'} />
            {t(m.labelKey)}
            {m.hot && <span style={{ fontSize: 9, padding: '2px 5px', borderRadius: 4, background: 'rgba(244,114,182,0.18)', color: '#fbcfe8', fontWeight: 700 }}>HOT</span>}
          </button>
        ))}
        {!isMobile && <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 6, paddingRight: 12, fontSize: 11, color: 'var(--fg-3)' }}>
          <Icon name="sparkle" size={11} color="var(--accent)" />
          {mode==='image' ? 'Pollo 2.5' : 'Veo 3.1'}
        </div>}
      </div>
      <div style={{ padding: isMobile ? 12 : 16 }}>
        <textarea value={prompt} onChange={e => setPrompt(e.target.value)} style={{ width: '100%', minHeight: isMobile ? 52 : 64, padding: '8px 4px', resize: 'none', border: 'none', outline: 'none', background: 'transparent', color: 'var(--fg-0)', fontSize: isMobile ? 13 : 15, lineHeight: 1.5, fontFamily: 'inherit' }} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginTop: 8, flexWrap: 'wrap' }}>
          <button style={{ height: 32, padding: '0 10px', borderRadius: 999, border: '1px solid var(--line-2)', background: 'rgba(255,255,255,0.04)', color: 'var(--fg-1)', fontSize: 12, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
            <Icon name="upload" size={10} /> {t('landing.refImg')}
          </button>
          <button style={{ height: 32, padding: '0 10px', borderRadius: 999, border: '1px solid var(--line-2)', background: 'rgba(255,255,255,0.04)', color: 'var(--fg-1)', fontSize: 12, cursor: 'pointer' }}>16:9</button>
          {!isMobile && <>
            {mode==='video' && <button style={{ height: 32, padding: '0 10px', borderRadius: 999, border: '1px solid var(--line-2)', background: 'rgba(255,255,255,0.04)', color: 'var(--fg-1)', fontSize: 12, cursor: 'pointer' }}>5s</button>}
            {mode==='image' && <button style={{ height: 32, padding: '0 10px', borderRadius: 999, border: '1px solid var(--line-2)', background: 'rgba(255,255,255,0.04)', color: 'var(--fg-1)', fontSize: 12, cursor: 'pointer' }}>4x</button>}
            <button style={{ height: 32, padding: '0 10px', borderRadius: 999, border: '1px dashed var(--line-2)', background: 'transparent', color: 'var(--fg-2)', fontSize: 12, cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 5 }}>
              <Icon name="sparkle" size={10} color="var(--accent)" /> {t('landing.enhancePrompt')}
            </button>
          </>}
          <div style={{ flex: 1 }} />
          <a href={mode==='image' ? '/create2img?tab=ref' : '/create2video?tab=ref'} className="yt-btn yt-btn-primary" style={{ height: 36, padding: '0 16px', fontSize: 13, textDecoration: 'none' }}>
            <Icon name="sparkle" size={12} color="#052028" />
            {t('landing.generate')} · {mode==='image' ? '4' : '12'} cr
          </a>
        </div>
      </div>
    </div>
  );
};

// ─── Landing Screen ───────────────────────────────────────────────────────────
const LandingScreen = ({ tweaks }) => {
  const { t } = useI18n();
  const { isMobile } = useBreakpoint();
  const isLoggedIn = window.YiteAPI && window.YiteAPI.isLoggedIn();
  const cachedUser = isLoggedIn ? window.YiteAPI.getUser() : null;
  return (
    <div className="yt yt-grid-bg" style={{ width: '100%', minHeight: '100%' }}>
      <div className="yt-spot">
        <TopNav active="home" signedIn={isLoggedIn} credits={cachedUser?.coins || 0} />

        {/* ── HERO ── */}
        <section style={{ padding: isMobile ? '40px 20px 48px' : '70px 60px 60px', maxWidth: 1440, margin: '0 auto', position: 'relative' }}>
          <div style={{ position: 'absolute', top: 20, left: '50%', transform: 'translateX(-50%)', width: isMobile ? 320 : 720, height: isMobile ? 300 : 600, pointerEvents: 'none', background: 'radial-gradient(circle,rgba(34,211,238,0.18) 0%,rgba(244,114,182,0.08) 40%,transparent 70%)', filter: 'blur(50px)' }} />
          <div style={{ position: 'relative', textAlign: 'center', maxWidth: 920, margin: '0 auto 28px' }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px 5px 5px', borderRadius: 999, background: 'rgba(255,255,255,0.04)', border: '1px solid var(--line-2)', fontSize: isMobile ? 11 : 12.5, color: 'var(--fg-1)', marginBottom: isMobile ? 20 : 28 }}>
              <span style={{ fontSize: 9, fontWeight: 700, padding: '3px 7px', borderRadius: 999, background: 'linear-gradient(90deg,#22d3ee,#f472b6)', color: '#06080f', letterSpacing: '0.05em' }}>NEW</span>
              <span>{t('landing.newBadge')}</span>
              <Icon name="chevron" size={11} color="var(--fg-2)" />
            </div>
            <h1 className="yt-grad-text" style={{ fontSize: isMobile ? 28 : 76, fontWeight: 700, lineHeight: 1.1, letterSpacing: '-0.03em', margin: '0 0 14px' }}>
              {t('landing.heroTitle1')}<br />{t('landing.heroTitle2')}
            </h1>
            <p style={{ fontSize: isMobile ? 15 : 19, color: 'var(--fg-1)', lineHeight: 1.5, maxWidth: 620, margin: '0 auto 24px' }}>
              {t('landing.heroSubtitle')}
            </p>
          </div>
          <div style={{ maxWidth: 880, margin: '0 auto' }}>
            <HeroPromptBar />
            <div style={{ marginTop: 12, fontSize: 12, color: 'var(--fg-3)', textAlign: 'center' }}>{t('landing.freeBadge')}</div>
          </div>
          {!isMobile && (
            <div style={{ marginTop: 48, display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 28, flexWrap: 'wrap', opacity: 0.5 }}>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.1em' }}>{t('landing.trustLine')}</div>
              {['MASHABLE','TECHCRUNCH','FORBES','BBC','THE VERGE'].map(b => (
                <div key={b} style={{ fontSize: 12, fontWeight: 700, color: 'var(--fg-2)', letterSpacing: '0.06em' }}>{b}</div>
              ))}
            </div>
          )}
        </section>

        <ReferenceSection />
        <I2VSection />
        <WhyUsSection />
        <TemplateSection />
        <CasesSection />
        <CommunitySection />
        <TestimonialsSection />
        <LandingPricing />
        <CTABanner />
        <FAQSection />

        {/* ── FOOTER ── */}
        <Footer />
      </div>
      <PWAInstallBanner />
    </div>
  );
};

Object.assign(window, { LandingScreen });