import React, { useState, useRef, useEffect } from 'react';

// ─────────────────────────────────────────────
// LUXIA v2 — Landing + Demo Viva
// MELANO INC · Machine Dominion
// ─────────────────────────────────────────────

const C = {
  ink: '#070707',
  surface: '#0F0E0C',
  surfaceHi: '#151310',
  border: '#211D17',
  borderHi: 'rgba(245,158,11,0.35)',
  amber: '#F59E0B',
  amberDim: 'rgba(245,158,11,0.12)',
  bone: '#EDE6D6',
  taupe: '#8A8172',
  green: '#4ADE80',
};

const FONTS = `
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,400;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600&display=swap');
.f-display { font-family: 'Fraunces', Georgia, serif; }
.f-mono { font-family: 'JetBrains Mono', monospace; }
.f-body { font-family: 'Inter', system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@keyframes pulse-dot { 0%,100%{opacity:.3} 50%{opacity:1} }
.typing-dot { animation: pulse-dot 1.2s infinite; }
.typing-dot:nth-child(2){ animation-delay:.2s } .typing-dot:nth-child(3){ animation-delay:.4s }
`;

// System prompt del bot demo (Inmobiliaria Faro — ficticia)
const BOT_BRIEF = `Sos Alenya, asistente comercial IA de "Inmobiliaria Faro" (Mar del Plata, Argentina). Es una inmobiliaria DEMO para mostrar el sistema LUXIA de MELANO INC.

INVENTARIO (no inventes propiedades fuera de esta lista):
[F-101] Depto 2 amb, Güemes — 58 m2, balcón — USD 98.000 (venta)
[F-102] Casa 3 amb c/jardín y cochera, Los Troncos — 145 m2 — USD 185.000 (venta)
[F-103] Depto 3 amb frente al mar, Playa Grande — 92 m2 — USD 240.000 (venta)
[F-104] PH 2 amb reciclado, Centro — ARS 650.000/mes (alquiler)

REGLAS:
- Español rioplatense, cálido y profesional. Máximo 2-3 oraciones. Una pregunta por vez.
- Objetivo: calificar al lead (nombre, operación, zona, presupuesto, urgencia) y llevarlo a agendar visita o llamada.
- Extraé datos de TODA la conversación acumulada, no solo del último mensaje.
- Score 0-100 acumulativo: nombre +15, operación clara +15, zona +15, presupuesto +25, urgencia alta +20, pidió visita/llamada +10.
- Si score >= 70 o pide visita: proponé agendar con dos opciones concretas de horario.
- Si busca algo que no está en inventario: ofrecé lo más parecido y decí que tomás nota de la búsqueda.
- Si alguien quiere VENDER su propiedad: pedí zona, tipo y contacto, y ofrecé tasación sin cargo.

FORMATO DE RESPUESTA — respondé SOLO con JSON válido, sin markdown ni backticks:
{"reply":"texto de tu respuesta","lead":{"nombre":null,"operacion":null,"zona":null,"presupuesto":null,"urgencia":null,"score":0,"etapa":"explorando"}}
- operacion: "compra" | "alquiler" | "venta" | null
- urgencia: "alta" | "media" | "baja" | null
- etapa: "explorando" | "calificando" | "listo_para_agendar"`;

const CALENDLY_URL = 'https://calendly.com/melanoinc/luxia-demo'; // ← REEMPLAZAR con tu Calendly real

// ─── Demo: Chat + Lead Intel ───
function LiveDemo() {
  const [messages, setMessages] = useState([
    { role: 'assistant', text: 'Hola 👋 Soy Alenya, la asistente de Inmobiliaria Faro. ¿Estás buscando comprar, alquilar o vender una propiedad?' },
  ]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);
  const [lead, setLead] = useState({ nombre: null, operacion: null, zona: null, presupuesto: null, urgencia: null, score: 0, etapa: 'explorando' });
  const scrollRef = useRef(null);

  useEffect(() => {
    if (scrollRef.current) scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
  }, [messages, loading]);

  const send = async (text) => {
    const content = (text ?? input).trim();
    if (!content || loading) return;
    setInput('');
    const nextMsgs = [...messages, { role: 'user', text: content }];
    setMessages(nextMsgs);
    setLoading(true);

    try {
      const apiMessages = [
        { role: 'user', content: BOT_BRIEF },
        { role: 'assistant', content: '{"reply":"Hola 👋 Soy Alenya, la asistente de Inmobiliaria Faro. ¿Estás buscando comprar, alquilar o vender una propiedad?","lead":{"nombre":null,"operacion":null,"zona":null,"presupuesto":null,"urgencia":null,"score":0,"etapa":"explorando"}}' },
        ...nextMsgs.slice(1).map(m => ({ role: m.role, content: m.text })),
      ];

      const res = await fetch('https://api.anthropic.com/v1/messages', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ model: 'claude-sonnet-4-6', max_tokens: 1000, messages: apiMessages }),
      });
      const data = await res.json();
      const raw = (data.content || []).filter(b => b.type === 'text').map(b => b.text).join('');
      const clean = raw.replace(/```json|```/g, '').trim();
      const parsed = JSON.parse(clean);

      setMessages(m => [...m, { role: 'assistant', text: parsed.reply }]);
      if (parsed.lead) setLead(prev => ({ ...prev, ...parsed.lead, score: Math.max(prev.score, parsed.lead.score || 0) }));
    } catch (err) {
      setMessages(m => [...m, { role: 'assistant', text: 'Se cortó la conexión un segundo — probá de nuevo. (En producción, LUXIA reintenta y notifica al vendedor automáticamente.)' }]);
    } finally {
      setLoading(false);
    }
  };

  const chips = ['Busco un 2 ambientes en Güemes', '¿Qué tienen frente al mar?', 'Quiero vender mi casa'];
  const hot = lead.score >= 70;

  const Field = ({ label, value }) => (
    <div className="flex justify-between items-baseline py-2" style={{ borderBottom: `1px solid ${C.border}` }}>
      <span className="f-mono text-xs uppercase tracking-wider" style={{ color: C.taupe }}>{label}</span>
      <span className="f-mono text-sm text-right" style={{ color: value ? C.bone : '#3D382F' }}>{value || '— — —'}</span>
    </div>
  );

  return (
    <div className="grid lg:grid-cols-5 gap-4 lg:gap-6">
      {/* CHAT */}
      <div className="lg:col-span-3 rounded flex flex-col" style={{ background: C.surface, border: `1px solid ${C.border}`, minHeight: '480px' }}>
        <div className="flex items-center gap-3 px-5 py-4" style={{ borderBottom: `1px solid ${C.border}` }}>
          <div className="w-9 h-9 rounded-full flex items-center justify-center f-display text-lg" style={{ background: C.amber, color: C.ink }}>A</div>
          <div>
            <p className="f-body font-semibold text-sm" style={{ color: C.bone }}>Alenya · Inmobiliaria Faro</p>
            <p className="f-mono text-xs flex items-center gap-1.5" style={{ color: C.green }}>
              <span className="w-1.5 h-1.5 rounded-full inline-block" style={{ background: C.green }}></span> en línea — responde en segundos
            </p>
          </div>
        </div>

        <div ref={scrollRef} className="flex-1 overflow-y-auto px-5 py-5 space-y-4" style={{ maxHeight: '380px' }}>
          {messages.map((m, i) => (
            <div key={i} className={`flex ${m.role === 'user' ? 'justify-end' : 'justify-start'}`}>
              <div className="f-body text-sm leading-relaxed px-4 py-3 rounded max-w-[85%]"
                style={m.role === 'user'
                  ? { background: C.amberDim, border: `1px solid ${C.borderHi}`, color: C.bone }
                  : { background: C.surfaceHi, border: `1px solid ${C.border}`, color: C.bone }}>
                {m.text}
              </div>
            </div>
          ))}
          {loading && (
            <div className="flex justify-start">
              <div className="px-4 py-3 rounded flex gap-1.5" style={{ background: C.surfaceHi, border: `1px solid ${C.border}` }}>
                {[0,1,2].map(i => <span key={i} className="typing-dot w-1.5 h-1.5 rounded-full" style={{ background: C.amber }}></span>)}
              </div>
            </div>
          )}
        </div>

        {messages.length <= 1 && (
          <div className="px-5 pb-3 flex flex-wrap gap-2">
            {chips.map(c => (
              <button key={c} onClick={() => send(c)}
                className="f-mono text-xs px-3 py-2 rounded transition-colors"
                style={{ border: `1px solid ${C.border}`, color: C.taupe, background: 'transparent' }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = C.borderHi; e.currentTarget.style.color = C.bone; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = C.border; e.currentTarget.style.color = C.taupe; }}>
                {c}
              </button>
            ))}
          </div>
        )}

        <div className="flex gap-2 p-4" style={{ borderTop: `1px solid ${C.border}` }}>
          <input
            value={input}
            onChange={e => setInput(e.target.value)}
            onKeyDown={e => e.key === 'Enter' && send()}
            placeholder="Escribí como si fueras un cliente…"
            className="f-body flex-1 px-4 py-3 rounded text-sm outline-none"
            style={{ background: C.ink, border: `1px solid ${C.border}`, color: C.bone }}
          />
          <button onClick={() => send()} disabled={loading}
            className="f-mono font-bold text-sm px-5 rounded transition-opacity"
            style={{ background: C.amber, color: C.ink, opacity: loading ? 0.5 : 1 }}>
            ENVIAR
          </button>
        </div>
      </div>

      {/* LEAD INTEL */}
      <div className="lg:col-span-2 rounded flex flex-col" style={{ background: C.ink, border: `1px solid ${hot ? C.borderHi : C.border}` }}>
        <div className="px-5 py-4 flex items-center justify-between" style={{ borderBottom: `1px solid ${C.border}` }}>
          <span className="f-mono text-xs uppercase tracking-widest" style={{ color: C.amber }}>// LEAD INTEL</span>
          <span className="f-mono text-xs" style={{ color: C.taupe }}>tiempo real</span>
        </div>

        <div className="px-5 py-4 flex-1">
          <Field label="Nombre" value={lead.nombre} />
          <Field label="Operación" value={lead.operacion} />
          <Field label="Zona" value={lead.zona} />
          <Field label="Presupuesto" value={lead.presupuesto} />
          <Field label="Urgencia" value={lead.urgencia} />

          <div className="mt-6">
            <div className="flex justify-between items-baseline mb-2">
              <span className="f-mono text-xs uppercase tracking-wider" style={{ color: C.taupe }}>Score</span>
              <span className="f-display text-3xl" style={{ color: hot ? C.amber : C.bone }}>{lead.score}<span className="text-base" style={{ color: C.taupe }}>/100</span></span>
            </div>
            <div className="h-2 rounded overflow-hidden" style={{ background: C.surfaceHi }}>
              <div className="h-full rounded transition-all duration-700" style={{ width: `${lead.score}%`, background: C.amber }}></div>
            </div>
          </div>

          {hot ? (
            <div className="mt-6 px-4 py-3 rounded f-mono text-xs" style={{ background: C.amberDim, border: `1px solid ${C.borderHi}`, color: C.amber }}>
              🔥 LEAD CALIENTE — LUXIA notifica al vendedor y propone agenda automáticamente.
            </div>
          ) : (
            <div className="mt-6 px-4 py-3 rounded f-mono text-xs leading-relaxed" style={{ border: `1px dashed ${C.border}`, color: C.taupe }}>
              Cada respuesta del cliente alimenta este panel. Tu vendedor solo ve leads listos para cerrar.
            </div>
          )}
        </div>

        <div className="px-5 py-3 f-mono text-xs" style={{ borderTop: `1px solid ${C.border}`, color: C.taupe }}>
          Etapa: <span style={{ color: C.bone }}>{lead.etapa.replace(/_/g, ' ')}</span>
        </div>
      </div>
    </div>
  );
}

// ─── Página ───
export default function LuxiaV2() {
  const [faqOpen, setFaqOpen] = useState(null);

  const Eyebrow = ({ children }) => (
    <p className="f-mono text-xs uppercase tracking-widest mb-4" style={{ color: C.amber }}>// {children}</p>
  );

  const goDemo = () => document.getElementById('demo')?.scrollIntoView({ behavior: 'smooth' });
  const goCal = () => window.open(CALENDLY_URL, '_blank');

  const faqs = [
    { q: '¿Tengo que cambiar mi forma de trabajar?', a: 'No. LUXIA se conecta a tu WhatsApp e Instagram actuales. Tu equipo sigue vendiendo como siempre — solo que recibe leads ya calificados, con contexto completo, en vez de consultas frías.' },
    { q: '¿Cuánto tarda la implementación?', a: '7 días desde el pago: setup técnico, carga de tu inventario, personalización del bot con tu tono, testing y capacitación. Día 7: en producción.' },
    { q: '¿Qué pasa si el bot no sabe responder?', a: 'Escala a un humano automáticamente y notifica a tu equipo con todo el historial. El cliente nunca queda colgado.' },
    { q: '¿Hay permanencia mínima?', a: 'No. Mensualidad mes a mes. Si LUXIA no te genera más reuniones de las que tenías, lo cortás y listo.' },
  ];

  const sistema = [
    ['Bot IA en WhatsApp', 'Responde, califica y agenda 24/7 con tu inventario real.'],
    ['Landing de captación', 'Diseñada para convertir tráfico de Instagram en conversaciones.'],
    ['CRM con scoring', 'Cada lead con puntaje, etapa y contexto. Sin planillas.'],
    ['Seguimiento automático', 'El lead que no responde recibe follow-up inteligente, no silencio.'],
    ['Agenda conectada', 'Visitas y llamadas directo a tu calendario, con recordatorios.'],
    ['Panel ejecutivo', 'Cuántos leads entraron, cuántos calificaron, cuántos agendaron.'],
    ['Escalada a humano', 'Casos sensibles pasan a tu equipo con historial completo.'],
    ['Setup llave en mano', 'Nosotros configuramos todo. Vos vendés.'],
  ];

  const pasos = [
    ['01', 'Instagram / Portales', 'El interesado ve tu propiedad y escribe.'],
    ['02', 'Respuesta en segundos', 'LUXIA contesta al instante, a cualquier hora.'],
    ['03', 'Calificación IA', 'Operación, zona, presupuesto, urgencia. Sin interrogatorios.'],
    ['04', 'Score + seguimiento', 'Los tibios reciben follow-up. Los calientes, prioridad.'],
    ['05', 'Agenda y cierre', 'Visita agendada. Tu vendedor entra a cerrar, no a filtrar.'],
  ];

  return (
    <div className="f-body min-h-screen" style={{ background: C.ink, color: C.bone }}>
      <style>{FONTS}</style>

      {/* NAV */}
      <header className="fixed w-full top-0 z-50" style={{ background: 'rgba(7,7,7,0.92)', borderBottom: `1px solid ${C.border}`, backdropFilter: 'blur(8px)' }}>
        <div className="max-w-6xl mx-auto px-6 py-4 flex justify-between items-center">
          <div className="flex items-baseline gap-2">
            <span className="f-display text-2xl font-semibold" style={{ color: C.bone }}>LUXIA</span>
            <span className="f-mono text-xs" style={{ color: C.taupe }}>by MELANO INC</span>
          </div>
          <nav className="hidden md:flex gap-8 f-mono text-xs uppercase tracking-wider">
            <a href="#demo" style={{ color: C.taupe }}>Demo</a>
            <a href="#sistema" style={{ color: C.taupe }}>Sistema</a>
            <a href="#precio" style={{ color: C.taupe }}>Precio</a>
          </nav>
          <button onClick={goCal} className="f-mono text-xs font-bold px-5 py-2.5 rounded" style={{ background: C.amber, color: C.ink }}>
            AGENDAR 30 MIN
          </button>
        </div>
      </header>

      {/* HERO */}
      <section className="pt-36 pb-16 px-6 relative overflow-hidden">
        <div className="absolute inset-0 pointer-events-none" style={{
          backgroundImage: `linear-gradient(rgba(245,158,11,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(245,158,11,0.03) 1px, transparent 1px)`,
          backgroundSize: '48px 48px',
        }}></div>
        <div className="max-w-6xl mx-auto relative">
          <Eyebrow>Sistema comercial IA para inmobiliarias</Eyebrow>
          <h1 className="f-display text-5xl md:text-7xl leading-[1.05] mb-6 max-w-4xl" style={{ color: C.bone }}>
            Cada consulta <em style={{ color: C.amber }}>respondida</em>.<br />
            Cada lead <em style={{ color: C.amber }}>calificado</em>.<br />
            En menos de un minuto.
          </h1>
          <p className="text-lg md:text-xl max-w-2xl mb-10 leading-relaxed" style={{ color: C.taupe }}>
            LUXIA atiende tus consultas de Instagram y WhatsApp con IA, las califica por presupuesto,
            zona y urgencia, y agenda visitas mientras tu equipo se dedica a cerrar.
          </p>
          <div className="flex flex-col sm:flex-row gap-4 mb-10">
            <button onClick={goDemo} className="f-mono font-bold px-8 py-4 rounded text-sm" style={{ background: C.amber, color: C.ink }}>
              PROBAR LA DEMO EN VIVO ↓
            </button>
            <button onClick={goCal} className="f-mono font-bold px-8 py-4 rounded text-sm" style={{ border: `1px solid ${C.borderHi}`, color: C.amber, background: 'transparent' }}>
              AGENDAR 30 MIN
            </button>
          </div>
          <p className="f-mono text-xs tracking-wide" style={{ color: C.taupe }}>
            SETUP EN 7 DÍAS &nbsp;·&nbsp; WHATSAPP + INSTAGRAM &nbsp;·&nbsp; SIN PERMANENCIA
          </p>
        </div>
      </section>

      {/* DEMO */}
      <section id="demo" className="py-16 px-6">
        <div className="max-w-6xl mx-auto">
          <Eyebrow>Demo en vivo — IA real, no un video</Eyebrow>
          <div className="flex flex-col md:flex-row md:items-end md:justify-between gap-4 mb-8">
            <h2 className="f-display text-4xl md:text-5xl" style={{ color: C.bone }}>No te lo contamos.<br /><em style={{ color: C.amber }}>Probalo vos.</em></h2>
            <p className="max-w-sm text-sm leading-relaxed" style={{ color: C.taupe }}>
              Escribile a Alenya como si fueras un cliente buscando propiedad. Mirá el panel de la derecha:
              así ve tu vendedor cada conversación.
            </p>
          </div>
          <LiveDemo />
          <p className="f-mono text-xs mt-4 text-center" style={{ color: C.taupe }}>
            Inmobiliaria Faro es una empresa demo con inventario ficticio. En tu implementación, LUXIA opera con tus propiedades y tu tono de marca.
          </p>
        </div>
      </section>

      {/* PROBLEMA */}
      <section className="py-20 px-6" style={{ background: C.surface, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }}>
        <div className="max-w-6xl mx-auto">
          <Eyebrow>El costo invisible</Eyebrow>
          <h2 className="f-display text-4xl md:text-5xl mb-12" style={{ color: C.bone }}>Los leads no se pierden.<br />Se <em style={{ color: C.amber }}>enfrían</em>.</h2>
          <div className="grid md:grid-cols-3 gap-6">
            {[
              ['La consulta de las 23:47', 'Llega cuando nadie atiende. A la mañana, ese interesado ya le escribió a otras tres inmobiliarias. Gana la que respondió primero.'],
              ['El seguimiento que muere', '"Lo llamo mañana" se convierte en nunca. Sin sistema, el follow-up depende de la memoria de tu equipo — y la memoria pierde contra la agenda.'],
              ['Horas quemadas en curiosos', 'Tu mejor vendedor contestando "¿acepta mascotas?" a alguien sin presupuesto, mientras el lead calificado espera.'],
            ].map(([t, d], i) => (
              <div key={i} className="p-8 rounded" style={{ background: C.ink, border: `1px solid ${C.border}` }}>
                <h3 className="f-display text-xl mb-3" style={{ color: C.bone }}>{t}</h3>
                <p className="text-sm leading-relaxed" style={{ color: C.taupe }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CÓMO FUNCIONA */}
      <section className="py-20 px-6">
        <div className="max-w-6xl mx-auto">
          <Eyebrow>El circuito</Eyebrow>
          <h2 className="f-display text-4xl md:text-5xl mb-12" style={{ color: C.bone }}>De consulta a visita agendada,<br />sin intervención manual.</h2>
          <div className="space-y-0">
            {pasos.map(([n, t, d], i) => (
              <div key={i} className="grid grid-cols-12 gap-4 py-6 items-baseline" style={{ borderBottom: `1px solid ${C.border}` }}>
                <span className="col-span-2 md:col-span-1 f-mono text-sm" style={{ color: C.amber }}>[{n}]</span>
                <span className="col-span-10 md:col-span-4 f-display text-xl" style={{ color: C.bone }}>{t}</span>
                <span className="col-span-12 md:col-span-7 text-sm leading-relaxed" style={{ color: C.taupe }}>{d}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SISTEMA */}
      <section id="sistema" className="py-20 px-6" style={{ background: C.surface, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }}>
        <div className="max-w-6xl mx-auto">
          <Eyebrow>Llave en mano</Eyebrow>
          <h2 className="f-display text-4xl md:text-5xl mb-4" style={{ color: C.bone }}>No comprás software.<br />Comprás un <em style={{ color: C.amber }}>sistema funcionando</em>.</h2>
          <p className="max-w-2xl mb-12 text-sm leading-relaxed" style={{ color: C.taupe }}>
            Ocho piezas, una sola implementación. Nosotros configuramos, cargamos tu inventario y entrenamos el bot con tu tono. Vos recibís leads calificados.
          </p>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {sistema.map(([t, d], i) => (
              <div key={i} className="p-6 rounded" style={{ background: C.ink, border: `1px solid ${C.border}` }}>
                <p className="f-mono text-xs mb-3" style={{ color: C.amber }}>{String(i + 1).padStart(2, '0')}</p>
                <h3 className="font-semibold text-sm mb-2" style={{ color: C.bone }}>{t}</h3>
                <p className="text-xs leading-relaxed" style={{ color: C.taupe }}>{d}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PRICING */}
      <section id="precio" className="py-20 px-6">
        <div className="max-w-6xl mx-auto">
          <Eyebrow>Inversión</Eyebrow>
          <h2 className="f-display text-4xl md:text-5xl mb-4" style={{ color: C.bone }}>Precio de sistema.<br />No de proyecto.</h2>
          <p className="max-w-2xl mb-12 text-sm" style={{ color: C.taupe }}>Setup único + mensualidad. Sin permanencia. Sin costos ocultos. Precios en USD.</p>

          <div className="grid md:grid-cols-3 gap-6 items-stretch">
            {[
              { name: 'STARTER', setup: 300, mrr: 99, feats: ['Bot IA en WhatsApp', '1.000 conversaciones/mes', 'Calificación + scoring', 'Notificaciones a tu equipo'], hi: false },
              { name: 'PRO', setup: 600, mrr: 199, feats: ['Todo lo de Starter', '5.000 conversaciones/mes', 'CRM + panel ejecutivo', 'Seguimiento automático', 'Agenda conectada', 'Landing de captación'], hi: true },
              { name: 'ENTERPRISE', setup: 1200, mrr: 399, feats: ['Todo lo de Pro', 'Conversaciones ilimitadas', 'Multi-sucursal', 'Agente de voz', 'Integraciones a medida', 'Soporte prioritario'], hi: false },
            ].map((p, i) => (
              <div key={i} className="p-8 rounded flex flex-col relative" style={{
                background: p.hi ? C.surfaceHi : C.surface,
                border: `1px solid ${p.hi ? C.amber : C.border}`,
              }}>
                {p.hi && <span className="f-mono text-xs font-bold px-3 py-1 rounded absolute -top-3 left-8" style={{ background: C.amber, color: C.ink }}>RECOMENDADO</span>}
                <p className="f-mono text-xs tracking-widest mb-6" style={{ color: p.hi ? C.amber : C.taupe }}>{p.name}</p>
                <div className="mb-1">
                  <span className="f-display text-5xl" style={{ color: C.bone }}>${p.mrr}</span>
                  <span className="f-mono text-xs" style={{ color: C.taupe }}> /mes</span>
                </div>
                <p className="f-mono text-xs mb-8" style={{ color: C.taupe }}>+ ${p.setup} setup único{p.name === 'ENTERPRISE' ? ' (desde)' : ''}</p>
                <ul className="space-y-3 mb-8 flex-1">
                  {p.feats.map((f, j) => (
                    <li key={j} className="flex gap-3 text-sm" style={{ color: C.taupe }}>
                      <span style={{ color: C.amber }}>—</span>{f}
                    </li>
                  ))}
                </ul>
                <button onClick={goCal} className="f-mono text-xs font-bold py-3.5 rounded w-full"
                  style={p.hi ? { background: C.amber, color: C.ink } : { border: `1px solid ${C.border}`, color: C.bone, background: 'transparent' }}>
                  EMPEZAR CON {p.name}
                </button>
              </div>
            ))}
          </div>

          <div className="mt-10 p-6 rounded flex flex-col md:flex-row md:items-center gap-4 justify-between" style={{ border: `1px dashed ${C.borderHi}` }}>
            <p className="text-sm" style={{ color: C.bone }}>
              <span className="f-mono text-xs" style={{ color: C.amber }}>// CAPACIDAD REAL &nbsp;</span>
              Implementamos <strong>3 sistemas por mes</strong> para garantizar calidad de setup. La agenda se asigna por orden de reserva.
            </p>
            <button onClick={goCal} className="f-mono text-xs font-bold px-6 py-3 rounded whitespace-nowrap" style={{ background: C.amber, color: C.ink }}>
              RESERVAR CUPO
            </button>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-20 px-6" style={{ background: C.surface, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }}>
        <div className="max-w-3xl mx-auto">
          <Eyebrow>Objeciones frecuentes</Eyebrow>
          <h2 className="f-display text-4xl mb-10" style={{ color: C.bone }}>Lo que preguntan antes de arrancar</h2>
          {faqs.map((f, i) => (
            <div key={i} style={{ borderBottom: `1px solid ${C.border}` }}>
              <button onClick={() => setFaqOpen(faqOpen === i ? null : i)}
                className="w-full flex justify-between items-center py-5 text-left">
                <span className="f-display text-lg pr-4" style={{ color: C.bone }}>{f.q}</span>
                <span className="f-mono text-xl" style={{ color: C.amber }}>{faqOpen === i ? '−' : '+'}</span>
              </button>
              {faqOpen === i && <p className="pb-5 text-sm leading-relaxed" style={{ color: C.taupe }}>{f.a}</p>}
            </div>
          ))}
        </div>
      </section>

      {/* CTA FINAL */}
      <section className="py-24 px-6">
        <div className="max-w-3xl mx-auto text-center">
          <h2 className="f-display text-4xl md:text-6xl mb-6" style={{ color: C.bone }}>
            30 minutos.<br />Tu inventario, <em style={{ color: C.amber }}>en vivo</em>.
          </h2>
          <p className="mb-10 text-lg" style={{ color: C.taupe }}>
            En la demo cargamos propiedades tuyas y ves a LUXIA calificar un lead real de tu operación. Sin compromiso.
          </p>
          <button onClick={goCal} className="f-mono font-bold px-10 py-5 rounded text-sm" style={{ background: C.amber, color: C.ink }}>
            AGENDAR DEMO DE 30 MIN
          </button>
          <p className="f-mono text-xs mt-6" style={{ color: C.taupe }}>Sin permanencia · Setup en 7 días · Cupo: 3 implementaciones/mes</p>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="py-12 px-6" style={{ borderTop: `1px solid ${C.border}` }}>
        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-start md:items-center gap-6">
          <div>
            <p className="f-display text-xl" style={{ color: C.bone }}>MELANO INC</p>
            <p className="f-mono text-xs mt-1" style={{ color: C.taupe }}>AI. Automation. Impact.</p>
          </div>
          <div className="flex gap-8 f-mono text-xs uppercase tracking-wider">
            <a href="https://instagram.com/melanoinc" target="_blank" rel="noopener noreferrer" style={{ color: C.taupe }}>Instagram</a>
            <a href="mailto:hola@melanoinc.com" style={{ color: C.taupe }}>Contacto</a>
          </div>
          <p className="f-mono text-xs" style={{ color: C.taupe }}>© 2026 MELANO INC · Mar del Plata, AR</p>
        </div>
      </footer>
    </div>
  );
}