// V2 — "Смелый": editorial typography, dark hero, serif display, live pop-up demo in hero.
// Same content, different voice.

const V2_WORDS = [
  { word: 'seat', ipa: '[siːt]', translation: 'сиденье', meta: 'cars · A2 · 14:32' },
  { word: 'dashboard', ipa: '[ˈdæʃbɔːd]', translation: 'приборная панель', meta: 'cars · A2 · 14:33' },
  { word: 'fuel', ipa: '[fjuːəl]', translation: 'топливо', meta: 'cars · A2 · 14:34' },
  { word: 'engine', ipa: '[ˈendʒɪn]', translation: 'двигатель', meta: 'cars · A2 · 14:35' },
  { word: 'brake', ipa: '[breɪk]', translation: 'тормоз', meta: 'cars · A2 · 14:36' },
];

function V2Nav({ copy, lang, onLang }) {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(21, 20, 25, 0.75)',
      backdropFilter: 'blur(16px)',
      borderBottom: '1px solid rgba(255,255,255,0.06)',
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 68 }}>
        <div style={{ display: 'inline-block' }}>
          <WordyBrandLogo height={28} onDark />
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 28, fontSize: 14, color: 'var(--dark-ink)' }} className="v1-nav-links">
          <a href="#features">{copy.nav.features}</a>
          <a href="#how">{copy.nav.how}</a>
          <a href="#pricing">{copy.nav.pricing}</a>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <LangDropdown lang={lang} onLang={onLang} theme="dark" />
          <a href="#download" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 14 }}>
            {copy.nav.download}
          </a>
        </div>
      </div>
    </nav>
  );
}

function V2Hero({ copy }) {
  return (
    <section
      id="hero"
      data-screen-label="01 Hero"
      style={{
        background: 'var(--dark)',
        color: 'var(--dark-ink)',
        paddingBlock: 'clamp(56px, 8vw, 100px) 0',
        position: 'relative', overflow: 'hidden',
      }}
    >
      {/* ambient glow */}
      <div style={{
        position: 'absolute',
        right: '-10%', top: '20%',
        width: 620, height: 620, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(255,90,31,0.22), transparent 65%)',
        pointerEvents: 'none',
      }}></div>

      <div className="wrap" style={{ position: 'relative' }}>
        <div className="chip" style={{
          background: 'rgba(255,255,255,0.06)',
          color: 'var(--dark-ink)',
          border: '1px solid rgba(255,255,255,0.1)',
          fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.06em',
        }}>
          <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--accent)', animation: 'pulseDot 1.6s ease-in-out infinite' }}></span>
          WORDYTRAINER v3.0 · {copy.hero.badge.toUpperCase()}
        </div>

        <h1 style={{
          marginTop: 36,
          fontSize: 'clamp(48px, 9vw, 140px)',
          lineHeight: 0.92,
          letterSpacing: 'var(--hero-tracking, -0.04em)',
          fontWeight: 'var(--hero-weight, 500)',
          fontFamily: 'var(--font-hero, var(--font-sans))',
          textWrap: 'balance',
        }}>
          {copy.hero_v2.kicker}{' '}
          <span style={{
            fontFamily: 'var(--hero-italic-family, var(--font-sans))',
            fontWeight: 'var(--hero-italic-weight, 600)',
            fontStyle: 'var(--hero-italic-style, normal)',
            color: 'var(--accent-2)',
            letterSpacing: '-0.02em',
          }}>
            {copy.hero_v2.kicker_italic}
          </span>.
        </h1>

        <div style={{
          marginTop: 40,
          display: 'grid',
          gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.6fr)',
          gap: 'clamp(32px, 6vw, 80px)',
          alignItems: 'end',
        }} className="v1-hero-grid">
          <div>
            <p style={{ fontSize: 18, color: 'var(--dark-mute)', maxWidth: 420, textWrap: 'pretty' }}>
              {copy.hero_v2.sub}
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
              <a href="#download" className="btn btn-primary">
                {copy.hero.cta} <LineIcon name="arrowRight" size={16} />
              </a>
              <a href="#demo" className="btn btn-ghost-dark">
                <svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><path d="M8 5 L19 12 L8 19 Z"/></svg>
                {copy.hero.cta2}
              </a>
            </div>
            <div style={{ display: 'flex', gap: 24, marginTop: 32, fontSize: 13, color: 'var(--dark-mute)', fontFamily: 'var(--font-mono)' }}>
              <div>· macOS · no credit card</div>
            </div>
          </div>
          <div style={{ position: 'relative' }}>
            <DesktopWithPopup
              screenshot="assets/app_home_clean.png"
              popup={<RotatingPopup words={V2_WORDS} />}
              popupPos="br"
            />
            {/* annotation */}
            <div style={{
              position: 'absolute', left: -20, top: '45%',
              display: 'none', alignItems: 'center', gap: 8,
              fontFamily: 'var(--font-mono)', fontSize: 11,
              color: 'var(--accent-2)', letterSpacing: '0.08em',
            }} className="v2-ann">
              ← POP-UP ON YOUR DESKTOP
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function V2Pains({ copy }) {
  return (
    <Section id="pains" screenLabel="02 Pains" bg="var(--dark)" style={{ color: 'var(--dark-ink)' }}>
      <div style={{ maxWidth: 820, marginBottom: 64 }}>
        <Eyebrow color="var(--accent-2)">{copy.pains.eyebrow}</Eyebrow>
        <h2 style={{
          fontSize: 'clamp(36px, 5vw, 64px)', marginTop: 16,
          fontFamily: 'var(--font-heading, var(--font-sans))',
          fontWeight: 'var(--heading-weight, 500)',
          letterSpacing: 'var(--heading-tracking, -0.02em)', lineHeight: 1.05,
        }}>
          {copy.pains.title_v2}
        </h2>
      </div>
      <div style={{ display: 'grid', gap: 0 }}>
        {copy.pains.items.map((it, i) => (
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: '60px minmax(0, 1fr) minmax(0, 1.5fr)',
            gap: 'clamp(16px, 3vw, 40px)',
            padding: '28px 0',
            borderTop: '1px solid rgba(255,255,255,0.08)',
            borderBottom: i === copy.pains.items.length - 1 ? '1px solid rgba(255,255,255,0.08)' : 'none',
            alignItems: 'baseline',
          }} className="v2-pain-row">
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--accent-2)' }}>0{i+1}</div>
            <div style={{
              fontSize: 'clamp(22px, 2.4vw, 30px)',
              color: 'var(--dark-mute)',
              fontWeight: 400,
              lineHeight: 1.25,
            }}>
              “{it.pain}”
            </div>
            <div>
              <div style={{ fontSize: 20, fontWeight: 500, marginBottom: 6, color: 'var(--dark-ink)' }}>
                {it.answer}
              </div>
              <p style={{ color: 'var(--dark-mute)', fontSize: 15, textWrap: 'pretty' }}>{it.detail}</p>
            </div>
          </div>
        ))}
      </div>
    </Section>
  );
}

function V2How({ copy }) {
  return (
    <Section id="how" screenLabel="03 How">
      <div style={{ maxWidth: 780, marginBottom: 64 }}>
        <Eyebrow>{copy.how.eyebrow}</Eyebrow>
        <h2 style={{
          fontSize: 'clamp(36px, 5vw, 60px)', marginTop: 16,
          letterSpacing: '-0.03em', lineHeight: 1,
        }}>
          {copy.how.title}
        </h2>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
        {copy.how.steps.map((s, i) => (
          <div key={i} style={{
            display: 'grid',
            gridTemplateColumns: '120px minmax(0,1fr) minmax(0,2fr)',
            gap: 'clamp(16px, 3vw, 40px)',
            padding: '36px 0',
            borderTop: '1px solid var(--line)',
            borderBottom: i === copy.how.steps.length - 1 ? '1px solid var(--line)' : 'none',
            alignItems: 'start',
          }} className="v2-step">
            <div style={{
              fontWeight: 600,
              fontSize: 'clamp(48px, 6vw, 80px)',
              color: 'var(--accent)',
              lineHeight: 0.9,
              letterSpacing: '-0.03em',
            }}>
              {s.n}
            </div>
            <h3 style={{ fontSize: 'clamp(22px, 2.2vw, 28px)', letterSpacing: '-0.02em' }}>
              {s.title}
            </h3>
            <p style={{ color: 'var(--ink-2)', fontSize: 16, textWrap: 'pretty', maxWidth: 600 }}>
              {s.desc}
            </p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function V2Features({ copy }) {
  const icons = ['wand', 'bell', 'upload', 'globe', 'chat', 'sparkles'];
  return (
    <Section id="features" screenLabel="04 Features" bg="var(--bg-soft)">
      <div style={{ maxWidth: 780, marginBottom: 56 }}>
        <Eyebrow>{copy.features.eyebrow}</Eyebrow>
        <h2 style={{ fontSize: 'clamp(36px, 5vw, 60px)', marginTop: 16, letterSpacing: '-0.03em', lineHeight: 1 }}>
          {copy.features.title}
        </h2>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
        background: 'var(--bg-paper)',
        border: '1px solid var(--line)',
        borderRadius: 'var(--r-lg)',
        overflow: 'hidden',
      }}>
        {copy.features.items.map((f, i) => (
          <article key={i} style={{
            padding: 28,
            borderRight: '1px solid var(--line)',
            borderBottom: '1px solid var(--line)',
          }} className="v2-feat">
            <div style={{
              width: 40, height: 40, borderRadius: 10,
              background: 'var(--dark)',
              color: 'var(--accent-2)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 24,
            }}>
              <LineIcon name={icons[i]} size={20} />
            </div>
            <h3 style={{ fontSize: 18, marginBottom: 8, letterSpacing: '-0.01em' }}>{f.t}</h3>
            <p style={{ fontSize: 14, color: 'var(--ink-mute)', textWrap: 'pretty' }}>{f.d}</p>
          </article>
        ))}
      </div>
    </Section>
  );
}

function V2AI({ copy }) {
  return (
    <Section id="ai" screenLabel="05 AI" bg="var(--dark)" style={{ color: 'var(--dark-ink)' }}>
      <div style={{ maxWidth: 780, marginBottom: 48 }}>
        <Eyebrow color="var(--accent-2)">{copy.ai.eyebrow}</Eyebrow>
        <h2 style={{
          marginTop: 16,
          fontSize: 'clamp(36px, 5vw, 64px)',
          letterSpacing: 'var(--heading-tracking, -0.03em)', lineHeight: 1.02,
          fontFamily: 'var(--font-heading, var(--font-sans))',
          fontWeight: 'var(--heading-weight, 600)',
        }}>
          {copy.ai.title}
        </h2>
        <p style={{ marginTop: 20, fontSize: 17, color: 'var(--dark-mute)', maxWidth: 600, textWrap: 'pretty' }}>
          {copy.ai.sub}
        </p>
      </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.3fr)',
        gap: 'clamp(24px, 4vw, 56px)',
        alignItems: 'center',
      }} className="v1-hero-grid">
        <div style={{
          background: 'rgba(255,255,255,0.03)',
          border: '1px solid rgba(255,255,255,0.08)',
          borderRadius: 'var(--r-lg)',
          padding: 28,
          fontFamily: 'var(--font-mono)',
          fontSize: 14,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 20, color: 'var(--dark-mute)', fontSize: 11, letterSpacing: '0.1em' }}>
            <span>AI ASSISTANT · PROMPT</span>
            <span>A2 · 25 WORDS</span>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <AIRow label="topic" value={copy.ai.example_prompt} />
            <AIRow label="level" value={copy.ai.example_level} />
            <AIRow label="count" value={copy.ai.example_count} />
          </div>
          <div style={{
            marginTop: 24, padding: 20,
            background: 'rgba(255,90,31,0.08)',
            borderRadius: 12,
            border: '1px solid rgba(255,90,31,0.15)',
            color: 'var(--dark-ink)',
            fontSize: 13, lineHeight: 1.6,
          }}>
            <div style={{ color: 'var(--accent-2)', marginBottom: 8, fontSize: 11, letterSpacing: '0.1em' }}>→ RESULT</div>
            {copy.ai.example_result}
          </div>
          <div style={{
            marginTop: 20, padding: '12px 16px',
            background: 'var(--accent)', color: 'white',
            borderRadius: 10, textAlign: 'center',
            fontSize: 13, fontWeight: 500, letterSpacing: '0.04em',
          }}>
            ⏎ GENERATE
          </div>
        </div>
        <DesktopWithPopup screenshot="assets/app_ai_a2.png" />
      </div>
    </Section>
  );
}

function AIRow({ label, value }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <span style={{ color: 'var(--dark-mute)', fontSize: 11, width: 60, letterSpacing: '0.1em' }}>{label.toUpperCase()}</span>
      <span style={{
        flex: 1, padding: '8px 12px',
        background: 'rgba(255,255,255,0.04)',
        border: '1px solid rgba(255,255,255,0.08)',
        borderRadius: 8,
        color: 'var(--dark-ink)',
      }}>{value}</span>
    </div>
  );
}

function V2Testimonials({ copy }) {
  return (
    <Section id="testimonials" screenLabel="06 Testimonials">
      <div style={{ maxWidth: 780, marginBottom: 56 }}>
        <Eyebrow>{copy.testimonials.eyebrow}</Eyebrow>
        <h2 style={{ fontSize: 'clamp(36px, 5vw, 60px)', marginTop: 16, letterSpacing: '-0.03em', lineHeight: 1 }}>
          {copy.testimonials.title}
        </h2>
      </div>
      <div style={{ display: 'grid', gap: 0 }}>
        {copy.testimonials.items.map((t, i) => (
          <figure key={i} style={{
            margin: 0,
            padding: '40px 0',
            borderTop: '1px solid var(--line)',
            borderBottom: i === copy.testimonials.items.length - 1 ? '1px solid var(--line)' : 'none',
            display: 'grid',
            gridTemplateColumns: 'minmax(0, 1.8fr) minmax(0, 1fr)',
            gap: 'clamp(24px, 4vw, 64px)',
          }} className="v1-hero-grid">
            <blockquote style={{
              margin: 0,
              fontWeight: 400,
              fontSize: 'clamp(22px, 2.6vw, 32px)',
              lineHeight: 1.35,
              color: 'var(--ink)',
              textWrap: 'pretty',
            }}>
              “{t.q}”
            </blockquote>
            <figcaption style={{ fontSize: 14, alignSelf: 'end' }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--accent)', letterSpacing: '0.1em', marginBottom: 8 }}>
                LEARNER · 0{i+1}
              </div>
              <div style={{ fontWeight: 600, fontSize: 16 }}>{t.name}</div>
              <div style={{ color: 'var(--ink-mute)' }}>{t.role}</div>
            </figcaption>
          </figure>
        ))}
      </div>
    </Section>
  );
}

function V2Pricing({ copy }) {
  return (
    <Section id="pricing" screenLabel="07 Pricing" bg="var(--bg-soft)">
      <div style={{ maxWidth: 780, marginBottom: 56 }}>
        <Eyebrow>{copy.pricing.eyebrow}</Eyebrow>
        <h2 style={{ fontSize: 'clamp(36px, 5vw, 60px)', marginTop: 16, letterSpacing: '-0.03em', lineHeight: 1 }}>
          {copy.pricing.title}
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20 }}>
        {copy.pricing.plans.map((p, i) => (
          <div key={i} style={{
            padding: 28, borderRadius: 'var(--r-lg)',
            background: p.highlight ? 'var(--dark)' : 'var(--bg-paper)',
            color: p.highlight ? 'var(--dark-ink)' : 'var(--ink)',
            border: p.highlight ? '1px solid var(--dark-line)' : '1px solid var(--line)',
            position: 'relative',
          }}>
            {p.tag && (
              <div style={{
                position: 'absolute', top: 16, right: 16,
                fontSize: 11, fontFamily: 'var(--font-mono)',
                padding: '4px 10px', borderRadius: 999,
                background: p.highlight ? 'var(--accent)' : 'var(--dark)',
                color: 'white',
                letterSpacing: '0.08em', textTransform: 'uppercase',
              }}>{p.tag}</div>
            )}
            <div style={{ fontSize: 14, fontWeight: 500, opacity: 0.7, fontFamily: 'var(--font-mono)', letterSpacing: '0.06em' }}>
              {p.name.toUpperCase()}
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 16 }}>
              <div style={{ fontSize: 48, fontWeight: 600, letterSpacing: '-0.03em' }}>{p.price}</div>
              <div style={{ fontSize: 14, opacity: 0.6 }}>/ {p.period}</div>
            </div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0', display: 'flex', flexDirection: 'column', gap: 10 }}>
              {p.features.map((f, j) => (
                <li key={j} style={{ display: 'flex', gap: 8, fontSize: 14 }}>
                  <LineIcon name="check" size={16} color={p.highlight ? 'var(--accent-2)' : 'var(--accent)'} />
                  <span>{f}</span>
                </li>
              ))}
            </ul>
            <a href="#download" className={p.highlight ? 'btn btn-primary' : 'btn btn-secondary'} style={{ width: '100%', justifyContent: 'center' }}>
              {p.cta}
            </a>
          </div>
        ))}
      </div>
    </Section>
  );
}

function V2FAQ({ copy }) {
  const [open, setOpen] = useState(0);
  return (
    <Section id="faq" screenLabel="08 FAQ">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.6fr)', gap: 'clamp(32px, 6vw, 80px)' }} className="v1-hero-grid">
        <div>
          <Eyebrow>{copy.faq.eyebrow}</Eyebrow>
          <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 12, letterSpacing: '-0.03em', lineHeight: 1 }}>
            {copy.faq.title}
          </h2>
        </div>
        <div style={{ borderTop: '1px solid var(--line)' }}>
          {copy.faq.items.map((f, i) => (
            <div key={i} style={{ borderBottom: '1px solid var(--line)' }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '22px 0', textAlign: 'left' }}
              >
                <span style={{ fontSize: 18, fontWeight: 500 }}>{f.q}</span>
                <span style={{ fontSize: 22, color: 'var(--accent)', transition: 'transform .2s', transform: open === i ? 'rotate(45deg)' : 'none' }}>+</span>
              </button>
              {open === i && (
                <div style={{ paddingBottom: 22, paddingRight: 40, color: 'var(--ink-2)', textWrap: 'pretty' }} className="fade-up">
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

function V2Final({ copy }) {
  return (
    <section id="download" data-screen-label="09 CTA" style={{
      background: 'var(--accent)', color: 'white',
      paddingBlock: 'var(--section-y)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="wrap" style={{ textAlign: 'center', maxWidth: 900, margin: '0 auto' }}>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.85 }}>
          {copy.final.eyebrow}
        </div>
        <h2 style={{
          fontSize: 'clamp(40px, 6vw, 84px)',
          lineHeight: 0.96,
          letterSpacing: '-0.03em',
          marginTop: 20,
          fontWeight: 500,
          textWrap: 'balance',
        }}>
          {copy.final.title}{' '}
          <span style={{ fontWeight: 600 }}>
            {copy.final.title_2}
          </span>
        </h2>
        <a href="#" className="btn btn-white" style={{ marginTop: 40, fontSize: 16, padding: '16px 28px' }}>
          {copy.final.cta} <LineIcon name="arrowRight" size={16} />
        </a>
        <div style={{ marginTop: 24, fontSize: 13, fontFamily: 'var(--font-mono)', letterSpacing: '0.04em', opacity: 0.85 }}>
          {copy.final.sub}
        </div>
      </div>
    </section>
  );
}

function V2Footer({ copy }) {
  return (
    <footer style={{ background: 'var(--dark)', color: 'var(--dark-ink)', paddingBlock: 48 }}>
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 32 }} className="v1-footer">
        <div>
          <div style={{ display: 'inline-block' }}>
            <WordyBrandLogo height={32} onDark />
          </div>
          <p style={{ marginTop: 16, color: 'var(--dark-mute)', fontSize: 14, maxWidth: 320, textWrap: 'pretty' }}>
            {copy.footer.tagline}
          </p>
          <a href={`mailto:${copy.footer.email}`} style={{ display: 'inline-block', marginTop: 16, fontSize: 14, color: 'var(--accent-2)' }}>
            {copy.footer.email}
          </a>
        </div>
        <div>
          <div className="micro" style={{ marginBottom: 12, color: 'var(--dark-mute)' }}>Product</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14 }}>
            {copy.footer.cols.product.map(l => <li key={l}><a href="#" style={{ color: 'var(--dark-ink)' }}>{l}</a></li>)}
          </ul>
        </div>
        <div>
          <div className="micro" style={{ marginBottom: 12, color: 'var(--dark-mute)' }}>Company</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14 }}>
            {copy.footer.cols.company.map(l => <li key={l}><a href="#" style={{ color: 'var(--dark-ink)' }}>{l}</a></li>)}
          </ul>
        </div>
      </div>
      <div className="wrap" style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--dark-mute)', fontFamily: 'var(--font-mono)' }}>
        <span>{copy.footer.copy}</span>
        <span>macOS · Windows coming soon</span>
      </div>
    </footer>
  );
}

function V2Landing({ copy, lang, onLang }) {
  return (
    <div data-variant="v2">
      <V2Nav copy={copy} lang={lang} onLang={onLang} />
      <V2Hero copy={copy} />
      <V2Pains copy={copy} />
      <V2How copy={copy} />
      <V2Features copy={copy} />
      <V2AI copy={copy} />
      <V2Testimonials copy={copy} />
      <V2Pricing copy={copy} />
      <V2FAQ copy={copy} />
      <V2Final copy={copy} />
      <V2Footer copy={copy} />
    </div>
  );
}

window.V2Landing = V2Landing;
