/* global React, ReactDOM */
const { useState, useEffect, useRef } = React;

/* ============================================================
   STRINGS — bilingual copy (ported from the Claude Design redesign)
   ============================================================ */
const buildStrings = (lang) => {
  const T = (es, en) => lang === "en" ? en : es;
  const s = {
    navFeatures: T("El problema", "The problem"),
    navHow: T("Cómo funciona", "How it works"),
    navPricing: T("Precios", "Pricing"),
    navDownload: T("Descargar", "Download"),

    heroEyebrow: T("El método de presupuesto más honesto que vas a encontrar", "The most honest budgeting method you'll find"),
    heroHeadA: T("Tu dinero necesita un plan,", "Your money needs a plan,"),
    heroHeadB: T(" no un historial.", " not a history."),
    heroSub: T("1% Budget te ayuda a decidir en qué vas a gastar antes de hacerlo, mira tu plan evolucionar en tiempo real.", "1% Budget helps you decide what you'll spend on before you spend — watch your plan evolve in real time."),
    heroShot: T("Pantalla principal — categorías con barras de progreso y badge “disponible”", "Home screen — categories with progress bars and “available” pill"),

    appStoreSmall: T("Descargar en el", "Download on the"),
    appStoreBig: "App Store",
    googlePlaySmall: T("Disponible en", "Get it on"),
    googlePlayBig: "Google Play",
    soon: T("Próximamente", "Coming soon"),

    trust0: T("Sin tarjeta para empezar", "No card to start"),
    trust1: T("Datos seguros en la nube", "Your data, safe in the cloud"),
    trust2: T("Prueba gratis de 30 días", "Free 30-day trial"),

    painEyebrow: T("El problema", "The problem"),
    painHead: T("¿Te suena familiar?", "Sound familiar?"),
    pain1q: T("“Gasté y gasté pensando que mi cuenta era infinita.”", "“I spent and spent like my account was infinite.”"),
    pain1b: T("Sin límites claros, cada compra parece pequeña… hasta que el saldo dice lo contrario.", "With no clear limits, every purchase feels small — until the balance says otherwise."),
    pain2q: T("“Empecé un excel pero lo abandoné a la semana.”", "“I started a spreadsheet but gave up within a week.”"),
    pain2b: T("Las hojas de cálculo funcionan hasta que dejan de funcionar — que es casi siempre.", "Spreadsheets work until they stop working — which is almost always."),
    pain3q: T("“Ahorro lo que me sobra. O sea, nada…”", "“I save whatever's left over. Which means, nothing…”"),
    pain3b: T("Sin un plan, el ahorro siempre pierde contra los gastos del día a día.", "Without a plan, saving always loses to day-to-day spending."),
    pain4q: T("“Mi presupuesto es como la dieta: siempre empiezo el lunes… o el próximo mes.”", "“My budget is like a diet: I always start Monday… or next month.”"),
    pain4b: T("Empezar no debería depender del lunes perfecto. Con un sistema, ya empezaste.", "Starting shouldn't depend on the perfect Monday. With a system, you already started."),
    painFoot1: T("Estos no son problemas de disciplina. Son problemas de método.", "These aren't discipline problems. They're method problems."),
    painFoot2: T("1% Budget te da el sistema.", "1% Budget gives you the system."),

    howEyebrow: T("Cómo funciona", "How it works"),
    howHead: T("Cuatro pasos para que tu dinero tenga una misión", "Four steps to give every dollar a job"),
    step1Title: T("Define tu plan mensual", "Define your monthly plan"),
    step1Body: T("Decide al inicio del mes cuánto va a cada categoría. La app te muestra cuánto te queda por asignar.", "Decide at the start of the month how much goes to each category. The app shows you what's left to assign."),
    step1Shot: T("Configuración del plan / selector de plantillas", "Budget setup / template picker"),
    step2Title: T("Registra cada movimiento", "Log every transaction"),
    step2Body: T("Anota gastos, ingresos y transferencias en segundos. Tus saldos se actualizan al instante.", "Capture expenses, income and transfers in seconds. Your balances update instantly."),
    step2Shot: T("Modal para agregar movimiento", "Add transaction modal"),
    step3Title: T("Ve a dónde va tu dinero en tiempo real", "See where your money goes, in real time"),
    step3Body: T("Mira cómo se mueven tus sobres durante el mes y ajusta antes de que sea tarde.", "Watch your envelopes shift through the month and adjust before it's too late."),
    step3Shot: T("Pantalla principal con saldos en vivo", "Home screen with live balances"),
    step4Title: T("Todas tus cuentas, en un solo lugar", "All your accounts in one place"),
    step4Body: T("Registra tus cuentas de banco, tu efectivo y tus tarjetas de crédito.", "Add your bank accounts, cash and credit cards."),
    step4Shot: T("Captura por agregar", "Screenshot to add"),

    priceEyebrow: T("Precios", "Pricing"),
    priceHead: T("Todas las funciones, en ambos planes", "All features, on both plans"),
    priceSub: T("Prueba gratis por 30 días.", "Try it free for 30 days."),
    cloudLine: T("Tu plan por menos de un café al mes.", "Your plan for less than a coffee a month."),
    pickLabel: T("Elige cómo pagar", "Choose how to pay"),
    annualPill: T("Mejor valor", "Best value"),
    annualName: T("Anual", "Annual"),
    annualPrice: T("$39.99 / año", "$39.99 / year"),
    annualSub: T("Solo $3.33 / mes · Ahorras 33%", "Just $3.33 / month · Save 33%"),
    monthlyName: T("Mensual", "Monthly"),
    monthlyPrice: T("$4.99 / mes", "$4.99 / month"),
    monthlySub: T("Misma app, mismas funciones, sin compromiso anual.", "Same app, same features, no annual commitment."),
    planCta: T("Empezar prueba de 30 días", "Start 30-day trial"),
    planFootnote: T("No se cobra nada hasta el día 31. Cancela cuando quieras.", "Nothing is charged until day 31. Cancel anytime."),
    includedTitle: T("Todo incluido en ambos planes", "Everything included on both plans"),

    faqEyebrow: T("Preguntas frecuentes", "FAQ"),
    faqHead: T("Lo que la gente nos pregunta.", "What people ask us."),
    faq1q: T("¿Hay una versión gratis?", "Is there a free version?"),
    faq1a: T("No hay un plan gratuito permanente, pero sí 30 días de prueba completa con todas las funciones. Si decides no continuar, simplemente cancela antes del día 30 y no se te cobra.", "There is no permanent free plan, but there is a full 30-day trial with every feature. If you decide not to continue, just cancel before day 30 and you aren't charged."),
    faq2q: T("¿Mis datos están seguros?", "Is my data safe?"),
    faq2a: T("Tus datos se sincronizan de forma segura en la nube usando Firebase. Solo tú tienes acceso desde tu cuenta.", "Your data is synced securely to the cloud through Firebase. Only you have access from your account."),
    faq3q: T("¿Necesito internet para usar la app?", "Do I need internet to use the app?"),
    faq3a: T("Sí. 1% Budget necesita conexión a internet para sincronizar tus movimientos, presupuestos y cuentas entre dispositivos. No funciona sin conexión.", "Yes. 1% Budget needs an internet connection to sync your transactions, budgets and accounts across devices. It doesn't work offline."),
    faq4q: T("¿La app se conecta con el banco?", "Does the app connect to my bank?"),
    faq4a: T("No, pero está diseñada para facilitar el mantenimiento de tus cuentas.", "No, but it's designed to make keeping your accounts up to date easy."),

    ctaEyebrow: T("Descarga la app", "Get the app"),
    ctaHead: T("Empieza a tomar control hoy", "Start taking control today"),
    ctaSub1: T("30 días gratis", "30 days free"),
    ctaSub2: T("Sin tarjeta para empezar", "No card to start"),

    footerTagline: T("Presupuesto por sobres para que puedas organizar cada dólar en donde debe ir.", "Envelope budgeting so you can put every dollar exactly where it belongs."),
    footerProducto: T("Producto", "Product"),
    footerEmpresa: T("Empresa", "Company"),
    footerLegal: "Legal",
    flAbout: T("Sobre nosotros", "About"),
    flContact: T("Contacto", "Contact"),
    flBlog: "Blog",
    flTerms: T("Términos de uso", "Terms of use"),
    flPrivacy: T("Privacidad", "Privacy"),
    flSupport: T("Soporte", "Support"),
    copyright: T("© 2026 1% academy · Hecho en Panamá", "© 2026 1% academy · Made in Panama")
  };
  const benefits = [
  T("Cada dólar tiene una misión", "Every dollar has a job"),
  T("Conoce en todo momento cuánto puedes gastar", "Always know how much you can spend"),
  T("Dile adiós a tu hoja de Excel", "Say goodbye to your spreadsheet"),
  T("Todas tus cuentas y tarjetas en un solo lugar", "All your accounts and cards in one place"),
  T("Sincronización en todos tus dispositivos", "Sync across all your devices"),
  T("Todas las funciones incluidas", "All features included")];

  return { s, benefits };
};

/* ============================================================
   ICONS
   ============================================================ */
const IconAppStore = () =>
<svg width="23" height="23" viewBox="0 0 24 24" fill="#fff"><path d="M16.4 12.6c0-2 1.6-3 1.7-3.1-0.9-1.4-2.4-1.6-2.9-1.6-1.2-0.1-2.4 0.7-3 0.7-0.6 0-1.6-0.7-2.7-0.7-1.4 0-2.7 0.8-3.4 2.1-1.5 2.5-0.4 6.3 1 8.3 0.7 1 1.5 2.1 2.6 2 1 0 1.4-0.7 2.7-0.7 1.2 0 1.6 0.7 2.7 0.7 1.1 0 1.8-1 2.5-2 0.8-1.1 1.1-2.2 1.1-2.3-0.1 0-2.3-0.9-2.3-3.4z M14.7 6.2c0.5-0.6 0.9-1.5 0.8-2.4-0.7 0-1.6 0.5-2.1 1.1-0.5 0.5-0.9 1.4-0.8 2.3 0.8 0.1 1.6-0.4 2.1-1z" /></svg>;

const IconGooglePlay = () =>
<svg width="21" height="21" viewBox="0 0 512 512">
    <path fill="#00D0FF" d="M47 0C34 6.8 25.3 19.2 25.3 35.3v441.3c0 16.1 8.7 28.5 21.7 35.3l256.6-256L47 0z" />
    <path fill="#FF3A44" d="M325.3 234.3L104.6 13l280.8 161.2-60.1 60.1z" />
    <path fill="#00D26A" d="M104.6 499L325.3 277.7l60.1 60.1L104.6 499z" />
    <path fill="#FFCE00" d="M472.2 225.6l-58.9-34.1-65.7 64.5 65.7 64.5 60.1-34.1c18-14.3 18-46.5-1.2-60.8z" />
  </svg>;

const featIcons = {
  envelope: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="6" width="18" height="13" rx="1.5" /><path d="M3 7l9 7 9-7" /></svg>,
  wallet: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7.5A2.5 2.5 0 0 1 5.5 5h13A1.5 1.5 0 0 1 20 6.5V8" /><rect x="3" y="7.5" width="18" height="11.5" rx="2" /><circle cx="17" cy="13.5" r="1.2" /></svg>,
  arrows: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 8h13l-3-3" /><path d="M20 16H7l3 3" /></svg>,
  template: <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3.5" y="4" width="17" height="16" rx="2" /><path d="M3.5 9h17" /><path d="M9 9v11" /></svg>
};
const IconChevron = () => <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 9l6 6 6-6" /></svg>;
const IconCheckSm = () => <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.6" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l4 4 10-10" /></svg>;

/* ============================================================
   SMALL COMPONENTS
   ============================================================ */
const AppStoreBadge = ({ s }) =>
<a href="https://apps.apple.com/us/app/1-budget/id6761083841" target="_blank" rel="noopener noreferrer" className="badge badge-ios" style={{ backgroundColor: "rgb(0, 0, 0)", width: "173px" }}>
    <IconAppStore />
    <span className="badge-txt"><span className="badge-small">{s.appStoreSmall}</span><span className="badge-big">{s.appStoreBig}</span></span>
  </a>;

const PlayBadge = ({ s, hover, setHover }) =>
<span className="badge badge-play" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ backgroundColor: "rgb(87, 92, 90)", width: "173px" }}>
    <IconGooglePlay />
    <span className="badge-txt"><span className="badge-small">{s.googlePlaySmall}</span><span className="badge-big">{s.googlePlayBig}</span></span>
    {hover && <span className="gp-tip">{s.soon}</span>}
  </span>;

const Sep = ({ band }) =>
<div className={band ? "sep band" : "sep"}>
    <div className="sep-inner">
      <div className="sep-line-l" /><div className="sep-diamond" /><div className="sep-line-r" />
    </div>
  </div>;

const HowPhone = ({ img, label }) =>
<div className="how-phone">
    <div className="how-screen">
      <img className="how-img" src={img} alt={label} />
    </div>
  </div>;


/* ============================================================
   APP
   ============================================================ */
const App = () => {
  const [lang, setLang] = useState(() => {
    try {const l = localStorage.getItem("onepct_lang");if (l === "es" || l === "en") return l;} catch (e) {}
    return "es";
  });
  const [theme, setTheme] = useState(() => {
    try {
      const tm = localStorage.getItem("onepct_theme");
      if (tm === "light" || tm === "dark") return tm;
      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) return "dark";
    } catch (e) {}
    return "light";
  });
  const [openFaq, setOpenFaq] = useState(-1);
  const [gpHover, setGpHover] = useState(false);
  const [howActive, setHowActive] = useState(0);
  const [howPaused, setHowPaused] = useState(false);
  const phoneRef = useRef(null);

  useEffect(() => {
    if (howPaused) return;
    const t = setTimeout(() => setHowActive((a) => (a + 1) % 4), 6000);
    return () => clearTimeout(t);
  }, [howActive, howPaused]);

  useEffect(() => {
    const el = phoneRef.current;
    if (!el) return;
    let raf = null,lx = 0,ly = 0;
    const apply = () => {
      raf = null;
      el.style.transform = `rotateY(${lx * 28}deg) rotateX(${-ly * 18}deg) translateZ(12px)`;
    };
    const onMove = (e) => {
      lx = e.clientX / window.innerWidth - 0.5;
      ly = e.clientY / window.innerHeight - 0.5;
      if (!raf) raf = requestAnimationFrame(apply);
    };
    const onLeave = () => {el.style.transform = "rotateY(0deg) rotateX(0deg)";};
    window.addEventListener("mousemove", onMove);
    document.addEventListener("mouseleave", onLeave);
    return () => {
      window.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseleave", onLeave);
      if (raf) cancelAnimationFrame(raf);
    };
  }, []);

  useEffect(() => {document.documentElement.lang = lang;}, [lang]);
  useEffect(() => {
    document.documentElement.setAttribute("data-theme", theme);
    try {localStorage.setItem("onepct_theme", theme);} catch (e) {}
  }, [theme]);

  const changeLang = (l) => {setLang(l);try {localStorage.setItem("onepct_lang", l);} catch (e) {}};
  const toggleFaq = (i) => setOpenFaq((cur) => cur === i ? -1 : i);

  const { s, benefits } = buildStrings(lang);

  const pains = [
  { tone: "green", q: s.pain1q, b: s.pain1b },
  { tone: "green", q: s.pain2q, b: s.pain2b },
  { tone: "green", q: s.pain3q, b: s.pain3b },
  { tone: "green", q: s.pain4q, b: s.pain4b }];

  const steps = [
  { n: 1, title: s.step1Title, body: s.step1Body, shot: s.step1Shot, img: "assets/screenshots/home.png" },
  { n: 2, title: s.step2Title, body: s.step2Body, shot: s.step2Shot, img: "assets/screenshots/registro.png" },
  { n: 3, title: s.step4Title, body: s.step4Body, shot: s.step4Shot, img: "assets/screenshots/accounts.png" },
  { n: 4, title: s.step3Title, body: s.step3Body, shot: s.step3Shot, img: "assets/screenshots/informe.png" }];

  const faqs = [
  { i: 1, q: s.faq1q, a: s.faq1a },
  { i: 2, q: s.faq2q, a: s.faq2a },
  { i: 4, q: s.faq4q, a: s.faq4a }];


  return (
    <div id="top">
      {/* NAV */}
      <nav className="nav">
        <div className="nav-inner">
          <a href="#top" aria-label="1% budget"><img className="brand-logo" src="assets/logo/logo-horizontal.svg" alt="1% budget" /></a>
          <div className="nav-links">
            <a href="#features">{s.navFeatures}</a>
            <a href="#how">{s.navHow}</a>
            <a href="#pricing">{s.navPricing}</a>
            <a href="#download">{s.navDownload}</a>
          </div>
          <div className="nav-ctrls">
            <div className="nav-social">
              <a href="#" aria-label="Instagram"><svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3.5" y="3.5" width="17" height="17" rx="4.5" /><circle cx="12" cy="12" r="3.8" /><circle cx="17" cy="7" r="0.7" fill="currentColor" /></svg></a>
              <a href="#" aria-label="TikTok"><svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3c.3 2.1 1.5 3.4 3.5 3.5v2.4c-1.2.1-2.4-.3-3.5-1v5.7c0 3.3-2.4 5.4-5.3 5.4C8.4 19 6 17 6 14.2c0-2.8 2.3-4.9 5.4-4.6v2.6c-.4-.1-.9-.2-1.3-.1-1.1.2-1.9 1-1.8 2.2.1 1.1 1 1.9 2.1 1.8 1.2-.1 1.9-1 1.9-2.3V3h2.2z" /></svg></a>
              <a href="#" aria-label="YouTube"><svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M21.6 7.2a2.5 2.5 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8 0.4a2.5 2.5 0 0 0-1.8 1.8C2 8.8 2 12 2 12s0 3.2 0.4 4.8a2.5 2.5 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-0.4a2.5 2.5 0 0 0 1.8-1.8C22 15.2 22 12 22 12s0-3.2-0.4-4.8zM10 15V9l5.2 3L10 15z" /></svg></a>
            </div>
            <div className="pill-group">
              <button type="button" aria-label="Light" className={`pill-btn${theme === "light" ? " active" : ""}`} onClick={() => setTheme("light")}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="4" /><path d="M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4" /></svg>
              </button>
              <button type="button" aria-label="Dark" className={`pill-btn${theme === "dark" ? " active" : ""}`} onClick={() => setTheme("dark")}>
                <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z" /></svg>
              </button>
            </div>
            <div className="pill-group lang">
              <button type="button" className={`pill-btn${lang === "es" ? " active" : ""}`} onClick={() => changeLang("es")}>ES</button>
              <button type="button" className={`pill-btn${lang === "en" ? " active" : ""}`} onClick={() => changeLang("en")}>EN</button>
            </div>
          </div>
        </div>
      </nav>

      {/* HERO */}
      <section className="hero">
        <div className="hero-glow" />
        <div className="hero-inner">
          <div className="hero-text">
            <div className="eyebrow" style={{ opacity: "1" }}>{s.heroEyebrow}</div>
            <h1 style={{ fontSize: "70px" }}><span style={{ color: "var(--orange)" }}>{s.heroHeadA}</span>{s.heroHeadB}</h1>
            <p className="hero-sub">{s.heroSub}</p>
            <div className="hero-badges">
              <AppStoreBadge s={s} />
              <PlayBadge s={s} hover={gpHover} setHover={setGpHover} />
            </div>
            <div className="hero-trust">
              <div className="trust-item">
                <span className="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><rect x="2.5" y="5" width="19" height="14" rx="2.5" /><path d="M2.5 9.5h19" /></svg></span>
                <span>{s.trust0}</span>
              </div>
              <div className="trust-item">
                <span className="ic"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12.5l4 4 10-10" /></svg></span>
                <span>{s.trust2}</span>
              </div>
            </div>
          </div>
          <div className="hero-shot">
            <div className="phone" ref={phoneRef}>
              <div className="phone-screen">
                <img className="phone-img" src="assets/screenshots/home.png" alt={s.heroShot} />
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* diamond separator (replaces trust band) */}
      <Sep />

      {/* FEATURES */}
      <section id="features" className="section">
        <div className="wrap">
          <div className="sec-head">
            <div className="eyebrow">{s.painEyebrow}</div>
            <h2 className="h2">{s.painHead}</h2>
          </div>
          <div className="pain-grid">
            {pains.map((p, i) =>
            <div className={"pain-card " + p.tone} key={i}>
                <h3 className="pain-q">{p.q}</h3>
                <p className="pain-b">{p.b}</p>
              </div>
            )}
          </div>
          <div className="pain-foot">
            <p className="pain-foot-1">{s.painFoot1}</p>
            <p className="pain-foot-2">{s.painFoot2}</p>
          </div>
        </div>
      </section>

      <Sep band />

      {/* HOW IT WORKS */}
      <section id="how" className="section band">
        <div className="wrap">
          <div className="sec-head" style={{ maxWidth: 660 }}>
            <div className="eyebrow">{s.howEyebrow}</div>
            <h2 className="h2">{s.howHead}</h2>
          </div>
          <div className="how-shell">
            <div className="how-stage">
              {steps.map((st, i) => {
                const N = steps.length;
                const raw = (i - howActive + N) % N;
                const off = raw > N / 2 ? raw - N : raw;
                const pose =
                  off === 0
                    ? { transform: "translateX(0%) translateZ(30px) rotateY(0deg) scale(1)", opacity: 1, filter: "none", zIndex: 4 }
                    : off === 1
                    ? { transform: "translateX(58%) translateZ(-150px) rotateY(-38deg) scale(0.74)", opacity: 0.5, filter: "brightness(0.7)", zIndex: 3 }
                    : off === -1
                    ? { transform: "translateX(-58%) translateZ(-150px) rotateY(38deg) scale(0.74)", opacity: 0.5, filter: "brightness(0.7)", zIndex: 3 }
                    : { transform: "translateX(0%) translateZ(-330px) rotateY(0deg) scale(0.56)", opacity: 0.24, filter: "brightness(0.55)", zIndex: 1 };
                return (
                  <button type="button" className="how-phone" key={st.n} style={pose} onClick={() => { setHowActive(i); setHowPaused(true); }} aria-label={st.title}>
                    <div className="how-screen">
                      {st.img ?
                      <img className="how-img" src={st.img} alt={st.shot} /> :
                      <div className="how-ph">
                          <div className="how-ph-tag">{st.shot}</div>
                          <div className="how-ph-dim">1179 &times; 2556</div>
                        </div>}
                    </div>
                  </button>);
              })}
            </div>
            <div className="how-list">
              {steps.map((st, i) =>
              <button type="button" className={`how-item${howActive === i ? " active" : ""}`} key={st.n} onClick={() => { setHowActive(i); setHowPaused(true); }} aria-pressed={howActive === i}>
                  <span className="how-num">{st.n}</span>
                  <span className="how-text">
                    <h3>{st.title}</h3>
                    <p>{st.body}</p>
                  </span>
                  <svg className="how-star" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M12 1.6c.7 5.2 3.6 8.1 8.8 8.8 0 0 .3 0 .3.3s-.3.3-.3.3c-5.2.7-8.1 3.6-8.8 8.8 0 0 0 .3-.3.3s-.3-.3-.3-.3c-.7-5.2-3.6-8.1-8.8-8.8 0 0-.3 0-.3-.3s.3-.3.3-.3c5.2-.7 8.1-3.6 8.8-8.8 0 0 0-.3.3-.3s.3.3.3.3z" /></svg>
                  {howActive === i && !howPaused && <span className="how-prog" key={howActive} />}
                </button>
              )}
            </div>
          </div>
        </div>
      </section>

      <Sep band />

      {/* PRICING */}
      <section id="pricing" className="section">
        <div className="pricing-wrap">
          <div className="sec-head" style={{ maxWidth: 680 }}>
            <div className="eyebrow">{s.priceEyebrow}</div>
            <h2 className="h2">{s.priceHead}</h2>
            <p className="hero-sub" style={{ margin: "16px auto 0", maxWidth: 520 }}>{s.priceSub}</p>
          </div>
          <div className="price-card">
            <div className="price-left">
              <div className="pick-label">{s.pickLabel}</div>
              <div className="plan featured">
                <span className="plan-pill">{s.annualPill}</span>
                <div className="plan-name">{s.annualName}</div>
                <div className="plan-price">{s.annualPrice}</div>
                <div className="plan-save">
                  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M5 16l5-5 3 3 6-6" /><path d="M16 8h3v3" /></svg>
                  <span>{s.annualSub}</span>
                </div>
              </div>
              <div className="plan">
                <div className="plan-name">{s.monthlyName}</div>
                <div className="plan-price">{s.monthlyPrice}</div>
                <div className="plan-msub">{s.monthlySub}</div>
              </div>
              <a href="#download" className="plan-cta">{s.planCta}</a>
            </div>
            <div className="price-right">
              <div className="incl-title">{s.includedTitle}</div>
              <ul className="incl-list">
                {benefits.map((b, i) =>
                <li key={i}>
                    <span className="incl-check"><IconCheckSm /></span>
                    <span>{b}</span>
                  </li>
                )}
              </ul>
              <div className="coffee-note">
                <span className="coffee-ic" aria-hidden="true">
                  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M18 8h1a4 4 0 0 1 0 8h-1" /><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z" /><line x1="6" y1="1" x2="6" y2="4" /><line x1="10" y1="1" x2="10" y2="4" /><line x1="14" y1="1" x2="14" y2="4" /></svg>
                </span>
                <p className="coffee-txt">{lang === "es" ? "Tu plan por menos de " : "Your plan for less than "}<b>{lang === "es" ? "un café" : "a coffee"}</b>{lang === "es" ? " al mes" : " a month"}</p>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Sep band />

      {/* FAQ */}
      <section className="section band" style={{ paddingTop: "clamp(26px, 3.2vw, 44px)" }}>
        <div className="faq-wrap">
          <div className="faq-head">
            <div className="eyebrow">{s.faqEyebrow}</div>
            <h2 className="h2">{s.faqHead}</h2>
          </div>
          <div>
            {faqs.map((f, idx) => {
              const open = openFaq === f.i;
              const last = idx === faqs.length - 1;
              return (
                <div className={`faq-item${open ? " open" : ""}${last ? " last" : ""}`} key={f.i}>
                  <button type="button" className="faq-q" onClick={() => toggleFaq(f.i)} aria-expanded={open}>
                    <span>{f.q}</span>
                    <span className="faq-chev"><IconChevron /></span>
                  </button>
                  {open && <div className="faq-a">{f.a}</div>}
                </div>);

            })}
          </div>
        </div>
      </section>

      {/* FINAL CTA */}
      <section id="download" className="cta">
        <div className="cta-inner">
          <div className="eyebrow">{s.ctaEyebrow}</div>
          <h2>{s.ctaHead}</h2>
          <p className="cta-sub"><span>{s.ctaSub1}</span><span className="dot">&middot;</span><span>{s.ctaSub2}</span></p>
          <div className="cta-badges">
            <AppStoreBadge s={s} />
            <PlayBadge s={s} hover={gpHover} setHover={setGpHover} />
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="footer">
        <div className="footer-inner">
          <div className="footer-top">
            <div className="footer-brand">
              <img className="brand-logo" src="assets/logo/logo-horizontal.svg" alt="1% budget" />
              <div className="footer-tag">{s.footerTagline}</div>
            </div>
            <div className="footer-col">
              <h4>{s.footerProducto}</h4>
              <ul>
                <li><a href="#features">{s.navFeatures}</a></li>
                <li><a href="#how">{s.navHow}</a></li>
                <li><a href="#pricing">{s.navPricing}</a></li>
                <li><a href="#download">{s.navDownload}</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h4>{s.footerEmpresa}</h4>
              <ul>
                <li><a href="#">{s.flAbout}</a></li>
                <li><a href="#">{s.flContact}</a></li>
                <li><a href="#">{s.flBlog}</a></li>
              </ul>
            </div>
            <div className="footer-col">
              <h4>{s.footerLegal}</h4>
              <ul>
                <li><a href="terminos.html">{s.flTerms}</a></li>
                <li><a href="https://onepercentacad.com/privacy-policy" target="_blank" rel="noopener noreferrer">{s.flPrivacy}</a></li>
                <li><a href="mailto:ayuda@1percentbudget.com">{s.flSupport}</a></li>
              </ul>
            </div>
          </div>
          <div className="footer-bottom">
            <div>{s.copyright}</div>
            <div className="socials">
              <a href="#" aria-label="Instagram"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3.5" y="3.5" width="17" height="17" rx="4.5" /><circle cx="12" cy="12" r="3.8" /><circle cx="17" cy="7" r="0.7" fill="currentColor" /></svg></a>
              <a href="#" aria-label="TikTok"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3c.3 2.1 1.5 3.4 3.5 3.5v2.4c-1.2.1-2.4-.3-3.5-1v5.7c0 3.3-2.4 5.4-5.3 5.4C8.4 19 6 17 6 14.2c0-2.8 2.3-4.9 5.4-4.6v2.6c-.4-.1-.9-.2-1.3-.1-1.1.2-1.9 1-1.8 2.2.1 1.1 1 1.9 2.1 1.8 1.2-.1 1.9-1 1.9-2.3V3h2.2z" /></svg></a>
              <a href="#" aria-label="YouTube"><svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M21.6 7.2a2.5 2.5 0 0 0-1.8-1.8C18.2 5 12 5 12 5s-6.2 0-7.8 0.4a2.5 2.5 0 0 0-1.8 1.8C2 8.8 2 12 2 12s0 3.2 0.4 4.8a2.5 2.5 0 0 0 1.8 1.8C5.8 19 12 19 12 19s6.2 0 7.8-0.4a2.5 2.5 0 0 0 1.8-1.8C22 15.2 22 12 22 12s0-3.2-0.4-4.8zM10 15V9l5.2 3L10 15z" /></svg></a>
            </div>
          </div>
        </div>
      </footer>
    </div>);

};

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