/* global React, ICONS, useReveal */
const { useEffect, useRef, useState } = React;

/* ============================================================
   DISTRIBUIDORES — Real Peru map with pins
   Coords derived from real lat/lon (viewBox 0 0 100 130)
   x = (81.5 - lon°W) * (100/13)
   y = lat°S * (130/18.5)
============================================================ */
const CITIES = [
  { city: 'Lima',     name: 'Daniela R.',  x: 34.4, y: 84.7 },
  { city: 'Arequipa', name: 'Marco T.',    x: 76.6, y: 115.3 },
  { city: 'Cusco',    name: 'Inés V.',     x: 73.3, y: 95.1 },
  { city: 'Trujillo', name: 'Luis A.',     x: 19.0, y: 57.0 },
  { city: 'Piura',    name: 'Camila B.',   x: 6.7,  y: 36.6 },
  { city: 'Chiclayo', name: 'Renzo P.',    x: 12.8, y: 47.6 },
  { city: 'Iquitos',  name: 'Sofía C.',    x: 63.5, y: 26.4 },
  { city: 'Tacna',    name: 'Andrés M.',   x: 86.5, y: 126.6 },
  { city: 'Huancayo', name: 'Karla S.',    x: 48.4, y: 84.9 },
  { city: 'Tarapoto', name: 'Diego F.',    x: 39.4, y: 45.6 },
];

// Real Peru outline — clockwise from NW corner (Tumbes/Punta Sal)
// Path traced from real geographic boundary points
const PERU_PATH = "M 4,25 L 2,28 1,33 4,38 7,42 11,47 13,49 16,53 19,57 22,62 24,67 27,71 28,73 31,80 35,85 38,92 41,96 45,101 47,105 52,109 58,113 63,116 68,119 73,121 78,124 82,125 86,129 L 89,127 91,124 92,119 93,116 95,115 96,112 97,108 95,105 94,102 96,97 98,92 99,87 99,85 98,82 98,79 97,77 97,75 96,73 95,70 93,67 92,64 90,61 90,59 88,56 88,54 86,51 86,49 84,46 84,44 83,42 82,39 81,36 80,32 78,28 75,23 73,20 70,16 67,13 63,10 59,7 55,4 51,2 48,1 44,1 40,1 36,2 34,3 31,5 28,8 26,10 24,13 22,15 20,17 18,19 16,21 13,22 10,23 8,24 6,24 Z";

// Andes spine — sinuous interior contour
const ANDES_PATH = "M 12,40 C 18,55 25,68 35,82 C 45,95 55,105 65,110 C 75,114 82,118 86,124";

function PeruMap() {
  return (
    <svg
      className="map-bg"
      viewBox="0 0 100 130"
      preserveAspectRatio="xMidYMid meet"
      fill="none"
      stroke="currentColor"
      strokeWidth="0.6"
      strokeLinejoin="round"
      strokeLinecap="round"
      aria-hidden="true"
    >
      {/* Soft gold fill */}
      <path d={PERU_PATH} fill="rgba(245, 204, 107, 0.04)" stroke="none" />
      {/* Outline */}
      <path d={PERU_PATH} />
      {/* Andes interior */}
      <path d={ANDES_PATH} strokeWidth="0.35" strokeDasharray="0.8 1.2" opacity="0.45" />
      {/* Latitude reference (equator-ish, Lima latitude, Tropic) */}
      <line x1="0" y1="84.7" x2="100" y2="84.7" strokeWidth="0.15" strokeDasharray="0.5 1.5" opacity="0.2" />
      {/* Capital marker (Lima) — small concentric ring */}
      <circle cx="34.4" cy="84.7" r="1.6" fill="none" strokeWidth="0.3" opacity="0.5" />
    </svg>
  );
}

function Distribuidores() {
  const head = useReveal(0.2);
  const grid = useReveal(0.1);
  const [pinsIn, setPinsIn] = useState(false);
  const mapRef = useRef(null);

  useEffect(() => {
    const el = mapRef.current;
    if (!el) return;
    const obs = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        setPinsIn(true);
        obs.disconnect();
      }
    }, { threshold: 0.3 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  return (
    <section className="section" id="distribuidores">
      <div className="container">
        <div className="section-head reveal-stagger" ref={head}>
          <span className="eyebrow">— Red Kimsai</span>
          <h2 className="h-section">Llevamos Kimsai a <em className="gold-italic">todo el país</em>.</h2>
          <p>Una red de personas reales vendiendo nuestros productos en su ciudad. Conoce a los actuales — o súmate.</p>
        </div>

        <div className="dist-grid">
          {/* Stats + join card — LEFT */}
          <div className="reveal-stagger" ref={grid} style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
            <div className="dist-stats">
              {[
                { Icon: ICONS.MapPin, lbl: 'Ciudades cubiertas', val: '12' },
                { Icon: ICONS.Users, lbl: 'Distribuidores activos', val: '18' },
                { Icon: ICONS.TrendingUp, lbl: 'Margen distribuidor', val: 'hasta 40%' },
              ].map((s, i) => (
                <div className="dist-stat" key={i}>
                  <div className="icon"><s.Icon size={20} /></div>
                  <div className="lbl">{s.lbl}</div>
                  <div className="val">{s.val}</div>
                </div>
              ))}
            </div>

            <div className="join-card">
              <h4 className="font-display">Conviértete en distribuidor Kimsai</h4>
              <p>
                Stock inicial flexible, capacitación, soporte de marca y márgenes reales.
                Buscamos personas con ganas, no inversión millonaria.
              </p>
              <a
                href={`https://wa.me/51996525276?text=${encodeURIComponent('Hola, me gustaría formar parte de la red de distribuidores Kimsai')}`}
                target="_blank"
                rel="noopener noreferrer"
                className="btn btn-gold"
                style={{ alignSelf: 'flex-start', padding: '13px 22px', fontSize: 14.5 }}>
                Quiero ser distribuidor <ICONS.ArrowRight size={16} />
              </a>
            </div>
          </div>

          {/* Top productos grid — RIGHT */}
          <div className="top-products-grid" ref={mapRef}>
            {[
              { name: 'Llaveros',                 img: 'dist-img/llaveros.png',  icon: 'Key' },
              { name: 'Recuerdos personalizados', img: 'dist-img/recuerdos.png', icon: 'Bot' },
              { name: 'Lámparas',                 img: 'dist-img/lamparas.png',  icon: 'LayoutGrid' },
              { name: 'Macetas',                  img: 'dist-img/macetas.png',   icon: 'Sprout' },
            ].map((p, i) => {
              const Ic = ICONS[p.icon];
              return (
                <div className="tp-tile" key={i}>
                  {p.img ? (
                    <div className="tp-img"><img src={p.img} alt={p.name} loading="lazy" /></div>
                  ) : (
                    <div className="tp-icon"><Ic size={28} stroke={1.3} /></div>
                  )}
                  <div className="tp-name">{p.name}</div>
                </div>
              );
            })}
          </div>

        </div>
      </div>
    </section>
  );
}

/* ============================================================
   KIMSAI OS — teaser
============================================================ */
function KimsaiOS() {
  const head = useReveal(0.2);
  const [email, setEmail] = useState('');
  const [sending, setSending] = useState(false);
  const [done, setDone] = useState(false);
  const [osError, setOsError] = useState(null);

  const onSub = async (e) => {
    e.preventDefault();
    if (!email || sending) return;
    setSending(true);
    setOsError(null);
    const fd = new FormData();
    fd.append('email', email);
    fd.append('_subject', 'Interesado en el Kimsai OS');
    fd.append('_body', `Este correo está interesado en el Kimsai OS ${email}`);
    try {
      const res = await fetch('/api/contact', { method: 'POST', body: fd });
      const json = await res.json().catch(() => ({}));
      if (!res.ok || !json.success) throw new Error();
      setDone(true);
      setEmail('');
    } catch (err) {
      setOsError('No se pudo registrar tu correo. Inténtalo de nuevo más tarde.');
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="section" id="kimsai-os">
      <div className="container">
        <div className="os-card reveal-stagger" ref={head}>
          <div className="os-inner">
            <div>
              <span className="eyebrow">Próximamente · Kimsai OS</span>
              <h2 className="h-section" style={{ marginTop: 18, marginBottom: 22 }}>
                El sistema operativo para <em className="gold-italic">tu taller 3D</em>.
              </h2>
              <p style={{ color: 'var(--ink-dim)', fontSize: 17, maxWidth: 460 }}>
                Cola de impresión, inventario de filamentos, control de pedidos y cotizaciones automáticas.
                Hecho por gente que imprime, para gente que imprime.
              </p>

              {done ? (
                <div className="form-success" role="status" style={{ marginTop: 4 }}>
                  Gracias por tu interés en Kimsai OS, te enviaremos un correo cuando tengamos la beta lista
                </div>
              ) : (
                <>
                  <form className="email-capture" onSubmit={onSub}>
                    <input
                      type="email"
                      placeholder="tu@correo.com"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      aria-label="Email"
                      required
                    />
                    <button className="btn btn-gold" type="submit" disabled={sending}>
                      {sending ? 'Enviando...' : 'Avísame cuando salga'}
                    </button>
                  </form>
                  {osError && <div className="form-error" role="alert" style={{ marginTop: 12 }}>{osError}</div>}
                  <div className="submit-foot" style={{ textAlign: 'left', marginTop: 12 }}>
                    0 spam · solo te escribiremos en el lanzamiento
                  </div>
                </>
              )}
            </div>

            <div className="os-mockup">
              <div className="os-mockup-bar">
                <span className="dot" />
                <span className="dot" />
                <span className="dot" />
                <span className="title">kimsai-os · v0.4-alpha</span>
              </div>
              <div className="os-mockup-body">
                <div className="os-mock-block">
                  <div className="os-mock-header">// cola de impresión</div>
                  <div className="os-mock-row"><span>llavero_lote_v2.gcode</span><span className="pill">IMPRIMIENDO</span></div>
                  <div className="os-mock-bar"><span style={{ width: '62%' }} /></div>
                  <div className="os-mock-row"><span>maceta_geo.gcode</span><span className="pill">EN COLA</span></div>
                  <div className="os-mock-bar"><span style={{ width: '0%' }} /></div>
                  <div className="os-mock-row"><span>figura_axolotl.gcode</span><span className="pill">EN COLA</span></div>
                  <div className="os-mock-bar"><span style={{ width: '0%' }} /></div>
                  <div className="os-mock-row"><span>prototipo_004.gcode</span><span className="pill">PAUSADO</span></div>
                </div>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  <div className="os-mock-block">
                    <div className="os-mock-header">// filamento</div>
                    <div className="os-mock-num">14<span style={{ fontSize: 14, color: 'var(--ink-dim)', marginLeft: 4 }}>rollos</span></div>
                    <div className="os-mock-stat-lbl">PLA · PETG · ABS</div>
                  </div>
                  <div className="os-mock-block">
                    <div className="os-mock-header">// pedidos hoy</div>
                    <div className="os-mock-num">07</div>
                    <div className="os-mock-stat-lbl">3 listos · 4 en proceso</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FINAL CTA
============================================================ */
function FinalCTA() {
  const ref = useReveal(0.3);
  return (
    <section className="final-cta">
      <div className="inner reveal-stagger" ref={ref}>
        <span className="eyebrow dim" style={{ marginBottom: 24, display: 'inline-block' }}>— Última parada</span>
        <h2 className="h-final">¿Listo para imprimir <em className="gold-italic">tu idea</em>?</h2>
        <p>Cotización gratis. Respuesta en horas. Cero compromiso.</p>
        <a href="#personaliza" className="btn btn-gold pulse">
          Cotizar mi pieza ahora <ICONS.ArrowRight size={18} />
        </a>
      </div>
    </section>
  );
}

/* ============================================================
   FOOTER
============================================================ */
function Footer() {
  const socials = [
    { Icon: ICONS.Instagram, label: 'Instagram', href: 'https://www.instagram.com/kimsai3d/' },
    { Icon: ICONS.Tiktok, label: 'TikTok', href: 'https://www.tiktok.com/@kimsai3d' },
    {
      Icon: ICONS.Whatsapp,
      label: 'WhatsApp',
      href: `https://wa.me/51996525276?text=${encodeURIComponent('Hola, vengo desde la página de Kimsai')}`,
    },
    { Icon: ICONS.Facebook, label: 'Facebook', href: 'https://www.facebook.com/kimsai3d' },
  ];
  const cols = [
    { title: 'Empresa', items: [{ label: 'Sobre nosotros', href: '#top' }, { label: 'Contacto', href: '#personaliza' }] },
    { title: 'Productos', items: [{ label: 'Catálogo', href: '#productos' }, { label: 'Personalización', href: '#personaliza' }, { label: 'Materiales', href: '#productos' }] },
    { title: 'Distribuidores', items: [{ label: 'Únete', href: '#distribuidores' }] },
    { title: 'Kimsai OS', items: [{ label: 'Lista de espera', href: '#kimsai-os' }, { label: 'Beta', href: '#kimsai-os' }, { label: 'Updates', href: '#kimsai-os' }] },
  ];
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-logo">
            <img src="assets/kimsai-logo-gold.svg" alt="" />
            <span className="word"><span style={{ color: 'var(--gold-400)' }}>Kim</span>sai</span>
          </div>
          <div className="footer-socials">
            {socials.map((s, i) => (
              <a href={s.href} target="_blank" rel="noopener noreferrer" key={i} className="social-btn glass" aria-label={s.label}>
                <s.Icon size={18} />
              </a>
            ))}
          </div>
        </div>

        <div className="footer-grid">
          {cols.map((c, i) => (
            <div className="footer-col" key={i}>
              <h5>{c.title}</h5>
              <ul>
                {c.items.map((it, j) => <li key={j}><a href={it.href}>{it.label}</a></li>)}
              </ul>
            </div>
          ))}
        </div>

        <div className="footer-bot">
          <span>© 2026 Kimsai 3D · Piura, Perú</span>
          <span>Hecho con filamento y café</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Distribuidores, KimsaiOS, FinalCTA, Footer });