// Landing.jsx — AutoViz premium landing page (i18n + language picker)

const { useState, useEffect, useRef } = React;
const L = window.LOCALES;

const FEATURE_ICONS = {
  lightning: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>,
  globe: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>,
  filters: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>,
  mobile: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><rect x="5" y="2" width="14" height="20" rx="2"/><line x1="12" y1="18" x2="12.01" y2="18"/></svg>,
  tenant: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M3 21h18"/><path d="M5 21V7l7-4 7 4v14"/><path d="M9 21v-6h6v6"/></svg>,
  ai: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l2.5 5.5L20 10l-5.5 2.5L12 18l-2.5-5.5L4 10l5.5-2.5L12 2z"/><path d="M19 15l.9 2L22 18l-2.1 1L19 21l-.9-2L16 18l2.1-1L19 15z"/></svg>,
  drop: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><polyline points="23 18 13.5 8.5 8.5 13.5 1 6"/><polyline points="17 18 23 18 23 12"/></svg>,
};

const STEP_ICONS = [
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>,
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>,
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>,
];

const CHECK_SVG = <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><polyline points="20 6 9 17 4 12"/></svg>;

// ─── Language picker ───
function LanguagePicker({ lang, setLang }) {
  const [open, setOpen] = useState(false);
  const ref = useRef(null);
  useEffect(() => {
    const onClick = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('click', onClick);
    return () => document.removeEventListener('click', onClick);
  }, []);
  const cur = L[lang];
  return (
    <div className="lang-picker" ref={ref}>
      <button className="lang-picker__trigger" onClick={() => setOpen(v => !v)}>
        <span className="lang-picker__flag">{cur.flag}</span>
        <span className="lang-picker__name">{cur.name}</span>
        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><polyline points="6 9 12 15 18 9"/></svg>
      </button>
      {open && (
        <div className="lang-picker__menu">
          {Object.entries(L).map(([code, data]) => (
            <button
              key={code}
              className={`lang-picker__opt ${code===lang?'is-on':''}`}
              onClick={() => { setLang(code); setOpen(false); }}
            >
              <span className="lang-picker__flag">{data.flag}</span>
              <span>{data.label}</span>
              {code===lang && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round"><polyline points="20 6 9 17 4 12"/></svg>}
            </button>
          ))}
        </div>
      )}
    </div>
  );
}

// ─── Quote modal ───
const PLATFORM_NAMES = ['AutoScout24', 'mobile.de', 'willhaben.at', 'OLX.ba', 'ricardo.ch', 'tutti.ch', 'Polovni Automobili', 'Subito.it', 'Avto.net', 'Njuškalo.hr', 'Kleinanzeigen.de', 'Other'];

function QuoteModal({ t, open, onClose }) {
  const q = t.quote;
  const [form, setForm] = useState({ name: '', email: '', company: '', platforms: [], speed: '5-10', profiles: '6-15', notes: '' });
  const [errors, setErrors] = useState({});
  const [submitted, setSubmitted] = useState(false);
  const dialogRef = useRef(null);

  useEffect(() => {
    if (!open) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => {
      document.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;

  const togglePlatform = (p) => {
    setForm(f => ({ ...f, platforms: f.platforms.includes(p) ? f.platforms.filter(x => x !== p) : [...f.platforms, p] }));
  };

  const submit = (e) => {
    e.preventDefault();
    const errs = {};
    if (!form.name.trim()) errs.name = q.required;
    if (!form.email.trim()) errs.email = q.required;
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) errs.email = q.invalidEmail;
    setErrors(errs);
    if (Object.keys(errs).length === 0) setSubmitted(true);
  };

  const reset = () => {
    setForm({ name: '', email: '', company: '', platforms: [], speed: '5-10', profiles: '6-15', notes: '' });
    setErrors({});
    setSubmitted(false);
    onClose();
  };

  return (
    <div className="qm-overlay" onClick={reset} role="dialog" aria-modal="true">
      <div className="qm-dialog" ref={dialogRef} onClick={(e) => e.stopPropagation()}>
        <button className="qm-close" onClick={reset} aria-label={q.close}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><line x1="6" y1="6" x2="18" y2="18"/><line x1="18" y1="6" x2="6" y2="18"/></svg>
        </button>
        {submitted ? (
          <div className="qm-success">
            <div className="qm-success__icon">
              <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            </div>
            <h3 className="qm-success__title">{q.successTitle}</h3>
            <p className="qm-success__body">{q.successBody}</p>
            <button className="btn btn--primary btn--lg" onClick={reset}>{q.close}</button>
          </div>
        ) : (
          <form onSubmit={submit}>
            <div className="qm-head">
              <h2 className="qm-title">{q.title}</h2>
              <p className="qm-subtitle">{q.subtitle}</p>
            </div>

            <div className="qm-grid">
              <div className="qm-field">
                <label>{q.name}</label>
                <input className={`qm-input ${errors.name ? 'is-error' : ''}`} type="text" placeholder={q.namePh} value={form.name} onChange={(e) => setForm({...form, name: e.target.value})} />
                {errors.name && <span className="qm-error">{errors.name}</span>}
              </div>
              <div className="qm-field">
                <label>{q.email}</label>
                <input className={`qm-input ${errors.email ? 'is-error' : ''}`} type="email" placeholder={q.emailPh} value={form.email} onChange={(e) => setForm({...form, email: e.target.value})} />
                {errors.email && <span className="qm-error">{errors.email}</span>}
              </div>
              <div className="qm-field qm-field--full">
                <label>{q.company} <span className="qm-opt">{q.companyOpt}</span></label>
                <input className="qm-input" type="text" placeholder={q.companyPh} value={form.company} onChange={(e) => setForm({...form, company: e.target.value})} />
              </div>
            </div>

            <div className="qm-block">
              <label className="qm-block__label">{q.platforms}</label>
              <div className="qm-chips">
                {PLATFORM_NAMES.map(p => (
                  <button type="button" key={p} className={`qm-chip ${form.platforms.includes(p) ? 'is-on' : ''}`} onClick={() => togglePlatform(p)}>
                    {form.platforms.includes(p) && <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>}
                    {p}
                  </button>
                ))}
              </div>
            </div>

            <div className="qm-block">
              <label className="qm-block__label">{q.speed}</label>
              <div className="qm-radio-row">
                {[['rt', q.speedRT], ['1-2', q.speed2], ['5-10', q.speed5]].map(([val, label]) => (
                  <label key={val} className={`qm-radio ${form.speed === val ? 'is-on' : ''}`}>
                    <input type="radio" name="speed" checked={form.speed === val} onChange={() => setForm({...form, speed: val})} />
                    <span className="qm-radio__dot" />
                    <span>{label}</span>
                    {val === '5-10' && <span className="qm-radio__tag">{q.speedTag}</span>}
                  </label>
                ))}
              </div>
            </div>

            <div className="qm-block">
              <label className="qm-block__label">{q.profiles}</label>
              <div className="qm-seg">
                {['1-5', '6-15', '16-50', '50+'].map(v => (
                  <button type="button" key={v} className={form.profiles === v ? 'is-on' : ''} onClick={() => setForm({...form, profiles: v})}>{v}</button>
                ))}
              </div>
            </div>

            <div className="qm-block">
              <label className="qm-block__label">{q.notes} <span className="qm-opt">{q.notesOpt}</span></label>
              <textarea className="qm-input qm-input--ta" rows="3" placeholder={q.notesPh} value={form.notes} onChange={(e) => setForm({...form, notes: e.target.value})} />
            </div>

            <div className="qm-actions">
              <button type="button" className="btn btn--ghost btn--lg" onClick={reset}>{q.cancel}</button>
              <button type="submit" className="btn btn--primary btn--lg">{q.submit}</button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

// ─── Hero ───
function Hero({ audience, onAudience, t, openQuote }) {
  const h = t.hero;
  const copy = h[audience];
  const title = audience === 'dealer'
    ? <>{copy.titleA}<em>{copy.titleB}</em>{copy.titleC}<br/>{copy.titleD}<em>{copy.titleE}</em>{copy.titleF}</>
    : <>{copy.titleA}<em>{copy.titleB}</em>{copy.titleC}</>;
  return (
    <section className="hero">
      <div className="hero__grid-bg" />
      <div className="container">
        <div className="hero__inner">
          <div className="hero__copy">
            <div className="audience-tabs" role="tablist">
              <button className={`audience-tab ${audience==='dealer'?'is-active':''}`} onClick={() => onAudience('dealer')}>
                {h.dealerTab} <span className="audience-tab__tag">{h.b2bTag}</span>
              </button>
              <button className={`audience-tab ${audience==='personal'?'is-active':''}`} onClick={() => onAudience('personal')}>
                {h.personalTab} <span className="audience-tab__tag">{h.newTag}</span>
              </button>
            </div>

            <span className="eyebrow">{copy.eyebrow}</span>

            <h1 className="hero__title">{title}</h1>
            <p className="hero__subtitle">{copy.subtitle}</p>

            <div className="hero__actions">
              <button className="btn btn--primary btn--xl" type="button" onClick={openQuote}>
                {copy.cta}
                <span className="btn__arrow">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                </span>
              </button>
              <a className="btn btn--ghost btn--xl" href="#demo">{copy.watch}</a>
            </div>
            <div className="hero__trial-note">{copy.trial}</div>

            <div className="hero__stats">
              {copy.stats.map(([v, l], i) => (
                <div key={i}>
                  <div className="hero__stat-val">{v.startsWith('<') ? <em>{v}</em> : v}</div>
                  <div className="hero__stat-lbl">{l}</div>
                </div>
              ))}
            </div>
          </div>

          <DemoReplay />
        </div>
      </div>
    </section>
  );
}

function PlatformMarquee({ t }) {
  const names = ['AutoScout24', 'mobile.de', 'willhaben', 'Ricardo', 'Tutti', 'OLX.ba', 'Njuškalo', 'Subito', 'Avto.net', 'Polovni Automobili', 'Kleinanzeigen', 'Gebrauchtwagen.at', 'Anibis.ch', 'OTOMOTO'];
  const doubled = [...names, ...names];
  return (
    <div className="marquee-wrap">
      <div className="marquee-label">{t.marquee}</div>
      <div className="marquee">
        {doubled.map((n, i) => <div key={i} className="marquee__item">{n}</div>)}
      </div>
    </div>
  );
}

function DemoSection({ t }) {
  const d = t.demoSection;
  return (
    <section className="section" id="demo">
      <div className="container">
        <div className="section__head section__head--centered">
          <span className="section__kicker">{d.kicker}</span>
          <h2 className="section__title">{d.title1}<em>{d.title2}</em>{d.title3}</h2>
          <p className="section__subtitle">{d.subtitle}</p>
        </div>
        <div style={{maxWidth: 1000, margin: '0 auto'}}>
          <DemoReplay />
        </div>
      </div>
    </section>
  );
}

function HowItWorks({ t }) {
  return (
    <section className="section" id="how">
      <div className="container">
        <div className="section__head">
          <span className="section__kicker">{t.how.kicker}</span>
          <h2 className="section__title">{t.how.title1}<em>{t.how.title2}</em></h2>
        </div>
        <div className="steps">
          {t.how.steps.map((s, i) => (
            <div key={i} className="step">
              <div className="step__n">Step {s.n}</div>
              <div className="step__icon">{STEP_ICONS[i]}</div>
              <h3 className="step__title">{s.t}</h3>
              <p className="step__desc">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Features({ audience, t }) {
  const f = t.features;
  const list = audience === 'dealer' ? f.dealer : f.personal;
  return (
    <section className="section" id="features">
      <div className="container">
        <div className="section__head">
          <span className="section__kicker">{f.kicker}</span>
          <h2 className="section__title">
            {audience === 'dealer'
              ? <>{f.dealerTitle1}<em>{f.dealerTitle2}</em>{f.dealerTitle3}</>
              : <>{f.personalTitle1}<em>{f.personalTitle2}</em>{f.personalTitle3}</>}
          </h2>
          <p className="section__subtitle">{audience === 'dealer' ? f.dealerSubtitle : f.personalSubtitle}</p>
        </div>
        <div className="features">
          {list.map((feat, i) => (
            <div key={i} className="feature">
              <div className="feature__icon">{FEATURE_ICONS[feat.i]}</div>
              <h3 className="feature__title">{feat.t}</h3>
              <p className="feature__desc">{feat.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ShotsSection({ t }) {
  return (
    <section className="section" id="app">
      <div className="container">
        <div className="section__head">
          <span className="section__kicker">{t.shots.kicker}</span>
          <h2 className="section__title">{t.shots.title1}<em>{t.shots.title2}</em></h2>
          <p className="section__subtitle">{t.shots.subtitle}</p>
        </div>
        <AppShots />
      </div>
    </section>
  );
}

function Pricing({ t, openQuote }) {
  const p = t.pricing;
  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section__head section__head--centered">
          <span className="section__kicker">{p.kicker}</span>
          <h2 className="section__title">{p.title1}<em>{p.title2}</em></h2>
          <p className="section__subtitle">{p.subtitle}</p>
        </div>
        <div className="pricing pricing--6">
          {p.tiers.map(tier => (
            <div key={tier.id} className={`price-card ${tier.featured ? 'price-card--featured' : ''} ${tier.id === 'custom' ? 'price-card--custom' : ''}`}>
              {tier.featured && <div className="price-card__badge">{p.featured}</div>}
              <div className="price-card__tier-name">{tier.name}</div>
              <div className="price-card__price">
                {tier.id === 'custom' ? (
                  <span className="price-card__custom">{tier.price}</span>
                ) : (
                  <>
                    <span className="price-card__amount"><em>{tier.price}</em></span>
                    <span className="price-card__unit">{p.perMonth}</span>
                  </>
                )}
              </div>
              <p className="price-card__desc">{tier.desc}</p>
              <ul className="price-card__features">
                {tier.feat.map((feat, i) => <li key={i}>{CHECK_SVG} {feat}</li>)}
              </ul>
              <a
                className={`btn ${tier.featured ? 'btn--primary' : 'btn--ghost'}`}
                href={tier.href}
                onClick={(e) => {
                  // Custom tier (mailto:) and any tier without an id-mapped
                  // price flow through unchanged; everything else opens the
                  // Paddle overlay via window.AutoVizCheckout (defined in
                  // landing.html). If paddle.js isn't loaded yet, fall back
                  // to the original href.
                  if (tier.id === 'custom') return;
                  if (typeof window.AutoVizCheckout !== 'function') return;
                  e.preventDefault();
                  window.AutoVizCheckout(tier.id).catch((err) => {
                    alert('Could not open checkout: ' + err.message);
                  });
                }}
              >
                {tier.cta}
              </a>
            </div>
          ))}
        </div>
        <p className="pricing__note">{p.billingNote}</p>
      </div>
    </section>
  );
}

function CTABand({ t, openQuote }) {
  return (
    <section className="section section--tight" id="trial">
      <div className="container">
        <div className="cta-band">
          <h2 className="cta-band__title">{t.cta.title1}<em>{t.cta.title2}</em></h2>
          <div className="cta-band__right">
            <button className="btn btn--primary btn--xl" type="button" onClick={openQuote}>
              {t.cta.button}
              <span className="btn__arrow">
                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
              </span>
            </button>
            <div className="cta-band__note">{t.cta.note}</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  const f = t.footer;
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer__inner">
          <div>
            <div className="brand">
              <span className="brand__name">autoviz</span>
              <span className="brand__dot" />
            </div>
            <p style={{color: 'var(--text-dim)', fontSize: 13.5, marginTop: 14, maxWidth: 280, lineHeight: 1.55}}>
              {f.tagline}
            </p>
          </div>
          <div>
            <div className="footer__col-title">{f.product}</div>
            <a className="footer__link" href="#how">{f.how}</a>
            <a className="footer__link" href="#features">{f.features}</a>
            <a className="footer__link" href="#app">{f.app}</a>
            <a className="footer__link" href="#pricing">{f.pricing}</a>
          </div>
          <div>
            <div className="footer__col-title">{f.coverage}</div>
            <a className="footer__link" href="#how">{f.platforms}</a>
            <a className="footer__link" href="#">{f.status}</a>
          </div>
          <div>
            <div className="footer__col-title">{f.company}</div>
            <a className="footer__link" href="mailto:contact@autoviz.pro">{f.contact}</a>
          </div>
          <div>
            <div className="footer__col-title">{f.legal}</div>
            <a className="footer__link" href="https://autoviz.pro/terms-of-service" target="_blank" rel="noopener">{f.terms}</a>
            <a className="footer__link" href="https://autoviz.pro/privacy-policy" target="_blank" rel="noopener">{f.privacy}</a>
            <a className="footer__link" href="https://autoviz.pro/refund-policy" target="_blank" rel="noopener">{f.refunds}</a>
            <a className="footer__link" href="https://autoviz.pro/delivery-information" target="_blank" rel="noopener">{f.delivery}</a>
          </div>
        </div>
        <div className="footer__bottom">
          <span>{f.rights}</span>
          <a href="mailto:contact@autoviz.pro">contact@autoviz.pro</a>
        </div>
      </div>
    </footer>
  );
}

function Nav({ t, lang, setLang, openQuote }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'is-scrolled' : ''}`}>
      <div className="container">
        <div className="nav__inner">
          <div className="brand">
            <span className="brand__name">autoviz</span>
            <span className="brand__dot" />
          </div>
          <div className="nav__links">
            <a href="#how">{t.nav.how}</a>
            <a href="#features">{t.nav.features}</a>
            <a href="#app">{t.nav.app}</a>
            <a href="#pricing">{t.nav.pricing}</a>
          </div>
          <div className="nav__cta">
            <LanguagePicker lang={lang} setLang={setLang} />
            <button className="btn btn--primary" type="button" onClick={openQuote}>{t.nav.startFree}</button>
          </div>
        </div>
      </div>
    </nav>
  );
}

// ─── Tweaks panel ───
const ACCENTS = [
  { name: 'copper', color: '#E8C77C', rgb: '232, 199, 124', deep: '#C4A35F' },
  { name: 'crimson',color: '#EF4444', rgb: '239, 68, 68',   deep: '#B91C1C' },
  { name: 'cyan',   color: '#22D3EE', rgb: '34, 211, 238',  deep: '#0891B2' },
  { name: 'violet', color: '#A78BFA', rgb: '167, 139, 250', deep: '#7C3AED' },
  { name: 'mint',   color: '#4ADE80', rgb: '74, 222, 128',  deep: '#16A34A' },
];

function Tweaks({ accent, setAccent, audience, setAudience, density, setDensity, lang, setLang }) {
  return (
    <div className="tweaks">
      <div className="tweaks__title"><span>Tweaks</span></div>
      <div className="tweaks__row">
        <span>Accent</span>
        <div className="tweaks__accents">
          {ACCENTS.map(a => (
            <button key={a.name} className={`tweaks__accent ${accent===a.name?'is-on':''}`} style={{background: a.color}} onClick={() => setAccent(a.name)} aria-label={a.name}/>
          ))}
        </div>
      </div>
      <div className="tweaks__row">
        <span>Audience</span>
        <div className="tweaks__seg">
          <button className={audience==='dealer'?'is-on':''} onClick={() => setAudience('dealer')}>Dealer</button>
          <button className={audience==='personal'?'is-on':''} onClick={() => setAudience('personal')}>Personal</button>
        </div>
      </div>
      <div className="tweaks__row">
        <span>Density</span>
        <div className="tweaks__seg">
          <button className={density==='comfy'?'is-on':''} onClick={() => setDensity('comfy')}>Comfy</button>
          <button className={density==='compact'?'is-on':''} onClick={() => setDensity('compact')}>Compact</button>
        </div>
      </div>
      <div className="tweaks__row">
        <span>Language</span>
        <div className="tweaks__seg tweaks__seg--wrap">
          {Object.keys(L).map(code => (
            <button key={code} className={lang===code?'is-on':''} onClick={() => setLang(code)}>{L[code].flag} {code.toUpperCase()}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─── Root ───
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "copper",
  "audience": "dealer",
  "density": "comfy",
  "lang": "en"
}/*EDITMODE-END*/;

function Landing() {
  const [accent, setAccent] = useState(TWEAK_DEFAULTS.accent);
  const [audience, setAudience] = useState(TWEAK_DEFAULTS.audience);
  const [density, setDensity] = useState(TWEAK_DEFAULTS.density);
  const [lang, setLang] = useState(TWEAK_DEFAULTS.lang);
  const [editMode, setEditMode] = useState(false);
  const [quoteOpen, setQuoteOpen] = useState(false);
  const openQuote = () => setQuoteOpen(true);
  const closeQuote = () => setQuoteOpen(false);

  const t = L[lang] || L.en;

  useEffect(() => {
    const a = ACCENTS.find(x => x.name === accent) || ACCENTS[0];
    const root = document.documentElement;
    root.style.setProperty('--accent', a.color);
    root.style.setProperty('--accent-rgb', a.rgb);
    root.style.setProperty('--accent-soft', `rgba(${a.rgb}, 0.12)`);
    root.style.setProperty('--accent-mid',  `rgba(${a.rgb}, 0.35)`);
    root.style.setProperty('--accent-deep', a.deep);
    root.style.setProperty('--border-accent', `rgba(${a.rgb}, 0.3)`);
  }, [accent]);

  useEffect(() => {
    document.documentElement.style.setProperty('--space-tight', density === 'compact' ? '0.7' : '1');
  }, [density]);

  useEffect(() => {
    const onMsg = (e) => {
      const d = e.data || {};
      if (d.type === '__activate_edit_mode') setEditMode(true);
      if (d.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({type: '__edit_mode_available'}, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  const persist = (patch) => { window.parent.postMessage({type: '__edit_mode_set_keys', edits: patch}, '*'); };
  const setAccentP = (v) => { setAccent(v); persist({accent: v}); };
  const setAudienceP = (v) => { setAudience(v); persist({audience: v}); };
  const setDensityP = (v) => { setDensity(v); persist({density: v}); };
  const setLangP = (v) => { setLang(v); persist({lang: v}); };

  return (
    <>
      <Nav t={t} lang={lang} setLang={setLangP} openQuote={openQuote} />
      <Hero audience={audience} onAudience={setAudienceP} t={t} openQuote={openQuote} />
      <PlatformMarquee t={t} />
      <DemoSection t={t} />
      <HowItWorks t={t} />
      <Features audience={audience} t={t} />
      <ShotsSection t={t} />
      <Pricing t={t} openQuote={openQuote} />
      <CTABand t={t} openQuote={openQuote} />
      <Footer t={t} />
      <QuoteModal t={t} open={quoteOpen} onClose={closeQuote} />
      {editMode && (
        <Tweaks
          accent={accent} setAccent={setAccentP}
          audience={audience} setAudience={setAudienceP}
          density={density} setDensity={setDensityP}
          lang={lang} setLang={setLangP}
        />
      )}
    </>
  );
}

Object.assign(window, { Landing });