// Extra UI components for v2 — About, TrustedBy, HeroWidget, BeforeAfter, BudgetCalc, Slots, TypingHero

const { useState: useS2, useEffect: useE2, useRef: useR2, useMemo: useM2 } = React;

// ── Typing/reveal headline ──
function TypingHero({ part1, part2 }) {
  const full = part2;
  const [shown, setShown] = useS2('');
  useE2(() => {
    let i = 0;
    const id = setInterval(() => {
      i++;
      setShown(full.slice(0, i));
      if (i >= full.length) clearInterval(id);
    }, 38);
    return () => clearInterval(id);
  }, []);
  return (
    <h1 className="mt-6 font-bold tracking-tight leading-[1.02] anim-fadeUp-d1" style={{ fontSize: 'clamp(40px, 6vw, 64px)' }}>
      {part1}<br/>
      <span className="text-grad">{shown}</span>
      <span className="inline-block w-[3px] h-[0.85em] ml-1 align-[-0.1em] cursor-blink" style={{ background: 'var(--accent)' }}/>
    </h1>
  );
}

// ── Hero animated widget (mini browser + flow) ──
function HeroWidget() {
  const [tick, setTick] = useS2(0);
  useE2(() => {
    const id = setInterval(() => setTick(t => (t + 1) % 5), 1200);
    return () => clearInterval(id);
  }, []);
  const labels = ['Form', 'Webhook', 'WhatsApp', 'Notify', '✓'];
  return (
    <div className="relative anim-fadeUp-d3" style={{ perspective: 1200 }}>
      <div
        className="browser relative"
        style={{
          transform: 'rotate3d(0.4, -1, 0, 6deg) rotate(-1deg)',
          boxShadow: '0 30px 80px -20px rgba(167,139,250,0.25), 0 0 0 0.5px var(--border)',
        }}
      >
        <div className="browser-bar">
          <div className="flex gap-1.5">
            <span className="browser-dot"/><span className="browser-dot"/><span className="browser-dot"/>
          </div>
          <div className="url-pill"><span className="text-accent">●</span> cristiansalazar.com.mx <span className="opacity-50">/lead</span></div>
        </div>
        <div className="p-5" style={{ background: 'rgba(167,139,250,0.025)' }}>
          <div className="text-[10px] font-mono uppercase tracking-widest text-muted mb-3">flow.live</div>
          <div className="flex items-center gap-1.5 overflow-hidden">
            {labels.map((l, i) => (
              <React.Fragment key={l}>
                <div
                  className="shrink-0 text-[10.5px] font-medium px-2 py-1.5 rounded-md transition-all duration-300"
                  style={{
                    background: tick === i ? 'var(--accent-soft)' : 'var(--bg-surface)',
                    border: '0.5px solid ' + (tick === i ? 'var(--accent)' : 'var(--border)'),
                    color: tick === i ? 'var(--accent)' : 'var(--text)',
                    transform: tick === i ? 'translateY(-1px)' : 'none',
                    boxShadow: tick === i ? '0 0 16px rgba(167,139,250,0.25)' : 'none',
                  }}
                >
                  {l}
                </div>
                {i < labels.length - 1 && (
                  <div className="h-px w-3 shrink-0" style={{ background: tick > i ? 'var(--accent)' : 'var(--border)' }}/>
                )}
              </React.Fragment>
            ))}
          </div>
          <div className="divider my-4"/>
          <div className="space-y-2">
            {[
              ['10:02', 'Ana López', 'Pastelería — quiere landing'],
              ['10:14', 'Luis R.', 'Pyme — automatización Sheets'],
              ['10:21', 'Mariana T.', 'Plan Pro — taller artesanal'],
            ].map((r, i) => (
              <div key={i} className="flex items-center gap-3 text-[12px]" style={{ opacity: tick >= 2 ? 1 : 0.4, transition: 'opacity .3s' }}>
                <span className="font-mono text-muted text-[10px]">{r[0]}</span>
                <span className="w-1.5 h-1.5 rounded-full bg-accent"/>
                <span className="font-medium">{r[1]}</span>
                <span className="text-muted truncate">{r[2]}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      {/* Floating badges */}
      <div
        className="absolute -right-2 md:-right-6 top-10 card !p-3 !flex items-center gap-2 text-xs"
        style={{ background: 'var(--bg-surface)', animation: 'fadeUp .6s .8s both' }}
      >
        <span className="w-2 h-2 rounded-full bg-green-400 pulse-dot"/>
        <span className="font-medium">3 leads</span>
        <span className="text-muted">hoy</span>
      </div>
      <div
        className="absolute -left-2 md:-left-6 bottom-8 card !p-3 flex items-center gap-2 text-xs"
        style={{ background: 'var(--bg-surface)', animation: 'fadeUp .6s 1s both' }}
      >
        <Icon.bolt width="12" height="12" className="text-accent"/>
        <span className="font-medium">Tiempo ahorrado</span>
        <span className="text-accent font-mono">8h/sem</span>
      </div>
    </div>
  );
}

// ── About section ──
function AboutSection() {
  return (
    <div className="grid lg:grid-cols-12 gap-10 items-center">
      <div className="lg:col-span-5">
        <div className="relative inline-block">
          <div
            className="w-48 h-48 md:w-64 md:h-64 rounded-2xl grid place-items-center font-bold tracking-tight"
            style={{
              background: 'linear-gradient(135deg, rgba(167,139,250,0.18), rgba(167,139,250,0.04))',
              border: '0.5px solid rgba(167,139,250,0.4)',
              color: 'var(--accent)',
              fontSize: 'clamp(48px, 8vw, 96px)',
            }}
          >
            CS
          </div>
          <div className="absolute -bottom-3 -right-3 card !p-3 flex items-center gap-2 text-xs">
            <span className="w-2 h-2 rounded-full bg-green-400 pulse-dot"/>
            <span className="font-medium">CDMX</span>
          </div>
        </div>
      </div>
      <div className="lg:col-span-7">
        <div className="badge mb-4">Sobre mí</div>
        <h2 className="text-3xl md:text-[40px] font-bold tracking-tight leading-tight">
          Diseñador independiente. Sin agencia, sin intermediarios.
        </h2>
        <p className="mt-5 text-muted leading-relaxed">
          Soy Cristian. Llevo años construyendo cosas en internet para gente que tiene un negocio real y poco tiempo para perder. Trabajé adentro de proyectos grandes y aprendí qué funciona y qué es relleno.
        </p>
        <p className="mt-3 text-muted leading-relaxed">
          Cuando un cliente me contrata, trabaja conmigo. No con un equipo rotativo. Eso significa decisiones rápidas, una sola visión y un solo punto de contacto desde el briefing hasta el lanzamiento.
        </p>
        <div className="mt-7 grid grid-cols-3 gap-3 max-w-md">
          {[
            ['2018', 'Empecé'],
            ['+15', 'Proyectos'],
            ['1:1', 'Trato'],
          ].map(([n, l]) => (
            <div key={l} className="rounded-lg p-4 text-center" style={{ background: 'rgba(255,255,255,0.02)', border: '0.5px solid var(--border)' }}>
              <div className="text-2xl font-bold tracking-tight">{n}</div>
              <div className="text-[10px] uppercase tracking-widest text-muted mt-1">{l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Trusted by strip ──
function TrustedBy() {
  const clients = [
    { name: 'Manuel Moreno', sub: 'Compositor' },
    { name: 'La Lola', sub: 'Pastelería' },
    { name: 'Taller MT', sub: 'Diseño' },
    { name: 'Estudio AR', sub: 'Fotografía' },
    { name: 'Pyme LR', sub: 'Consultoría' },
  ];
  return (
    <div>
      <div className="label text-muted text-center mb-6">Confían en mi trabajo</div>
      <div className="flex flex-wrap items-center justify-center gap-x-8 gap-y-4 opacity-80">
        {clients.map((c, i) => (
          <div key={i} className="flex flex-col items-center text-center group">
            <div
              className="font-bold tracking-tight text-lg md:text-xl group-hover:text-accent transition"
              style={{ fontFamily: 'Inter', letterSpacing: '-0.02em' }}
            >
              {c.name}
            </div>
            <div className="text-[10px] uppercase tracking-widest text-muted">{c.sub}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Slots indicator ──
function SlotsIndicator({ inline = false }) {
  const filled = 2, total = 4;
  return (
    <div className={`${inline ? 'inline-flex' : 'flex'} items-center gap-2.5 text-[12px]`}>
      <div className="flex gap-1">
        {Array.from({length: total}).map((_, i) => (
          <span
            key={i}
            className={`w-2 h-2 rounded-full ${i < filled ? 'opacity-30' : 'pulse-dot'}`}
            style={{ background: i < filled ? 'var(--text-muted)' : 'var(--accent)' }}
          />
        ))}
      </div>
      <span className="text-text font-medium">{total - filled} cupos</span>
      <span className="text-muted">disponibles este mes</span>
    </div>
  );
}

// ── Before/After comparison ──
function BeforeAfter() {
  const [side, setSide] = useS2('after');
  return (
    <div className="card !p-0 overflow-hidden">
      <div className="p-5 md:p-7 flex items-start md:items-center justify-between gap-4 flex-wrap">
        <div>
          <div className="badge mb-2">Antes / Después</div>
          <h3 className="text-xl md:text-2xl font-bold tracking-tight">Una landing genérica vs. una hecha para tu negocio.</h3>
        </div>
        <div className="inline-flex p-1 rounded-lg" style={{ background: 'rgba(255,255,255,0.03)', border: '0.5px solid var(--border)' }}>
          {['before','after'].map(s => (
            <button
              key={s}
              onClick={() => setSide(s)}
              className="px-3 py-1.5 rounded-md text-xs font-medium transition"
              style={{
                background: side === s ? 'var(--accent-soft)' : 'transparent',
                color: side === s ? 'var(--accent)' : 'var(--text)',
              }}
            >
              {s === 'before' ? 'Antes' : 'Después'}
            </button>
          ))}
        </div>
      </div>
      <div className="grid md:grid-cols-2 gap-0 border-t" style={{ borderColor: 'var(--border)' }}>
        {/* Before */}
        <div className={`p-6 md:p-7 ${side === 'after' ? 'hidden md:block opacity-40' : ''}`} style={{ borderRight: '0.5px solid var(--border)' }}>
          <div className="label text-muted mb-3">Antes — Plantilla genérica</div>
          <div className="rounded-lg p-5" style={{ background: '#fff', minHeight: 220 }}>
            <div className="text-black text-xl font-bold" style={{ fontFamily: 'Arial' }}>WELCOME TO MY WEBSITE</div>
            <div className="text-gray-600 text-sm mt-1" style={{ fontFamily: 'Arial' }}>The best service in the city</div>
            <div className="grid grid-cols-3 gap-2 mt-4">
              {[1,2,3].map(i => <div key={i} className="aspect-square rounded bg-gray-200"/>)}
            </div>
            <div className="mt-4 inline-block px-4 py-2 bg-blue-500 text-white text-xs rounded">CONTACT US</div>
          </div>
          <ul className="mt-5 space-y-2 text-sm text-muted">
            {['Plantilla copiada de otro sitio', 'Tipografía sin personalidad', 'Carga lenta por plugins', 'Sin estrategia de conversión'].map(t => (
              <li key={t} className="flex items-start gap-2"><span className="text-red-300/70 mt-0.5">✕</span>{t}</li>
            ))}
          </ul>
        </div>
        {/* After */}
        <div className={`p-6 md:p-7 ${side === 'before' ? 'hidden md:block opacity-40' : ''}`}>
          <div className="label text-accent mb-3">Después — Hecho para ti</div>
          <div className="rounded-lg overflow-hidden relative" style={{ background: '#0B0A14', border: '0.5px solid var(--border)', minHeight: 220 }}>
            <div className="absolute inset-0 grid-bg opacity-30"/>
            <div className="relative p-5">
              <div className="text-[10px] font-mono uppercase tracking-widest text-accent">Pastelería · 2026</div>
              <div className="text-grad text-2xl font-bold tracking-tight mt-2 leading-tight">Pasteles que cuentan<br/>una historia.</div>
              <div className="text-muted text-xs mt-2">Diseñados a mano. Entregados al día siguiente.</div>
              <div className="mt-4 flex gap-2">
                <span className="px-3 py-1.5 text-[11px] font-semibold rounded" style={{ background: 'var(--accent)', color: 'var(--bg-primary)' }}>Pedir por WhatsApp</span>
                <span className="px-3 py-1.5 text-[11px] rounded chip">Ver catálogo</span>
              </div>
            </div>
          </div>
          <ul className="mt-5 space-y-2 text-sm">
            {['Diseñado desde cero para tu marca', 'Carga en menos de 2s', 'CTA claro, una sola acción', 'Integrado a WhatsApp y Sheets'].map(t => (
              <li key={t} className="flex items-start gap-2"><Icon.check width="14" height="14" className="text-accent mt-0.5 shrink-0"/>{t}</li>
            ))}
          </ul>
        </div>
      </div>
    </div>
  );
}

// ── Budget calculator ──
function BudgetCalc() {
  const [pages, setPages] = useS2(1);
  const [auto, setAuto] = useS2(false);
  const [domain, setDomain] = useS2(false);
  const [mail, setMail] = useS2(false);
  const [maint, setMaint] = useS2('none');

  const base = pages === 1 ? 7000 : pages <= 3 ? 18000 : 35000;
  const extras =
    (auto ? 6000 : 0) +
    (domain ? 1500 : 0) +
    (mail ? 2000 : 0) +
    (maint === '1' ? 0 : maint === '2' ? 2500 : 0);
  const total = base + extras;
  const days = pages === 1 ? 5 : pages <= 3 ? 7 : 10;

  const plan = pages === 1 && !auto ? 'Starter' : pages > 3 ? 'Elite' : 'Pro';

  const message = `Hola Cristian, hice una estimación con la calculadora: ${pages} ${pages === 1 ? 'página' : 'páginas'}, ${auto ? 'con' : 'sin'} automatización, ${domain ? 'con' : 'sin'} dominio/hosting, ${mail ? 'con' : 'sin'} correo, mantenimiento ${maint}. Total estimado $${total.toLocaleString('es-MX')} MXN.`;

  return (
    <div className="card !p-0 overflow-hidden">
      <div className="grid md:grid-cols-12">
        <div className="md:col-span-7 p-8">
          <div className="badge mb-3">Calculadora</div>
          <h3 className="text-2xl md:text-3xl font-bold tracking-tight">Estima tu presupuesto en 30 segundos.</h3>
          <p className="text-muted mt-2 text-sm">Mueve los controles y mira el total ajustarse en tiempo real.</p>

          <div className="mt-7 space-y-6">
            <div>
              <div className="flex items-baseline justify-between mb-3">
                <span className="label text-muted">Número de páginas</span>
                <span className="font-mono text-accent text-sm">{pages === 6 ? '6+ (Elite)' : pages}</span>
              </div>
              <input
                type="range" min={1} max={6} step={1} value={pages}
                onChange={e => setPages(parseInt(e.target.value))}
                className="w-full accent-accent"
                style={{ accentColor: 'var(--accent)' }}
              />
              <div className="flex justify-between text-[10px] text-muted mt-1 font-mono">
                <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6+</span>
              </div>
            </div>

            <div className="grid sm:grid-cols-2 gap-3">
              <CalcToggle label="Automatización" sub="+$6,000" value={auto} onChange={setAuto}/>
              <CalcToggle label="Dominio + hosting" sub="+$1,500" value={domain} onChange={setDomain}/>
              <CalcToggle label="Correo profesional" sub="+$2,000" value={mail} onChange={setMail}/>
              <CalcToggle label="Mantenimiento 2 meses" sub="+$2,500" value={maint === '2'} onChange={(v) => setMaint(v ? '2' : 'none')}/>
            </div>
          </div>
        </div>
        <div className="md:col-span-5 p-8 flex flex-col" style={{ background: 'linear-gradient(180deg, rgba(167,139,250,0.10), rgba(167,139,250,0.02))', borderLeft: '0.5px solid var(--border)' }}>
          <div className="label text-muted">Total estimado</div>
          <div className="mt-2 flex items-baseline gap-2">
            <span className="text-5xl font-bold tracking-tight text-grad">${total.toLocaleString('es-MX')}</span>
            <span className="text-muted text-sm">MXN</span>
          </div>
          <div className="mt-1 text-xs text-muted">{plan} · entrega en ~{days} días</div>

          <div className="divider my-5"/>

          <div className="space-y-2 text-sm">
            <CalcRow l="Base" v={`$${base.toLocaleString('es-MX')}`}/>
            {auto && <CalcRow l="Automatización" v="+$6,000"/>}
            {domain && <CalcRow l="Dominio + hosting" v="+$1,500"/>}
            {mail && <CalcRow l="Correo profesional" v="+$2,000"/>}
            {maint === '2' && <CalcRow l="Mantenimiento 2 m." v="+$2,500"/>}
          </div>

          <a href={waLink(message)} target="_blank" rel="noreferrer" className="btn-primary mt-auto w-full justify-center" style={{ marginTop: 24 }}>
            <Icon.whatsapp width="14" height="14"/> Pedir cotización exacta
          </a>
          <div className="text-[11px] text-muted text-center mt-2">Sin compromiso. Respondo en 24h.</div>
        </div>
      </div>
    </div>
  );
}
function CalcRow({ l, v }) {
  return <div className="flex justify-between text-sm"><span className="text-muted">{l}</span><span className="font-mono">{v}</span></div>;
}
function CalcToggle({ label, sub, value, onChange }) {
  return (
    <button
      type="button"
      onClick={() => onChange(!value)}
      className="text-left p-3.5 rounded-lg transition"
      style={{
        background: value ? 'var(--accent-soft)' : 'rgba(255,255,255,0.02)',
        border: '0.5px solid ' + (value ? 'var(--accent)' : 'var(--border)'),
      }}
    >
      <div className="flex items-center justify-between">
        <span className="font-medium text-[13.5px]">{label}</span>
        <span
          className="w-4 h-4 rounded grid place-items-center shrink-0"
          style={{
            background: value ? 'var(--accent)' : 'transparent',
            border: '0.5px solid ' + (value ? 'var(--accent)' : 'var(--border)'),
          }}
        >
          {value && <Icon.check width="10" height="10" className="text-bg"/>}
        </span>
      </div>
      <div className="text-[11px] text-muted mt-0.5 font-mono">{sub}</div>
    </button>
  );
}

Object.assign(window, {
  TypingHero, HeroWidget, AboutSection, TrustedBy, SlotsIndicator, BeforeAfter, BudgetCalc,
});