// V4 — "Desk" / Sticky-notes — bold editorial-meets-developer aesthetic.
// Warm paper background, monospace hero, sticky-note features, brutalist shadows.
// Same content as V1/V2/V3, completely different vibe.

const V4_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 V4_PAPER   = '#F2EDE2';
const V4_PAPER_2 = '#E8E1D2';
const V4_INK     = '#1A1814';
const V4_INK_2   = '#3A342A';
const V4_MUTE    = '#6C6455';
const V4_RULE    = '#D6CCB6';
const V4_BLUE    = '#2F4BD9';
const V4_YELLOW  = '#F5D547';
const V4_GREEN   = '#5C8A3A';
const V4_PINK    = '#E8A4A4';

// V4 accent is driven by the Tweaks --accent variable so the design
// responds to user accent changes. Fallback matches brick-orange default.
const V4_ACCENT_VAR = 'var(--accent, #D94A18)';

const V4_FONT_MONO = "'JetBrains Mono', ui-monospace, monospace";
const V4_FONT_SANS = "'Inter', sans-serif";
const V4_FONT_SERIF = "'Fraunces', serif";

/* ==================== Helpers ==================== */

function V4Tag({ children, color = V4_INK, bg = V4_PAPER_2 }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      padding: '4px 10px', borderRadius: 4,
      fontFamily: V4_FONT_MONO, fontSize: 11, fontWeight: 500,
      letterSpacing: '0.08em', textTransform: 'uppercase',
      color, background: bg,
      border: `1px solid ${V4_RULE}`,
    }}>{children}</span>
  );
}

function V4BrutalCard({ children, rotate = 0, color = 'white', style = {} }) {
  return (
    <div style={{
      background: color,
      border: `1.5px solid ${V4_INK}`,
      borderRadius: 2,
      boxShadow: `6px 6px 0 0 ${V4_INK}`,
      transform: `rotate(${rotate}deg)`,
      ...style,
    }}>{children}</div>
  );
}

/* ==================== Nav ==================== */

function V4Nav({ copy, lang, onLang }) {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: V4_PAPER,
      borderBottom: `1.5px solid ${V4_INK}`,
      fontFamily: V4_FONT_MONO,
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 64 }}>
        <WordyBrandLogo height={32} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 28, fontSize: 13 }} className="v1-nav-links">
          <a href="#features" style={{ color: V4_INK }}>~/features</a>
          <a href="#how" style={{ color: V4_INK }}>~/how</a>
          <a href="#pricing" style={{ color: V4_INK }}>~/pricing</a>
          <a href="#faq" style={{ color: V4_INK }}>~/faq</a>
        </div>
        <div style={{ display: 'flex', gap: 10, alignItems: 'center' }}>
          <LangDropdown lang={lang} onLang={onLang} theme="terminal" />
          <a href="#download" style={{
            padding: '8px 14px',
            background: V4_INK, color: V4_PAPER,
            fontSize: 12, fontWeight: 600,
            border: `1.5px solid ${V4_INK}`,
            borderRadius: 2,
            fontFamily: V4_FONT_MONO,
            letterSpacing: '0.04em', textTransform: 'uppercase',
            boxShadow: `3px 3px 0 0 ${V4_ACCENT_VAR}`,
          }}>$ download</a>
        </div>
      </div>
    </nav>
  );
}

/* ==================== Hero ==================== */

function V4CodeBlock() {
  const G = (c) => ({ color: c });
  return (
    <div style={{
      background: V4_INK,
      color: '#E8E2D3',
      fontFamily: V4_FONT_MONO,
      fontSize: 13,
      lineHeight: 1.7,
      padding: '18px 22px',
      borderRadius: 2,
      border: `1.5px solid ${V4_INK}`,
      boxShadow: `6px 6px 0 0 ${V4_ACCENT_VAR}`,
      maxWidth: 440,
    }}>
      <div style={{ display: 'flex', gap: 6, marginBottom: 14, opacity: 0.5 }}>
        <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FF5F56' }}></span>
        <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FFBD2E' }}></span>
        <span style={{ width: 10, height: 10, borderRadius: 5, background: '#27C93F' }}></span>
      </div>
      <div style={G('#6C6455')}>{'// while you work'}</div>
      <div>
        <span style={G('#C792EA')}>const</span>{' '}
        <span style={G('#F5D547')}>word</span> = wordy.<span style={G('#82AAFF')}>pop</span>(
      </div>
      <div style={{ paddingLeft: 16 }}>
        <span style={G('#C3E88D')}>"cars"</span>, <span style={G('#F78C6C')}>"A2"</span>
      </div>
      <div>);</div>
      <div style={{ marginTop: 10 }}>
        <span style={G('#C792EA')}>await</span> word.<span style={G('#82AAFF')}>show</span>();
      </div>
      <div style={{
        marginTop: 14, padding: '6px 10px',
        background: 'rgba(217, 74, 24, 0.15)',
        color: V4_ACCENT_VAR,
        borderLeft: `2px solid ${V4_ACCENT_VAR}`,
        fontSize: 12,
      }}>
        → popped on your screen. learned in context. ✓
      </div>
    </div>
  );
}

function V4Hero({ copy }) {
  return (
    <section id="hero" data-screen-label="01 Hero" style={{
      background: V4_PAPER,
      paddingBlock: 'clamp(56px, 8vw, 96px)',
      position: 'relative',
      overflow: 'hidden',
      color: V4_INK,
    }}>
      {/* ruled-paper horizontal lines */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `repeating-linear-gradient(0deg, transparent 0, transparent 39px, ${V4_RULE}55 39px, ${V4_RULE}55 40px)`,
        pointerEvents: 'none',
        opacity: 0.6,
      }}></div>
      {/* red margin line */}
      <div style={{
        position: 'absolute', top: 0, bottom: 0, left: '10%',
        width: 1, background: V4_ACCENT_VAR, opacity: 0.25,
      }}></div>

      <div className="wrap" style={{ position: 'relative' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 32 }}>
          <V4Tag color={V4_ACCENT_VAR}>● v3.0 · {copy.hero.badge}</V4Tag>
          <span style={{ fontFamily: V4_FONT_MONO, fontSize: 12, color: V4_MUTE }}>/etc/wordytrainer/readme.md</span>
        </div>

        <h1 style={{
          fontFamily: V4_FONT_SERIF,
          fontSize: 'clamp(48px, 8vw, 120px)',
          lineHeight: 0.96,
          letterSpacing: '-0.035em',
          fontWeight: 400,
          textWrap: 'balance',
          maxWidth: '14ch',
          marginBottom: 20,
        }}>
          Learn <span style={{ fontStyle: 'italic', color: V4_ACCENT_VAR }}>words</span><br/>
          while you<br/>
          <span style={{
            position: 'relative',
            display: 'inline-block',
          }}>
            actually work
            <svg viewBox="0 0 300 20" preserveAspectRatio="none" style={{
              position: 'absolute', left: 0, right: 0, bottom: -6,
              width: '100%', height: 14,
            }}>
              <path d="M 4 10 Q 80 2, 160 10 T 296 10" stroke={V4_ACCENT_VAR} strokeWidth="3" fill="none" strokeLinecap="round"/>
            </svg>
          </span>.
        </h1>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)',
          gap: 'clamp(32px, 5vw, 64px)',
          alignItems: 'start',
          marginTop: 48,
        }} className="v1-hero-grid">
          <div>
            <p style={{
              fontFamily: V4_FONT_SANS, fontSize: 18, color: V4_INK_2,
              maxWidth: 440, textWrap: 'pretty', lineHeight: 1.55,
            }}>
              {copy.hero.sub}
            </p>
            <div style={{ display: 'flex', gap: 12, marginTop: 28, flexWrap: 'wrap' }}>
              <a href="#download" style={{
                padding: '14px 22px',
                background: V4_ACCENT_VAR, color: 'white',
                fontFamily: V4_FONT_MONO, fontSize: 13, fontWeight: 600,
                border: `1.5px solid ${V4_INK}`, borderRadius: 2,
                letterSpacing: '0.04em', textTransform: 'uppercase',
                boxShadow: `4px 4px 0 0 ${V4_INK}`,
                display: 'inline-flex', alignItems: 'center', gap: 8,
              }}>$ install wordy <LineIcon name="arrowRight" size={14} color="white" /></a>
              <a href="#demo" style={{
                padding: '14px 22px',
                background: 'white', color: V4_INK,
                fontFamily: V4_FONT_MONO, fontSize: 13, fontWeight: 600,
                border: `1.5px solid ${V4_INK}`, borderRadius: 2,
                letterSpacing: '0.04em', textTransform: 'uppercase',
              }}>▸ watch demo</a>
            </div>
            <div style={{ marginTop: 36, fontFamily: V4_FONT_MONO, fontSize: 12, color: V4_MUTE, lineHeight: 1.9 }}>
              <div><span style={{ color: V4_ACCENT_VAR }}>✓</span> macOS 12+ · free forever plan · 48 MB</div>
              <div><span style={{ color: V4_ACCENT_VAR }}>✓</span> 50,000+ learners · rated 4.8/5 · ★★★★★</div>
              <div><span style={{ color: V4_ACCENT_VAR }}>✓</span> no credit card · no ads · no telemetry</div>
            </div>
          </div>
          <div style={{ position: 'relative', paddingTop: 8 }}>
            <V4CodeBlock />
            {/* sticky note pinned over code */}
            <div style={{
              position: 'absolute',
              right: -10, top: 180,
              transform: 'rotate(3deg)',
              width: 210,
              padding: '16px 18px',
              background: V4_YELLOW,
              fontFamily: V4_FONT_MONO,
              fontSize: 12,
              color: V4_INK,
              boxShadow: `4px 6px 12px rgba(0,0,0,0.18)`,
              border: `1px solid rgba(0,0,0,0.08)`,
            }}>
              <div style={{ fontSize: 18, fontWeight: 600, fontFamily: V4_FONT_SERIF, lineHeight: 1.1, marginBottom: 6 }}>
                seat <span style={{ fontSize: 11, fontFamily: V4_FONT_MONO, color: V4_MUTE }}>[siːt]</span>
              </div>
              <div style={{ fontSize: 14, fontFamily: V4_FONT_SANS }}>сиденье</div>
              <div style={{
                marginTop: 10, paddingTop: 8,
                borderTop: '1px dashed rgba(0,0,0,0.25)',
                fontSize: 10, color: V4_INK, opacity: 0.7,
              }}>
                cars · A2 · pop #14
              </div>
            </div>
            {/* red pin */}
            <div style={{
              position: 'absolute',
              right: 80, top: 168,
              width: 14, height: 14, borderRadius: '50%',
              background: 'radial-gradient(circle at 30% 30%, #FF6B5C, #C0352A)',
              boxShadow: '0 2px 4px rgba(0,0,0,0.3)',
              zIndex: 2,
            }}></div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ==================== Pains ==================== */

function V4Pains({ copy }) {
  return (
    <section id="pains" data-screen-label="02 Pains" style={{
      background: V4_INK, color: V4_PAPER,
      paddingBlock: 'var(--section-y)',
    }}>
      <div className="wrap">
        <V4Tag color={V4_YELLOW} bg="rgba(245, 213, 71, 0.12)">The diagnostic</V4Tag>
        <h2 style={{
          marginTop: 20, marginBottom: 56,
          fontFamily: V4_FONT_SERIF,
          fontSize: 'clamp(36px, 5vw, 64px)',
          letterSpacing: '-0.02em', lineHeight: 1.05,
          fontWeight: 400,
          maxWidth: 800,
        }}>
          {copy.pains.title_v2}
        </h2>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          {copy.pains.items.map((it, i) => (
            <div key={i} style={{
              display: 'grid',
              gridTemplateColumns: '60px 1fr 1.4fr',
              gap: 'clamp(20px, 4vw, 48px)',
              padding: '28px 0',
              borderTop: i === 0 ? `1.5px dashed ${V4_RULE}50` : 'none',
              borderBottom: `1.5px dashed ${V4_RULE}50`,
              alignItems: 'baseline',
            }} className="v2-pain-row">
              <div style={{ fontFamily: V4_FONT_MONO, fontSize: 12, color: V4_YELLOW, letterSpacing: '0.1em' }}>
                ERR.0{i+1}
              </div>
              <div style={{
                fontFamily: V4_FONT_SERIF,
                fontSize: 'clamp(22px, 2.4vw, 28px)',
                fontStyle: 'italic',
                color: V4_PAPER,
                opacity: 0.7,
                lineHeight: 1.3,
              }}>
                “{it.pain}”
              </div>
              <div>
                <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
                  <span style={{ fontFamily: V4_FONT_MONO, fontSize: 11, color: V4_ACCENT_VAR, letterSpacing: '0.1em' }}>
                    → FIX
                  </span>
                </div>
                <div style={{ fontFamily: V4_FONT_SANS, fontSize: 18, fontWeight: 600, marginBottom: 6 }}>
                  {it.answer}
                </div>
                <p style={{ fontFamily: V4_FONT_SANS, fontSize: 14, color: V4_PAPER, opacity: 0.7, textWrap: 'pretty' }}>
                  {it.detail}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ==================== How (receipt / terminal log) ==================== */

function V4How({ copy }) {
  return (
    <section id="how" data-screen-label="03 How" style={{
      background: V4_PAPER_2,
      paddingBlock: 'var(--section-y)',
      color: V4_INK,
    }}>
      <div className="wrap" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.3fr)',
        gap: 'clamp(32px, 6vw, 80px)',
        alignItems: 'start',
      }} className="v1-hero-grid">
        <div>
          <V4Tag>How it works</V4Tag>
          <h2 style={{
            marginTop: 20,
            fontFamily: V4_FONT_SERIF,
            fontSize: 'clamp(36px, 5vw, 56px)',
            fontWeight: 400,
            letterSpacing: '-0.02em',
            lineHeight: 1.02,
          }}>
            Four steps.<br/>
            <span style={{ fontStyle: 'italic', color: V4_ACCENT_VAR }}>That's it.</span>
          </h2>
          <p style={{ marginTop: 24, fontFamily: V4_FONT_SANS, fontSize: 16, color: V4_INK_2, maxWidth: 380, textWrap: 'pretty' }}>
            From opening the app to learning your first word in under two minutes. No tutorials, no onboarding wizards.
          </p>
        </div>
        <div style={{
          background: 'white',
          border: `1.5px solid ${V4_INK}`,
          borderRadius: 2,
          padding: '4px 0',
          boxShadow: `6px 6px 0 0 ${V4_INK}`,
          fontFamily: V4_FONT_MONO,
          position: 'relative',
        }}>
          {/* receipt top perforation */}
          <div style={{
            height: 10,
            background: `repeating-linear-gradient(90deg, ${V4_INK} 0, ${V4_INK} 4px, transparent 4px, transparent 10px)`,
            opacity: 0.1,
          }}></div>
          <div style={{ padding: '20px 24px', fontSize: 11, color: V4_MUTE, letterSpacing: '0.1em', borderBottom: `1px dashed ${V4_RULE}` }}>
            $ wordy init --user=you
          </div>
          {copy.how.steps.map((s, i) => (
            <div key={i} style={{
              padding: '22px 24px',
              borderBottom: i < copy.how.steps.length - 1 ? `1px dashed ${V4_RULE}` : 'none',
              display: 'grid',
              gridTemplateColumns: '36px 1fr',
              gap: 16,
              alignItems: 'start',
            }}>
              <div style={{
                width: 28, height: 28,
                border: `1.5px solid ${V4_INK}`,
                borderRadius: 2,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontSize: 13, fontWeight: 600, fontFamily: V4_FONT_MONO,
                background: i === 0 ? V4_ACCENT_VAR : 'white',
                color: i === 0 ? 'white' : V4_INK,
              }}>
                {s.n}
              </div>
              <div>
                <div style={{ fontFamily: V4_FONT_SANS, fontSize: 16, fontWeight: 600, marginBottom: 4 }}>
                  {s.title}
                </div>
                <div style={{ fontFamily: V4_FONT_SANS, fontSize: 14, color: V4_MUTE, textWrap: 'pretty' }}>
                  {s.desc}
                </div>
              </div>
            </div>
          ))}
          <div style={{ padding: '16px 24px', fontSize: 11, color: V4_GREEN, borderTop: `1px dashed ${V4_RULE}`, letterSpacing: '0.04em' }}>
            → ready. 50,000+ learners already running.
          </div>
          <div style={{
            height: 10,
            background: `repeating-linear-gradient(90deg, ${V4_INK} 0, ${V4_INK} 4px, transparent 4px, transparent 10px)`,
            opacity: 0.1,
          }}></div>
        </div>
      </div>
    </section>
  );
}

/* ==================== Features (corkboard of sticky notes) ==================== */

function V4Features({ copy }) {
  const stickyColors = [V4_YELLOW, V4_PINK, '#A8D8A8', '#A8C8E8', V4_YELLOW, '#E8C8A8'];
  const rotations = [-2, 1.5, -1, 2, -1.5, 1];
  return (
    <section id="features" data-screen-label="04 Features" style={{
      background: V4_PAPER,
      paddingBlock: 'var(--section-y)',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* corkboard texture */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `radial-gradient(${V4_RULE}88 1px, transparent 1px)`,
        backgroundSize: '12px 12px',
        opacity: 0.25,
        pointerEvents: 'none',
      }}></div>
      <div className="wrap" style={{ position: 'relative' }}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <V4Tag color={V4_ACCENT_VAR}>What's inside</V4Tag>
          <h2 style={{
            marginTop: 20,
            fontFamily: V4_FONT_SERIF,
            fontSize: 'clamp(36px, 5vw, 60px)',
            fontWeight: 400,
            letterSpacing: '-0.02em',
            lineHeight: 1.02,
          }}>
            Six features, <span style={{ fontStyle: 'italic', color: V4_ACCENT_VAR }}>zero fluff.</span>
          </h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 28,
        }}>
          {copy.features.items.map((f, i) => (
            <div key={i} style={{
              position: 'relative',
              padding: '24px 22px 22px',
              background: stickyColors[i % stickyColors.length],
              fontFamily: V4_FONT_SANS,
              transform: `rotate(${rotations[i % rotations.length]}deg)`,
              boxShadow: `4px 6px 14px rgba(0,0,0,0.12)`,
              minHeight: 200,
              border: '1px solid rgba(0,0,0,0.06)',
            }}>
              {/* tape */}
              <div style={{
                position: 'absolute',
                top: -10, left: '50%', transform: 'translateX(-50%) rotate(-3deg)',
                width: 60, height: 18,
                background: 'rgba(255,255,255,0.55)',
                border: '1px solid rgba(0,0,0,0.08)',
                boxShadow: '0 1px 2px rgba(0,0,0,0.08)',
              }}></div>
              <div style={{ fontFamily: V4_FONT_MONO, fontSize: 10, color: V4_INK, opacity: 0.55, letterSpacing: '0.1em', marginBottom: 10 }}>
                № 0{i+1}
              </div>
              <div style={{ fontFamily: V4_FONT_SERIF, fontSize: 22, fontWeight: 500, color: V4_INK, lineHeight: 1.15, marginBottom: 8, letterSpacing: '-0.01em' }}>
                {f.t}
              </div>
              <div style={{ fontSize: 14, color: V4_INK, opacity: 0.78, lineHeight: 1.5, textWrap: 'pretty' }}>
                {f.d}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ==================== AI (typewriter prompt + output) ==================== */

function V4AI({ copy }) {
  return (
    <section id="ai" data-screen-label="05 AI" style={{
      background: V4_PAPER_2,
      paddingBlock: 'var(--section-y)',
      color: V4_INK,
    }}>
      <div className="wrap" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.2fr)',
        gap: 'clamp(32px, 6vw, 72px)',
        alignItems: 'center',
      }} className="v1-hero-grid">
        <div>
          <V4Tag color={V4_BLUE}>Powered by AI</V4Tag>
          <h2 style={{
            marginTop: 20,
            fontFamily: V4_FONT_SERIF,
            fontSize: 'clamp(36px, 4.5vw, 56px)',
            fontWeight: 400,
            letterSpacing: '-0.02em',
            lineHeight: 1.02,
          }}>
            Any topic. <span style={{ fontStyle: 'italic', color: V4_ACCENT_VAR }}>Instant list.</span>
          </h2>
          <p style={{ marginTop: 20, fontFamily: V4_FONT_SANS, fontSize: 17, color: V4_INK_2, maxWidth: 480, textWrap: 'pretty' }}>
            {copy.ai.sub}
          </p>
          <div style={{
            marginTop: 28,
            background: 'white',
            border: `1.5px solid ${V4_INK}`,
            borderRadius: 2,
            padding: '18px 20px',
            fontFamily: V4_FONT_MONO,
            fontSize: 13,
            boxShadow: `5px 5px 0 0 ${V4_INK}`,
          }}>
            <div style={{ color: V4_MUTE, fontSize: 11, letterSpacing: '0.1em', marginBottom: 10 }}>
              $ wordy generate
            </div>
            <div style={{ marginBottom: 6 }}>
              <span style={{ color: V4_BLUE }}>--topic</span>{' '}
              <span style={{ color: V4_INK }}>"{copy.ai.example_prompt}"</span>
            </div>
            <div style={{ marginBottom: 6 }}>
              <span style={{ color: V4_BLUE }}>--level</span>{' '}
              <span style={{ color: V4_INK }}>{copy.ai.example_level}</span>
            </div>
            <div style={{ marginBottom: 14 }}>
              <span style={{ color: V4_BLUE }}>--count</span>{' '}
              <span style={{ color: V4_INK }}>{copy.ai.example_count}</span>
            </div>
            <div style={{
              paddingTop: 12, borderTop: `1px dashed ${V4_RULE}`,
              color: V4_GREEN, fontSize: 12,
            }}>
              ✓ list generated in 0.8s · 25 words · ready to learn
            </div>
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <div style={{
            border: `1.5px solid ${V4_INK}`,
            borderRadius: 2,
            overflow: 'hidden',
            boxShadow: `8px 8px 0 0 ${V4_ACCENT_VAR}`,
            background: V4_INK,
          }}>
            <div style={{ background: '#201F25', padding: '10px 14px', display: 'flex', gap: 6, borderBottom: `1px solid ${V4_INK}` }}>
              <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FF5F56' }}></span>
              <span style={{ width: 10, height: 10, borderRadius: 5, background: '#FFBD2E' }}></span>
              <span style={{ width: 10, height: 10, borderRadius: 5, background: '#27C93F' }}></span>
              <span style={{ marginLeft: 12, fontFamily: V4_FONT_MONO, fontSize: 11, color: V4_MUTE }}>wordy — a2 — cars</span>
            </div>
            <img src="assets/app_ai_a2.png" alt="AI-generated list" style={{ width: '100%', display: 'block' }}/>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ==================== Testimonials (hand-written / pull-quote) ==================== */

function V4Testimonials({ copy }) {
  return (
    <section id="testimonials" data-screen-label="06 Testimonials" style={{
      background: V4_PAPER,
      paddingBlock: 'var(--section-y)',
      color: V4_INK,
    }}>
      <div className="wrap">
        <div style={{ maxWidth: 800, marginBottom: 56 }}>
          <V4Tag>Who uses it</V4Tag>
          <h2 style={{
            marginTop: 20,
            fontFamily: V4_FONT_SERIF,
            fontSize: 'clamp(36px, 5vw, 56px)',
            fontWeight: 400,
            letterSpacing: '-0.02em',
            lineHeight: 1.02,
          }}>
            People who <span style={{ fontStyle: 'italic', color: V4_ACCENT_VAR }}>actually learn.</span>
          </h2>
        </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,
              background: 'white',
              border: `1.5px solid ${V4_INK}`,
              borderRadius: 2,
              padding: '28px 26px',
              position: 'relative',
              boxShadow: `5px 5px 0 0 ${V4_INK}`,
            }}>
              <div style={{
                fontFamily: V4_FONT_SERIF,
                fontSize: 64,
                color: V4_ACCENT_VAR,
                lineHeight: 0.5,
                fontStyle: 'italic',
                marginBottom: 8,
              }}>"</div>
              <blockquote style={{
                margin: 0,
                fontFamily: V4_FONT_SERIF,
                fontSize: 20,
                fontWeight: 400,
                color: V4_INK,
                lineHeight: 1.4,
                textWrap: 'pretty',
                marginBottom: 24,
              }}>
                {t.q}
              </blockquote>
              <figcaption style={{
                borderTop: `1px dashed ${V4_RULE}`,
                paddingTop: 14,
                fontFamily: V4_FONT_MONO,
                fontSize: 12,
              }}>
                <div style={{ fontWeight: 600, color: V4_INK }}>— {t.name}</div>
                <div style={{ color: V4_MUTE, marginTop: 2 }}>{t.role}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ==================== Pricing (envelopes) ==================== */

function V4Pricing({ copy }) {
  return (
    <section id="pricing" data-screen-label="07 Pricing" style={{
      background: V4_INK,
      paddingBlock: 'var(--section-y)',
      color: V4_PAPER,
    }}>
      <div className="wrap">
        <div style={{ maxWidth: 800, marginBottom: 56 }}>
          <V4Tag color={V4_YELLOW} bg="rgba(245, 213, 71, 0.12)">Pricing</V4Tag>
          <h2 style={{
            marginTop: 20,
            fontFamily: V4_FONT_SERIF,
            fontSize: 'clamp(36px, 5vw, 60px)',
            fontWeight: 400,
            letterSpacing: '-0.02em',
            lineHeight: 1.02,
          }}>
            Pick your plan. <span style={{ fontStyle: 'italic', color: V4_ACCENT_VAR }}>No lock-in.</span>
          </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: '28px 26px',
              background: p.highlight ? V4_PAPER : 'transparent',
              color: p.highlight ? V4_INK : V4_PAPER,
              border: p.highlight ? `1.5px solid ${V4_PAPER}` : `1.5px dashed ${V4_RULE}60`,
              borderRadius: 2,
              position: 'relative',
              boxShadow: p.highlight ? `6px 6px 0 0 ${V4_ACCENT_VAR}` : 'none',
            }}>
              {p.tag && (
                <div style={{
                  position: 'absolute', top: -11, right: 20,
                  background: V4_ACCENT_VAR, color: 'white',
                  fontFamily: V4_FONT_MONO, fontSize: 10, fontWeight: 600,
                  padding: '3px 10px',
                  letterSpacing: '0.08em', textTransform: 'uppercase',
                  border: `1.5px solid ${V4_INK}`,
                }}>{p.tag}</div>
              )}
              <div style={{ fontFamily: V4_FONT_MONO, fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.7, marginBottom: 14 }}>
                {p.name}
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
                <div style={{ fontFamily: V4_FONT_SERIF, fontSize: 56, fontWeight: 500, letterSpacing: '-0.03em', lineHeight: 1 }}>
                  {p.price}
                </div>
                <div style={{ fontFamily: V4_FONT_MONO, fontSize: 13, opacity: 0.7 }}>/ {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: 10, fontFamily: V4_FONT_SANS, fontSize: 14, alignItems: 'flex-start' }}>
                    <span style={{ fontFamily: V4_FONT_MONO, color: V4_ACCENT_VAR, flexShrink: 0 }}>→</span>
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <a href="#download" style={{
                display: 'flex', justifyContent: 'center',
                padding: '12px 18px',
                background: p.highlight ? V4_INK : V4_ACCENT_VAR,
                color: p.highlight ? V4_PAPER : 'white',
                fontFamily: V4_FONT_MONO, fontSize: 12, fontWeight: 600,
                letterSpacing: '0.06em', textTransform: 'uppercase',
                border: `1.5px solid ${p.highlight ? V4_INK : V4_ACCENT_VAR}`,
                borderRadius: 2,
              }}>$ {p.cta}</a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ==================== FAQ ==================== */

function V4FAQ({ copy }) {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq" data-screen-label="08 FAQ" style={{
      background: V4_PAPER,
      paddingBlock: 'var(--section-y)',
      color: V4_INK,
    }}>
      <div className="wrap" style={{
        display: 'grid',
        gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.6fr)',
        gap: 'clamp(32px, 6vw, 80px)',
      }} className="v1-hero-grid">
        <div>
          <V4Tag>FAQ</V4Tag>
          <h2 style={{
            marginTop: 20,
            fontFamily: V4_FONT_SERIF,
            fontSize: 'clamp(32px, 4vw, 48px)',
            fontWeight: 400,
            letterSpacing: '-0.02em',
            lineHeight: 1.02,
          }}>
            Questions we keep <span style={{ fontStyle: 'italic', color: V4_ACCENT_VAR }}>getting.</span>
          </h2>
        </div>
        <div>
          {copy.faq.items.map((f, i) => (
            <div key={i} style={{
              borderTop: i === 0 ? `1.5px solid ${V4_INK}` : 'none',
              borderBottom: `1.5px solid ${V4_INK}`,
            }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{ width: '100%', display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '20px 0', textAlign: 'left', gap: 20 }}
              >
                <span style={{ fontFamily: V4_FONT_SANS, fontSize: 17, fontWeight: 600, color: V4_INK }}>
                  <span style={{ fontFamily: V4_FONT_MONO, color: V4_ACCENT_VAR, marginRight: 12 }}>Q{String(i+1).padStart(2, '0')}.</span>
                  {f.q}
                </span>
                <span style={{ fontFamily: V4_FONT_MONO, fontSize: 20, color: V4_ACCENT_VAR, flexShrink: 0 }}>
                  {open === i ? '−' : '+'}
                </span>
              </button>
              {open === i && (
                <div style={{
                  paddingBottom: 22, paddingLeft: 44, paddingRight: 40,
                  fontFamily: V4_FONT_SANS, fontSize: 15,
                  color: V4_INK_2, textWrap: 'pretty',
                }} className="fade-up">
                  {f.a}
                </div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ==================== Final CTA + Footer ==================== */

function V4Final({ copy }) {
  return (
    <section id="download" data-screen-label="09 CTA" style={{
      background: V4_ACCENT_VAR,
      color: V4_PAPER,
      paddingBlock: 'var(--section-y)',
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="wrap" style={{ position: 'relative' }}>
        <V4Tag color={V4_INK} bg={V4_YELLOW}>Ship it</V4Tag>
        <h2 style={{
          marginTop: 28,
          fontFamily: V4_FONT_SERIF,
          fontSize: 'clamp(44px, 7vw, 96px)',
          fontWeight: 400,
          letterSpacing: '-0.03em',
          lineHeight: 0.98,
          maxWidth: '14ch',
          textWrap: 'balance',
        }}>
          Start learning words<br/>
          <span style={{ fontStyle: 'italic' }}>today.</span>
        </h2>
        <p style={{
          marginTop: 24,
          fontFamily: V4_FONT_SANS, fontSize: 18,
          maxWidth: 520, textWrap: 'pretty',
          opacity: 0.92,
        }}>
          {copy.final.sub}. Free forever plan. Two minutes to your first word.
        </p>
        <div style={{ marginTop: 36, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <a href="#" style={{
            padding: '16px 24px',
            background: V4_INK, color: V4_PAPER,
            fontFamily: V4_FONT_MONO, fontSize: 13, fontWeight: 600,
            border: `1.5px solid ${V4_INK}`, borderRadius: 2,
            letterSpacing: '0.06em', textTransform: 'uppercase',
            boxShadow: `4px 4px 0 0 ${V4_PAPER}`,
            display: 'inline-flex', alignItems: 'center', gap: 10,
          }}>$ download for macOS <LineIcon name="arrowRight" size={14} color={V4_PAPER} /></a>
          <a href="#features" style={{
            padding: '16px 24px',
            background: 'transparent', color: V4_PAPER,
            fontFamily: V4_FONT_MONO, fontSize: 13, fontWeight: 600,
            border: `1.5px solid ${V4_PAPER}`, borderRadius: 2,
            letterSpacing: '0.06em', textTransform: 'uppercase',
          }}>▸ see features</a>
        </div>
      </div>
    </section>
  );
}

function V4Footer({ copy }) {
  return (
    <footer style={{ background: V4_INK, color: V4_PAPER, paddingBlock: 48, fontFamily: V4_FONT_MONO }}>
      <div className="wrap" style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr', gap: 32 }} className="v1-footer">
        <div>
          <div style={{ display: 'inline-block' }}>
            <WordyBrandLogo height={28} onDark />
          </div>
          <p style={{ marginTop: 14, fontSize: 12, color: V4_MUTE, maxWidth: 320, textWrap: 'pretty', lineHeight: 1.7 }}>
            {copy.footer.tagline}
          </p>
          <a href={`mailto:${copy.footer.email}`} style={{ display: 'inline-block', marginTop: 12, fontSize: 12, color: V4_ACCENT_VAR }}>
            ✉ {copy.footer.email}
          </a>
        </div>
        <div>
          <div style={{ fontSize: 11, color: V4_MUTE, marginBottom: 12, letterSpacing: '0.12em', textTransform: 'uppercase' }}>/product</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
            {copy.footer.cols.product.map(l => <li key={l}><a href="#" style={{ color: V4_PAPER }}>→ {l}</a></li>)}
          </ul>
        </div>
        <div>
          <div style={{ fontSize: 11, color: V4_MUTE, marginBottom: 12, letterSpacing: '0.12em', textTransform: 'uppercase' }}>/company</div>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 6, fontSize: 12 }}>
            {copy.footer.cols.company.map(l => <li key={l}><a href="#" style={{ color: V4_PAPER }}>→ {l}</a></li>)}
          </ul>
        </div>
      </div>
      <div className="wrap" style={{ marginTop: 40, paddingTop: 20, borderTop: `1px dashed ${V4_RULE}40`, display: 'flex', justifyContent: 'space-between', fontSize: 11, color: V4_MUTE, flexWrap: 'wrap', gap: 8 }}>
        <span>{copy.footer.copy} · built with coffee ☕</span>
        <span>macOS · Windows coming soon</span>
      </div>
    </footer>
  );
}

function V4Landing({ copy, lang, onLang }) {
  return (
    <div data-variant="v4" style={{ background: V4_PAPER, color: V4_INK }}>
      <V4Nav copy={copy} lang={lang} onLang={onLang} />
      <V4Hero copy={copy} />
      <V4Pains copy={copy} />
      <V4How copy={copy} />
      <V4Features copy={copy} />
      <V4AI copy={copy} />
      <V4Testimonials copy={copy} />
      <V4Pricing copy={copy} />
      <V4FAQ copy={copy} />
      <V4Final copy={copy} />
      <V4Footer copy={copy} />
    </div>
  );
}

window.V4Landing = V4Landing;