/* ============================================================
   APIQO — Vibecoding · build landings by chatting with an agent
   ============================================================ */

const VIBE_SCRIPT_ES = [
  { from: 'user', text: 'Necesito una landing para una clínica dental boutique en Polanco. Tono cálido, paleta menta + crema, foco en agendar cita por WhatsApp.' },
  { think: 'Plan · 4 secciones · paleta sage / cream · CTA WhatsApp persistente · prueba social con 3 reseñas reales si me das el link de Google.' },
  { tool:  'mcp · brand.tokens.create({ primary:"#7BAE9B", surface:"#F4EFE6", ink:"#1F2A26" })' },
  { tool:  'mcp · landing.scaffold({ sections:["hero","servicios","testimonios","agenda"] })' },
  { from: 'agent', text: 'Listo el primer borrador. Cambié "Reservar" por "Agendar mi cita" — convierte 18% más en LATAM. ¿Quieres que sume un módulo de antes/después con tus fotos reales?' },
  { from: 'user', text: 'Sí, y mete un calculador de presupuesto rápido para ortodoncia.' },
  { tool:  'mcp · component.add({ kind:"price-estimator", inputs:["tratamiento","meses"] })' },
  { tool:  'mcp · whatsapp.connect({ number:"+52 55 ..." })' },
  { from: 'agent', text: 'Hecho. La página está deployada en preview · clinica-aurora.apiqo.dev · puedes editar copy en línea desde el editor visual.' },
];

const VIBE_SCRIPT_EN = [
  { from: 'user', text: "I need a landing for a boutique dental clinic in Polanco. Warm tone, mint + cream palette, focus on booking via WhatsApp." },
  { think: 'Plan · 4 sections · sage / cream palette · persistent WhatsApp CTA · social proof from your Google reviews if you share the link.' },
  { tool:  'mcp · brand.tokens.create({ primary:"#7BAE9B", surface:"#F4EFE6", ink:"#1F2A26" })' },
  { tool:  'mcp · landing.scaffold({ sections:["hero","services","testimonials","booking"] })' },
  { from: 'agent', text: "First draft is up. I swapped 'Book' for 'Book my appointment' — converts 18% better in LATAM. Want me to add a before/after module with your real photos?" },
  { from: 'user', text: "Yes, and add a quick price estimator for orthodontics." },
  { tool:  'mcp · component.add({ kind:"price-estimator", inputs:["treatment","months"] })' },
  { tool:  'mcp · whatsapp.connect({ number:"+52 55 ..." })' },
  { from: 'agent', text: "Done. Live preview at · clinica-aurora.apiqo.dev · you can edit copy inline from the visual editor." },
];

const SectionVibe = ({ t, lang }) => {
  const script = lang === 'en' ? VIBE_SCRIPT_EN : VIBE_SCRIPT_ES;
  const [step, setStep] = React.useState(0);
  const [building, setBuilding] = React.useState(0);

  React.useEffect(() => {
    const id = setInterval(() => {
      setStep(s => (s + 1) % (script.length + 2));
    }, 1900);
    return () => clearInterval(id);
  }, [script.length]);

  React.useEffect(() => {
    // preview "build" advances after the scaffold tool fires
    const buildSteps = [0, 1, 2, 3, 4, 5, 6];
    const milestone = Math.min(buildSteps.length - 1, Math.floor(step / 1.3));
    setBuilding(milestone);
  }, [step]);

  const visible = script.slice(0, Math.min(script.length, step));

  return (
    <section id="vibecoding" className="sec-vibe">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow" style={{ color: 'var(--brand-magenta)' }}>
            {lang === 'en' ? '03 · Vibecoding' : '03 · Vibecoding'}
          </div>
          <h2>
            {lang === 'en'
              ? 'Build a landing by talking. Ship by lunch.'
              : 'Construye una landing conversando. Lanza antes del almuerzo.'}
          </h2>
          <p>
            {lang === 'en'
              ? "An Apiqo agent picks up brand tokens, scaffolds the page, wires real tools (WhatsApp, payments, analytics) and deploys to preview while you keep talking."
              : "Un agente Apiqo toma tus tokens de marca, arma las secciones, conecta herramientas reales (WhatsApp, pagos, analítica) y deploya a preview mientras tú sigues hablando."}
          </p>
        </div>

        <div className="vibe-grid">
          <VibeChat lines={visible} lang={lang} />
          <VibePreview milestone={building} lang={lang} />
        </div>

        <div className="vibe-foot">
          <div className="vibe-foot-item">
            <div className="vibe-foot-k display">⌀ 47 min</div>
            <div className="vibe-foot-v mono">{lang === 'en' ? 'CHAT TO LIVE PREVIEW' : 'DE CHAT A PREVIEW EN VIVO'}</div>
          </div>
          <div className="vibe-divider" />
          <div className="vibe-foot-item">
            <div className="vibe-foot-k display">12+</div>
            <div className="vibe-foot-v mono">{lang === 'en' ? 'COMPONENTS IN LIBRARY' : 'COMPONENTES EN LA LIBRERÍA'}</div>
          </div>
          <div className="vibe-divider" />
          <div className="vibe-foot-item">
            <div className="vibe-foot-k display">0</div>
            <div className="vibe-foot-v mono">{lang === 'en' ? 'DEVELOPERS NEEDED FOR ROUND 1' : 'DEVS NECESARIOS PARA RONDA 1'}</div>
          </div>
        </div>
      </div>
    </section>
  );
};

const VibeChat = ({ lines, lang }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current) ref.current.scrollTop = ref.current.scrollHeight;
  }, [lines.length]);

  return (
    <div className="vibe-chat">
      <div className="vibe-chat-head">
        <div className="vibe-chat-title">
          <span className="dot" style={{ background: '#3DD68C', boxShadow: '0 0 8px #3DD68C' }} />
          <span className="mono">apiqo · build-agent · v3</span>
        </div>
        <div className="vibe-chat-meta mono">
          <span>claude-sonnet-4</span>
          <span>·</span>
          <span>{lang === 'en' ? 'session 0x4193' : 'sesión 0x4193'}</span>
        </div>
      </div>

      <div className="vibe-chat-body" ref={ref}>
        {lines.map((l, i) => {
          if (l.from === 'user') {
            return (
              <div className="vmsg vmsg-user" key={i}>
                <div className="vmsg-who mono">{lang === 'en' ? 'YOU' : 'TÚ'}</div>
                <div className="vmsg-bubble">{l.text}</div>
              </div>
            );
          }
          if (l.from === 'agent') {
            return (
              <div className="vmsg vmsg-agent" key={i}>
                <div className="vmsg-who mono">APIQO</div>
                <div className="vmsg-bubble">{l.text}</div>
              </div>
            );
          }
          if (l.think) {
            return (
              <div className="vmsg vmsg-think" key={i}>
                <span className="mono vmsg-tag">{lang === 'en' ? 'thinking' : 'pensando'}</span>
                <span className="vmsg-think-text">{l.think}</span>
              </div>
            );
          }
          if (l.tool) {
            return (
              <div className="vmsg vmsg-tool" key={i}>
                <span className="vmsg-tool-icon">⚡</span>
                <span className="mono vmsg-tool-text">{l.tool}</span>
              </div>
            );
          }
          return null;
        })}
        <div className="vmsg-typing">
          <span /><span /><span />
        </div>
      </div>

      <div className="vibe-chat-input">
        <span className="mono">{lang === 'en' ? '› describe what you want…' : '› describe lo que quieres…'}</span>
        <span className="cursor mono">▍</span>
      </div>
    </div>
  );
};

const VibePreview = ({ milestone, lang }) => {
  // 0=blank, 1=tokens, 2=hero, 3=services, 4=testimonials, 5=estimator, 6=whatsapp
  return (
    <div className="vibe-preview">
      <div className="vibe-preview-head">
        <div className="vibe-preview-dots">
          <span /><span /><span />
        </div>
        <div className="vibe-preview-url mono">clinica-aurora.apiqo.dev</div>
        <div className="vibe-preview-status mono">
          {milestone < 6
            ? <><span className="dot" style={{ background: '#F7B955' }}/> {lang==='en'?'building':'construyendo'}</>
            : <><span className="dot" style={{ background: '#3DD68C' }}/> live</>}
        </div>
      </div>

      <div className="vibe-frame" style={milestone >= 1 ? { background: '#F4EFE6', color: '#1F2A26' } : {}}>
        {milestone < 1 && (
          <div className="vibe-empty mono">{lang==='en'?'awaiting brief…':'esperando brief…'}</div>
        )}

        {milestone >= 1 && (
          <div className="vibe-mock">
            {/* mock nav */}
            <div className="vmock-nav">
              <span className="vmock-brand">aurora.</span>
              <span className="vmock-link">{lang==='en'?'Services':'Servicios'}</span>
              <span className="vmock-link">{lang==='en'?'Reviews':'Reseñas'}</span>
              <span className="vmock-cta">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.6 1.4 5.1L2 22l5-1.3c1.5.8 3.2 1.3 5 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>
                {lang==='en'?'Book':'Agendar'}
              </span>
            </div>

            {/* hero */}
            {milestone >= 2 && (
              <div className="vmock-hero">
                <div className="vmock-h1">
                  {lang==='en' ? 'Smile that fits' : 'Sonrisa que te queda'}<br/>
                  <span style={{ color: '#7BAE9B' }}>{lang==='en' ? 'your life.' : 'a tu vida.'}</span>
                </div>
                <div className="vmock-sub">{lang==='en' ? 'Boutique dental care in Polanco.' : 'Odontología boutique en Polanco.'}</div>
                <div className="vmock-cta-row">
                  <span className="vmock-btn vmock-btn-primary">{lang==='en'?'Book my appointment':'Agendar mi cita'}</span>
                  <span className="vmock-btn vmock-btn-ghost">{lang==='en'?'See cases':'Ver casos'}</span>
                </div>
              </div>
            )}

            {/* services */}
            {milestone >= 3 && (
              <div className="vmock-services">
                {[
                  { t: lang==='en'?'Cleaning':'Limpieza', p: '$ 1,200' },
                  { t: lang==='en'?'Whitening':'Blanqueo', p: '$ 4,800' },
                  { t: lang==='en'?'Orthodontics':'Ortodoncia', p: '$ —' },
                ].map((s, i) => (
                  <div className="vmock-svc" key={i}>
                    <div className="vmock-svc-t">{s.t}</div>
                    <div className="vmock-svc-p mono">{s.p}</div>
                  </div>
                ))}
              </div>
            )}

            {/* testimonials */}
            {milestone >= 4 && (
              <div className="vmock-test">
                <span className="mono vmock-test-tag">★ 4.9 · 312 google</span>
                <span className="vmock-test-q">"{lang==='en' ? 'Calmest dental visit of my life.' : 'La visita al dentista más tranquila de mi vida.'}"</span>
              </div>
            )}

            {/* estimator */}
            {milestone >= 5 && (
              <div className="vmock-estim">
                <div className="vmock-estim-tag mono">{lang==='en'?'PRICE ESTIMATOR':'CALCULADORA DE PRESUPUESTO'}</div>
                <div className="vmock-estim-row">
                  <div className="vmock-pill">{lang==='en'?'Invisalign':'Invisalign'}</div>
                  <div className="vmock-pill">{lang==='en'?'14 mo':'14 meses'}</div>
                  <div className="vmock-estim-out display">$ 2,140<span style={{fontSize:10, opacity:.6}}>/mo</span></div>
                </div>
              </div>
            )}

            {/* WhatsApp FAB */}
            {milestone >= 6 && (
              <div className="vmock-fab">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.6 1.4 5.1L2 22l5-1.3c1.5.8 3.2 1.3 5 1.3 5.5 0 10-4.5 10-10S17.5 2 12 2z"/></svg>
              </div>
            )}
          </div>
        )}
      </div>

      <div className="vibe-preview-foot mono">
        <span>{lang==='en'?'commits':'commits'} · {milestone + 2}</span>
        <span>{lang==='en'?'lighthouse':'lighthouse'} · 98 / 100</span>
        <span>{lang==='en'?'deploy':'deploy'} · vercel</span>
      </div>
    </div>
  );
};

window.SectionVibe = SectionVibe;