// ========= HOME SECTIONS — aligned with official auditbnb.com =========

const { useState, useEffect, useRef } = React;

// Helper: letter grade from score
const toGrade = (s) => {
  if (s >= 85) return { g: 'A', tag: 'good', label: 'Excelente' };
  if (s >= 70) return { g: 'B', tag: 'good', label: 'Bueno' };
  if (s >= 55) return { g: 'C', tag: 'warn', label: 'Mejorable' };
  return { g: 'D', tag: 'bad', label: 'Crítico' };
};

// Meta Pixel helper — safe no-op si fbq no cargó aún.
// Devuelve el event_id usado para que el caller lo pueda enviar al backend
// y Meta deduplique browser+server.
const newEventId = () => {
  try {
    if (window.crypto && typeof window.crypto.randomUUID === 'function') {
      return window.crypto.randomUUID().replace(/-/g, '');
    }
  } catch (_) {}
  return 'eid_' + Date.now().toString(36) + Math.random().toString(36).slice(2, 10);
};
const fire = (event, props, eventId) => {
  const eid = eventId || newEventId();
  try {
    if (typeof window.fbq === 'function') {
      window.fbq('track', event, props || {}, { eventID: eid });
    }
  } catch (_) { /* noop */ }
  return eid;
};

// Audit demo wired to real /api/analyze backend
const AUDIT_URL_RE = /airbnb\.[a-z.]{2,8}\/(?:rooms|h)\/\d+/i;
const normalizeAirbnbUrl = (raw) => {
  let u = (raw || '').trim();
  if (!u) return u;
  if (!/^https?:\/\//i.test(u)) u = 'https://' + u;
  try { const p = new URL(u); p.search = ''; p.hash = ''; return p.toString(); } catch(e) { return u; }
};
const roomIdFromUrl = (u) => { const m = String(u||'').match(/\/rooms\/(\d+)/); return m ? m[1] : ''; };

const AuditDemo = () => {
  const [url, setUrl] = useState("");
  const [phase, setPhase] = useState("idle");
  const [progress, setProgress] = useState(0);
  const [score, setScore] = useState(0);
  const [errMsg, setErrMsg] = useState("");
  const [result, setResult] = useState(null);
  const [emailSubmitted, setEmailSubmitted] = useState(false);
  const runningRef = useRef(false);

  const steps = [
    "Extrayendo datos del listing…",
    "Leyendo portada y galería…",
    "Evaluando título y descripción…",
    "Contando reseñas y rating…",
    "Generando calificación final…",
  ];
  const [stepIdx, setStepIdx] = useState(0);

  const runAudit = async (e) => {
    e?.preventDefault?.();
    if (phase === "scanning") return;
    const u = normalizeAirbnbUrl(url);
    if (!AUDIT_URL_RE.test(u)) {
      setErrMsg("Ingresa una URL válida de Airbnb (airbnb.com/rooms/...)");
      return;
    }
    setErrMsg("");
    setUrl(u);
    setPhase("scanning"); setProgress(0); setScore(0); setStepIdx(0); setResult(null);
    const startEid = fire('StartAudit', { content_name: u });

    runningRef.current = true;
    const start = performance.now();
    const tick = (now) => {
      if (!runningRef.current) return;
      const t = Math.min(0.92, (now - start) / 28000);
      const eased = 1 - Math.pow(1 - t, 2);
      setProgress(eased * 100);
      setStepIdx(Math.min(steps.length - 1, Math.floor(eased * steps.length)));
      requestAnimationFrame(tick);
    };
    requestAnimationFrame(tick);

    try {
      const r = await fetch('/api/analyze', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ url: u, event_id: startEid })
      });
      const data = await r.json().catch(() => ({}));
      runningRef.current = false;
      if (!r.ok) throw new Error(data.error || ('Error ' + r.status));
      window._lastAnalyze = data;
      setResult(data);
      setScore(Number(data.score) || 0);
      setProgress(100);
      setPhase("done");
      // Backend puede devolver un event_id para AuditComplete (para dedup con CAPI).
      // Si no lo manda, generamos uno del lado del cliente.
      fire('AuditComplete',
        { value: Number(data.score) || 0, content_name: data.title || '' },
        data.event_id_complete);
    } catch (err) {
      runningRef.current = false;
      setErrMsg(err.message || 'Error analizando el listing');
      setPhase("idle");
    }
  };

  const reset = () => { runningRef.current = false; setPhase("idle"); setProgress(0); setScore(0); setUrl(""); setResult(null); setErrMsg(""); setEmailSubmitted(false); };
  const grade = toGrade(score);

  return (
    <div className="audit-demo card" id="audit">
      <div className="demo-chrome">
        <div className="demo-dots"><span></span><span></span><span></span></div>
        <div className="demo-urlbar mono">auditbnb.com / auditoria</div>
        <div className="demo-chrome-right mono">EN VIVO</div>
      </div>

      <div className="demo-body">
        {phase === "idle" && (
          <form className="demo-form" onSubmit={runAudit}>
            <label className="eyebrow" style={{marginBottom: 14}}>Auditoría gratuita</label>
            <h3 className="serif" style={{fontSize: 30, margin: '0 0 8px', letterSpacing: '-0.02em'}}>
              Pega el link de tu Airbnb
            </h3>
            <p className="muted" style={{margin: '0 0 24px', fontSize: 15}}>
              En 90 segundos descubres tu calificación, las áreas débiles
              y por qué no estás reservando al máximo.
            </p>
            <div className="demo-input-row">
              <div className="demo-input-wrap">
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" style={{color:'var(--muted)'}}>
                  <path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/>
                  <path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>
                </svg>
                <input type="url" placeholder="https://www.airbnb.mx/rooms/..." value={url} onChange={(e) => { setUrl(e.target.value); if (errMsg) setErrMsg(''); }} aria-label="URL de tu listing de Airbnb" autoComplete="url" inputMode="url" />
              </div>
              <button type="submit" className="btn btn-primary btn-lg">
                Auditar gratis
                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
              </button>
            </div>
            {errMsg && (
              <div style={{marginTop: 10, fontSize: 13, color: 'var(--bad, #C84A3C)'}}>{errMsg}</div>
            )}
            <div className="demo-chips">
              <button type="button" className="chip" onClick={() => setUrl("https://www.airbnb.mx/rooms/873162259040252822")}>Probar con ejemplo</button>
              <span className="chip" style={{background:'transparent', border:0, color:'var(--muted)'}}>Sin tarjeta · Resultado en ~30s</span>
            </div>
          </form>
        )}

        {phase === "scanning" && (
          <div className="demo-scanning">
            <div className="scan-top">
              <span className="eyebrow">Auditando</span>
              <span className="mono muted" style={{fontSize: 12}}>{Math.round(progress)}%</span>
            </div>
            <div className="scan-property">
              <div className="scan-thumb" aria-hidden><div className="scan-sweep"></div></div>
              <div>
                <div style={{fontWeight:600, fontSize: 15}}>Analizando listing #{roomIdFromUrl(url) || '—'}</div>
                <div className="muted" style={{fontSize: 13}}>{url.replace(/^https?:\/\//, '').slice(0, 48)}</div>
              </div>
            </div>
            <ul className="scan-steps">
              {steps.map((s, i) => (
                <li key={i} className={i < stepIdx ? 'done' : i === stepIdx ? 'active' : ''}>
                  <span className="scan-bullet">
                    {i < stepIdx ? (<svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3"><path d="M20 6L9 17l-5-5"/></svg>)
                     : i === stepIdx ? (<span className="scan-spinner"></span>) : null}
                  </span>
                  {s}
                </li>
              ))}
            </ul>
            <div className="score-bar" style={{marginTop: 16}}>
              <div className="score-bar-fill" style={{width: `${progress}%`}}></div>
            </div>
          </div>
        )}

        {phase === "done" && (() => {
          const r = result || {};
          const cats = Array.isArray(r.categories) ? r.categories : [];
          const gradeToVal = { A: 92, B: 78, C: 62, D: 40, F: 20, 'N/E': 50 };
          const visibleKeys = ['fotos', 'titulo', 'descripcion', 'resenas'];
          const visibleLabels = { fotos: 'Fotografía', titulo: 'Título', descripcion: 'Descripción', resenas: 'Reseñas' };
          const metrics = visibleKeys.map(k => {
            const c = cats.find(cc => (cc.key || cc.id || '').toLowerCase() === k) || {};
            const g = (c.grade || '').toUpperCase();
            const val = gradeToVal[g] != null ? gradeToVal[g] : (c.score_0_10 ? Math.round(c.score_0_10 * 10) : 55);
            return { label: visibleLabels[k], val };
          });
          const topIssues = Array.isArray(r.top_problems) && r.top_problems.length
            ? r.top_problems.slice(0, 3)
            : (Array.isArray(r.issues) ? r.issues.slice(0, 3) : []);
          const premiumQS = `?url=${encodeURIComponent(url)}&score=${score}`;
          return (
            <div className="demo-done">
              <div className="demo-done-head">
                <div>
                  <span className="eyebrow">Calificación Auditbnb</span>
                  <div style={{display:'flex', alignItems:'baseline', gap: 16, marginTop: 6}}>
                    <div className={`grade-badge grade-${grade.tag}`}>{grade.g}</div>
                    <div>
                      <div className="score-num" style={{fontSize: 42}}>{(score / 10).toFixed(1)}<sup>/10</sup></div>
                      <div className={`chip chip-${grade.tag}`} style={{marginTop: 4}}>{grade.label}</div>
                    </div>
                  </div>
                </div>
                <div style={{textAlign:'right', maxWidth: 220}}>
                  <div className="muted" style={{fontSize: 12, textTransform:'uppercase', letterSpacing: '0.08em'}}>Listing</div>
                  <div style={{fontSize: 14, marginTop: 4, fontWeight: 500, lineHeight: 1.3}}>{(r.title || '—').slice(0, 60)}</div>
                  {r.location && <div className="muted" style={{fontSize: 12, marginTop: 2}}>{r.location}</div>}
                </div>
              </div>
              <div className="score-bar" style={{marginTop: 16}}>
                <div className={`score-bar-fill is-${grade.tag}`} style={{width: `${score}%`}}></div>
              </div>
              <div className="demo-metrics">
                {metrics.map(m => {
                  const mg = toGrade(m.val);
                  return (
                    <div key={m.label} className="demo-metric">
                      <div className="flex items-center justify-between" style={{marginBottom: 6}}>
                        <span style={{fontSize: 13, color:'var(--ink-2)'}}>{m.label}</span>
                        <span className="mono" style={{fontSize: 13}}>{mg.g} · {m.val}</span>
                      </div>
                      <div className="tiny-bar">
                        <span className={`is-${mg.tag}`} style={{width: `${m.val}%`}}></span>
                      </div>
                    </div>
                  );
                })}
              </div>
              {topIssues.length > 0 && (
                <div className={`issues-container${!emailSubmitted ? ' blurred' : ''}`} style={{marginTop: 20, padding: '16px 18px', background:'rgba(0,0,0,0.03)', borderRadius: 10, position:'relative'}}>
                  <div className="eyebrow" style={{marginBottom: 10}}>Áreas a mejorar</div>
                  <ul style={{margin: 0, paddingLeft: 18, fontSize: 13, lineHeight: 1.6}}>
                    {topIssues.map((it, i) => (
                      <li key={i}>{typeof it === 'string' ? it : (it.title || it.issue || JSON.stringify(it))}</li>
                    ))}
                  </ul>
                  {!emailSubmitted && (
                    <div className="issues-lock-overlay">
                      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 018 0v4"/></svg>
                      <span>Ingresa tu email abajo para ver los {topIssues.length} problemas</span>
                    </div>
                  )}
                </div>
              )}
              <EmailGate
                onAuditAnother={reset}
                listingUrl={url}
                score={score}
                resultData={r}
                onEmailSubmitted={() => setEmailSubmitted(true)}
              />
            </div>
          );
        })()}
      </div>
    </div>
  );
};

// Inline email gate that replaces the CTA. Preserves the card visual.
// Two actions share the email input:
//   Primary  → /api/lead + redirect to premium.html (pagar)
//   Secondary → /api/lead + stay (recibir reporte gratis)
const EMAIL_RE_V2 = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
const EmailGate = ({ onAuditAnother, listingUrl, score, resultData, onEmailSubmitted }) => {
  const [mode, setMode] = useState("form");  // form | submitting | free_sent
  const [email, setEmail] = useState("");
  const [localErr, setLocalErr] = useState("");

  const buildLeadPayload = (em, eid) => ({
    email: em,
    url: listingUrl,
    score: score,
    title: resultData?.title || "",
    issues: Array.isArray(resultData?.issues) ? resultData.issues.slice(0, 5) : [],
    categories: Array.isArray(resultData?.categories) ? resultData.categories : [],
    global_grade: resultData?.global_grade || "",
    photo_report: (typeof window !== 'undefined' && window._lastAnalyze?.photo_report) || resultData?.photo_report || null,
    market_report: (typeof window !== 'undefined' && window._lastAnalyze?.market_report) || resultData?.market_report || null,
    event_id: eid,
  });

  const postLead = async (em) => {
    const leadEid = newEventId();
    try {
      await fetch("/api/lead", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(buildLeadPayload(em, leadEid)),
      });
      fire('Lead', { value: 0, currency: 'MXN' }, leadEid);
    } catch (_) { /* never block UX on logging side-effect */ }
    // Unlock the blurred "Áreas a mejorar" section regardless of remote outcome;
    // the lead reached us, the UX should reward that immediately.
    if (typeof onEmailSubmitted === 'function') onEmailSubmitted();
  };

  const validateEmail = () => {
    const em = (email || "").trim().toLowerCase();
    if (!EMAIL_RE_V2.test(em)) {
      setLocalErr("Ingresa un email válido");
      return null;
    }
    setLocalErr("");
    return em;
  };

  const handleFreeSubmit = async (e) => {
    e?.preventDefault?.();
    const em = validateEmail();
    if (!em) return;
    setMode("submitting");
    await postLead(em);
    setMode("free_sent");
  };

  const handlePremium = async () => {
    const em = validateEmail();
    if (!em) return;
    setMode("submitting");
    await postLead(em);
    // El disparo final de InitiateCheckout lo hace PremiumSections.jsx cuando
    // realmente llama /api/create-checkout. Aquí solo pasamos un event_id para
    // que ambos (browser + server vía CAPI) usen el mismo id y Meta deduplique.
    const checkoutEid = newEventId();
    const qs = new URLSearchParams({
      url: listingUrl,
      score: String(score),
      email: em,
      event_id: checkoutEid,
    }).toString();
    window.location.href = `/premium?${qs}`;
  };

  if (mode === "free_sent") {
    return (
      <div className="demo-email-gate">
        <div className="eyebrow" style={{marginBottom: 8}}>✓ Enviado</div>
        <div style={{fontSize: 15, color: 'var(--ink)', marginBottom: 14}}>
          Revisa tu bandeja en <b>{email}</b>. El reporte gratis llega en los próximos minutos.
        </div>
        <div className="muted" style={{fontSize: 13, marginBottom: 18}}>
          ¿Quieres el análisis completo con 9 categorías, 3 títulos reescritos y roadmap 90 días?
        </div>
        <div className="demo-done-cta" style={{borderTop: 0, paddingTop: 0, marginTop: 0}}>
          <button type="button" className="btn btn-primary" onClick={handlePremium}>
            Ver reporte premium · $20 USD
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </button>
          <button className="btn btn-ghost" onClick={onAuditAnother}>Auditar otra</button>
        </div>
      </div>
    );
  }

  return (
    <form className="demo-email-gate" onSubmit={handleFreeSubmit}>
      <div className="eyebrow" style={{marginBottom: 8}}>Tu email</div>
      <div style={{fontSize: 15, marginBottom: 14, color: 'var(--ink-2)'}}>
        Te enviamos el reporte y te podemos mandar la versión completa si quieres mejorar.
      </div>
      <div className="demo-input-row" style={{marginBottom: 10}}>
        <div className="demo-input-wrap">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" style={{color:'var(--muted)'}}>
            <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
            <polyline points="22,6 12,13 2,6"/>
          </svg>
          <input
            type="email"
            placeholder="tu@email.com"
            value={email}
            onChange={(e) => { setEmail(e.target.value); if (localErr) setLocalErr(""); }}
            disabled={mode === "submitting"}
            aria-label="Tu email para recibir el reporte"
            autoComplete="email"
            inputMode="email"
          />
        </div>
      </div>
      {localErr && (
        <div style={{fontSize: 13, color: 'var(--bad, #C84A3C)', marginBottom: 10}}>{localErr}</div>
      )}
      <div style={{display:'flex', gap: 8, flexWrap: 'wrap'}}>
        <button
          type="button"
          className="btn btn-primary"
          onClick={handlePremium}
          disabled={mode === "submitting"}
          style={{flex:'1 1 auto'}}
        >
          {mode === "submitting" ? "Procesando…" : "Ver reporte completo · $20 USD"}
          {mode !== "submitting" && <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7"/></svg>}
        </button>
        <button
          type="submit"
          className="btn btn-outline"
          disabled={mode === "submitting"}
        >
          {mode === "submitting" ? "…" : "Solo enviármelo gratis"}
        </button>
      </div>
      <div style={{display:'flex', alignItems:'center', justifyContent:'space-between', marginTop: 12, gap: 12, flexWrap:'wrap'}}>
        <div className="muted" style={{fontSize: 12}}>
          Usamos tu email para entregarte el reporte. Puedes darte de baja cuando quieras.
        </div>
        <button
          type="button"
          className="btn btn-ghost"
          onClick={onAuditAnother}
          style={{padding: '0 8px', height: 'auto', fontSize: 13}}
        >
          Auditar otra →
        </button>
      </div>
    </form>
  );
};

const Hero = () => (
  <section className="hero">
    <div className="wrap">
      <div className="hero-grid">
        <div>
          <div className="eyebrow" style={{marginBottom: 28}}>Auditoría instantánea · 90 segundos · Sin registro</div>
          <h1 className="display">
            Descubre por qué<br/>tu Airbnb <em>no está<br/>reservando</em>.
          </h1>
          <p className="lede" style={{marginTop: 24}}>
            Auditbnb evalúa tu propiedad en 9 categorías, te asigna una calificación
            A–D y te entrega un plan de acción claro para aumentar reservas y revenue.
          </p>
          <div className="hero-proof">
            <div className="hero-proof-avatars">
              <span style={{background:'#D9C6B0'}}>MA</span>
              <span style={{background:'#C3D1B2'}}>JS</span>
              <span style={{background:'#E4B9B9'}}>LC</span>
              <span style={{background:'#B9C7E4'}}>+</span>
            </div>
            <div>
              <div style={{fontSize: 14, fontWeight: 500}}>+2,400 anfitriones</div>
              <div className="muted" style={{fontSize: 13}}>auditaron su propiedad este mes</div>
            </div>
          </div>
          <div style={{marginTop: 28, display:'flex', alignItems:'center', gap: 14}}>
            <div aria-hidden="true" style={{width: 56, height: 56, borderRadius:'50%',
              background: 'conic-gradient(#E25A4A 0 72%, rgba(226,90,74,0.18) 72% 100%)',
              display:'flex', alignItems:'center', justifyContent:'center',
              fontFamily:'var(--font-serif)', fontSize: 18, fontWeight: 600, color:'#1a1a1a',
              position:'relative'}}>
              <span style={{background:'#FAF8F3', borderRadius:'50%', width: 40, height: 40,
                display:'flex', alignItems:'center', justifyContent:'center'}}>72</span>
            </div>
            <div>
              <div style={{fontSize: 13, fontWeight: 600, letterSpacing:'0.04em',
                textTransform:'uppercase', color:'rgba(250,248,243,0.7)'}}>Ejemplo de score</div>
              <div className="muted" style={{fontSize: 13, marginTop: 2}}>
                72/100 · grado B · "Bueno, con 3 mejoras claras"
              </div>
            </div>
          </div>
        </div>
        <AuditDemo />
      </div>
    </div>
  </section>
);

const LogoBand = () => {
  // Duplicamos la lista para hacer loop infinito sin saltos visibles
  const logos = [
    <span key="a1" className="serif" style={{fontSize: 22}}>The Hosting Post</span>,
    <span key="a2" style={{fontWeight: 700, letterSpacing: '-0.02em', fontSize: 18}}>HOSTIFY</span>,
    <span key="a3" className="mono" style={{fontSize: 14, letterSpacing: '0.15em'}}>RENTAL · WEEKLY</span>,
    <span key="a4" className="serif" style={{fontSize: 22, fontStyle: 'italic'}}>Nómada</span>,
    <span key="a5" style={{fontWeight: 600, fontSize: 16}}>HostScale</span>,
    <span key="a6" className="serif" style={{fontSize: 22}}>Casa Circular</span>,
    <span key="a7" style={{fontWeight: 700, letterSpacing: '0.04em', fontSize: 15}}>AIRHOST MX</span>,
    <span key="a8" className="mono" style={{fontSize: 14, letterSpacing: '0.12em'}}>BOOKING · DAILY</span>,
  ];
  return (
    <section className="logoband">
      <div className="wrap">
        <div className="logoband-head">
          <span className="muted" style={{fontSize: 13}}>Confían en Auditbnb</span>
        </div>
      </div>
      <div className="logoband-track" aria-hidden="true">
        <div className="logoband-marquee">
          {logos.map((l, i) => <div key={`r1-${i}`} className="logoband-item">{l}</div>)}
          {logos.map((l, i) => <div key={`r2-${i}`} className="logoband-item">{l}</div>)}
        </div>
      </div>
    </section>
  );
};

// How it works — 3 steps inspired by official site
const HowItWorks = () => {
  const steps = [
    { n: '01', title: 'Pega tu link de Airbnb', body: 'No pedimos credenciales ni acceso a tu cuenta. Solo la URL pública del anuncio.' },
    { n: '02', title: 'Nuestra IA lo analiza', body: 'Evaluamos 9 categorías: fotos, título, descripción, precio, ocupación, reseñas, amenities, reglas y competencia.' },
    { n: '03', title: 'Recibes tu plan de acción', body: 'Calificación A–D, áreas débiles identificadas y recomendaciones específicas por orden de impacto.' },
  ];
  return (
    <section className="section" id="como-funciona">
      <div className="wrap">
        <div className="section-head">
          <span className="eyebrow">Cómo funciona</span>
          <h2 className="h2" style={{margin: '16px 0 0', maxWidth: 720}}>
            De una URL a un plan de acción<br/>en <em style={{fontStyle:'italic', color:'var(--accent)'}}>90 segundos</em>.
          </h2>
        </div>
        <div className="how-grid">
          {steps.map(s => (
            <div key={s.n} className="how-card">
              <div className="mono muted" style={{fontSize: 13}}>{s.n}</div>
              <h3 className="serif" style={{fontSize: 28, margin: '36px 0 12px', letterSpacing:'-0.02em'}}>{s.title}</h3>
              <p className="muted" style={{margin: 0, lineHeight: 1.55}}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};


const LISTING_CATS = [
  { num: 1, cat: 'Fotografía',  weight: 20, anchor: 'photos',      insight: '"Tu portada está oscura — la foto del salón funciona 2× mejor."' },
  { num: 2, cat: 'Título',       weight: 15, anchor: 'title',       insight: '"Añade «terraza privada» — el 68% de tu zona lo busca."' },
  { num: 3, cat: 'Reseñas',      weight: 10, anchor: 'reviews',     insight: '"Respondes en 4h de media — mejor que el 82% de la zona."' },
  { num: 4, cat: 'Precio',       weight: 12, anchor: 'price',       insight: '"Fines de semana $180 MXN debajo de la zona."' },
  { num: 5, cat: 'Descripción',  weight: 12, anchor: 'description', insight: '"Empieza por beneficios, no por reglas. Recorta 30%."' },
  { num: 6, cat: 'Amenities',    weight: 8,  anchor: 'amenities',   insight: '"Te faltan 3: cafetera, Nest y secadora."' },
  { num: 7, cat: 'Ocupación',    weight: 10, anchor: 'occupancy',   insight: '"Tu calendario tiene 12 gaps de 1 noche — bloquea o baja mínimo."' },
  { num: 8, cat: 'Reglas',       weight: 7,  anchor: 'rules',       insight: '"Estancia mínima de 3 te cuesta 23% de búsquedas."' },
];

const CompetitionPanel = ({ active }) => (
  <aside className={`competition-panel ${active ? 'active' : ''}`} aria-label="Competencia del listing">
    <span className="eyebrow">vs Tu competencia en Condesa</span>
    <div className="competition-panel-label">Listing top de la zona:</div>
    <div className="competition-panel-card">
      <div className="competition-panel-card-title">Moderno Depto · Parque México · Balcón</div>
      <div className="competition-panel-card-meta">$1,380 MXN · 4.82★ · 98 reseñas</div>
    </div>
    <div className="competition-panel-insights">
      <span>Tú cobras <strong>15% menos</strong> que la mediana.</span>
      <span>Top 3 de tu zona cobran <strong>18% más</strong>.</span>
    </div>
  </aside>
);

const AnnotationCard = ({ data, anchorRect, containerRect }) => {
  if (!data || !anchorRect || !containerRect) return null;
  const gap = 12;
  const cardWidth = 260;
  const anchorCenterY = anchorRect.top - containerRect.top + anchorRect.height / 2;
  const rightEdge = anchorRect.right - containerRect.left + gap;
  const leftEdge = anchorRect.left - containerRect.left - gap - cardWidth;
  const placeRight = (rightEdge + cardWidth) <= containerRect.width;
  const left = placeRight ? rightEdge : Math.max(0, leftEdge);
  const top = Math.max(0, anchorCenterY - 40);
  return (
    <div
      className="annotation-card visible"
      style={{ left, top, width: cardWidth }}
      role="status"
      aria-live="polite"
    >
      <div className="annotation-card-eyebrow">{String(data.num).padStart(2, '0')} · {data.weight}%</div>
      <div className="annotation-card-title">{data.cat}</div>
      <div className="annotation-card-insight">{data.insight}</div>
    </div>
  );
};

const MobileAnnotationStack = ({ activeIdx }) => {
  const refs = React.useRef({});
  React.useEffect(() => {
    if (activeIdx < 0) return;
    const el = refs.current[activeIdx];
    if (el && typeof el.scrollIntoView === 'function') {
      el.scrollIntoView({ behavior: 'smooth', block: 'center' });
    }
  }, [activeIdx]);

  return (
    <ol className="mobile-annotation-stack" aria-label="Lista de las 9 categorías analizadas">
      {LISTING_CATS.map((c, i) => (
        <li
          key={c.num}
          ref={(el) => { if (el) refs.current[i] = el; }}
          style={{
            listStyle: 'none',
            padding: '14px 16px',
            background: '#FAF8F3',
            borderRadius: 10,
            borderLeft: '3px solid ' + (i === activeIdx ? '#E25A4A' : 'rgba(26,26,26,0.08)'),
            transition: 'border-color 160ms ease',
          }}
        >
          <div style={{fontSize: 10, letterSpacing: '0.18em', textTransform:'uppercase', color:'#E25A4A', fontWeight: 600}}>
            {String(c.num).padStart(2,'0')} · {c.weight}%
          </div>
          <div style={{fontFamily: 'var(--font-serif, Georgia, serif)', fontSize: 16, marginTop: 4, color:'#1a1a1a'}}>
            {c.cat}
          </div>
          <div style={{marginTop: 6, fontSize: 12, lineHeight: 1.5, fontStyle: 'italic', color:'rgba(26,26,26,0.7)'}}>
            {c.insight}
          </div>
        </li>
      ))}
      <li
        ref={(el) => { if (el) refs.current[8] = el; }}
        style={{
          listStyle: 'none',
          padding: '14px 16px',
          background: '#FAF8F3',
          borderRadius: 10,
          borderLeft: '3px solid #E25A4A',
          transition: 'border-color 160ms ease',
        }}
      >
        <div style={{fontSize: 10, letterSpacing:'0.18em', textTransform:'uppercase', color:'#E25A4A', fontWeight:600}}>
          09 · 6% · Competencia
        </div>
        <div style={{fontFamily:'var(--font-serif, Georgia, serif)', fontSize: 16, marginTop: 4, color:'#1a1a1a'}}>
          vs 1 comparable en tu zona
        </div>
        <div style={{marginTop: 6, fontSize: 12, lineHeight: 1.5, color: 'rgba(26,26,26,0.75)'}}>
          Top 3 de Condesa cobran 18% más. Tú cobras 15% menos que la mediana.
        </div>
      </li>
    </ol>
  );
};

const ListingMockup = () => {
  const [activeIdx, setActiveIdx] = React.useState(-1);
  const [autoPlayDone, setAutoPlayDone] = React.useState(false);
  const sectionRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const anchorRefs = React.useRef({});
  const [rects, setRects] = React.useState({ anchor: null, container: null });

  React.useLayoutEffect(() => {
    if (activeIdx < 0 || activeIdx > 7) {
      setRects({ anchor: null, container: null });
      return;
    }
    const anchorEl = anchorRefs.current[activeIdx];
    const containerEl = containerRef.current;
    if (!anchorEl || !containerEl) return;
    setRects({
      anchor: anchorEl.getBoundingClientRect(),
      container: containerEl.getBoundingClientRect(),
    });
  }, [activeIdx]);

  const prefersReducedMotion = React.useMemo(() => {
    if (typeof window === 'undefined' || !window.matchMedia) return false;
    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  }, []);

  const runAutoPlay = React.useCallback(() => {
    LISTING_CATS.forEach((_, i) => {
      setTimeout(() => setActiveIdx(i), i * 2000);
    });
    setTimeout(() => setActiveIdx(8), LISTING_CATS.length * 2000);
    setTimeout(() => {
      setActiveIdx(-1);
      setAutoPlayDone(true);
    }, (LISTING_CATS.length + 1) * 2000);
  }, []);

  React.useEffect(() => {
    if (prefersReducedMotion || autoPlayDone) return;
    if (!window.IntersectionObserver) {
      runAutoPlay();
      return;
    }
    const obs = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && entries[0].intersectionRatio >= 0.5) {
        obs.disconnect();
        runAutoPlay();
      }
    }, { threshold: 0.5 });
    if (sectionRef.current) obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, [autoPlayDone, prefersReducedMotion, runAutoPlay]);

  const setAnchor = (idx) => {
    if (!autoPlayDone) return;
    setActiveIdx(idx);
  };
  const clearAnchor = () => {
    if (!autoPlayDone) return;
    setActiveIdx(-1);
  };

  return (
    <section ref={sectionRef} className="section" aria-label="Qué analizamos en tu listing">
      <div className="wrap">
        <div style={{textAlign:'center', maxWidth: 680, margin: '0 auto 48px'}}>
          <span className="eyebrow" style={{justifyContent:'center'}}>Qué analizamos</span>
          <h2 className="h2" style={{margin: '16px auto 0'}}>
            Las <em>9 señales</em> que mueven tu score.
          </h2>
          <p className="lede" style={{marginTop: 14, fontSize: 16}}>
            Pasamos tu listing por el mismo checklist que los hosts top ya dominan.
          </p>
        </div>
        <div className="mockup-wrap">
          <div className={`mockup-card ${autoPlayDone ? 'autoplay-done' : ''}`} ref={containerRef}>
            {/* Photo grid */}
            <div
              className={`mockup-photos mockup-anchor ${activeIdx === 0 ? 'active' : ''}`}
              tabIndex={0}
              role="button"
              onMouseEnter={() => setAnchor(0)}
              onMouseLeave={clearAnchor}
              onFocus={() => setAnchor(0)}
              onBlur={clearAnchor}
              aria-label="Fotografía del listing (categoría 1, 20% del score)"
              data-label="Fotos"
              ref={(el) => { if (el) anchorRefs.current[0] = el; }}
            >
              <div className="mockup-photo-slot hero">
                <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2"><rect x="3" y="5" width="18" height="14" rx="2"/><circle cx="12" cy="12" r="3"/><path d="M7 5l2-2h6l2 2"/></svg>
              </div>
              {['cocina', 'recamara', 'bano', 'balcon'].map((slot) => (
                <div key={slot} className="mockup-photo-slot">
                  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.2">
                    {slot === 'cocina' && <path d="M4 4h16v6H4zM4 14h16v6H4zM8 4v6M16 14v6"/>}
                    {slot === 'recamara' && <path d="M3 18v-6h18v6M6 12V8h12v4M3 18h18"/>}
                    {slot === 'bano' && <path d="M4 10h16M6 10v-4a3 3 0 013-3h0a3 3 0 013 3M6 14v3a3 3 0 003 3M18 14v3a3 3 0 01-3 3"/>}
                    {slot === 'balcon' && <path d="M3 20h18M5 20v-8h14v8M5 12V6h14v6M9 12v8M15 12v8"/>}
                  </svg>
                </div>
              ))}
            </div>

            <div className="mockup-header">
              <h3
                className={`mockup-title mockup-anchor ${activeIdx === 1 ? 'active' : ''}`}
                tabIndex={0}
                role="button"
                onMouseEnter={() => setAnchor(1)}
                onMouseLeave={clearAnchor}
                onFocus={() => setAnchor(1)}
                onBlur={clearAnchor}
                aria-label="Título del listing (categoría 2, 15% del score)"
                data-label="Título"
                ref={(el) => { if (el) anchorRefs.current[1] = el; }}
              >
                Loft moderno · 1 cuadra del Parque México
              </h3>
              <div className="mockup-actions" aria-hidden="true">
                <span>↑ Compartir</span>
                <span>♡ Guardar</span>
              </div>
            </div>

            <div className="mockup-detail-row">
              <span
                className={`mockup-rating mockup-anchor ${activeIdx === 2 ? 'active' : ''}`}
                tabIndex={0}
                role="button"
                onMouseEnter={() => setAnchor(2)}
                onMouseLeave={clearAnchor}
                onFocus={() => setAnchor(2)}
                onBlur={clearAnchor}
                aria-label="Reseñas del listing (categoría 3, 10% del score)"
                data-label="Reseñas"
                ref={(el) => { if (el) anchorRefs.current[2] = el; }}
              >
                <span className="stars">★ 4.87</span>
                <span>· 124 reseñas · Superhost</span>
              </span>
              <span>· Condesa, CDMX</span>
            </div>

            <div className="mockup-body">
              <div>
                <p
                  className={`mockup-description mockup-anchor ${activeIdx === 4 ? 'active' : ''}`}
                  tabIndex={0}
                  role="button"
                  onMouseEnter={() => setAnchor(4)}
                  onMouseLeave={clearAnchor}
                  onFocus={() => setAnchor(4)}
                  onBlur={clearAnchor}
                  aria-label="Descripción del listing (categoría 5, 12% del score)"
                  data-label="Descripción"
                  ref={(el) => { if (el) anchorRefs.current[4] = el; }}
                >
                  Despertar en Condesa con la luz del Parque México entrando por el balcón. Loft de 45 m² diseñado para dos, con piso de madera, cocina equipada y balcón con vista a las jacarandas del parque.
                </p>

                <div
                  className={`mockup-amenities mockup-anchor ${activeIdx === 5 ? 'active' : ''}`}
                  tabIndex={0}
                  role="button"
                  onMouseEnter={() => setAnchor(5)}
                  onMouseLeave={clearAnchor}
                  onFocus={() => setAnchor(5)}
                  onBlur={clearAnchor}
                  aria-label="Amenities del listing (categoría 6, 8% del score)"
                  data-label="Amenities"
                  ref={(el) => { if (el) anchorRefs.current[5] = el; }}
                >
                  {['Wi-Fi 300 Mbps', 'Cocina equipada', 'Espacio de trabajo', 'Smart TV', 'Balcón', 'Lavadora'].map((a) => (
                    <span key={a} className="mockup-amenity-pill">{a}</span>
                  ))}
                </div>

                <div
                  className={`mockup-rules mockup-anchor ${activeIdx === 7 ? 'active' : ''}`}
                  tabIndex={0}
                  role="button"
                  onMouseEnter={() => setAnchor(7)}
                  onMouseLeave={clearAnchor}
                  onFocus={() => setAnchor(7)}
                  onBlur={clearAnchor}
                  aria-label="Reglas del listing (categoría 8, 7% del score)"
                  data-label="Reglas"
                  ref={(el) => { if (el) anchorRefs.current[7] = el; }}
                >
                  Lo que debes saber · Check-in flexible · Mínimo 2 noches · Sin mascotas · Sin fiestas
                </div>
              </div>

              <div
                className={`mockup-price-card mockup-anchor ${activeIdx === 3 ? 'active' : ''}`}
                tabIndex={0}
                role="button"
                onMouseEnter={() => setAnchor(3)}
                onMouseLeave={clearAnchor}
                onFocus={() => setAnchor(3)}
                onBlur={clearAnchor}
                aria-label="Precio del listing (categoría 4, 12% del score)"
                data-label="Precio"
                ref={(el) => { if (el) anchorRefs.current[3] = el; }}
              >
                <div className="mockup-price-amount">$1,150</div>
                <div className="mockup-price-label">MXN · por noche</div>
                <div
                  className={`mockup-occupancy-note mockup-anchor ${activeIdx === 6 ? 'active' : ''}`}
                  tabIndex={0}
                  role="button"
                  onMouseEnter={(e) => { e.stopPropagation(); setAnchor(6); }}
                  onMouseLeave={clearAnchor}
                  onFocus={() => setAnchor(6)}
                  onBlur={clearAnchor}
                  aria-label="Ocupación del listing (categoría 7, 10% del score)"
                  data-label="Ocupación"
                  ref={(el) => { if (el) anchorRefs.current[6] = el; }}
                >
                  Calendario · Mínimo 2 noches
                </div>
              </div>
            </div>
            <AnnotationCard
              data={activeIdx >= 0 && activeIdx <= 7 ? LISTING_CATS[activeIdx] : null}
              anchorRect={rects.anchor}
              containerRect={rects.container}
            />
          </div>

          <CompetitionPanel active={activeIdx === 8} />
          <MobileAnnotationStack activeIdx={activeIdx} />
        </div>
      </div>
    </section>
  );
};

// Gratis vs Premium comparison
const FreeVsPremium = () => (
  <section className="section">
    <div className="wrap">
      <div className="section-head" style={{textAlign:'center', margin: '0 auto 56px'}}>
        <span className="eyebrow" style={{justifyContent:'center'}}>Gratis vs Premium</span>
        <h2 className="h2" style={{margin: '16px auto 0', maxWidth: 680}}>
          Empieza gratis. Paga solo si quieres el plan completo.
        </h2>
      </div>
      <div className="fvp-grid">
        <div className="fvp-card">
          <div className="chip" style={{marginBottom: 16}}>Gratis</div>
          <h3 className="serif" style={{fontSize: 32, margin: '0 0 8px'}}>Vista previa</h3>
          <p className="muted" style={{margin: '0 0 24px'}}>Calificación general + áreas débiles</p>
          <ul className="fvp-list">
            <li>✓ Calificación global A–D</li>
            <li>✓ Score de las 9 categorías</li>
            <li>✓ 3 áreas críticas identificadas</li>
            <li>— Recomendaciones específicas</li>
            <li>— Plan de acción priorizado</li>
            <li>— Comparativa con competencia</li>
          </ul>
          <a href="#audit" className="btn btn-outline btn-lg" style={{width:'100%', marginTop: 24}}>Audita gratis</a>
        </div>
        <div className="fvp-card fvp-featured">
          <div className="chip chip-accent" style={{marginBottom: 16, background:'rgba(232,92,74,0.18)', color:'#FBE7DF'}}>Premium · $20 USD</div>
          <h3 className="serif" style={{fontSize: 32, margin: '0 0 8px'}}>Reporte completo</h3>
          <p style={{margin: '0 0 24px', color:'rgba(250,248,243,0.65)'}}>Plan de acción + recomendaciones por IA</p>
          <ul className="fvp-list">
            <li>✓ Todo lo de gratis, más:</li>
            <li>✓ Recomendaciones específicas por categoría</li>
            <li>✓ Plan de acción priorizado por impacto</li>
            <li>✓ Título y descripción reescritos con IA</li>
            <li>✓ Análisis de competencia local</li>
            <li>✓ Reporte en PDF descargable</li>
          </ul>
          <a href="/premium" className="btn btn-accent btn-lg" style={{width:'100%', marginTop: 24}}>Ver reporte premium</a>
        </div>
      </div>
    </div>
  </section>
);

const SocialProof = () => (
  <section className="section section-tinted">
    <div className="wrap">
      <div className="proof-grid">
        <figure className="proof-quote">
          <blockquote className="serif">
            “Pasé de calificación C a A en 3 semanas. Cambié 5 fotos,
            reescribí el título con sus sugerencias y subí el precio de fines
            de semana. <em>Este mes fue récord de reservas.</em>”
          </blockquote>
          <figcaption>
            <div style={{display:'flex', alignItems:'center', gap: 12, marginTop: 24}}>
              <div className="avatar" style={{background:'#E4B9B9'}}>LC</div>
              <div>
                <div style={{fontWeight: 600}}>Laura Castillo</div>
                <div className="muted" style={{fontSize: 13}}>2 propiedades · Ciudad de México</div>
              </div>
            </div>
          </figcaption>
        </figure>
        <div className="proof-stats">
          <div className="proof-stat">
            <div className="serif" style={{fontSize: 64, lineHeight: 1, letterSpacing:'-0.03em'}}>+23%</div>
            <div className="muted" style={{marginTop: 8}}>Revenue mensual promedio tras aplicar las mejoras</div>
          </div>
          <div className="proof-stat">
            <div className="serif" style={{fontSize: 64, lineHeight: 1, letterSpacing:'-0.03em'}}>18<span style={{fontSize: 28, marginLeft: 8, fontStyle:'italic'}}>días</span></div>
            <div className="muted" style={{marginTop: 8}}>Tiempo medio para ver los primeros resultados</div>
          </div>
          <div className="proof-stat">
            <div className="serif" style={{fontSize: 64, lineHeight: 1, letterSpacing:'-0.03em'}}>2,400</div>
            <div className="muted" style={{marginTop: 8}}>Propiedades auditadas en LATAM este año</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const PdfPreview = () => {
  const TOTAL = 7;
  const [idx, setIdx] = React.useState(0);
  const go = (delta) => setIdx((i) => (i + delta + TOTAL) % TOTAL);
  const onKey = (e) => {
    if (e.key === 'ArrowRight') go(1);
    if (e.key === 'ArrowLeft') go(-1);
  };
  return (
    <section className="section section-tinted" style={{paddingTop: 80, paddingBottom: 80}}>
      <div className="wrap">
        <div style={{textAlign:'center', maxWidth: 680, margin:'0 auto 40px'}}>
          <span className="eyebrow" style={{justifyContent:'center'}}>Así se ve el reporte premium</span>
          <h2 className="h2" style={{margin: '16px auto 0'}}>
            7 páginas. <em>Listo para implementar.</em>
          </h2>
          <p className="muted" style={{marginTop: 14, fontSize: 14}}>
            Usa las flechas para recorrer cada página del reporte real.
          </p>
        </div>
        <div
          role="region"
          aria-label="Carrusel del reporte premium"
          tabIndex={0}
          onKeyDown={onKey}
          style={{position:'relative', maxWidth: 720, margin:'0 auto', outline:'none'}}
        >
          <div style={{
            position:'relative',
            aspectRatio: '3 / 4',
            background:'rgba(250,248,243,0.04)',
            borderRadius: 14,
            overflow:'hidden',
            boxShadow:'0 24px 56px rgba(0,0,0,0.4)',
          }}>
            {Array.from({length: TOTAL}).map((_, i) => (
              <img
                key={i}
                src={`/img/report/page-${i+1}.jpg`}
                alt={`Reporte premium AuditBnB — página ${i+1} de ${TOTAL}`}
                loading={i === 0 ? 'eager' : 'lazy'}
                style={{
                  position:'absolute', top: 0, left: 0,
                  width:'100%', height:'100%', objectFit:'contain',
                  opacity: i === idx ? 1 : 0,
                  transition:'opacity 240ms ease',
                  background:'#FAF8F3',
                }}
              />
            ))}
          </div>
          <button
            type="button"
            aria-label="Página anterior"
            onClick={() => go(-1)}
            style={{
              position:'absolute', top:'50%', left: -18,
              transform:'translateY(-50%)',
              width: 44, height: 44, borderRadius:'50%',
              background:'#FAF8F3', color:'#1a1a1a', border:'none',
              boxShadow:'0 6px 16px rgba(0,0,0,0.25)',
              cursor:'pointer', fontSize: 20, lineHeight: 1,
              display:'flex', alignItems:'center', justifyContent:'center',
            }}
          >‹</button>
          <button
            type="button"
            aria-label="Página siguiente"
            onClick={() => go(1)}
            style={{
              position:'absolute', top:'50%', right: -18,
              transform:'translateY(-50%)',
              width: 44, height: 44, borderRadius:'50%',
              background:'#FAF8F3', color:'#1a1a1a', border:'none',
              boxShadow:'0 6px 16px rgba(0,0,0,0.25)',
              cursor:'pointer', fontSize: 20, lineHeight: 1,
              display:'flex', alignItems:'center', justifyContent:'center',
            }}
          >›</button>
          <div style={{
            display:'flex', justifyContent:'center', gap: 8,
            marginTop: 20,
          }}>
            {Array.from({length: TOTAL}).map((_, i) => (
              <button
                key={i}
                type="button"
                aria-label={`Ir a página ${i+1}`}
                aria-current={i === idx}
                onClick={() => setIdx(i)}
                style={{
                  width: i === idx ? 24 : 8, height: 8, borderRadius: 4,
                  background: i === idx ? '#E25A4A' : 'rgba(250,248,243,0.25)',
                  border:'none', padding: 0, cursor:'pointer',
                  transition:'width 160ms ease, background 160ms ease',
                }}
              />
            ))}
          </div>
          <div className="mono muted" style={{textAlign:'center', marginTop: 10, fontSize: 12}}>
            Página {idx+1} de {TOTAL}
          </div>
        </div>
        <div style={{textAlign:'center', marginTop: 36}}>
          <a href="/premium" className="btn btn-accent btn-lg">
            Descarga el reporte · Listo para implementar
          </a>
        </div>
      </div>
    </section>
  );
};

const AuthorityStack = () => (
  <section className="section" style={{paddingTop: 24, paddingBottom: 24}}>
    <div className="wrap">
      <div style={{
        display:'grid',
        gridTemplateColumns:'repeat(auto-fit, minmax(240px, 1fr))',
        gap: 24,
        padding: '28px 32px',
        border: '1px solid rgba(250,248,243,0.08)',
        borderRadius: 16,
        background: 'rgba(250,248,243,0.03)',
      }}>
        <div>
          <div className="eyebrow" style={{marginBottom: 8}}>Construido desde adentro</div>
          <div style={{fontSize: 15, lineHeight: 1.45, color:'rgba(250,248,243,0.8)'}}>
            Construido por anfitriones activos de Airbnb en LATAM.
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{marginBottom: 8}}>Motor probado</div>
          <div style={{fontSize: 15, lineHeight: 1.45, color:'rgba(250,248,243,0.8)'}}>
            9 categorías evaluadas con IA, calibradas contra cientos de listings.
          </div>
        </div>
        <div>
          <div className="eyebrow" style={{marginBottom: 8}}>En operación</div>
          <div style={{fontSize: 15, lineHeight: 1.45, color:'rgba(250,248,243,0.8)'}}>
            Primera venta: 20 de abril de 2026 — y contando.
          </div>
        </div>
      </div>
    </div>
  </section>
);

const FinalCTA = () => (
  <section className="section">
    <div className="wrap">
      <div className="cta-box">
        <div>
          <h2 className="h2" style={{margin: 0, maxWidth: 640}}>
            Descubre cuántas reservas estás dejando ir.
          </h2>
          <p style={{marginTop: 16, maxWidth: 560, color:'rgba(250,248,243,0.65)'}}>
            Tu primera auditoría es gratis. Sin tarjeta. Sin conectar tu cuenta de Airbnb.
          </p>
        </div>
        <div style={{display:'flex', gap: 12}}>
          <a href="#audit" className="btn btn-primary btn-lg">Audita mi Airbnb</a>
          <a href="/premium" className="btn btn-outline btn-lg">Ver premium</a>
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { Hero, LogoBand, HowItWorks, FreeVsPremium, PdfPreview, SocialProof, AuthorityStack, FinalCTA, AuditDemo, ListingMockup, CompetitionPanel, AnnotationCard, MobileAnnotationStack });