// Landing page — Lavadero Curupí
// Depends on window.LC_DATA, window.LCIcons

const { useState, useEffect, useRef } = React;

// ── Hero Overlay dinámico ─────────────────────────────────────────
function HeroOverlay({ onNav }) {
  const [state, setState] = useState({ loading: true, isOpen: false, label: 'Cargando…', dayLabel: '', slots: [] });

  useEffect(() => {
    const API = window.LC_API_BASE || 'https://curupi-api-production.up.railway.app';

    // Hora Montevideo (UTC-3, sin DST)
    const nowUtc = new Date();
    const mvd = new Date(nowUtc.toLocaleString('en-US', { timeZone: 'America/Montevideo' }));
    const mvdDay = mvd.getDay();   // 0=Dom … 6=Sáb
    const mvdHour = mvd.getHours();
    const mvdMin  = mvd.getMinutes();
    const isOpen  = mvdDay >= 1 && mvdDay <= 6 && mvdHour >= 9 && mvdHour < 18;

    const DIAS   = ['Dom','Lun','Mar','Mié','Jue','Vie','Sáb'];
    const MESES  = ['ENE','FEB','MAR','ABR','MAY','JUN','JUL','AGO','SET','OCT','NOV','DIC'];

    // Primer día hábil disponible: si hoy es hábil y queda más de 1 hora, arranco hoy; sino mañana
    const startOffset = (mvdDay >= 1 && mvdDay <= 6 && mvdHour < 17) ? 0 : 1;

    // Usar getFullYear/Month/Date para que la fecha sea del día local (Montevideo), no UTC
    const toISO = d => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;

    const findSlotsAndSet = async () => {
      try {
        // Obtener UUID de carrocería
        const servicios = await fetch(`${API}/servicios`).then(r => r.json());
        const srv = servicios.find(s => s.slug === 'carroceria') || servicios[0];
        if (!srv) { setState(s => ({ ...s, loading: false })); return; }

        // Buscar primer día hábil con slots disponibles (hasta 7 días)
        for (let i = startOffset; i < 8; i++) {
          const d = new Date(mvd);
          d.setDate(mvd.getDate() + i);
          if (d.getDay() === 0) continue; // domingo cerrado

          const fecha = toISO(d);
          const res = await fetch(`${API}/slots?fecha=${fecha}&servicio_id=${srv.id}`).then(r => r.json());
          const horas = (res.slots || []).filter(s => s.disponible).map(s => s.hora);

          if (horas.length === 0) continue;

          // Balancear mañana / tarde
          const manana  = horas.filter(h => parseInt(h) < 13);
          const tarde   = horas.filter(h => parseInt(h) >= 13);
          let elegidos = [];
          if (manana.length >= 2 && tarde.length >= 1) {
            elegidos = [manana[0], manana[1], tarde[0]];
          } else if (manana.length >= 1 && tarde.length >= 2) {
            elegidos = [manana[0], tarde[0], tarde[1]];
          } else {
            elegidos = horas.slice(0, 3);
          }

          const esHoy = i === 0;
          const dayLabel = esHoy
            ? `HOY · ${DIAS[d.getDay()].toUpperCase()} ${d.getDate()} ${MESES[d.getMonth()]}`
            : `${DIAS[d.getDay()].toUpperCase()} ${d.getDate()} ${MESES[d.getMonth()]}`;

          setState({ loading: false, isOpen, label: isOpen ? 'Abierto ahora' : 'Cerrado', dayLabel, slots: elegidos.map(h => h.slice(0,5)) });
          return;
        }

        // Sin disponibilidad encontrada
        const dayLabel = `HOY · ${DIAS[mvdDay].toUpperCase()} ${mvd.getDate()} ${MESES[mvd.getMonth()]}`;
        setState({ loading: false, isOpen, label: isOpen ? 'Abierto ahora' : 'Cerrado', dayLabel, slots: [] });
      } catch (_) {
        setState(s => ({ ...s, loading: false }));
      }
    };

    findSlotsAndSet();
  }, []);

  const dotColor = state.isOpen ? 'var(--accent)' : '#f87171';
  const chipBorder = state.isOpen ? 'rgba(60,198,230,0.4)' : 'rgba(248,113,113,0.4)';

  return (
    <>
      <div style={{ position: 'absolute', top: 20, left: 20, right: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
        <span className="chip" style={{ background: 'rgba(10,17,56,0.7)', backdropFilter: 'blur(8px)', color: state.isOpen ? 'var(--accent)' : '#f87171', borderColor: chipBorder }}>
          <span style={{ width: 6, height: 6, borderRadius: 999, background: dotColor, boxShadow: `0 0 8px ${dotColor}` }} />
          {state.loading ? '…' : state.label}
        </span>
      </div>

      {!state.loading && (
        <div style={{ position: 'absolute', bottom: 24, left: 24, right: 24, color: 'white' }}>
          <div className="mono" style={{ fontSize: 10, letterSpacing: '0.2em', opacity: 0.7 }}>{state.dayLabel}</div>
          {state.slots.length > 0 ? (
            <>
              <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, marginTop: 6 }}>
                {state.slots.length} {state.slots.length === 1 ? 'cupo disponible' : 'cupos disponibles'}
              </div>
              <div style={{ display: 'flex', gap: 8, marginTop: 12, flexWrap: 'wrap' }}>
                {state.slots.map(t => (
                  <button key={t} onClick={() => onNav('booking')}
                    style={{ background: 'rgba(255,255,255,0.15)', backdropFilter: 'blur(8px)', border: '1px solid rgba(255,255,255,0.25)', color: 'white', padding: '8px 14px', borderRadius: 999, fontSize: 13, fontWeight: 500 }}>
                    {t}
                  </button>
                ))}
              </div>
            </>
          ) : (
            <div style={{ fontFamily: 'var(--font-display)', fontSize: 18, fontWeight: 600, marginTop: 6, opacity: 0.85 }}>
              Sin turnos disponibles próximamente
            </div>
          )}
        </div>
      )}
    </>
  );
}

function Nav({ onNav, onOpenBot }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 50,
      transition: 'all .25s ease',
      padding: scrolled ? '12px 0' : '20px 0',
      background: scrolled ? 'color-mix(in oklab, var(--bg) 80%, transparent)' : 'transparent',
      backdropFilter: scrolled ? 'blur(18px) saturate(140%)' : 'none',
      borderBottom: scrolled ? '1px solid var(--border)' : '1px solid transparent',
    }}>
      <div className="container row between">
        <a href="#top" onClick={(e) => { e.preventDefault(); onNav('home'); }} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <CurupiLogo size={22} />
        </a>

        <div className="row gap-3" style={{ alignItems: 'center' }}>
          <div className="row gap-3 nav-links" style={{ alignItems: 'center' }}>
            {[
              ['Servicios', 'services'],
              ['Cómo funciona', 'how'],
              ['Precios', 'pricing'],
              ['Bot WhatsApp', 'bot'],
              ['Contacto', 'contact'],
            ].map(([label, id]) => id === 'bot' ? (
              <button key={id} onClick={onOpenBot}
                style={{ fontSize: 14, color: 'var(--text-muted)', transition: 'color .15s', background: 'none', border: 'none', padding: 0, cursor: 'pointer', fontFamily: 'inherit' }}
                onMouseEnter={e => e.currentTarget.style.color = 'var(--text)'}
                onMouseLeave={e => e.currentTarget.style.color = 'var(--text-muted)'}>
                {label}
              </button>
            ) : (
              <a key={id} href={`#${id}`} style={{ fontSize: 14, color: 'var(--text-muted)', transition: 'color .15s' }}
                 onMouseEnter={e => e.target.style.color = 'var(--text)'}
                 onMouseLeave={e => e.target.style.color = 'var(--text-muted)'}>
                {label}
              </a>
            ))}
          </div>
          <button className="btn btn-ghost btn-sm" onClick={() => onNav('admin')} title="Panel del lavadero" style={{ padding: '8px 12px' }}>
            <LCIcons.Settings size={14} />
          </button>
          <button className="btn btn-accent btn-sm" onClick={() => onNav('booking')}>
            Reservar turno
            <LCIcons.ArrowRight size={14} />
          </button>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .nav-links { display: none !important; }
        }
      `}</style>
    </nav>
  );
}

function CurupiLogo({ size = 28 }) {
  // Typographic wordmark — recreation of the brand lockup:
  // "LAVADERO" (slab, navy) with "Curupí" (brush script, cyan) overlapping below.
  return (
    <span className="wordmark" style={{ '--wm-size': size + 'px' }}>
      <span className="wm-top">Lavadero</span>
      <span className="wm-bot">Curupí</span>
    </span>
  );
}

function Hero({ onNav, onOpenBot }) {
  return (
    <section id="top" style={{ paddingTop: 140, paddingBottom: 60, overflow: 'hidden', position: 'relative' }} className="grain">
      {/* glow */}
      <div style={{
        position: 'absolute', top: -200, right: -100, width: 700, height: 700,
        background: 'radial-gradient(circle, color-mix(in oklab, var(--accent) 25%, transparent), transparent 60%)',
        filter: 'blur(60px)', pointerEvents: 'none',
      }} />

      <div className="container" style={{ position: 'relative' }}>
        <div className="hero-grid">
          <div className="reveal">
            <span className="eyebrow">EST. 2023 · LASCANO · URUGUAY</span>
            <h1 style={{ fontSize: 'clamp(56px, 9vw, 120px)', marginTop: 24, lineHeight: 0.95 }}>
              Tu vehículo,<br />
              <span className="script" style={{ fontSize: '1.15em', display: 'inline-block', transform: 'translateY(0.06em) rotate(-3deg)', transformOrigin: 'left center' }}>impecable.</span>
            </h1>
            <p style={{ fontSize: 19, color: 'var(--text-muted)', maxWidth: 480, marginTop: 28, lineHeight: 1.55 }}>
              Lavado a mano, encerado y detailing profesional en Lascano, Rocha.
              Agenda en 30 segundos por la web o por WhatsApp.
            </p>

            <div className="row gap-2" style={{ marginTop: 36, flexWrap: 'wrap' }}>
              <button className="btn btn-accent btn-lg" onClick={() => onNav('booking')}>
                Reservar turno <LCIcons.ArrowRight size={16} />
              </button>
              <button className="btn btn-ghost btn-lg" onClick={onOpenBot}>
                <LCIcons.WhatsApp size={16} /> Probar el bot
              </button>
            </div>

            {/* <div className="row gap-3" style={{ marginTop: 48, flexWrap: 'wrap' }}>
              <Stat n="4.9" label="★ en Google · 312 reseñas" />
              <Stat n="8 min" label="tiempo promedio de reserva" />
              <Stat n="2.400+" label="autos lavados este año" />
            </div> */}
          </div>

          <div className="hero-visual reveal" style={{ animationDelay: '.1s' }}>
            <div style={{
              position: 'relative', borderRadius: 32, overflow: 'hidden',
              aspectRatio: '4/5', minHeight: 440,
              background: `linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.7)), url(${LC_DATA.images.hero})`,
              backgroundSize: 'cover', backgroundPosition: 'center',
              border: '1px solid var(--border)',
            }}>
              <HeroOverlay onNav={onNav} />
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .hero-grid {
          display: grid;
          grid-template-columns: 1.1fr 1fr;
          gap: 64px;
          align-items: center;
        }
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr; gap: 40px; }
          .hero-visual { order: -1; }
        }
      `}</style>
    </section>
  );
}

function Stat({ n, label }) {
  return (
    <div>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700 }}>{n}</div>
      <div className="mono" style={{ color: 'var(--text-faint)', fontSize: 11, letterSpacing: '0.1em' }}>{label}</div>
    </div>
  );
}

function Services({ onNav }) {
  return (
    <section id="services">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">SERVICIOS · 01</span>
          <h2>De un lavado rápido<br />a un <span className="script">detailing</span> de salón.</h2>
          <p>Cinco servicios para que elijas según tu tiempo, presupuesto y las ganas de mirar tu auto y decir guau.</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
          {LC_DATA.services.map((s, i) => (
            <ServiceCard key={s.id} s={s} onClick={() => onNav('booking', { service: s.id })} delay={i * 0.05} />
          ))}
        </div>
      </div>
    </section>
  );
}

function ServiceCard({ s, onClick, delay }) {
  const [hover, setHover] = useState(false);
  return (
    <article className="card reveal" style={{
      padding: 28, position: 'relative', overflow: 'hidden',
      animationDelay: `${delay}s`,
      transition: 'transform .25s ease, border-color .25s ease, background .25s ease',
      transform: hover ? 'translateY(-4px)' : 'translateY(0)',
      borderColor: hover ? 'color-mix(in oklab, var(--accent) 40%, var(--border))' : 'var(--border)',
      cursor: 'pointer',
    }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={onClick}>
      {s.popular && (
        <div className="chip accent" style={{ position: 'absolute', top: 20, right: 20 }}>
          ⚡ Más elegido
        </div>
      )}
      <div style={{
        width: 48, height: 48, borderRadius: 12, background: 'var(--accent-soft)',
        display: 'flex', alignItems: 'center', justifyContent: 'center', color: 'var(--accent)',
        marginBottom: 24,
      }}>
        {s.id === 'exterior' && <LCIcons.Droplet size={22} />}
        {s.id === 'completo' && <LCIcons.Sparkles size={22} />}
        {s.id === 'encerado' && <LCIcons.Shine size={22} />}
        {s.id === 'detailing' && <LCIcons.Crown size={22} />}
        {s.id === 'motor' && <LCIcons.Engine size={22} />}
      </div>

      <h3 style={{ fontSize: 24, marginBottom: 8 }}>{s.name}</h3>
      <p style={{ color: 'var(--text-muted)', fontSize: 14, marginBottom: 20 }}>{s.tagline}</p>

      <ul style={{ listStyle: 'none', padding: 0, margin: 0, fontSize: 13, color: 'var(--text-muted)' }}>
        {s.includes.slice(0, 3).map((inc, i) => (
          <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, padding: '4px 0' }}>
            <LCIcons.Check size={14} style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 4 }} />
            {inc}
          </li>
        ))}
      </ul>

      <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px dashed var(--border)', display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div>
          <div className="mono" style={{ fontSize: 10, color: 'var(--text-faint)', letterSpacing: '0.1em' }}>DESDE</div>
          <div style={{ fontFamily: 'var(--font-display)', fontSize: 28, fontWeight: 700 }}>
            ${s.price.toLocaleString('es-UY')}
            <span className="mono" style={{ fontSize: 11, color: 'var(--text-faint)', fontWeight: 400, marginLeft: 4 }}>UYU</span>
          </div>
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--text-muted)' }}>~{s.duration} min</div>
      </div>
    </article>
  );
}

function HowItWorks({ onNav, onOpenBot }) {
  const steps = [
    { n: '01', title: 'Elige servicio y vehículo', desc: 'Indica qué auto tienes y qué nivel de mimo quieres darle. Precio claro al instante.', icon: 'Sparkles' },
    { n: '02', title: 'Elige día y hora', desc: 'Vemos en tiempo real los cupos. Reserva con un clic. Te llega confirmación por WhatsApp.', icon: 'Calendar' },
    { n: '03', title: 'Deja el auto y listo', desc: 'Acércate a Nicolás Corbo 1325 esq. Sarandí. Te avisamos por WhatsApp cuando esté listo. Pagas en web o en local.', icon: 'Check' },
  ];

  return (
    <section id="how" style={{ background: 'var(--surface)', borderTop: '1px solid var(--border)', borderBottom: '1px solid var(--border)' }}>
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">CÓMO FUNCIONA · 02</span>
          <h2>Tres pasos. <span className="script">Sin</span> llamadas,<br />sin esperar en la cola.</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 24 }}>
          {steps.map((step, i) => (
            <div key={i} className="reveal" style={{ position: 'relative', padding: '32px 0' }}>
              <div style={{
                fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--accent)',
                letterSpacing: '0.15em', marginBottom: 24,
              }}>{step.n} / 03</div>
              <h3 style={{ fontSize: 28, marginBottom: 16 }}>{step.title}</h3>
              <p style={{ color: 'var(--text-muted)', fontSize: 15 }}>{step.desc}</p>
              {i < steps.length - 1 && (
                <div className="step-line" style={{
                  position: 'absolute', top: 56, right: -12, width: 24, height: 1,
                  background: 'var(--border-strong)',
                }} />
              )}
            </div>
          ))}
        </div>

        <div className="row gap-2" style={{ marginTop: 40, flexWrap: 'wrap' }}>
          <button className="btn btn-accent btn-lg" onClick={() => onNav('booking')}>
            Empezar reserva <LCIcons.ArrowRight size={16} />
          </button>
          <button className="btn btn-wa btn-lg" onClick={onOpenBot}>
            <LCIcons.WhatsApp size={16} /> O reserva por WhatsApp
          </button>
        </div>
      </div>
      <style>{`
        @media (max-width: 800px) { .step-line { display: none; } }
      `}</style>
    </section>
  );
}

function Pricing() {
  const [selectedSize, setSelectedSize] = useState('chico');
  const [apiServices, setApiServices] = useState(null);
  const size = LC_DATA.sizes.find(s => s.id === selectedSize);

  useEffect(() => {
    const API = window.LC_API_BASE || 'https://curupi-api-production.up.railway.app';
    fetch(`${API}/servicios`).then(r => r.json())
      .then(data => setApiServices(Array.isArray(data) ? data : []))
      .catch(() => setApiServices([]));
  }, []);

  const apiBySlug = {};
  (apiServices || []).forEach(s => { apiBySlug[s.slug || s.id] = s; });

  return (
    <section id="pricing">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">PRECIOS · 03</span>
          <h2>Precio <span className="script">claro</span><br />según el vehículo.</h2>
          <p>Lavamos desde una moto hasta una Dodge Ram. El precio se ajusta automáticamente al elegir tu modelo.</p>
          <div style={{
            display: 'inline-flex', alignItems: 'flex-start', gap: 10, marginTop: 16,
            padding: '12px 18px', borderRadius: 12,
            background: 'color-mix(in oklab, var(--accent) 10%, transparent)',
            border: '1px solid color-mix(in oklab, var(--accent) 25%, transparent)',
          }}>
            <span style={{ fontSize: 15, flexShrink: 0, marginTop: 1 }}>⚠️</span>
            <span style={{ fontSize: 13, color: 'var(--text-muted)', lineHeight: 1.5 }}>
              <strong style={{ color: 'var(--text)' }}>El precio final puede aumentar</strong> dependiendo del estado de suciedad del vehículo. El valor indicado es el precio base del servicio.
            </span>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap', marginBottom: 32 }}>
          {LC_DATA.sizes.map(s => (
            <button key={s.id} onClick={() => setSelectedSize(s.id)}
              style={{
                padding: '14px 20px', borderRadius: 999, border: '1px solid',
                borderColor: selectedSize === s.id ? 'var(--accent)' : 'var(--border)',
                background: selectedSize === s.id ? 'var(--accent-soft)' : 'transparent',
                color: selectedSize === s.id ? 'var(--accent)' : 'var(--text)',
                fontSize: 14, fontWeight: 600, transition: 'all .2s',
              }}>
              {s.label}
            </button>
          ))}
        </div>

        <div className="mono" style={{ fontSize: 13, color: 'var(--text-muted)', marginBottom: 24 }}>
          {'>'} ejemplos: {size.examples}
        </div>

        <div className="card" style={{ overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr style={{ background: 'var(--surface-2)', borderBottom: '1px solid var(--border)' }}>
                <th style={{ textAlign: 'left', padding: '20px 28px', fontWeight: 600, fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', color: 'var(--text-muted)' }}>SERVICIO</th>
                <th className="hide-mobile" style={{ textAlign: 'left', padding: '20px 28px', fontWeight: 600, fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', color: 'var(--text-muted)' }}>DURACIÓN</th>
                <th style={{ textAlign: 'right', padding: '20px 28px', fontWeight: 600, fontSize: 12, fontFamily: 'var(--font-mono)', letterSpacing: '0.1em', color: 'var(--text-muted)' }}>PRECIO {size.label.toUpperCase()}</th>
              </tr>
            </thead>
            <tbody>
              {LC_DATA.services
                .filter(s => selectedSize === 'moto' ? s.id === 'carroceria' : true)
                .map(s => {
                  const api = apiBySlug[s.id];
                  const pe = api && api.precios ? api.precios[selectedSize] : null;
                  const precio = pe ? pe.precio : (api ? api.precio_base : s.price);
                  const dur = (pe && pe.duracion_min) ? pe.duracion_min : (api ? api.duracion_min : s.duration);
                  const durLabel = `${dur} min`;
                  const esDesde = api ? !!api.consultar : !!s.consultar;
                  return (
                    <tr key={s.id} style={{ borderBottom: '1px solid var(--border)' }}>
                      <td style={{ padding: '24px 28px' }}>
                        <div style={{ fontWeight: 600, fontSize: 17, fontFamily: 'var(--font-display)' }}>{s.name}</div>
                        <div style={{ color: 'var(--text-muted)', fontSize: 13, marginTop: 4 }}>{s.tagline}</div>
                      </td>
                      <td className="hide-mobile mono" style={{ padding: '24px 28px', color: 'var(--text-muted)', fontSize: 13 }}>{durLabel}</td>
                      <td style={{ padding: '24px 28px', textAlign: 'right', whiteSpace: 'nowrap' }}>
                        {esDesde && <span className="mono" style={{ fontSize: 10, color: 'var(--text-faint)', marginRight: 4 }}>desde</span>}
                        <span style={{ fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 700 }}>
                          ${precio.toLocaleString('es-UY')}
                        </span>
                        <span className="mono" style={{ fontSize: 10, color: 'var(--text-faint)', marginLeft: 4 }}>UYU</span>
                      </td>
                    </tr>
                  );
                })}
            </tbody>
          </table>
        </div>

      </div>
      <style>{`
        @media (max-width: 640px) { .hide-mobile { display: none; } }
      `}</style>
    </section>
  );
}

function Testimonials() {
  return (
    <section id="testimonials">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow">TESTIMONIOS · 04</span>
          <h2>312 reseñas <span className="script">reales</span><br />en Google. 4.9 ★ promedio.</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 20 }}>
          {LC_DATA.testimonials.map((t, i) => (
            <div key={i} className="card reveal" style={{ padding: 28, animationDelay: `${i * 0.05}s` }}>
              <div style={{ display: 'flex', gap: 2, marginBottom: 16 }}>
                {[...Array(t.rating)].map((_, j) => (
                  <span key={j} style={{ color: 'var(--accent)' }}>★</span>
                ))}
              </div>
              <p style={{ fontSize: 16, lineHeight: 1.5, marginBottom: 24, color: 'var(--text)' }}>"{t.text}"</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 40, height: 40, borderRadius: 999,
                  background: 'var(--surface-2)', border: '1px solid var(--border)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontWeight: 700, fontSize: 14, color: 'var(--accent)',
                }}>
                  {t.name.split(' ').map(n => n[0]).join('')}
                </div>
                <div>
                  <div style={{ fontWeight: 600, fontSize: 14 }}>{t.name}</div>
                  <div className="mono" style={{ fontSize: 11, color: 'var(--text-faint)' }}>{t.car}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function LCMap() {
  const containerRef = React.useRef(null);
  const mapRef = React.useRef(null);

  React.useEffect(() => {
    const L = window.L;
    if (!L || !containerRef.current || mapRef.current) return;

    const lat = -33.6759608;
    const lng = -54.2097438;

    const map = L.map(containerRef.current, {
      center: [lat, lng],
      zoom: 16,
      scrollWheelZoom: false,
      zoomControl: true,
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>',
      maxZoom: 19,
    }).addTo(map);

    const pinHtml = `
      <div style="
        background:#111a4d;color:#f4f1e8;
        padding:8px 14px;border-radius:999px;
        font-size:13px;font-weight:700;
        box-shadow:0 12px 32px -8px rgba(17,26,77,0.45);
        white-space:nowrap;font-family:Manrope,sans-serif;
        transform:translateX(-50%) translateY(-100%);
        position:relative;
      ">
        <span style="font-family:Yellowtail,cursive;color:#2bb0cf;font-size:18px;margin-right:4px;vertical-align:-2px;">Curupí</span>
        · Nicolás Corbo 1325
      </div>
      <div style="
        width:18px;height:18px;border-radius:50% 50% 50% 0;
        background:#111a4d;transform:rotate(-45deg) translateX(-50%);
        border:3px solid #f4f1e8;margin-left:calc(50% - 9px);margin-top:-2px;
      "></div>
    `;

    const icon = L.divIcon({
      className: '',
      html: pinHtml,
      iconAnchor: [0, 0],
    });

    L.marker([lat, lng], { icon }).addTo(map);

    mapRef.current = map;

    return () => {
      map.remove();
      mapRef.current = null;
    };
  }, []);

  return (
    <div
      ref={containerRef}
      style={{
        borderRadius: 22,
        overflow: 'hidden',
        height: '100%',
        minHeight: 420,
        border: '1px solid var(--border)',
        zIndex: 0,
      }}
    />
  );
}

function Contact({ onNav, onOpenBot }) {
  return (
    <section id="contact" style={{ background: 'var(--surface)', borderTop: '1px solid var(--border)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56 }} className="contact-grid">
          <div>
            <span className="eyebrow">ENCUENTRA NOS · 05</span>
            <h2 style={{ fontSize: 'clamp(40px, 5.5vw, 64px)', marginTop: 12 }}>En el <span className="script">centro</span><br />de Lascano.</h2>
            <p style={{ color: 'var(--text-muted)', fontSize: 17, marginTop: 20, maxWidth: 440 }}>
              Estamos en Nicolás Corbo 1325 esq. Sarandí, Lascano. Espacio cubierto para 2 autos en simultáneo.
            </p>

            <div className="col gap-2" style={{ marginTop: 32 }}>
              <div className="row gap-2" style={{ alignItems: 'flex-start' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <LCIcons.Pin size={16} />
                </div>
                <div>
                  <div style={{ fontWeight: 600 }}>{LC_DATA.brand.address}</div>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>Lascano · Rocha · Uruguay</div>
                </div>
              </div>

              <div className="row gap-2" style={{ alignItems: 'flex-start' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <LCIcons.Clock size={16} />
                </div>
                <div>
                  <div style={{ fontWeight: 600 }}>{LC_DATA.brand.hours}</div>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>Dom cerrado</div>
                </div>
              </div>

              <div className="row gap-2" style={{ alignItems: 'flex-start' }}>
                <div style={{ width: 36, height: 36, borderRadius: 10, background: 'var(--accent-soft)', color: 'var(--accent)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <LCIcons.Phone size={16} />
                </div>
                <div>
                  <div style={{ fontWeight: 600 }}>{LC_DATA.brand.phone}</div>
                  <div className="mono" style={{ fontSize: 12, color: 'var(--text-muted)', marginTop: 2 }}>WhatsApp 24h con bot</div>
                </div>
              </div>
            </div>

            <div className="row gap-2" style={{ marginTop: 32, flexWrap: 'wrap' }}>
              <button className="btn btn-accent" onClick={() => onNav('booking')}>Reservar turno <LCIcons.ArrowRight size={14} /></button>
              <button className="btn btn-wa" onClick={onOpenBot}><LCIcons.WhatsApp size={14} /> Chatear ahora</button>
            </div>
          </div>

          <div>
            <LCMap />
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; }
        }
      `}</style>
    </section>
  );
}

function ButiaLogoBrain({ size = 32 }) {
  return (
    <img src="Logo 640 Negro.png" alt="ButIÁ" style={{ height: size, width: 'auto', display: 'block' }} />
  );
}

function Footer() {
  return (
    <footer style={{ borderTop: '1px solid var(--border)', padding: '48px 0 32px' }}>
      <div className="container">
        <div className="row between" style={{ flexWrap: 'wrap', gap: 24, marginBottom: 32 }}>
          <div className="col gap-1">
            <CurupiLogo size={26} />
            <span className="mono" style={{ color: 'var(--text-faint)', fontSize: 10, letterSpacing: '0.18em', marginTop: 6 }}>
              EST. 2023 · LASCANO · URUGUAY
            </span>
          </div>
          <div className="row gap-3" style={{ flexWrap: 'wrap' }}>
            <a href="#services" style={{ fontSize: 14, color: 'var(--text-muted)' }}>Servicios</a>
            <a href="#pricing" style={{ fontSize: 14, color: 'var(--text-muted)' }}>Precios</a>
            <a href="#contact" style={{ fontSize: 14, color: 'var(--text-muted)' }}>Contacto</a>
            <a href="#" style={{ fontSize: 14, color: 'var(--text-muted)' }}>{LC_DATA.brand.instagram}</a>
          </div>
        </div>
        <div style={{ paddingTop: 24, borderTop: '1px solid var(--border)', display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16 }}>
          <div className="mono" style={{ fontSize: 11, color: 'var(--text-faint)' }}>
            © 2026 Lavadero Curupí
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
<div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: '10px 20px', borderRadius: 12, border: '1px solid var(--border)', background: 'var(--surface-2)' }}>
              <img src="Logo 640 Negro.png" alt="ButIÁ" style={{ height: 52, width: 'auto', mixBlendMode: 'multiply' }} />
              <div style={{ width: 1, height: 40, background: 'var(--border)' }} />
              <div className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', lineHeight: 1.9 }}>
                <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text)', fontFamily: 'var(--font-body)', marginBottom: 2 }}>Desarrollo y tecnología</div>
                <a href="https://butia.ai" target="_blank" rel="noopener" style={{ color: '#F97316', textDecoration: 'none' }}>butia.ai</a><br />
                <a href="mailto:hola@butia.ai" style={{ color: 'var(--text-muted)', textDecoration: 'none' }}>hola@butia.ai</a><br />
                <span>098 73 73 72</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </footer>
  );
}

function FloatingWA({ onClick }) {
  return (
    <button onClick={onClick} title="Reserva por WhatsApp" style={{
      position: 'fixed', bottom: 24, right: 24, zIndex: 40,
      width: 60, height: 60, borderRadius: 999,
      background: '#25D366', color: '#062a13', border: 'none',
      boxShadow: '0 12px 32px -6px rgba(37, 211, 102, 0.6)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      animation: 'lc-pulse 2.5s ease-in-out infinite',
    }}>
      <LCIcons.WhatsApp size={26} />
      <style>{`
        @keyframes lc-pulse {
          0%, 100% { transform: scale(1); box-shadow: 0 12px 32px -6px rgba(37, 211, 102, 0.6); }
          50% { transform: scale(1.05); box-shadow: 0 14px 38px -4px rgba(37, 211, 102, 0.8); }
        }
      `}</style>
    </button>
  );
}

function Landing({ onNav, onOpenBot }) {
  return (
    <>
      <Hero onNav={onNav} onOpenBot={onOpenBot} />
      <Services onNav={onNav} />
      <HowItWorks onNav={onNav} onOpenBot={onOpenBot} />
      <Pricing />
      {/* <Testimonials /> */}
      <Contact onNav={onNav} onOpenBot={onOpenBot} />
      <Footer />
    </>
  );
}

window.LCLanding = Landing;
window.LCNav = Nav;
window.LCFloatingWA = FloatingWA;
window.CurupiLogo = CurupiLogo;