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

// ─────────────────────────────────────────────
// LUXIA v2 — AGGRESSIVE PROFILE
// MELANO INC · Machine Dominion
// ─────────────────────────────────────────────

const C = {
  ink: '#070707',
  surface: '#0A0908',
  surfaceHi: '#12100D',
  border: '#1E1A14',
  borderHi: 'rgba(245,158,11,0.4)',
  amber: '#F59E0B',
  amberHot: '#FBBF24',
  amberDim: 'rgba(245,158,11,0.10)',
  bone: '#EDE6D6',
  taupe: '#8A8172',
  green: '#4ADE80',
  red: '#EF4444',
  redDim: 'rgba(239,68,68,0.12)',
};

const FONTS = `
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500&family=JetBrains+Mono:wght@400;500;700&family=Inter:wght@400;500;600;700&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} }
@keyframes pulse-border { 0%,100%{border-color:rgba(245,158,11,0.2)} 50%{border-color:rgba(245,158,11,0.6)} }
@keyframes slide-in { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.typing-dot { animation: pulse-dot 1.2s infinite; }
.typing-dot:nth-child(2){ animation-delay:.2s } .typing-dot:nth-child(3){ animation-delay:.4s }
.pulse-border { animation: pulse-border 2s ease-in-out infinite; }
.slide-in { animation: slide-in 0.4s ease-out; }
`;

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/brunomelano/llamada-con-bruno';

// ─── Contador de escasez ───
function SpotsCounter() {
  const spots = 2; // cupo real
  return (
    <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full pulse-border" style={{ border: `1px solid ${C.borderHi}`, background: C.amberDim }}>
      <span className="w-2 h-2 rounded-full" style={{ background: C.red, boxShadow: '0 0 8px rgba(239,68,68,0.6)' }}></span>
      <span className="f-mono text-xs font-bold" style={{ color: C.amberHot }}>QUEDAN {spots} CUPOS ESTE MES</span>
    </div>
  );
}

// ─── 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.' }]);
    } 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 : '#2A2520' }}>{value || '—'}</span>
    </div>
  );

  return (
    <div className="grid lg:grid-cols-5 gap-4 lg:gap-6">
      <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 3 seg
            </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'} slide-in`}>
              <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-all duration-200"
                style={{ border: `1px solid ${C.border}`, color: C.taupe, background: 'transparent' }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = C.amber; e.currentTarget.style.color = C.bone; e.currentTarget.style.background = C.amberDim; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = C.border; e.currentTarget.style.color = C.taupe; e.currentTarget.style.background = 'transparent'; }}>
                {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 }}>
            →
          </button>
        </div>
      </div>

      <div className="lg:col-span-2 rounded flex flex-col" style={{ background: C.ink, border: `1px solid ${hot ? C.amber : C.border}`, transition: 'border-color 0.5s' }}>
        <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: hot ? C.green : C.taupe }}>{hot ? '● HOT' : '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.5 rounded overflow-hidden" style={{ background: C.surfaceHi }}>
              <div className="h-full rounded transition-all duration-700" style={{ width: `${lead.score}%`, background: hot ? C.amberHot : 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.amber}`, color: C.amberHot }}>
              🔥 LEAD CALIENTE — Tu vendedor ya recibió la notificación con el historial completo. Solo tiene que cerrar.
            </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 }}>
              Esto pasa en tiempo real con cada consulta. Tu competencia contesta en horas. Vos, en segundos.
            </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 LuxiaV2Aggressive() {
  const [faqOpen, setFaqOpen] = useState(null);

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

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

  const faqs = [
    { q: '¿Funciona para inmobiliarias chicas?', a: 'Es donde mejor funciona. Si tenés 1-3 vendedores que pierden tiempo contestando consultas frías, LUXIA les devuelve esas horas y les entrega leads con score, contexto y visita agendada. Menos gente = más necesidad de automatizar.' },
    { q: '¿Cuánto tarda la implementación?', a: '7 días. Día 1: setup técnico. Día 2-4: cargamos tu inventario y entrenamos el bot con tu tono de marca. Día 5-6: testing. Día 7: en producción recibiendo leads.' },
    { q: '¿Qué pasa si el bot no sabe responder?', a: 'Escala a tu equipo al instante con el historial completo. El cliente nunca queda sin respuesta. Y cada escalada entrena al bot para la próxima vez.' },
    { q: '¿Hay permanencia?', a: 'No. Mes a mes. Si en 30 días no ves más reuniones agendadas de las que tenías antes, cortás y listo. Sin letra chica, sin penalidades, sin excusas.' },
    { q: '¿Por qué no lo hago yo con ChatGPT?', a: 'Podés intentarlo. Pero ChatGPT no se conecta a tu WhatsApp, no carga tu inventario, no califica leads con scoring, no agenda visitas, no hace follow-up automático y no escala a tu equipo. LUXIA es un sistema completo, no un chatbot suelto.' },
  ];

  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.95)', borderBottom: `1px solid ${C.border}`, backdropFilter: 'blur(12px)' }}>
        <div className="max-w-6xl mx-auto px-6 py-3.5 flex justify-between items-center">
          <div className="flex items-baseline gap-2">
            <span className="f-display text-2xl font-bold" style={{ color: C.amber }}>LUXIA</span>
            <span className="f-mono text-xs hidden sm:inline" style={{ color: C.taupe }}>MELANO INC</span>
          </div>
          <div className="hidden md:flex items-center gap-6">
            <SpotsCounter />
          </div>
          <button onClick={goCal} className="f-mono text-xs font-bold px-5 py-2.5 rounded transition-all duration-200" style={{ background: C.amber, color: C.ink }}
            onMouseEnter={e => e.currentTarget.style.background = C.amberHot}
            onMouseLeave={e => e.currentTarget.style.background = C.amber}>
            AGENDAR AHORA
          </button>
        </div>
      </header>

      {/* HERO */}
      <section className="pt-32 pb-16 px-6 relative overflow-hidden">
        <div className="absolute inset-0 pointer-events-none" style={{
          background: `radial-gradient(ellipse 60% 50% at 70% 20%, rgba(245,158,11,0.06), transparent)`,
        }}></div>
        <div className="max-w-6xl mx-auto relative">
          <div className="mb-6"><SpotsCounter /></div>

          <h1 className="f-display text-5xl sm:text-6xl md:text-8xl font-bold leading-[1.02] mb-6 max-w-5xl">
            Mientras leés esto,<br />
            <span style={{ color: C.amber }}>tu competencia<br />ya respondió.</span>
          </h1>

          <p className="text-lg md:text-xl max-w-2xl mb-10 leading-relaxed" style={{ color: C.taupe }}>
            Cada consulta sin responder es una venta regalada. LUXIA contesta en 3 segundos,
            califica al lead y agenda la visita. <strong style={{ color: C.bone }}>Tu vendedor solo cierra.</strong>
          </p>

          <div className="flex flex-col sm:flex-row gap-4 mb-8">
            <button onClick={goDemo} className="f-mono font-bold px-8 py-4 rounded text-sm transition-all duration-200" style={{ background: C.amber, color: C.ink }}
              onMouseEnter={e => e.currentTarget.style.background = C.amberHot}
              onMouseLeave={e => e.currentTarget.style.background = C.amber}>
              PROBAR CON IA REAL AHORA ↓
            </button>
            <button onClick={goCal} className="f-mono font-bold px-8 py-4 rounded text-sm" style={{ border: `1px solid ${C.amber}`, color: C.amber, background: 'transparent' }}>
              QUIERO DEMO CON MI INVENTARIO
            </button>
          </div>

          {/* Social proof real */}
          <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 p-5 rounded" style={{ background: C.surface, border: `1px solid ${C.border}` }}>
            <div className="flex items-center gap-3">
              <div className="w-10 h-10 rounded-full flex items-center justify-center f-display text-sm font-bold" style={{ background: C.amberDim, border: `1px solid ${C.borderHi}`, color: C.amber }}>GN</div>
              <div>
                <p className="f-body text-sm font-semibold" style={{ color: C.bone }}>Grupo NAS</p>
                <p className="f-mono text-xs" style={{ color: C.taupe }}>Cliente activo · segurosgruponas.com</p>
              </div>
            </div>
            <p className="text-sm leading-relaxed" style={{ color: C.taupe }}>
              Sistema IA implementado y operando. Atención automatizada, derivación inteligente, soporte 24/7.
            </p>
          </div>
        </div>
      </section>

      {/* COSTO DE NO ACTUAR */}
      <section className="py-16 px-6" style={{ background: C.redDim, borderTop: `1px solid rgba(239,68,68,0.2)`, borderBottom: `1px solid rgba(239,68,68,0.2)` }}>
        <div className="max-w-6xl mx-auto">
          <Eyebrow urgent>Lo que te cuesta no tener LUXIA</Eyebrow>
          <div className="grid md:grid-cols-3 gap-8">
            {[
              ['$0 en IA', '$2.400+ en oportunidades perdidas/mes', 'Cada lead que no respondés en los primeros 5 minutos tiene 21x menos chances de convertir. A $200.000 la operación promedio, con 12 leads fríos por mes perdés más de lo que cuesta LUXIA un año.'],
              ['8 horas/semana', 'en tareas que una IA hace en segundos', 'Tu vendedor calificando a mano, agendando por WhatsApp, haciendo follow-up de memoria. Son 32 horas/mes que podrían ser cierres. ¿Cuánto vale una hora de tu mejor closer?'],
              ['Tu competencia', 'ya automatizó — vos todavía no', 'El mercado inmobiliario no se achica: se concentra. Las inmobiliarias que responden rápido se quedan con los leads de las que no. La pregunta no es si automatizar. Es cuánto más vas a esperar.'],
            ].map(([stat, sub, body], i) => (
              <div key={i} className="p-8 rounded" style={{ background: C.ink, border: `1px solid ${C.border}` }}>
                <p className="f-mono text-sm font-bold mb-1" style={{ color: C.red }}>{stat}</p>
                <h3 className="f-display text-lg mb-3" style={{ color: C.bone }}>{sub}</h3>
                <p className="text-sm leading-relaxed" style={{ color: C.taupe }}>{body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* DEMO */}
      <section id="demo" className="py-16 px-6">
        <div className="max-w-6xl mx-auto">
          <Eyebrow>IA real — no un video, no un PDF</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 ahora.</em>
            </h2>
            <p className="max-w-sm text-sm leading-relaxed" style={{ color: C.taupe }}>
              Escribile a Alenya como un cliente real. A la derecha, mirá lo que ve tu vendedor: nombre, presupuesto, urgencia, score. <strong style={{ color: C.bone }}>Así funciona con cada consulta.</strong>
            </p>
          </div>
          <LiveDemo />
          <div className="mt-6 p-5 rounded flex flex-col md:flex-row items-center justify-between gap-4" style={{ background: C.amberDim, border: `1px solid ${C.borderHi}` }}>
            <p className="f-mono text-xs" style={{ color: C.bone }}>
              <span style={{ color: C.amber }}>↑</span> Esto es con datos demo. En tu implementación cargamos <strong>tu inventario real</strong> y entrenamos al bot con <strong>tu tono de marca</strong>.
            </p>
            <button onClick={goCal} className="f-mono text-xs font-bold px-5 py-2.5 rounded whitespace-nowrap" style={{ background: C.amber, color: C.ink }}>
              QUIERO ESTO CON MIS PROPIEDADES
            </button>
          </div>
        </div>
      </section>

      {/* FLUJO */}
      <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>Sin intervención manual</Eyebrow>
          <h2 className="f-display text-4xl md:text-5xl mb-12" style={{ color: C.bone }}>
            De consulta a visita agendada.<br /><em style={{ color: C.amber }}>Sin que toques el teléfono.</em>
          </h2>
          <div className="space-y-0">
            {[
              ['01', 'Consulta entra', 'Instagram, WhatsApp, portales, landing. No importa de dónde — LUXIA captura.', '0 seg'],
              ['02', 'IA responde', 'En 3 segundos. Con tu tono. Con tu inventario. Preguntas naturales, no formularios.', '3 seg'],
              ['03', 'Lead calificado', 'Operación, zona, presupuesto, urgencia. Score automático. Sin interrogatorios.', '< 2 min'],
              ['04', 'Follow-up activo', 'No respondió? LUXIA recontacta. Los tibios se calientan. Los fríos se descartan.', 'automático'],
              ['05', 'Visita agendada', 'El lead elige horario. Tu vendedor recibe la ficha completa. Solo tiene que ir y cerrar.', 'listo'],
            ].map(([n, t, d, time], 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 font-bold" style={{ color: C.amber }}>[{n}]</span>
                <span className="col-span-10 md:col-span-3 f-display text-lg" style={{ color: C.bone }}>{t}</span>
                <span className="col-span-10 md:col-span-6 text-sm leading-relaxed" style={{ color: C.taupe }}>{d}</span>
                <span className="col-span-2 md:col-span-2 f-mono text-xs text-right" style={{ color: C.amber }}>{time}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* SISTEMA */}
      <section id="sistema" className="py-20 px-6">
        <div className="max-w-6xl mx-auto">
          <Eyebrow>Lo que comprás</Eyebrow>
          <h2 className="f-display text-4xl md:text-5xl mb-4" style={{ color: C.bone }}>
            Un sistema que vende por vos.<br /><em style={{ color: C.amber }}>No un software que tenés que aprender.</em>
          </h2>
          <p className="max-w-2xl mb-12 text-sm" style={{ color: C.taupe }}>
            Nosotros configuramos todo: bot, CRM, landing, WhatsApp, agenda, follow-up. Vos seguís vendiendo. Solo que ahora con leads calificados esperándote.
          </p>
          <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
            {[
              ['Bot IA WhatsApp', 'Responde, califica y agenda 24/7 con tu inventario.'],
              ['Landing captación', 'Convierte tráfico de Instagram en conversaciones.'],
              ['CRM + scoring', 'Cada lead con puntaje, etapa y contexto.'],
              ['Follow-up automático', 'El lead tibio se calienta. El frío se descarta.'],
              ['Agenda conectada', 'Visitas en tu calendario, con recordatorios.'],
              ['Panel ejecutivo', 'Leads, conversiones, agendas. Data real.'],
              ['Escalada inteligente', 'Casos sensibles van a tu equipo con historial.'],
              ['Setup en 7 días', 'Nosotros configuramos. Vos vendés.'],
            ].map(([t, d], i) => (
              <div key={i} className="p-6 rounded transition-all duration-200" style={{ background: C.surface, border: `1px solid ${C.border}` }}
                onMouseEnter={e => e.currentTarget.style.borderColor = C.borderHi}
                onMouseLeave={e => e.currentTarget.style.borderColor = 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" style={{ background: C.surface, borderTop: `1px solid ${C.border}`, borderBottom: `1px solid ${C.border}` }}>
        <div className="max-w-6xl mx-auto">
          <Eyebrow>Inversión vs. costo de no hacer nada</Eyebrow>
          <h2 className="f-display text-4xl md:text-5xl mb-4" style={{ color: C.bone }}>
            $99/mes.<br /><em style={{ color: C.amber }}>Menos que un lead perdido.</em>
          </h2>
          <p className="max-w-2xl mb-12 text-sm" style={{ color: C.taupe }}>Setup único + mensualidad. Sin permanencia. Precios en USD. Si en 30 días no ves resultados, dejás de pagar.</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 al equipo'], hi: false, cta: 'EMPEZAR' },
              { name: 'PRO', setup: 600, mrr: 199, feats: ['Todo lo de Starter', '5.000 conversaciones/mes', 'CRM + panel ejecutivo', 'Follow-up automático', 'Agenda conectada', 'Landing de captación'], hi: true, cta: 'ELEGIR PRO' },
              { name: 'ENTERPRISE', setup: 1200, mrr: 399, feats: ['Todo lo de Pro', 'Conversaciones ilimitadas', 'Multi-sucursal', 'Agente de voz IA', 'Integraciones a medida', 'Soporte prioritario'], hi: false, cta: 'HABLAR' },
            ].map((p, i) => (
              <div key={i} className="p-8 rounded flex flex-col relative" style={{
                background: p.hi ? C.surfaceHi : C.ink,
                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 }}>MÁS ELEGIDO</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 font-bold" 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>
                <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 transition-all duration-200"
                  style={p.hi ? { background: C.amber, color: C.ink } : { border: `1px solid ${C.border}`, color: C.bone, background: 'transparent' }}
                  onMouseEnter={e => { if (!p.hi) { e.currentTarget.style.borderColor = C.amber; e.currentTarget.style.color = C.amber; } else { e.currentTarget.style.background = C.amberHot; }}}
                  onMouseLeave={e => { if (!p.hi) { e.currentTarget.style.borderColor = C.border; e.currentTarget.style.color = C.bone; } else { e.currentTarget.style.background = C.amber; }}}>
                  {p.cta}
                </button>
              </div>
            ))}
          </div>

          {/* Escasez + anchoring */}
          <div className="mt-10 p-6 rounded" style={{ border: `1px solid ${C.amber}`, background: C.amberDim }}>
            <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
              <div>
                <p className="f-mono text-xs font-bold mb-2" style={{ color: C.amber }}>// CAPACIDAD LIMITADA</p>
                <p className="text-sm" style={{ color: C.bone }}>
                  Implementamos <strong>3 sistemas por mes</strong> para garantizar calidad. Julio ya tiene 1 cupo asignado. <strong style={{ color: C.amberHot }}>Quedan 2.</strong>
                </p>
              </div>
              <button onClick={goCal} className="f-mono text-xs font-bold px-6 py-3.5 rounded whitespace-nowrap transition-all duration-200" style={{ background: C.amber, color: C.ink }}
                onMouseEnter={e => e.currentTarget.style.background = C.amberHot}
                onMouseLeave={e => e.currentTarget.style.background = C.amber}>
                RESERVAR MI CUPO
              </button>
            </div>
          </div>

          {/* Garantía */}
          <div className="mt-6 p-6 rounded text-center" style={{ border: `1px dashed ${C.border}` }}>
            <p className="f-display text-lg mb-2" style={{ color: C.bone }}>Sin riesgo. Sin permanencia. Sin letra chica.</p>
            <p className="text-sm" style={{ color: C.taupe }}>
              Si en 30 días LUXIA no te genera más reuniones agendadas de las que tenías antes, dejás de pagar y no debés nada.
              No hay penalidad. No hay contrato anual. No hay excusas.
            </p>
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="py-20 px-6">
        <div className="max-w-3xl mx-auto">
          <Eyebrow>Las objeciones que ya escuchamos</Eyebrow>
          <h2 className="f-display text-4xl mb-10" style={{ color: C.bone }}>Antes de decir "lo pienso"</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 flex-shrink-0" style={{ color: C.amber }}>{faqOpen === i ? '−' : '+'}</span>
              </button>
              {faqOpen === i && <p className="pb-5 text-sm leading-relaxed slide-in" style={{ color: C.taupe }}>{f.a}</p>}
            </div>
          ))}
        </div>
      </section>

      {/* CTA FINAL */}
      <section className="py-24 px-6 relative" style={{ background: C.surface, borderTop: `1px solid ${C.border}` }}>
        <div className="absolute inset-0 pointer-events-none" style={{
          background: `radial-gradient(ellipse 50% 60% at 50% 100%, rgba(245,158,11,0.08), transparent)`,
        }}></div>
        <div className="max-w-3xl mx-auto text-center relative">
          <div className="mb-8"><SpotsCounter /></div>
          <h2 className="f-display text-4xl md:text-6xl font-bold mb-6" style={{ color: C.bone }}>
            Cada hora que pasa<br />sin LUXIA,<br /><span style={{ color: C.amber }}>es plata que perdés.</span>
          </h2>
          <p className="mb-10 text-lg leading-relaxed" style={{ color: C.taupe }}>
            30 minutos. Cargamos propiedades tuyas. Ves a LUXIA calificar un lead real de tu operación.
            Si no te convence, no pasó nada. Si te convence, en 7 días estás en producción.
          </p>
          <button onClick={goCal} className="f-mono font-bold px-12 py-5 rounded text-sm transition-all duration-200" style={{ background: C.amber, color: C.ink, boxShadow: '0 0 30px rgba(245,158,11,0.25)' }}
            onMouseEnter={e => { e.currentTarget.style.background = C.amberHot; e.currentTarget.style.boxShadow = '0 0 40px rgba(245,158,11,0.4)'; }}
            onMouseLeave={e => { e.currentTarget.style.background = C.amber; e.currentTarget.style.boxShadow = '0 0 30px rgba(245,158,11,0.25)'; }}>
            AGENDAR MI DEMO AHORA
          </button>
          <p className="f-mono text-xs mt-6" style={{ color: C.taupe }}>Sin permanencia · Setup 7 días · Garantía 30 días · 2 cupos disponibles</p>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="py-10 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 font-bold" style={{ color: C.amber }}>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:contacto@brunomelano.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>
  );
}