// V1 — "По ТЗ": light, orange, clean. Classic SaaS landing reinterpreted in a tight editorial way.
const V1_WORDS = [
  { word: 'seat', ipa: '[siːt]', translation: 'сиденье', meta: 'appeared 3s ago · car vocabulary · A2' },
  { word: 'dashboard', ipa: '[ˈdæʃbɔːd]', translation: 'приборная панель', meta: 'appeared 2s ago · car vocabulary · A2' },
  { word: 'fuel', ipa: '[fjuːəl]', translation: 'топливо', meta: 'appeared 4s ago · car vocabulary · A2' },
  { word: 'engine', ipa: '[ˈendʒɪn]', translation: 'двигатель', meta: 'appeared 1s ago · car vocabulary · A2' },
];

function V1Nav({ copy, lang, onLang }) {
  return (
    <nav style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(250, 250, 247, 0.85)',
      backdropFilter: 'blur(12px)',
      borderBottom: '1px solid var(--line)',
    }}>
      <div className="wrap" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', height: 68 }}>
        <WordyBrandLogo height={36} />
        <div style={{ display: 'flex', alignItems: 'center', gap: 28, fontSize: 14 }} 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="light" />
          <a href="#download" className="btn btn-primary" style={{ padding: '10px 18px', fontSize: 14 }}>
            {copy.nav.download}
          </a>
        </div>
      </div>
    </nav>
  );
}

function V1Hero({ copy }) {
  return (
    <Section id="hero" screenLabel="01 Hero">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.05fr)', gap: 'clamp(32px, 6vw, 80px)', alignItems: 'center' }} className="v1-hero-grid">
        <div>
          <div className="chip" style={{ marginBottom: 28 }}>
            <span style={{ width: 6, height: 6, borderRadius: 3, background: 'var(--accent)' }}></span>
            {copy.hero.badge}
          </div>
          <h1 style={{ fontSize: 'clamp(42px, 5.5vw, 72px)', lineHeight: 1, letterSpacing: '-0.03em' }}>
            {copy.hero.h1_a}<br/>
            <span style={{ color: 'var(--accent)' }}>{copy.hero.h1_b}</span>
          </h1>
          <p style={{ marginTop: 24, fontSize: 18, color: 'var(--ink-2)', maxWidth: 500, textWrap: 'pretty' }}>
            {copy.hero.sub}
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
            <a href="#download" className="btn btn-primary">
              {copy.hero.cta} <LineIcon name="arrowRight" size={16} />
            </a>
            <a href="#demo" className="btn btn-secondary">
              <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(--ink-mute)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <LineIcon name="check" size={14} color="var(--accent)" /> {copy.hero.proof_a}
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <LineIcon name="check" size={14} color="var(--accent)" /> {copy.hero.proof_b}
            </div>
          </div>
        </div>

        <div style={{ position: 'relative' }}>
          {/* Background blob */}
          <div style={{
            position: 'absolute', inset: '-8% -4% -4% -4%',
            background: 'radial-gradient(60% 60% at 70% 40%, rgba(255,122,61,0.18), transparent 60%)',
            filter: 'blur(4px)', zIndex: 0,
          }}></div>
          <div style={{ position: 'relative', zIndex: 1 }}>
            <DesktopWithPopup
              screenshot="assets/app_home_clean.png"
              popup={<RotatingPopup words={V1_WORDS} />}
              popupPos="br"
            />
          </div>
          <div style={{
            position: 'absolute', left: '-4%', bottom: '-6%',
            fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--ink-mute)',
            letterSpacing: '0.08em', textTransform: 'uppercase',
            zIndex: 2,
          }}>
            ↑ your desktop · 14:32 · in flow
          </div>
        </div>
      </div>
    </Section>
  );
}

function V1Pains({ copy }) {
  return (
    <Section id="pains" screenLabel="02 Pains" bg="var(--bg-soft)">
      <div style={{ maxWidth: 680, marginBottom: 56 }}>
        <Eyebrow>{copy.pains.eyebrow}</Eyebrow>
        <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 12 }}>{copy.pains.title}</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24 }}>
        {copy.pains.items.map((it, i) => (
          <article key={i} style={{
            background: 'var(--bg-paper)',
            border: '1px solid var(--line)',
            borderRadius: 'var(--r-lg)',
            padding: 28,
          }}>
            <div style={{
              fontFamily: 'var(--font-display)',
              fontSize: 22, fontStyle: 'italic',
              color: 'var(--ink-mute)',
              marginBottom: 20, lineHeight: 1.3,
            }}>
              “{it.pain}”
            </div>
            <div style={{ fontSize: 20, fontWeight: 600, marginBottom: 12, color: 'var(--accent)' }}>
              {it.answer}
            </div>
            <p style={{ color: 'var(--ink-2)', textWrap: 'pretty' }}>{it.detail}</p>
          </article>
        ))}
      </div>
    </Section>
  );
}

function V1How({ copy }) {
  return (
    <Section id="how" screenLabel="03 How">
      <div style={{ maxWidth: 680, marginBottom: 56 }}>
        <Eyebrow>{copy.how.eyebrow}</Eyebrow>
        <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 12 }}>{copy.how.title}</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 0, borderTop: '1px solid var(--line)' }}>
        {copy.how.steps.map((s, i) => (
          <div key={i} style={{
            padding: '28px 28px 32px',
            borderRight: '1px solid var(--line)',
            borderBottom: '1px solid var(--line)',
            position: 'relative',
          }} className="v1-step">
            <div style={{
              fontFamily: 'var(--font-mono)',
              fontSize: 11, letterSpacing: '0.12em',
              color: 'var(--accent)', marginBottom: 20,
            }}>STEP · {s.n}</div>
            <h3 style={{ fontSize: 22, marginBottom: 10 }}>{s.title}</h3>
            <p style={{ fontSize: 15, color: 'var(--ink-mute)', textWrap: 'pretty' }}>{s.desc}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

function V1Features({ copy }) {
  const icons = ['wand', 'bell', 'upload', 'globe', 'chat', 'sparkles'];
  return (
    <Section id="features" screenLabel="04 Features">
      <div style={{ maxWidth: 680, marginBottom: 56 }}>
        <Eyebrow>{copy.features.eyebrow}</Eyebrow>
        <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 12 }}>{copy.features.title}</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
        {copy.features.items.map((f, i) => (
          <article key={i} style={{
            padding: 28, borderRadius: 'var(--r-lg)',
            background: 'var(--bg-paper)',
            border: '1px solid var(--line)',
          }}>
            <div style={{
              width: 44, height: 44, borderRadius: 12,
              background: 'var(--accent-soft)',
              color: 'var(--accent)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              marginBottom: 20,
            }}>
              <LineIcon name={icons[i]} size={22} />
            </div>
            <h3 style={{ fontSize: 18, marginBottom: 8 }}>{f.t}</h3>
            <p style={{ fontSize: 15, color: 'var(--ink-mute)', textWrap: 'pretty' }}>{f.d}</p>
          </article>
        ))}
      </div>
    </Section>
  );
}

function V1AI({ copy }) {
  return (
    <Section id="ai" screenLabel="05 AI" bg="var(--bg-soft)">
      <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1.1fr)', gap: 'clamp(32px, 6vw, 80px)', alignItems: 'center' }} className="v1-hero-grid">
        <div>
          <Eyebrow>{copy.ai.eyebrow}</Eyebrow>
          <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 12 }}>{copy.ai.title}</h2>
          <p style={{ marginTop: 20, fontSize: 17, color: 'var(--ink-2)', maxWidth: 520, textWrap: 'pretty' }}>{copy.ai.sub}</p>
          <a href="#download" className="btn btn-primary" style={{ marginTop: 28 }}>
            {copy.ai.cta} <LineIcon name="arrowRight" size={16} />
          </a>
        </div>
        <DesktopWithPopup screenshot="assets/app_ai_a2.png" />
      </div>
    </Section>
  );
}

function V1Testimonials({ copy }) {
  return (
    <Section id="testimonials" screenLabel="06 Testimonials">
      <div style={{ maxWidth: 680, marginBottom: 56 }}>
        <Eyebrow>{copy.testimonials.eyebrow}</Eyebrow>
        <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 12 }}>{copy.testimonials.title}</h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
        {copy.testimonials.items.map((t, i) => (
          <figure key={i} style={{
            margin: 0, padding: 28,
            background: 'var(--bg-paper)',
            border: '1px solid var(--line)',
            borderRadius: 'var(--r-lg)',
          }}>
            <div style={{ color: 'var(--accent)', fontSize: 28, lineHeight: 1, marginBottom: 12 }}>“</div>
            <blockquote style={{ margin: 0, fontSize: 16, color: 'var(--ink-2)', lineHeight: 1.55, textWrap: 'pretty' }}>
              {t.q}
            </blockquote>
            <figcaption style={{ marginTop: 20, fontSize: 14 }}>
              <div style={{ fontWeight: 600 }}>{t.name}</div>
              <div style={{ color: 'var(--ink-mute)' }}>{t.role}</div>
            </figcaption>
          </figure>
        ))}
      </div>
    </Section>
  );
}

function V1Pricing({ copy }) {
  return (
    <Section id="pricing" screenLabel="07 Pricing" bg="var(--bg-soft)">
      <div style={{ maxWidth: 680, marginBottom: 56 }}>
        <Eyebrow>{copy.pricing.eyebrow}</Eyebrow>
        <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 12 }}>{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',
            transform: p.highlight ? 'scale(1.02)' : 'none',
          }}>
            {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(--accent-soft)',
                color: p.highlight ? 'white' : 'var(--accent)',
                letterSpacing: '0.08em', textTransform: 'uppercase',
              }}>{p.tag}</div>
            )}
            <div style={{ fontSize: 16, fontWeight: 500, opacity: 0.8 }}>{p.name}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 12 }}>
              <div style={{ fontSize: 44, fontWeight: 600, letterSpacing: '-0.02em' }}>{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 V1FAQ({ copy }) {
  const [open, setOpen] = useState(0);
  return (
    <Section id="faq" screenLabel="08 FAQ">
      <div style={{ maxWidth: 680, marginBottom: 40 }}>
        <Eyebrow>{copy.faq.eyebrow}</Eyebrow>
        <h2 style={{ fontSize: 'clamp(32px, 4vw, 48px)', marginTop: 12 }}>{copy.faq.title}</h2>
      </div>
      <div style={{ maxWidth: 820, 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(--ink-mute)', 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>
    </Section>
  );
}

function V1Final({ copy }) {
  return (
    <Section id="download" screenLabel="09 CTA" bg="var(--dark)" style={{ color: 'var(--dark-ink)' }}>
      <div style={{ textAlign: 'center', maxWidth: 780, margin: '0 auto' }}>
        <div className="chip" style={{ background: 'rgba(255,255,255,0.06)', color: 'var(--dark-ink)', border: '1px solid rgba(255,255,255,0.1)', marginBottom: 24 }}>
          <LineIcon name="clock" size={14} />
          {copy.final.eyebrow}
        </div>
        <h2 style={{ fontSize: 'clamp(36px, 5vw, 60px)', lineHeight: 1.05 }}>
          {copy.final.title}<br/>
          <span style={{ color: 'var(--accent-2)' }}>{copy.final.title_2}</span>
        </h2>
        <a href="#" className="btn btn-white" style={{ marginTop: 36 }}>
          {copy.final.cta} <LineIcon name="arrowRight" size={16} />
        </a>
        <div style={{ marginTop: 24, fontSize: 13, color: 'var(--dark-mute)' }}>{copy.final.sub}</div>
      </div>
    </Section>
  );
}

function V1Footer({ copy }) {
  return (
    <footer style={{ background: 'var(--bg-soft)', borderTop: '1px solid var(--line)', 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} />
          </div>
          <p style={{ marginTop: 16, color: 'var(--ink-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)' }}>
            {copy.footer.email}
          </a>
        </div>
        <div>
          <div className="micro" style={{ marginBottom: 12 }}>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(--ink-2)' }}>{l}</a></li>)}
          </ul>
        </div>
        <div>
          <div className="micro" style={{ marginBottom: 12 }}>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(--ink-2)' }}>{l}</a></li>)}
          </ul>
        </div>
      </div>
      <div className="wrap" style={{ marginTop: 40, paddingTop: 24, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--ink-mute)', fontFamily: 'var(--font-mono)' }}>
        <span>{copy.footer.copy}</span>
        <span>macOS · Windows coming soon</span>
      </div>
    </footer>
  );
}

function V1Landing({ copy, lang, onLang }) {
  return (
    <div data-variant="v1">
      <V1Nav copy={copy} lang={lang} onLang={onLang} />
      <V1Hero copy={copy} />
      <V1Pains copy={copy} />
      <V1How copy={copy} />
      <V1Features copy={copy} />
      <V1AI copy={copy} />
      <V1Testimonials copy={copy} />
      <V1Pricing copy={copy} />
      <V1FAQ copy={copy} />
      <V1Final copy={copy} />
      <V1Footer copy={copy} />
    </div>
  );
}

window.V1Landing = V1Landing;