// =========================================
// Navbar
// =========================================
function Navbar() {
  const t = useT();
  return (
    <div className="navbar-wrap">
      <a href="#main" className="skip-link">{t('skip.content')}</a>
      <nav className="navbar" aria-label="Primary">
        <a href="#top" className="navbar-logo">
          <span className="logo-mark"><Icon.Logo size={18}/></span>
          Auditcash
        </a>
        <div className="navbar-links">
          <a href="#product">{t('nav.product')}</a>
          <a href="#comparison">{t('nav.compare')}</a>
          <a href="#pricing">{t('nav.pricing')}</a>
        </div>
        <div className="navbar-cta">
          <SettingsMenu/>
          <a href="/login" className="btn btn-ghost">{t('nav.login')}</a>
          <a href="/signup" className="btn btn-mini">{t('nav.cta')}</a>
        </div>
      </nav>
    </div>
  );
}

// =========================================
// Live counter
// =========================================
const { useState: _useState, useEffect: _useEffect } = React;

function LiveCounter() {
  const t = useT();
  const base = 12382941;
  const [val, setVal] = _useState(base);
  _useEffect(() => {
    const id = setInterval(() => {
      const bump = Math.floor(Math.random() * 800) + 200;
      setVal(v => v + bump);
    }, 2400);
    return () => clearInterval(id);
  }, []);
  const formatted = val.toLocaleString('pt-BR');
  return (
    <div className="counter-card">
      <div className="counter-eyebrow">
        <span className="live-dot pulse"></span>
        {t('counter.eyebrow')}
      </div>
      <div className="counter-amount">
        <span className="currency">R$</span>
        <span className="num">{formatted}</span>
      </div>
      <div className="counter-meta">
        <div>
          <div className="lab">{t('counter.month')}</div>
          <div className="val">R$ 1.847.392</div>
        </div>
        <div>
          <div className="lab">{t('counter.sellers')}</div>
          <div className="val">412</div>
        </div>
        <div>
          <div className="lab">{t('counter.approval')}</div>
          <div className="val">78%</div>
        </div>
      </div>
      <div className="counter-ticker">
        <div className="ticker-row"><div className="ticker-dot success"></div><span>{t('counter.ticker.seller')} #182 · ML</span><span className="amt">+R$ 412,80</span><span className="time">{t('counter.ticker.now')}</span></div>
        <div className="ticker-row"><div className="ticker-dot success"></div><span>{t('counter.ticker.seller')} #047 · Shopee</span><span className="amt">+R$ 1.247,00</span><span className="time">12s</span></div>
        <div className="ticker-row"><div className="ticker-dot success"></div><span>{t('counter.ticker.seller')} #294 · Amazon</span><span className="amt">+R$ 89,40</span><span className="time">38s</span></div>
      </div>
    </div>
  );
}

// =========================================
// Hero loss preview
// =========================================
function HeroLossPreview() {
  const sys = useSystem();
  const t = sys.t;
  const [gmv, setGmv] = _useState(500);
  _useEffect(() => { window.dispatchEvent(new CustomEvent('ac-gmv-change', { detail: { gmv } })); }, [gmv]);
  const monthlyLoss = Math.round(gmv * 1000 * 0.023);
  const yearlyLoss = monthlyLoss * 12;
  const isEn = sys.lang === 'en';
  const cur = isEn ? '$' : 'R$';
  const locale = isEn ? 'en-US' : 'pt-BR';
  const fmt = (n) => n.toLocaleString(locale);
  const pct = ((gmv - 100) / (5000 - 100)) * 100;

  return (
    <div className="loss-preview hero-rise" style={{animationDelay:'320ms'}}>
      <div className="loss-preview-input">
        <label htmlFor="gmv-slider">{t('loss.label')}</label>
        <div className="loss-preview-control">
          <span className="prefix">{cur}</span>
          <input
            id="gmv-slider"
            type="range"
            min="100" max="5000" step="50"
            value={gmv}
            onChange={(e) => setGmv(+e.target.value)}
            style={{'--pct': pct + '%'}}
            aria-label={t('loss.label')}
          />
          <span className="value">{fmt(gmv)}k</span>
        </div>
      </div>
      <div className="loss-preview-output">
        <div>
          <div className="lp-lab">{t('loss.monthly')}</div>
          <div className="lp-val danger">−{cur} {fmt(monthlyLoss)}</div>
        </div>
        <div className="lp-sep"></div>
        <div>
          <div className="lp-lab">{t('loss.yearly')}</div>
          <div className="lp-val danger">−{cur} {fmt(yearlyLoss)}</div>
        </div>
        <a href="#cta" className="btn btn-primary loss-preview-cta">
          {t('loss.cta')} {cur} {fmt(yearlyLoss)} <Icon.ArrowRight size={14}/>
        </a>
      </div>
    </div>
  );
}

// =========================================
// Hero — compact, fits viewport
// =========================================
const MARKETPLACES = ['Mercado Livre', 'Shopee', 'Amazon', 'Magalu', 'Americanas', 'Shein', 'Casas Bahia', 'VTEX', 'Olist'];

function LogoMarquee() {
  const t = useT();
  const doubled = [...MARKETPLACES, ...MARKETPLACES];
  return (
    <div className="logo-row">
      <div className="logo-row-label">
        <span className="caption">{t('logos.label')}</span>
      </div>
      <div className="marquee-track-wrap">
        <div className="marquee-track">
          {doubled.map((m, i) => <div key={i} className="marquee-item">{m}</div>)}
        </div>
      </div>
    </div>
  );
}

function Hero() {
  const t = useT();
  return (
    <section id="top" className="hero hero-compact">
      <div className="hero-bg">
        <div className="grid"></div>
        <div className="blob"></div>
      </div>
      <div className="container">
        <div className="hero-split-grid">
          <div className="hero-split-left">
            <div className="pill hero-rise" style={{animationDelay:'40ms'}}>
              <span className="live-dot pulse"></span>{t('hero.pill.accountants')}
            </div>
            <h1 className="display-hero hero-headline hero-rise" style={{animationDelay:'120ms'}}>
              {t('hero.h.1')} <span className="italic">{t('hero.h.2')}</span>{t('hero.h.3')} <span className="italic">{t('hero.h.4')}</span>{t('hero.h.5')} <span className="accent">{t('hero.h.6')}</span>.
            </h1>
            <p className="hero-subtitle hero-rise" style={{animationDelay:'220ms'}}>
              {t('hero.sub')}
            </p>
            <HeroLossPreview/>
            <div className="hero-microproof hero-rise" style={{animationDelay:'420ms'}}>
              <span><Icon.Check size={13}/> {t('hero.proof.1')}</span>
              <span><Icon.Check size={13}/> {t('hero.proof.2')}</span>
              <span><Icon.Check size={13}/> {t('hero.proof.3')}</span>
            </div>
          </div>
          <div className="hero-split-right hero-rise" style={{animationDelay:'160ms'}}>
            <div className="hero-video-stage">
              <video autoPlay loop muted playsInline preload="metadata" aria-label={t('hero.video.label')}>
                <source src={(window.__resources && window.__resources.heroVideo) || "public/hero-loop.mp4"} type="video/mp4"/>
              </video>
              <div className="hero-video-tile-label">
                <span className="live-dot pulse"></span>
                {t('hero.video.label')}
              </div>
              <div className="hero-video-no-audio" aria-hidden="true">
                <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><line x1="1" y1="1" x2="23" y2="23"/><path d="M9 9v3a3 3 0 0 0 5.12 2.12M15 9.34V4a3 3 0 0 0-5.94-.6"/><path d="M17 16.95A7 7 0 0 1 5 12v-2m14 0v2a7 7 0 0 1-.11 1.23"/><line x1="12" y1="19" x2="12" y2="23"/></svg>
                <span>{t('settings.video.caption')}</span>
              </div>
              <div className="hero-video-vignette"></div>
            </div>
            <LiveCounter/>
          </div>
        </div>
        <LogoMarquee/>
      </div>
    </section>
  );
}

function HeroLiveDashboard() {
  const t = useT();
  const [activeRow, setActiveRow] = _useState(0);
  const [counter, setCounter] = _useState(12382941);
  _useEffect(() => {
    const id1 = setInterval(() => setActiveRow(r => (r + 1) % 4), 2200);
    const id2 = setInterval(() => setCounter(c => c + Math.floor(Math.random() * 600) + 200), 2400);
    return () => { clearInterval(id1); clearInterval(id2); };
  }, []);
  const rows = [
    { p: 'iPhone 15 256GB', sku: '#ML-8842371', flag: t('hpd.flag.commission16to12'), amt: '+R$ 412,80' },
    { p: 'Tênis Air Max 270', sku: '#SH-2210958', flag: t('hpd.flag.shipping.inflated'), amt: '+R$ 89,40' },
    { p: 'Cafeteira Oster', sku: '#AM-5523910', flag: t('hpd.flag.payout.crossed'), amt: '+R$ 124,30' },
    { p: 'Headphone Sony XM5', sku: '#ML-9128347', flag: t('hpd.flag.commission.recovered'), amt: '+R$ 287,60' },
  ];
  return (
    <div className="hpd">
      <div className="hpd-chrome">
        <span className="cd"></span><span className="cd"></span><span className="cd"></span>
        <span className="hpd-url">app.auditcash.com.br/dashboard</span>
      </div>
      <div className="hpd-body">
        <div className="hpd-stat-row">
          <div className="hpd-stat-main">
            <div className="hpd-stat-lab"><span className="live-dot pulse"></span>{t('hpd.live')}</div>
            <div className="hpd-stat-val">R$ {counter.toLocaleString('pt-BR')}</div>
          </div>
          <div className="hpd-stat-mini">
            <div className="lab">{t('hpd.month')}</div>
            <div className="val">R$ 1.847.392</div>
          </div>
        </div>
        <div className="hpd-chart">
          <svg viewBox="0 0 320 64" preserveAspectRatio="none">
            <defs>
              <linearGradient id="hpdg" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="#1E9E62" stopOpacity="0.28"/>
                <stop offset="100%" stopColor="#1E9E62" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d="M0,52 L20,46 L40,48 L60,40 L80,42 L100,34 L120,36 L140,28 L160,30 L180,22 L200,26 L220,16 L240,20 L260,12 L280,14 L300,8 L320,6 L320,64 L0,64 Z" fill="url(#hpdg)"/>
            <path d="M0,52 L20,46 L40,48 L60,40 L80,42 L100,34 L120,36 L140,28 L160,30 L180,22 L200,26 L220,16 L240,20 L260,12 L280,14 L300,8 L320,6" fill="none" stroke="#1E9E62" strokeWidth="1.8"/>
            <circle cx="320" cy="6" r="3" fill="#1E9E62"/>
          </svg>
        </div>
        <div className="hpd-rows">
          {rows.map((r, i) => (
            <div key={i} className={`hpd-row ${i === activeRow ? 'flash' : ''}`}>
              <div className="hpd-row-l">
                <div className="hpd-row-p">{r.p}</div>
                <div className="hpd-row-s">{r.sku} · {r.flag}</div>
              </div>
              <div className="hpd-row-amt">{r.amt}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

window.HeroLiveDashboard = HeroLiveDashboard;
window.Navbar = Navbar;
window.Hero = Hero;