// V3 — reinterpreted client's current design language:
// purple accent, lavender hero, pill badges, laptop mockup, soft gradients.
// Same content as V1/V2, but matches client's existing palette.

const V3_WORDS = [
  { word: 'seat', ipa: '[siːt]', translation: 'сиденье', meta: 'cars · A2' },
  { word: 'dashboard', ipa: '[ˈdæʃbɔːd]', translation: 'приборная панель', meta: 'cars · A2' },
  { word: 'fuel', ipa: '[fjuːəl]', translation: 'топливо', meta: 'cars · A2' },
];

const V3_PURPLE = '#7C3AED';
const V3_PURPLE_DEEP = '#5B21B6';
const V3_LAVENDER = '#EEEAFE';
const V3_LAVENDER_2 = '#F5F2FF';

function V3Pill({ children, style }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 8,
      padding: '6px 14px', borderRadius: 999,
      background: V3_LAVENDER, color: V3_PURPLE,
      fontSize: 13, fontWeight: 500,
      border: `1px solid ${V3_LAVENDER}`,
      ...style,
    }}>{children}</span>
  );
}

function V3Nav({ copy, lang, onLang }) {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(255,255,255,0.9)',
      backdropFilter: 'blur(12px)',
      borderBottom: '1px solid #EEE',
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 72 }}>
        <WordyBrandLogo height={42} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 32, fontSize: 14, fontWeight: 500 }} className="v1-nav-links">
          <a href="#features" style={{ color: '#333' }}>{copy.nav.features}</a>
          <a href="#how" style={{ color: '#333' }}>{copy.nav.how}</a>
          <a href="#testimonials" style={{ color: '#333' }}>Testimonials</a>
          <a href="#pricing" style={{ color: '#333' }}>{copy.nav.pricing}</a>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <LangDropdown lang={lang} onLang={onLang} theme="purple" />
          <a href="#download" style={{
            padding: '10px 20px', borderRadius: 10,
            background: V3_PURPLE, color: 'white',
            fontSize: 14, fontWeight: 500,
          }}>{copy.nav.download}</a>
        </div>
      </div>
    </nav>
  );
}

function V3Hero({ copy }) {
  return (
    <section id="hero" data-screen-label="01 Hero" style={{
      background: `linear-gradient(180deg, ${V3_LAVENDER_2} 0%, ${V3_LAVENDER} 100%)`,
      paddingBlock: 'clamp(56px, 8vw, 96px)',
    }}>
      <div className="wrap" style={{
        display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.1fr)',
        gap: 'clamp(32px, 5vw, 64px)', alignItems: 'center',
      }} className="v1-hero-grid">
        <div>
          <V3Pill>
            <span style={{ color: '#D946EF' }}>★</span> #1 Vocabulary Learning App
          </V3Pill>
          <h1 style={{
            marginTop: 24,
            fontSize: 'clamp(44px, 6vw, 76px)',
            lineHeight: 1.02, letterSpacing: '-0.03em',
            color: '#111',
            fontWeight: 700,
          }}>
            Learn Words While<br/>You Work.
          </h1>
          <p style={{ marginTop: 24, fontSize: 18, color: '#4A4A55', maxWidth: 500, textWrap: 'pretty' }}>
            {copy.hero.sub}
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <a href="#download" style={{
              padding: '14px 24px', borderRadius: 12,
              background: `linear-gradient(135deg, ${V3_PURPLE}, ${V3_PURPLE_DEEP})`,
              color: 'white', fontSize: 15, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', gap: 10,
              boxShadow: '0 8px 20px -4px rgba(124, 58, 237, 0.5)',
            }}>Start Learning Free <LineIcon name="arrowRight" size={16} /></a>
            <a href="#demo" style={{
              padding: '14px 24px', borderRadius: 12,
              background: 'white', color: '#111',
              fontSize: 15, fontWeight: 500,
              display: 'inline-flex', alignItems: 'center', gap: 10,
              border: '1px solid #E5E5E5',
            }}>
              <svg viewBox="0 0 24 24" width="12" height="12" fill="currentColor"><path d="M8 5 L19 12 L8 19 Z"/></svg>
              Watch Demo
            </a>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 20, marginTop: 40 }}>
            <div style={{ display: 'flex' }}>
              {['#FFB4A2','#E5989B','#B5838D','#6D6875','#9D8189'].map((c, i) => (
                <div key={i} style={{
                  width: 38, height: 38, borderRadius: '50%',
                  background: c, border: '2px solid white',
                  marginLeft: i === 0 ? 0 : -10,
                }}/>
              ))}
            </div>
            <div>
              <div style={{ color: '#F59E0B', fontSize: 13 }}>★★★★★ <span style={{ color: '#111', fontWeight: 600 }}>4.9/5</span></div>
              <div style={{ fontSize: 13, color: '#4A4A55', fontWeight: 600 }}>50,000+ learners worldwide</div>
            </div>
          </div>
          <div style={{ marginTop: 16, fontSize: 12, color: '#6C6C75' }}>
            No credit card required *
          </div>
        </div>

        {/* Laptop mockup — matches the client's current hero visual language */}
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'absolute', inset: '-6% -8% -12% -4%',
            background: `radial-gradient(60% 60% at 60% 50%, rgba(217, 70, 239, 0.18), transparent 65%),
                         radial-gradient(60% 60% at 30% 60%, rgba(124, 58, 237, 0.22), transparent 65%)`,
            borderRadius: 40,
            zIndex: 0,
          }}></div>
          <div style={{ position: 'relative', zIndex: 1 }}>
            {/* laptop */}
            <div style={{
              background: '#1A1A22',
              borderRadius: 14,
              padding: '10px 10px 0',
              boxShadow: '0 30px 60px rgba(91, 33, 182, 0.22), 0 12px 24px rgba(91, 33, 182, 0.18)',
              position: 'relative',
            }}>
              <div style={{ background: '#111', borderRadius: 6, overflow: 'hidden', position: 'relative', aspectRatio: '1920 / 1099' }}>
                <img src="assets/app_home_clean.png" alt="WordyTrainer" style={{ width: '100%', height: '100%', objectFit: 'cover' }}/>
                <div style={{ position: 'absolute', right: '5%', bottom: '10%', animation: 'popIn 0.6s cubic-bezier(.2,.9,.3,1) both' }}>
                  <RotatingPopup words={V3_WORDS} compact />
                </div>
              </div>
            </div>
            {/* laptop base */}
            <div style={{
              height: 10, margin: '0 -4%',
              background: 'linear-gradient(180deg, #2A2A32, #1A1A22)',
              borderRadius: '0 0 12px 12px',
            }}></div>
          </div>
        </div>
      </div>

    </section>
  );
}

function V3Features({ copy }) {
  const icons = ['wand', 'bell', 'upload', 'globe', 'chat', 'sparkles'];
  const colors = ['#7C3AED', '#D946EF', '#EC4899', '#14B8A6', '#F97316', '#6366F1'];
  return (
    <Section id="features" screenLabel="02 Features" bg="white">
      <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 64px' }}>
        <V3Pill>Features</V3Pill>
        <h2 style={{
          marginTop: 20,
          fontSize: 'clamp(36px, 4.5vw, 56px)',
          letterSpacing: '-0.02em', lineHeight: 1.05,
          fontWeight: 700,
        }}>
          Everything you need to<br/>master new vocabulary
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
        {copy.features.items.map((f, i) => (
          <article key={i} style={{
            padding: 28, borderRadius: 20,
            background: 'white',
            border: '1px solid #EEE',
            boxShadow: '0 2px 8px rgba(0,0,0,0.03)',
          }}>
            <div style={{
              width: 48, height: 48, borderRadius: 12,
              background: colors[i],
              color: 'white',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 20,
            }}>
              <LineIcon name={icons[i]} size={22} color="white" />
            </div>
            <h3 style={{ fontSize: 18, marginBottom: 8, fontWeight: 700 }}>{f.t}</h3>
            <p style={{ fontSize: 15, color: '#6C6C75', textWrap: 'pretty' }}>{f.d}</p>
          </article>
        ))}
      </div>
    </Section>
  );
}

function V3How({ copy }) {
  const colors = ['#14B8A6', '#F97316', '#6366F1', '#D946EF'];
  const icons = ['globe', 'chat', 'bell', 'sparkles'];
  return (
    <Section id="how" screenLabel="03 How" bg={V3_LAVENDER_2}>
      <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 64px' }}>
        <V3Pill style={{ background: '#D1FAE5', color: '#065F46' }}>How It Works</V3Pill>
        <h2 style={{
          marginTop: 20,
          fontSize: 'clamp(36px, 4.5vw, 56px)',
          letterSpacing: '-0.02em', lineHeight: 1.05,
          fontWeight: 700,
        }}>
          From topic to flashcard<br/>in seconds
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 24 }}>
        {copy.how.steps.map((s, i) => (
          <div key={i} style={{ textAlign: 'center' }}>
            <div style={{
              width: 64, height: 64, borderRadius: 16,
              background: colors[i], color: 'white',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              margin: '0 auto 20px',
              boxShadow: `0 8px 20px -4px ${colors[i]}80`,
            }}>
              <LineIcon name={icons[i]} size={28} color="white" />
            </div>
            <h3 style={{ fontSize: 20, marginBottom: 10, fontWeight: 700 }}>{s.title}</h3>
            <p style={{ fontSize: 14, color: '#6C6C75', textWrap: 'pretty', maxWidth: 280, margin: '0 auto' }}>
              {s.desc}
            </p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function V3AI({ copy }) {
  return (
    <Section id="ai" screenLabel="04 AI" bg="white">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.1fr)', gap: 'clamp(32px, 5vw, 64px)', alignItems: 'center' }} className="v1-hero-grid">
        <div>
          <V3Pill>Powered By AI</V3Pill>
          <h2 style={{
            marginTop: 20,
            fontSize: 'clamp(32px, 4vw, 48px)',
            letterSpacing: '-0.02em', lineHeight: 1.05,
            fontWeight: 700,
          }}>
            AI-Generated Custom<br/>Word Lists
          </h2>
          <p style={{ marginTop: 20, fontSize: 17, color: '#4A4A55', maxWidth: 520, textWrap: 'pretty' }}>
            {copy.ai.sub}
          </p>
          <div style={{ marginTop: 28, display: 'flex', flexDirection: 'column', gap: 16 }}>
            {[
              { icon: 'wand', t: 'Describe Your Topic', d: 'Tell the AI what you want to learn, any topic, any context.' },
              { icon: 'chat', t: 'Get Instant Word Lists', d: 'Receive a curated list of relevant words with translations and examples.' },
              { icon: 'sparkles', t: 'Start Learning Immediately', d: 'Your AI-generated list is ready for flashcard practice right away.' },
            ].map((s, i) => (
              <div key={i} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10, flexShrink: 0,
                  background: V3_LAVENDER, color: V3_PURPLE,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                }}>
                  <LineIcon name={s.icon} size={18} />
                </div>
                <div>
                  <div style={{ fontSize: 15, fontWeight: 700 }}>{s.t}</div>
                  <div style={{ fontSize: 14, color: '#6C6C75', marginTop: 2 }}>{s.d}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{
            position: 'absolute', inset: '-4% -4% -4% -4%',
            background: `radial-gradient(60% 60% at 50% 50%, rgba(20, 184, 166, 0.15), transparent 65%)`,
            borderRadius: 30, zIndex: 0,
          }}></div>
          <div style={{ position: 'relative', zIndex: 1 }}>
            <DesktopWithPopup screenshot="assets/app_ai_a2.png" />
          </div>
          <div style={{
            position: 'absolute', top: -10, left: 20, zIndex: 2,
            padding: '6px 12px', borderRadius: 999,
            background: '#10B981', color: 'white',
            fontSize: 12, fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 6,
            boxShadow: '0 4px 12px rgba(16, 185, 129, 0.3)',
          }}>
            ✓ Synced
          </div>
        </div>
      </div>
    </Section>
  );
}

function V3Testimonials({ copy }) {
  return (
    <Section id="testimonials" screenLabel="05 Testimonials" bg={V3_LAVENDER_2}>
      <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 64px' }}>
        <V3Pill>Testimonials</V3Pill>
        <h2 style={{
          marginTop: 20,
          fontSize: 'clamp(36px, 4.5vw, 56px)',
          letterSpacing: '-0.02em', lineHeight: 1.05,
          fontWeight: 700,
        }}>
          Loved by 10,000+ Learners
        </h2>
        <p style={{ marginTop: 16, fontSize: 17, color: '#6C6C75' }}>
          Join thousands of happy users who've transformed their vocabulary learning journey.
        </p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
        {copy.testimonials.items.map((t, i) => (
          <figure key={i} style={{
            margin: 0, padding: 28,
            background: 'white',
            border: '1px solid #EEE',
            borderRadius: 20,
            boxShadow: '0 2px 8px rgba(0,0,0,0.03)',
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: '#FFEBE0', color: '#F97316',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 18, fontWeight: 700,
              marginBottom: 16,
            }}>99</div>
            <div style={{ color: '#F59E0B', fontSize: 14, marginBottom: 12 }}>★★★★★</div>
            <blockquote style={{ margin: 0, fontSize: 15, color: '#333', lineHeight: 1.6, textWrap: 'pretty', marginBottom: 20 }}>
              "{t.q}"
            </blockquote>
            <figcaption style={{ display: 'flex', alignItems: 'center', gap: 12, borderTop: '1px solid #F0F0F0', paddingTop: 16 }}>
              <div style={{
                width: 36, height: 36, borderRadius: '50%',
                background: ['#FFB4A2','#B5838D','#6D6875'][i],
              }}/>
              <div>
                <div style={{ fontSize: 14, fontWeight: 700 }}>{t.name}</div>
                <div style={{ fontSize: 12, color: V3_PURPLE }}>{t.role}</div>
              </div>
            </figcaption>
          </figure>
        ))}
      </div>
    </Section>
  );
}

function V3Pricing({ copy }) {
  return (
    <Section id="pricing" screenLabel="06 Pricing" bg="white">
      <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 64px' }}>
        <V3Pill>Pricing</V3Pill>
        <h2 style={{
          marginTop: 20,
          fontSize: 'clamp(36px, 4.5vw, 56px)',
          letterSpacing: '-0.02em', lineHeight: 1.05,
          fontWeight: 700,
        }}>
          Simple, Transparent Pricing
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20, maxWidth: 1100, margin: '0 auto' }}>
        {copy.pricing.plans.map((p, i) => (
          <div key={i} style={{
            padding: 32, borderRadius: 20,
            background: p.highlight ? `linear-gradient(180deg, ${V3_PURPLE}, ${V3_PURPLE_DEEP})` : 'white',
            color: p.highlight ? 'white' : '#111',
            border: p.highlight ? 'none' : '1px solid #EEE',
            position: 'relative',
            transform: p.highlight ? 'scale(1.03)' : 'none',
            boxShadow: p.highlight ? '0 20px 40px -8px rgba(124, 58, 237, 0.4)' : '0 2px 8px rgba(0,0,0,0.03)',
          }}>
            {p.tag && (
              <div style={{
                position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)',
                fontSize: 11, padding: '4px 14px', borderRadius: 999,
                background: p.highlight ? 'white' : V3_PURPLE,
                color: p.highlight ? V3_PURPLE : 'white',
                letterSpacing: '0.08em', textTransform: 'uppercase',
                fontWeight: 700,
              }}>{p.tag}</div>
            )}
            <div style={{ fontSize: 15, fontWeight: 600, opacity: 0.8 }}>{p.name}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 12 }}>
              <div style={{ fontSize: 48, fontWeight: 700, letterSpacing: '-0.02em' }}>{p.price}</div>
              <div style={{ fontSize: 14, opacity: 0.7 }}>/ {p.period}</div>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0', display: 'flex', flexDirection: 'column', gap: 12 }}>
              {p.features.map((f, j) => (
                <li key={j} style={{ display: 'flex', gap: 10, fontSize: 14, alignItems: 'flex-start' }}>
                  <div style={{
                    width: 20, height: 20, borderRadius: '50%',
                    background: p.highlight ? 'rgba(255,255,255,0.15)' : V3_LAVENDER,
                    color: p.highlight ? 'white' : V3_PURPLE,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    flexShrink: 0,
                  }}>
                    <LineIcon name="check" size={12} />
                  </div>
                  <span style={{ opacity: 0.95 }}>{f}</span>
                </li>
              ))}
            </ul>
            <a href="#download" style={{
              display: 'flex', justifyContent: 'center',
              padding: '12px 20px', borderRadius: 12,
              background: p.highlight ? 'white' : V3_PURPLE,
              color: p.highlight ? V3_PURPLE : 'white',
              fontSize: 14, fontWeight: 600,
            }}>
              {p.cta}
            </a>
          </div>
        ))}
      </div>
    </Section>
  );
}

function V3FAQ({ copy }) {
  const [open, setOpen] = useState(0);
  return (
    <Section id="faq" screenLabel="07 FAQ" bg={V3_LAVENDER_2}>
      <div style={{ textAlign: 'center', maxWidth: 760, margin: '0 auto 40px' }}>
        <V3Pill>FAQs</V3Pill>
        <h2 style={{
          marginTop: 20,
          fontSize: 'clamp(36px, 4.5vw, 56px)',
          letterSpacing: '-0.02em', lineHeight: 1.05,
          fontWeight: 700,
        }}>
          Frequently asked questions
        </h2>
        <p style={{ marginTop: 16, fontSize: 17, color: '#6C6C75' }}>
          Everything you need to know about WordyTrainer.
        </p>
      </div>
      <div style={{ maxWidth: 820, margin: '0 auto' }}>
        {copy.faq.items.map((f, i) => (
          <div key={i} style={{
            background: 'white', borderRadius: 12,
            marginBottom: 12, border: '1px solid #EEE',
          }}>
            <button
              onClick={() => setOpen(open === i ? -1 : i)}
              style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '18px 24px', textAlign: 'left' }}
            >
              <span style={{ fontSize: 16, fontWeight: 500 }}>{f.q}</span>
              <span style={{ fontSize: 18, color: V3_PURPLE, transition: 'transform .2s', transform: open === i ? 'rotate(180deg)' : 'none' }}>▾</span>
            </button>
            {open === i && (
              <div style={{ padding: '0 24px 20px', color: '#4A4A55', textWrap: 'pretty' }} className="fade-up">
                {f.a}
              </div>
            )}
          </div>
        ))}
      </div>
    </Section>
  );
}

function V3Final({ copy }) {
  return (
    <section id="download" data-screen-label="08 CTA" style={{
      background: `linear-gradient(135deg, ${V3_PURPLE} 0%, #D946EF 100%)`,
      color: 'white',
      paddingBlock: 'var(--section-y)',
    }}>
      <div className="wrap" style={{ textAlign: 'center', maxWidth: 820, margin: '0 auto' }}>
        <V3Pill style={{ background: 'rgba(255,255,255,0.15)', color: 'white', border: '1px solid rgba(255,255,255,0.2)' }}>
          <LineIcon name="clock" size={14} color="white" /> Start learning in less than 2 minutes
        </V3Pill>
        <h2 style={{
          marginTop: 24,
          fontSize: 'clamp(40px, 5vw, 64px)',
          letterSpacing: '-0.02em', lineHeight: 1.05,
          fontWeight: 700,
        }}>
          Ready to transform your vocabulary?
        </h2>
        <p style={{ marginTop: 20, fontSize: 18, opacity: 0.95, maxWidth: 560, margin: '20px auto 0' }}>
          Join 50,000+ learners who are building vocabulary effortlessly. Start free today — no credit card required.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 36, justifyContent: 'center', flexWrap: 'wrap' }}>
          <a href="#" style={{
            padding: '14px 24px', borderRadius: 12,
            background: 'white', color: V3_PURPLE,
            fontSize: 15, fontWeight: 600,
            display: 'inline-flex', alignItems: 'center', gap: 10,
          }}>Start Learning Free <LineIcon name="arrowRight" size={16} color={V3_PURPLE} /></a>
          <a href="#features" style={{
            padding: '14px 24px', borderRadius: 12,
            background: 'transparent', color: 'white',
            fontSize: 15, fontWeight: 600,
            border: '1px solid rgba(255,255,255,0.3)',
          }}>View All Features</a>
        </div>
        <div style={{ display: 'flex', justifyContent: 'center', gap: 24, marginTop: 28, fontSize: 13, opacity: 0.9, flexWrap: 'wrap' }}>
          {['Free forever plan', 'No credit card required', 'Cancel anytime'].map(t => (
            <div key={t} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <LineIcon name="check" size={14} color="white" /> {t}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function V3Footer({ copy }) {
  return (
    <footer style={{ background: '#121217', color: 'white', paddingBlock: 56 }}>
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 48 }} className="v1-footer">
        <div>
          <div style={{ fontSize: 18, fontWeight: 700, marginBottom: 12 }}>Subscribe to our newsletter</div>
          <p style={{ color: '#8B8B94', fontSize: 14, marginBottom: 20, maxWidth: 400 }}>
            Master vocabulary effortlessly with smart flashcards, spaced repetition, and AI-powered word lists.
          </p>
          <a href={`mailto:${copy.footer.email}`} style={{ color: V3_PURPLE, fontSize: 14, display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            ✉ {copy.footer.email}
          </a>
        </div>
        <div style={{ display: 'flex', gap: 8, alignItems: 'flex-start', flexWrap: 'wrap' }}>
          <input
            placeholder="Enter your email"
            style={{
              flex: 1, minWidth: 200,
              padding: '12px 16px', borderRadius: 10,
              background: '#1E1E26', border: '1px solid #2A2A33',
              color: 'white', fontSize: 14,
            }}/>
          <button style={{
            padding: '12px 22px', borderRadius: 10,
            background: V3_PURPLE, color: 'white',
            fontSize: 14, fontWeight: 600,
          }}>Subscribe</button>
        </div>
      </div>
      <div className="wrap" style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid #2A2A33', display: 'flex', justifyContent: 'space-between', fontSize: 12, color: '#6C6C75', flexWrap: 'wrap', gap: 12 }}>
        <span>{copy.footer.copy}</span>
        <span>Privacy · Terms · macOS · Windows coming soon</span>
      </div>
    </footer>
  );
}

function V3Landing({ copy, lang, onLang }) {
  return (
    <div data-variant="v3" style={{ background: 'white' }}>
      <V3Nav copy={copy} lang={lang} onLang={onLang} />
      <V3Hero copy={copy} />
      <V3Features copy={copy} />
      <V3How copy={copy} />
      <V3AI copy={copy} />
      <V3Testimonials copy={copy} />
      <V3Pricing copy={copy} />
      <V3FAQ copy={copy} />
      <V3Final copy={copy} />
      <V3Footer copy={copy} />
    </div>
  );
}

window.V3Landing = V3Landing;