// LifeOSmax — light Apple-style landing with sales copy
const { useState, useEffect } = React;

// =========== APPLE CAMPAIGN TOKENS ===========
// App Store Connect → App Analytics → Sources mostra atribuição por campanha.
// IDs reais ficam em window.LIFEOS (preenchidos após publish na App Store).
function appStore(campaign) {
  const cfg = window.LIFEOS || {};
  const id = cfg.appStoreId || '0000000000';
  const pt = cfg.applePt || 'TEAM_ID';
  const ct = encodeURIComponent(campaign || 'unknown');
  return `https://apps.apple.com/br/app/lifeosmax/id${id}?pt=${pt}&ct=${ct}&mt=8`;
}

function webLogin(email) {
  const cfg = window.LIFEOS || {};
  const base = cfg.webLoginUrl || 'http://localhost:8080/login';
  const value = (email || '').trim();
  if (!value) return base;

  const url = new URL(base, window.location.origin);
  url.searchParams.set('email', value);
  return url.toString();
}

function webSignup(email) {
  const cfg = window.LIFEOS || {};
  const base = cfg.webSignupUrl || 'http://localhost:8080/login?mode=signup';
  const value = (email || '').trim();
  const url = new URL(base, window.location.origin);
  if (value) url.searchParams.set('email', value);
  return url.toString();
}

function normalizeEmail(value) {
  return (value || '').trim().toLowerCase();
}

function isValidEmail(value) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value) && value.length <= 254;
}

async function checkSignupEmailExists(rawEmail) {
  const cfg = window.LIFEOS || {};
  const normalizedEmail = normalizeEmail(rawEmail);
  const supabaseUrl = cfg.supabaseUrl;
  const supabaseAnonKey = cfg.supabaseAnonKey;

  if (!supabaseUrl || !supabaseAnonKey) {
    throw new Error('Variáveis do Supabase não encontradas.');
  }

  const response = await fetch(`${supabaseUrl}/functions/v1/check-signup-email`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${supabaseAnonKey}`,
      apikey: supabaseAnonKey,
    },
    body: JSON.stringify({ email: normalizedEmail }),
  });

  const payload = await response.json().catch(() => null);

  if (!response.ok || !payload?.success) {
    throw new Error(payload?.error || 'Não foi possível verificar este e-mail.');
  }

  return Boolean(payload.exists);
}

// =========== TELEMETRY (CTR + page_view) ===========
// Edge Function pública — sem credencial no client.
// Fire-and-forget via fetch keepalive (sobrevive a navegação do link).
function track(eventType, props) {
  const cfg = window.LIFEOS || {};
  const endpoint = cfg.trackingEndpoint;
  if (!endpoint) return;
  try {
    const qs = new URLSearchParams(window.location.search);
    const payload = {
      event_type: eventType,
      cta_location: (props && props.location) || null,
      cta_campaign: (props && props.campaign) || null,
      page_url: window.location.href.slice(0, 500),
      referrer: document.referrer ? document.referrer.slice(0, 500) : null,
      utm_source: qs.get('utm_source'),
      utm_medium: qs.get('utm_medium'),
      utm_campaign: qs.get('utm_campaign'),
      utm_term: qs.get('utm_term'),
      utm_content: qs.get('utm_content'),
      user_agent: (navigator.userAgent || '').slice(0, 400),
      screen_w: window.innerWidth || null,
      screen_h: window.innerHeight || null,
    };
    fetch(endpoint, {
      method: 'POST',
      keepalive: true,
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    }).catch(() => {});
  } catch (e) {}
}

// Handler genérico pra CTA — dispara track sem bloquear navegação
function ctaClick(location, campaign) {
  return () => track('cta_click', { location, campaign });
}

// Page view automático no mount (uma vez por sessão)
let pageViewSent = false;
function usePageView() {
  useEffect(() => {
    if (pageViewSent) return;
    pageViewSent = true;
    track('page_view');
  }, []);
}

const I = ({ n, size = 18, color, sw = 1.75, style }) => (
  <i data-lucide={n} style={{ width: size, height: size, color, strokeWidth: sw, ...style }}></i>
);

// Compass logo (from DS) — used in nav + footer
function CompassLogo({ size = 40 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={{ display: 'block' }}>
      <circle cx="50" cy="50" r="42" stroke="#0891a8" strokeWidth="3" fill="none" />
      <circle cx="50" cy="50" r="35" stroke="#14b8a6" strokeWidth="1.5" fill="none" />
      <circle cx="50" cy="50" r="32" fill="#0F1F2A" />
      <line x1="50" y1="20" x2="50" y2="80" stroke="#0f5f7a" strokeWidth="1" />
      <line x1="20" y1="50" x2="80" y2="50" stroke="#0f5f7a" strokeWidth="1" />
      <path d="M50 25 L56 40 L50 36 L44 40 Z" fill="#14b8a6" />
      <text x="50" y="22" textAnchor="middle" fontFamily="sans-serif" fontSize="9" fontWeight="bold" fill="#14b8a6">N</text>
      <path d="M44 50 L50 44 L56 50 L50 60 Z" fill="#14b8a6" />
      <path d="M50 60 L46 70 M50 60 L54 70" stroke="#14b8a6" strokeWidth="2" strokeLinecap="round" />
    </svg>
  );
}

// =============== NAV ===============
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 20);
    on();
    window.addEventListener('scroll', on, { passive: true });
    return () => window.removeEventListener('scroll', on);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <div className="container nav-inner">
        <a className="brand" href="#top">
          <div className="compass"><CompassLogo size={40} /></div>
          <div className="brand-text">
            <span className="brand-name">LifeOSmax</span>
            <span className="brand-tag">Pilares que movem sua vida</span>
          </div>
        </a>
        <div className="nav-links">
          <a href="#financas">Finanças</a>
          <a href="#viagens">Viagens</a>
          <a href="#ia">IA</a>
          <a href="#planos">Planos</a>
          <a href="#faq">Dúvidas</a>
        </div>
        <div className="nav-cta">
          <a className="baixar" href={appStore('nav')} onClick={ctaClick('nav', 'nav')} rel="noopener">Baixar</a>
        </div>
      </div>
    </nav>
  );
}

// =============== HERO ===============
function Hero() {
  const [webAccessValue, setWebAccessValue] = useState('');
  const [webAccessStatus, setWebAccessStatus] = useState('idle');
  const [webAccessError, setWebAccessError] = useState('');

  useEffect(() => {
    const resetWebAccessState = () => setWebAccessStatus('idle');
    const resetOnVisible = () => {
      if (document.visibilityState === 'visible') resetWebAccessState();
    };

    window.addEventListener('pageshow', resetWebAccessState);
    window.addEventListener('focus', resetWebAccessState);
    document.addEventListener('visibilitychange', resetOnVisible);

    return () => {
      window.removeEventListener('pageshow', resetWebAccessState);
      window.removeEventListener('focus', resetWebAccessState);
      document.removeEventListener('visibilitychange', resetOnVisible);
    };
  }, []);

  const submitWebAccess = async (event) => {
    event.preventDefault();
    const email = normalizeEmail(webAccessValue);

    if (!isValidEmail(email)) {
      setWebAccessError('Digite um e-mail válido.');
      return;
    }

    setWebAccessStatus('checking');
    setWebAccessError('');
    track('cta_click', { location: 'hero_web_access', campaign: 'web_access' });

    try {
      const exists = await checkSignupEmailExists(email);
      window.location.href = exists ? webLogin(email) : webSignup(email);
    } catch (error) {
      setWebAccessStatus('idle');
      setWebAccessError(error?.message || 'Não foi possível verificar este e-mail.');
    }
  };

  return (
    <header className="hero" id="top">
      <div className="container">
        <div className="hero-inner">
          <div>
            <h1 className="hero-h1 fade-up d1">
              Sua vida em<br />equilíbrio<span className="stop">.</span>
            </h1>
            <p className="hero-sub fade-up d2">
              Finanças, viagens — num só app
            </p>
            <div className="hero-ctas fade-up d3">
              <a className="btn btn-primary btn-lg" href={appStore('hero')} onClick={ctaClick('hero', 'hero')} rel="noopener">
                Baixar grátis
                <I n="arrow-right" size={17} color="#fff" sw={2.25} />
              </a>
              <a className="btn-arrow" href="#financas">
                Ver como funciona
                <I n="arrow-right" size={16} sw={2.25} />
              </a>
            </div>
            <div className="hero-stores fade-up d4">
              <div className="store">
                <svg viewBox="0 0 24 24" fill="currentColor" width="22" height="22"><path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/></svg>
                <div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 13, lineHeight: 1.1 }}>App Store</div>
                  <div className="rating">Disponível para iPhone</div>
                </div>
              </div>
            </div>
            <form className="web-access-card fade-up d4" onSubmit={submitWebAccess}>
              <h3>Quer ter uma experiência web? Acessa por aqui.</h3>
              <input
                type="email"
                inputMode="email"
                autoComplete="email"
                placeholder="Digite seu e-mail"
                value={webAccessValue}
                onChange={(event) => {
                  setWebAccessValue(event.target.value);
                  if (webAccessError) setWebAccessError('');
                }}
                aria-label="E-mail para acessar a experiência web"
                disabled={webAccessStatus === 'checking'}
                required
              />
              {webAccessError ? <p className="web-access-error">{webAccessError}</p> : null}
              <button type="submit" disabled={webAccessStatus === 'checking'}>
                {webAccessStatus === 'checking' ? 'Verificando...' : 'Continuar'}
                <I n="arrow-right" size={16} color="#fff" sw={2.4} />
              </button>
            </form>
          </div>
          <div className="fade-up d3" style={{ display: 'flex', justifyContent: 'center' }}>
            <PhoneMockupHero />
          </div>
        </div>
      </div>
    </header>
  );
}

// =============== FEATURE ROW (alternating) ===============
function FeatureRow({ id, reverse, color, tag, title, lead, bullets, cta, visual }) {
  return (
    <section className={`feature-row ${reverse ? 'reverse' : ''}`} id={id} style={{ '--mod-color': color }}>
      <div className="container">
        <div className="feature-grid">
          <div className="feature-text">
            <span className="section-tag colored">{tag}</span>
            <h2>{title}</h2>
            <p className="lead" dangerouslySetInnerHTML={{ __html: lead }} />
            <ul className="feature-bullets">
              {bullets.map((b, i) => (
                <li key={i}>
                  <span className="b-num">{String(i + 1).padStart(2, '0')}</span>
                  <span className="b-text" dangerouslySetInnerHTML={{ __html: b }} />
                </li>
              ))}
            </ul>
            <a className="feature-cta" href="#">
              {cta}
              <I n="arrow-right" size={15} sw={2.25} />
            </a>
          </div>
          <div className="feature-visual">{visual}</div>
        </div>
      </div>
    </section>
  );
}

// =============== FINANCE VISUAL (dashboard widget) ===============
function FinanceVisual() {
  return (
    <div className="fin-widget">
      <div className="fin-widget-head">
        <div>
          <div className="fin-widget-title">Patrimônio total</div>
          <div className="fin-widget-sub">4 contas conectadas</div>
        </div>
        <span className="fin-widget-pill">
          <span className="dot"></span>
          +12,4% no mês
        </span>
      </div>

      <div className="fin-balance">
        <span className="currency">R$</span>47.328<span className="cents">,50</span>
      </div>
      <div className="fin-balance-sub">Saldo projetado · maio · 2026</div>

      <div className="fin-chart">
        <svg viewBox="0 0 400 100" preserveAspectRatio="none">
          <defs>
            <linearGradient id="chartfill" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0%" stopColor="#12B76A" stopOpacity="0.18" />
              <stop offset="100%" stopColor="#12B76A" stopOpacity="0" />
            </linearGradient>
          </defs>
          <path d="M0,75 C30,70 50,68 80,55 C110,45 140,52 170,40 C200,28 230,35 260,25 C290,18 320,12 350,18 C375,22 400,15 400,15 L400,100 L0,100 Z" fill="url(#chartfill)" />
          <path d="M0,75 C30,70 50,68 80,55 C110,45 140,52 170,40 C200,28 230,35 260,25 C290,18 320,12 350,18 C375,22 400,15 400,15" fill="none" stroke="#12B76A" strokeWidth="2.5" strokeLinecap="round" />
          {/* dots */}
          <circle cx="80" cy="55" r="3" fill="#12B76A" />
          <circle cx="170" cy="40" r="3" fill="#12B76A" />
          <circle cx="260" cy="25" r="3" fill="#12B76A" />
          <circle cx="350" cy="18" r="3" fill="#12B76A" />
          {/* x-axis labels */}
          <text x="20" y="98" fill="#8A8A8A" fontSize="9" fontFamily="JetBrains Mono">jan</text>
          <text x="110" y="98" fill="#8A8A8A" fontSize="9" fontFamily="JetBrains Mono">fev</text>
          <text x="200" y="98" fill="#8A8A8A" fontSize="9" fontFamily="JetBrains Mono">mar</text>
          <text x="290" y="98" fill="#8A8A8A" fontSize="9" fontFamily="JetBrains Mono">abr</text>
          <text x="375" y="98" fill="#8A8A8A" fontSize="9" fontFamily="JetBrains Mono">mai</text>
        </svg>
      </div>

      <div className="fin-tx">
        <div className="fin-tx-row">
          <div className="icon"><I n="briefcase" size={17} color="var(--green)" sw={2} /></div>
          <div className="meta">
            <div className="name">Salário · MeuEmpregador Inc.</div>
            <div className="sub">Hoje · CC Itaú · auto-categorizado</div>
          </div>
          <div className="v up">+R$ 7.420,00</div>
        </div>
        <div className="fin-tx-row">
          <div className="icon"><I n="utensils" size={17} color="var(--mod-finance)" sw={2} /></div>
          <div className="meta">
            <div className="name">
              Padaria Santa Clara
              <span className="v ai-tag" style={{ fontSize: 9 }}><I n="sparkles" size={10} sw={2.25} /> IA</span>
            </div>
            <div className="sub">09:32 · Nubank débito · Alimentação</div>
          </div>
          <div className="v">−R$ 35,00</div>
        </div>
        <div className="fin-tx-row">
          <div className="icon"><I n="zap" size={17} color="#A855F7" sw={2} /></div>
          <div className="meta">
            <div className="name">Enel · Energia elétrica</div>
            <div className="sub">15 mai · Débito automático</div>
          </div>
          <div className="v">−R$ 187,40</div>
        </div>
      </div>

      <div className="fin-widget-foot">
        <div>
          <span className="label">Próximas contas a pagar</span>
        </div>
        <div className="v">R$ 3.180,<span style={{ fontSize: 11, color: 'var(--fg-muted)' }}>00</span></div>
      </div>
    </div>
  );
}

// =============== VIAGENS — full-bleed travel section ===============
function ViagensSection() {
  return (
    <section className="travel-section" id="viagens">
      <div className="container">
        <span className="section-tag" style={{ color: 'var(--orange)' }}>02 · Viagens</span>
        <div className="travel-head">
          <h2>Cada destino<br />ganha sua própria<br />gestão<span className="stop">.</span></h2>
          <p>
            Você planeja a viagem, define um orçamento, e o LifeOSmax separa esses
            gastos do seu mês. Quando volta, sabe exatamente quanto custou — sem
            confundir com o supermercado e a conta de luz.
          </p>
        </div>

        <div className="travel-cards">
          <div className="travel-card">
            <div className="photo"><NovaYorkScene /></div>
            <div className="overlay">
              <div className="top-row">
                <span className="badge">Em 25 dias</span>
                <span className="price">R$ 18.420 · 73%</span>
              </div>
              <div>
                <div className="name">Nova York</div>
                <div className="sub">10 → 14 jun  ·  4 dias  ·  2 pessoas</div>
                <div className="travel-budget">
                  <span>Orçamento</span>
                  <div className="bar"><div style={{ width: '73%' }}></div></div>
                  <span>73%</span>
                </div>
              </div>
            </div>
          </div>
          <div className="travel-card sm">
            <div className="photo"><LisboaScene /></div>
            <div className="overlay">
              <div className="top-row">
                <span className="badge">Confirmada</span>
                <span className="price">R$ 14.820</span>
              </div>
              <div>
                <div className="name">Lisboa</div>
                <div className="sub">03 → 12 jun  ·  9 dias</div>
              </div>
            </div>
          </div>
          <div className="travel-card sm">
            <div className="photo"><SantiagoScene /></div>
            <div className="overlay">
              <div className="top-row">
                <span className="badge">Em 67 dias</span>
                <span className="price">R$ 6.200</span>
              </div>
              <div>
                <div className="name">Santiago</div>
                <div className="sub">22 → 26 jul  ·  5 dias</div>
              </div>
            </div>
          </div>
        </div>

        <div style={{ marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {[
            { n: '01', t: 'Voo & hotel num lugar', s: 'Cole o e-mail da confirmação, a IA extrai datas, horários e localizador.' },
            { n: '02', t: 'Orçamento que prevê', s: 'Câmbio em tempo real, sugestão de gasto diário com base no destino.' },
            { n: '03', t: 'Roteiro dia a dia', s: 'Atividades, restaurantes, check-ins — tudo num timeline visual.' },
            { n: '04', t: 'Volta com relatório', s: 'PDF do que custou, do que sobrou, do que valeu — pra próxima vez.' },
          ].map(item => (
            <div key={item.n} style={{ borderTop: '1px solid var(--hairline-2)', paddingTop: 18 }}>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--orange)', fontWeight: 600 }}>{item.n}</div>
              <h4 style={{ marginTop: 10, fontSize: 18, letterSpacing: '-0.015em' }}>{item.t}</h4>
              <p style={{ marginTop: 8, fontSize: 13.5, color: 'var(--fg-3)', lineHeight: 1.5 }}>{item.s}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== AI SECTION ===============
function AISection() {
  return (
    <section className="ai-section" id="ia">
      <div className="container">
        <span className="section-tag" style={{ color: 'var(--purple)' }}>03 · Inteligência</span>
        <div className="ai-head">
          <h2>Tire foto.<br />A IA faz o resto<span className="stop">.</span></h2>
          <div className="right">
            <p>
              Aponta a câmera pro recibo de papel, pra fatura no PDF, pro print do
              cartão. O LifeOSmax lê, classifica e lança nas suas finanças em três
              segundos, com 98% de confiança média.
            </p>
            <span className="ai-credit"><span className="dot"></span> Powered by GPT-4o Vision</span>
          </div>
        </div>

        <div className="ai-steps">
          <div className="ai-step-card">
            <span className="ai-step-num"><span className="n">1</span> Capturar</span>
            <h3>Foto. PDF.<br />Print do app.</h3>
            <div className="ai-vis-light">
              <div className="receipt-paper">
                <div className="r-top">PADARIA SANTA CLARA</div>
                <div className="r-li"><span>Pão chapa</span><span>18,00</span></div>
                <div className="r-li"><span>Café leite</span><span>9,50</span></div>
                <div className="r-li"><span>Pão queijo</span><span>7,50</span></div>
                <div className="r-total"><span>TOTAL</span><span>35,00</span></div>
              </div>
            </div>
            <p>Funciona com qualquer formato — recibo amassado, NF-e, fatura PDF, captura do app do banco.</p>
          </div>

          <div className="ai-step-card">
            <span className="ai-step-num"><span className="n">2</span> Processar</span>
            <h3>IA destrincha<br />em 3 segundos.</h3>
            <div className="ai-vis-light">
              <div className="processing-lines">
                <div className="proc-line"></div>
                <div className="proc-line"></div>
                <div className="proc-line"></div>
                <div className="proc-line"></div>
                <div className="proc-tokens">
                  <span>merchant</span><span>amount</span><span>date</span><span>category</span><span>tax</span>
                </div>
              </div>
            </div>
            <p>Reconhece o estabelecimento, identifica a categoria, separa impostos, detecta parcelamento.</p>
          </div>

          <div className="ai-step-card">
            <span className="ai-step-num"><span className="n">3</span> Lançar</span>
            <h3>Pronto.<br />Confere e aprova.</h3>
            <div className="ai-vis-light">
              <div className="ledger-entry">
                <div className="e-row"><span className="k">Estab.</span><span className="v">Pad. Santa Clara</span></div>
                <div className="e-row"><span className="k">Valor</span><span className="v green">R$ 35,00</span></div>
                <div className="e-row"><span className="k">Categoria</span><span className="v">Alimentação · fora</span></div>
                <div className="e-row"><span className="k">Conta</span><span className="v">Nubank · débito</span></div>
                <div className="e-row"><span className="k">Conf.</span><span className="v" style={{ color: 'var(--green)' }}>98%</span></div>
              </div>
            </div>
            <p>Você revisa só o que a IA marcou como incerto. O resto entra direto nas suas finanças.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== PILARES VISUAL ===============
function PillarsVisual() {
  const pillars = [
    { name: 'Finanças', sub: 'Reserva: 64% da meta', pct: 64, c: '#10B981', ic: 'wallet' },
    { name: 'Viagens', sub: 'Nova York em 25 dias', pct: 78, c: '#F59E0B', ic: 'plane' },
  ];
  return (
    <div className="pillars-vis">
      <div className="pillars-vis-head">Seus pilares</div>
      <div className="pillars-vis-sub">Dois pilares, uma vida em equilíbrio.</div>
      <div className="pillars-bars">
        {pillars.map(p => (
          <div className="pillar-bar" key={p.name}>
            <div className="ic" style={{ background: `${p.c}1a`, color: p.c }}>
              <I n={p.ic} size={13} color={p.c} sw={2} />
            </div>
            <div className="name">
              {p.name}
              <span className="sub">{p.sub}</span>
            </div>
            <div className="track"><div style={{ width: `${p.pct}%`, background: p.c }}></div></div>
            <div className="pct">{p.pct}<span style={{ fontSize: 11, color: 'var(--fg-muted)' }}>%</span></div>
          </div>
        ))}
      </div>
    </div>
  );
}

// =============== PLATFORMS ===============
function Platforms() {
  return (
    <section className="platforms-section">
      <div className="container">
        <span className="section-tag">05 · Feito para iPhone</span>
        <h2>Nativo no iOS.<br /><span className="stop">Pensado pra iPhone.</span></h2>
        <p className="lead">
          Não é um site embrulhado. É um app nativo, com integração real ao
          iOS — Face ID, widgets, notificações e atalhos via Siri.
        </p>
        <div className="platforms-row">
          <div className="platform-card">
            <span className="num">01 — Segurança</span>
            <h3>Face ID & Keychain</h3>
            <p className="desc">Autenticação biométrica e armazenamento seguro nativo do iOS. Seus dados ficam criptografados no enclave do iPhone.</p>
            <span className="badge"><span className="dot"></span> iOS 16+</span>
          </div>
          <div className="platform-card">
            <span className="num">02 — Produtividade</span>
            <h3>Widgets & Atalhos</h3>
            <p className="desc">Widgets na tela inicial mostram saldo e próxima viagem. Atalhos via Siri pra registrar gastos com a voz.</p>
            <span className="badge"><span className="dot"></span> Home Screen</span>
          </div>
          <div className="platform-card">
            <span className="num">03 — Offline-first</span>
            <h3>Sempre disponível</h3>
            <p className="desc">Lance transações sem internet. Quando voltar a conectar, tudo sincroniza em segundos — sem perda de dados.</p>
            <span className="badge"><span className="dot"></span> Sync automático</span>
          </div>
        </div>
        <div className="platforms-tags">
          <span>Face ID</span>
          <span>Offline-first</span>
          <span>Atalhos Siri</span>
          <span>Widgets</span>
          <span>Notificações push</span>
        </div>
      </div>
    </section>
  );
}

// =============== SECURITY ===============
function Security() {
  return (
    <section className="security-section">
      <div className="container">
        <div className="security-grid">
          <div>
            <span className="section-tag">06 · Privacidade</span>
            <h2>Seus dados.<br /><span className="stop">Suas regras.</span></h2>
            <p className="lead">
              Tratamos privacidade financeira como direito fundamental — não como
              argumento de venda. Sem revenda, sem "anonimizado", sem letrinha miúda.
            </p>
          </div>
          <div className="security-rules">
            <div className="security-rule">
              <span className="n">01</span>
              <div>
                <h4>Criptografia end-to-end</h4>
                <p>Seus dados saem do dispositivo já criptografados (AES-256, TLS 1.3). Nem nossos engenheiros conseguem ler suas transações.</p>
              </div>
            </div>
            <div className="security-rule">
              <span className="n">02</span>
              <div>
                <h4>LGPD por design</h4>
                <p>Exportação completa em JSON ou CSV, com um toque. Apagamento total em até 24h. Você pede, a gente cumpre — sem retenção, sem ligação.</p>
              </div>
            </div>
            <div className="security-rule">
              <span className="n">03</span>
              <div>
                <h4>Biometria nativa</h4>
                <p>Face ID e Keychain nativo do iOS. Sem senha pra esquecer, sem senha pra vazar em data breach.</p>
              </div>
            </div>
            <div className="security-rule">
              <span className="n">04</span>
              <div>
                <h4>Você controla a IA</h4>
                <p>Use a IA integrada nos planos pagos ou cadastre sua própria chave de IA no plano Business. Seus tokens, seu jogo, seus prompts.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== PRICING ===============
function Pricing() {
  const tiers = [
    {
      tag: 'Free', name: 'Comece sem cartão.', price: '0', period: 'sempre',
      blurb: 'Pra experimentar o essencial — sem pressa, sem trial countdown.',
      ftrs: [
        '20 lançamentos por mês',
        '1 conta bancária',
        '1 cartão de crédito',
        '3 viagens planejadas · 6 realizadas',
        '2 análises com IA por dia',
      ],
      cta: 'Baixar grátis',
    },
    {
      tag: 'Premium', mark: 'Mais escolhido', featured: true,
      name: 'Pra quem leva a sério.',
      price: '29,90', period: 'mês',
      blurb: 'O essencial pra quem usa o app todo dia, sem se preocupar com limites estreitos.',
      ftrs: [
        '50 lançamentos por mês',
        '4 contas bancárias · 4 cartões',
        '10 lançamentos com IA por dia',
        '10 viagens planejadas · 50 realizadas',
        'Calculadora integrada',
        'Sincronização com Agenda Google',
      ],
      cta: 'Assinar Premium',
    },
    {
      tag: 'Business', name: 'A família inteira.',
      price: '49,90', period: 'mês',
      blurb: 'Pra famílias e equipes que organizam juntas, com mais espaço e IA própria.',
      ftrs: [
        'Tudo do Premium',
        '10 contas · 10 cartões',
        '200 lançamentos por mês',
        '20 lançamentos com IA por dia',
        '100 viagens',
        'Multiusuário (até 4 membros)',
        'API de IA própria',
      ],
      cta: 'Assinar Business',
    },
  ];

  return (
    <section className="pricing-section" id="planos">
      <div className="container">
        <div className="pricing-head">
          <span className="section-tag">07 · Planos</span>
          <h2>Comece grátis.<br />Cresça se fizer sentido<span className="stop">.</span></h2>
          <p>Sem letrinha miúda. Sem trial countdown. Cancele com 1 toque, no app, sem precisar ligar pra ninguém.</p>
        </div>

        <div className="tiers">
          {tiers.map((t, i) => (
            <div className={`tier ${t.featured ? 'featured' : ''}`} key={i}>
              <div className="tier-tag">
                <span className="name">{t.tag}</span>
                {t.mark && <span className="mark">{t.mark}</span>}
              </div>
              <h3>{t.name}</h3>
              <div className="price">
                <span className="currency">R$</span>
                <span className="amt">{t.price}</span>
                <span className="period">/{t.period}</span>
              </div>
              <p className="blurb">{t.blurb}</p>
              <div className="tier-divider"></div>
              <ul className="ftrs">
                {t.ftrs.map((f, j) => (
                  <li key={j}>
                    <I n="check" size={18} sw={2.5} />
                    <span>{f}</span>
                  </li>
                ))}
              </ul>
              <a
                className={`btn cta ${t.featured ? 'btn-primary' : 'btn-ghost'}`}
                href={appStore(`plan-${t.tag.toLowerCase()}`)}
                onClick={ctaClick(`plan-${t.tag.toLowerCase()}`, `plan-${t.tag.toLowerCase()}`)}
                rel="noopener"
              >
                {t.cta}
                <I n="arrow-right" size={15} sw={2.25} />
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// =============== FAQ ===============
function FAQ() {
  const [open, setOpen] = useState(0);
  const items = [
    { q: 'Os meus dados ficam seguros mesmo?',
      a: 'Sim. Tudo é criptografado em trânsito (TLS 1.3) e em repouso (AES-256). Não vendemos seus dados, nem usamos pra treinar modelos. Exportação ou apagamento total em até 24h, a qualquer momento — direito garantido pela LGPD.' },
    { q: 'Como funciona a IA, na prática?',
      a: 'A IA lê recibos, faturas e extratos em PDF que você envia, categoriza automaticamente os lançamentos e ajuda a planejar viagens. O plano Business permite cadastrar sua própria chave de IA. Processamos apenas o que você envia — nada em background.' },
    { q: 'Funciona offline?',
      a: 'Sim. O app é offline-first: você lança transações, edita viagens e fecha tarefas mesmo sem internet. Quando voltar a conectar, tudo sincroniza automaticamente em segundos.' },
    { q: 'Em quais plataformas funciona?',
      a: 'Hoje o LifeOSmax está disponível exclusivamente para iPhone, com integração nativa ao iOS (HealthKit, notificações, atalhos). Versão para outras plataformas ainda não está no roadmap.' },
    { q: 'Como cancelo a assinatura?',
      a: 'Diretamente no app, em Ajustes → Assinatura → Cancelar (gerenciado via App Store). Sem ligação, sem formulário de retenção. Você mantém o acesso até o fim do ciclo já pago.' },
    { q: 'Tem versão para empresa ou time?',
      a: 'O LifeOSmax é focado em uso pessoal e familiar. O plano Business permite até 4 membros (família). Para uso corporativo, escreve em atendimento@lifeosmax.com.' },
  ];

  return (
    <section className="faq-section" id="faq">
      <div className="container">
        <div className="faq-inner">
          <div className="faq-side">
            <span className="section-tag" style={{ color: 'var(--orange)' }}>08 · FAQ</span>
            <h2>Antes que<br />pergunte<span className="stop">.</span></h2>
            <p>Se tiver dúvida que não está aqui, escreve pra gente por email. A gente responde em até 24 horas em dias úteis.</p>
            <a className="help" href="mailto:atendimento@lifeosmax.com">
              atendimento@lifeosmax.com
              <I n="arrow-up-right" size={14} sw={2} />
            </a>
          </div>
          <div className="faq-list">
            {items.map((it, i) => (
              <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                  <span className="num">{String(i + 1).padStart(2, '0')}</span>
                  <span>{it.q}</span>
                  <span className="plus"></span>
                </button>
                <div className="faq-a">
                  <div className="faq-a-inner">{it.a}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// =============== CLOSER ===============
function Closer() {
  return (
    <section className="closer">
      <div className="container">
        <h2>Pronto pra movimentar<br />seus pilares<span className="stop">?</span></h2>
        <p>Grátis pra começar. 30 segundos pra criar conta. Zero burocracia, zero cartão de crédito exigido.</p>
        <div className="closer-ctas">
          <a className="btn btn-primary btn-lg" href={appStore('closer')} onClick={ctaClick('closer', 'closer')} rel="noopener">
            Baixar grátis
            <I n="arrow-right" size={17} color="#fff" sw={2.25} />
          </a>
          <a className="btn btn-ghost btn-lg" href="mailto:atendimento@lifeosmax.com">
            Falar com o time
          </a>
        </div>
        <div className="closer-meta">
          <span>Grátis pra começar</span>
          <span>Sem cartão de crédito</span>
          <span>Cancele com 1 toque</span>
          <span>LGPD compliant</span>
        </div>
      </div>
    </section>
  );
}

// =============== FOOTER ===============
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <a className="brand" href="#top">
              <div className="compass"><CompassLogo size={36} /></div>
              <div className="brand-text">
                <span className="brand-name">LifeOSmax</span>
                <span className="brand-tag">Pilares que movem sua vida</span>
              </div>
            </a>
            <p className="tag">Dinheiro e experiências, cuidados com inteligência. Feito no Brasil pra brasileiros.</p>
          </div>
          <div className="footer-col">
            <h5>Produto</h5>
            <ul>
              <li><a href="#financas">Finanças</a></li>
              <li><a href="#viagens">Viagens</a></li>
              <li><a href="#ia">IA</a></li>
              <li><a href="#planos">Planos</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Legal</h5>
            <ul>
              <li><a href="/termos">Termos de uso</a></li>
              <li><a href="/privacidade">Privacidade</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Suporte</h5>
            <ul>
              <li><a href="mailto:atendimento@lifeosmax.com">Contato</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 LifeOSmax · <span className="br">Feito no Brasil 🇧🇷</span></span>
        </div>
      </div>
    </footer>
  );
}

// =============== APP ===============
function App() {
  useEffect(() => { if (window.lucide) window.lucide.createIcons(); }, []);
  usePageView();
  return (
    <React.Fragment>
      <Nav />
      <Hero />

      <FeatureRow
        id="financas"
        color="var(--mod-finance)"
        tag="01 · Finanças"
        title={<>Suas contas se<br />organizam sozinhas<span className="stop">.</span></>}
        lead='Importe a fatura do cartão em <span class="em">PDF ou foto</span> e a IA extrai cada transação. Você confere o que faz sentido e pronto — sem digitar item por item, sem planilha.'
        bullets={[
          'Importação de fatura por <strong>PDF, imagem ou foto</strong>',
          'IA extrai e categoriza cada transação automaticamente',
          'Detecção automática de duplicatas ao importar',
          'Exportação de relatórios em <strong>PDF e Excel</strong>',
        ]}
        cta="Ver módulo Finanças"
        visual={<FinanceVisual />}
      />

      <ViagensSection />

      <FeatureRow
        id="pilares"
        reverse
        color="var(--mod-pillars)"
        tag="04 · Pilares"
        title={<>Dois pilares,<br />uma só vida<span className="stop">.</span></>}
        lead='<span class="em">Finanças</span> e <span class="em">viagens</span> são os dois pilares que movem sua rotina — o app cuida dos dois com a mesma atenção, conectando o que você ganha ao que você vive.'
        bullets={[
          '<strong>Finanças</strong>: contas, cartões, lançamentos e relatórios',
          '<strong>Viagens</strong>: roteiro, gastos, fotos e timeline por destino',
          'Tudo num só app, sem pular entre planilha e calendário',
        ]}
        cta="Ver módulo Pilares"
        visual={<PillarsVisual />}
      />

      <AISection />
      <Platforms />
      <Security />
      <Pricing />
      <FAQ />
      <Closer />
      <Footer />
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);