/* ============================================
   Public Site Components
   Loaded after React + Lucide + data.js
   ============================================ */

const { useState, useEffect, useRef, useMemo } = React;
const L = window.lucide;

/* Lucide React icon helper */
function I({ name, size = 18, strokeWidth = 1.8, className = "", style }) {
  const Icon = L[name];
  if (!Icon) return null;
  return <Icon size={size} strokeWidth={strokeWidth} className={className} style={style} />;
}

/* ============================================
   Header
   ============================================ */
function Header({ active, onNav, onAdminClick }) {
  const [menuOpen, setMenuOpen] = useState(false);
  const links = [
    { id: "inicio",     label: "Inicio" },
    { id: "nosotros",   label: "Nosotros" },
    { id: "servicios",  label: "Servicios" },
    { id: "galeria",    label: "Galería" },
    { id: "contacto",   label: "Contacto" },
  ];

  return (
    <>
      <header className="site-header">
        <div className="site-header__inner">
          <a className="brand" href="#inicio" onClick={(e) => { e.preventDefault(); onNav("inicio"); }}>
            <BrandMark />
            <div>
              <div className="brand__name">MSA <span>Moro</span></div>
            </div>
          </a>
          <nav className="nav">
            {links.map(l => (
              <a key={l.id} href={`#${l.id}`}
                 className={`nav__link ${active === l.id ? "is-active" : ""}`}
                 onClick={(e) => { e.preventDefault(); onNav(l.id); }}>
                {l.label}
              </a>
            ))}
          </nav>
          <div className="header-cta">
            <button className="btn btn-secondary btn-sm" onClick={onAdminClick}>
              <I name="LockKeyhole" size={15} /> Panel
            </button>
            <button className="menu-toggle" onClick={() => setMenuOpen(true)} aria-label="Menú">
              <I name="Menu" size={22} />
            </button>
          </div>
        </div>
      </header>

      <div className={`mob-drawer ${menuOpen ? "open" : ""}`}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
          <div className="brand"><BrandMark /><div className="brand__name">MSA <span>Moro</span></div></div>
          <button className="menu-toggle" onClick={() => setMenuOpen(false)}><I name="X" size={22} /></button>
        </div>
        {links.map(l => (
          <a key={l.id} href={`#${l.id}`} className="mob-drawer__link"
             onClick={(e) => { e.preventDefault(); setMenuOpen(false); onNav(l.id); }}>
            {l.label}
          </a>
        ))}
        <button className="btn btn-secondary" style={{ marginTop: 18 }} onClick={() => { setMenuOpen(false); onAdminClick(); }}>
          <I name="LockKeyhole" size={15} /> Acceso panel
        </button>
      </div>
    </>
  );
}

function BrandMark() {
  return (
    <span className="brand__mark">
      {/* Alfalfa trefoil */}
      <svg width="22" height="22" viewBox="0 0 24 24" fill="none">
        <path d="M12 13c-2-2-5-2-7 0 0-3 2-5 5-5 0-2 1-4 2-5 1 1 2 3 2 5 3 0 5 2 5 5-2-2-5-2-7 0z" fill="currentColor"/>
        <path d="M12 13v8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"/>
      </svg>
    </span>
  );
}

/* ============================================
   Hero
   ============================================ */
function Hero({ onNav }) {
  return (
    <section id="inicio" className="hero" data-screen-label="Hero">
      <div className="hero__bg"></div>
      <div className="hero__sun"></div>
      <div className="hero__bales"></div>
      <div className="hero__inner">
        <div className="hero__eyebrow">
          <span className="dot"></span> Sacanta, Córdoba · Desde 2003
        </div>
        <h1 className="h-hero">
          Alfalfa de calidad,<br/>
          del campo a <em>tu galpón</em>.
        </h1>
        <p className="hero__sub">
          Más de 20 años produciendo el mejor forraje del centro del país.
          Siembra, corte y enfardado integrados — trazabilidad de lote en cada fardo.
        </p>
        <div className="hero__cta">
          <button className="btn btn-primary btn-lg" onClick={() => onNav("servicios")} style={{ background: "#fff", color: "var(--green-900)" }}>
            Conocer nuestros servicios <I name="ArrowRight" size={17} />
          </button>
          <button className="btn btn-secondary btn-lg" onClick={() => onNav("contacto")}>
            Solicitar cotización
          </button>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Counters
   ============================================ */
function AnimatedNumber({ value, suffix = "", duration = 1400 }) {
  const [n, setN] = useState(0);
  const ref = useRef();
  useEffect(() => {
    const obs = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting) {
        const start = performance.now();
        const tick = (t) => {
          const p = Math.min(1, (t - start) / duration);
          const eased = 1 - Math.pow(1 - p, 3);
          setN(Math.round(value * eased));
          if (p < 1) requestAnimationFrame(tick);
        };
        requestAnimationFrame(tick);
        obs.disconnect();
      }
    }, { threshold: 0.4 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, [value, duration]);
  return <span ref={ref}>{n.toLocaleString("es-AR")}{suffix}</span>;
}

function Counters() {
  return (
    <section className="counters">
      <div className="counters__grid">
        <div className="counter">
          <div className="counter__value"><AnimatedNumber value={20} /><sup>+</sup></div>
          <div className="counter__label">Años de experiencia</div>
        </div>
        <div className="counter">
          <div className="counter__value"><AnimatedNumber value={1200} /></div>
          <div className="counter__label">Hectáreas en producción</div>
        </div>
        <div className="counter">
          <div className="counter__value"><AnimatedNumber value={50000} /><sup>+</sup></div>
          <div className="counter__label">Fardos anuales</div>
        </div>
        <div className="counter">
          <div className="counter__value"><AnimatedNumber value={300} /><sup>+</sup></div>
          <div className="counter__label">Clientes satisfechos</div>
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Nosotros
   ============================================ */
function Nosotros() {
  return (
    <section id="nosotros" className="section section--soft" data-screen-label="Nosotros">
      <div className="container">
        <div className="about">
          <div>
            <div className="eyebrow">Quiénes somos</div>
            <h2 className="h-section" style={{ marginTop: 14, marginBottom: 20 }}>
              Empresa familiar, raíces<br/>en el corazón de Córdoba.
            </h2>
            <p className="lede">
              Fundada en 2003 por la familia Bertoldi, MSA Moro Servicios Agropecuarios creció desde un primer
              campo de 40 hectáreas hasta convertirse en uno de los proveedores de forraje de
              referencia del centro del país. Hoy producimos en 1.200 hectáreas certificadas
              entre Sacanta, Las Varillas y Brinkmann.
            </p>
            <p className="lede" style={{ marginTop: 14 }}>
              Hacemos todo el ciclo: desde la siembra y el control del cultivo hasta el corte,
              el enfardado y la logística al tambo o cabaña. Nada se terceriza — por eso
              podemos garantizar la calidad y la trazabilidad de cada fardo.
            </p>

            <div className="about__values">
              <ValueTile icon="ShieldCheck" title="Calidad" desc="Análisis de proteína y humedad por lote." />
              <ValueTile icon="Handshake"    title="Compromiso" desc="Entregas en fecha, sin sorpresas." />
              <ValueTile icon="QrCode"       title="Trazabilidad" desc="De qué lote viene cada fardo." />
              <ValueTile icon="Truck"        title="Servicio" desc="Logística propia hasta tu galpón." />
            </div>
          </div>
          <div className="about__image" aria-hidden="true"></div>
        </div>

        <div className="timeline">
          {window.DATA.HITOS.map((h, i) => (
            <div className="t-step" key={h.año}>
              <div className="t-step__dot">{i + 1}</div>
              <div>
                <div className="t-step__year">{h.año}</div>
                <div className="t-step__label">{h.label}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ValueTile({ icon, title, desc }) {
  return (
    <div className="value-tile">
      <div className="value-tile__icon"><I name={icon} size={18} /></div>
      <h4>{title}</h4>
      <p>{desc}</p>
    </div>
  );
}

/* ============================================
   Servicios
   ============================================ */
function Servicios() {
  const cards = [
    { icon: "Sprout",      title: "Siembra de alfalfa", desc: "Variedades GR8 a GR10 según destino, con análisis previo de suelo.", tags: ["Siembra directa", "Inoculación", "Asesoramiento"] },
    { icon: "Scissors",    title: "Corte y rastrillado", desc: "Tiempo óptimo de corte para maximizar proteína y minimizar pérdidas.", tags: ["3 cortes/año", "Hilerado uniforme"] },
    { icon: "Package",     title: "Enfardado",  desc: "Prismáticos de 25kg, redondos de 350kg y megafardos de 500kg.", tags: ["Chico", "Redondo", "Megafardo"] },
    { icon: "Truck",       title: "Logística y entrega", desc: "Flota propia con cobertura en Córdoba, Santa Fe y norte de Buenos Aires.", tags: ["Entrega rápida", "Carga propia"] },
  ];
  const maquinas = [
    { icon: "Tractor", nombre: "John Deere 6110 / 7220", desc: "2 tractores principales" },
    { icon: "Cog",     nombre: "Mainero 5887", desc: "Rotoenfardadora" },
    { icon: "Disc3",   nombre: "Massey Ferguson 2270XD", desc: "Megaenfardadora" },
    { icon: "Square",  nombre: "Mainero R12 · Kuhn FC", desc: "Rastrillo y segadora" },
  ];
  return (
    <section id="servicios" className="section" data-screen-label="Servicios">
      <div className="container">
        <div className="section-head">
          <div className="section-head__title">
            <div className="eyebrow">Servicios</div>
            <h2 className="h-section" style={{ marginTop: 14 }}>Hacemos todo el ciclo —<br/>desde la semilla hasta tu galpón.</h2>
          </div>
          <div className="section-head__aside">
            Trabajos a terceros disponibles para campos vecinos: cortamos, enfardamos y sembramos
            con la misma maquinaria con la que producimos para nosotros.
          </div>
        </div>

        <div className="services-grid">
          {cards.map(c => (
            <div className="svc-card" key={c.title}>
              <div className="svc-card__icon"><I name={c.icon} size={20} /></div>
              <div className="svc-card__title">{c.title}</div>
              <div className="svc-card__desc">{c.desc}</div>
              <div className="svc-card__tags">
                {c.tags.map(t => <span className="svc-card__tag" key={t}>{t}</span>)}
              </div>
            </div>
          ))}
        </div>

        <div className="maq-grid">
          {maquinas.map(m => (
            <div className="maq-card" key={m.nombre}>
              <div className="maq-card__icon"><I name={m.icon} size={20} /></div>
              <div>
                <h5>{m.nombre}</h5>
                <p>{m.desc}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================
   Catálogo de fardos
   ============================================ */
function Catalogo() {
  const [tipo, setTipo] = useState("todos");
  const [corte, setCorte] = useState("todos");
  const [stock, setStock] = useState("todos");

  const filtered = window.DATA.PRODUCTS.filter(p => {
    if (tipo !== "todos" && p.tipo !== tipo) return false;
    if (corte !== "todos" && p.corte !== corte) return false;
    if (stock === "disponible" && p.stock <= 0) return false;
    if (stock === "bajo" && p.stock > 100) return false;
    return true;
  });

  return (
    <section id="fardos" className="section section--soft" data-screen-label="Fardos">
      <div className="container">
        <div className="section-head">
          <div className="section-head__title">
            <div className="eyebrow">Catálogo</div>
            <h2 className="h-section" style={{ marginTop: 14 }}>Fardos disponibles —<br/>stock actualizado al día.</h2>
          </div>
          <div className="section-head__aside">
            Todos los precios están en pesos argentinos, sin IVA. Consultá por descuentos por volumen
            o por programas mensuales para tambos.
          </div>
        </div>

        <div className="filter-bar">
          <div className="filter-group">
            <span className="filter-group__label">Tipo</span>
            {[["todos","Todos"],["chico","Prismático chico"],["redondo","Redondo"],["mega","Megafardo"]].map(([k,l]) => (
              <button key={k} className={`chip ${tipo===k?"is-active":""}`} onClick={() => setTipo(k)}>{l}</button>
            ))}
          </div>
          <div className="filter-group">
            <span className="filter-group__label">Corte</span>
            {[["todos","Todos"],["1°","1°"],["2°","2°"],["3°","3°"],["4°","4°"]].map(([k,l]) => (
              <button key={k} className={`chip ${corte===k?"is-active":""}`} onClick={() => setCorte(k)}>{l}</button>
            ))}
          </div>
          <div className="filter-group">
            <span className="filter-group__label">Disponibilidad</span>
            {[["todos","Todos"],["disponible","Con stock"],["bajo","Stock bajo"]].map(([k,l]) => (
              <button key={k} className={`chip ${stock===k?"is-active":""}`} onClick={() => setStock(k)}>{l}</button>
            ))}
          </div>
          <div style={{ marginLeft: "auto", fontSize: 13, color: "var(--ink-mute)" }}>
            <strong style={{ color: "var(--ink)" }}>{filtered.length}</strong> productos
          </div>
        </div>

        <div className="products-grid">
          {filtered.map(p => <ProductCard key={p.id} product={p} />)}
        </div>
        {filtered.length === 0 && (
          <div style={{ padding: "60px 20px", textAlign: "center", color: "var(--ink-mute)" }}>
            No hay productos con esos filtros. Probá ajustando la selección.
          </div>
        )}
      </div>
    </section>
  );
}

function ProductCard({ product }) {
  const lowStock = product.stock < 100;
  const mediaClass = product.tipo === "chico" ? "product-card__media--small" : product.tipo === "redondo" ? "product-card__media--round" : "product-card__media--mega";
  return (
    <div className="product-card">
      <div className={`product-card__media ${mediaClass}`}>
        <div className="product-card__badges">
          <span className="p-badge">{product.corte} corte</span>
          {product.calidad === "Premium" && <span className="p-badge p-badge--gold">Premium</span>}
        </div>
        <div className="product-card__shape">{product.peso}</div>
      </div>
      <div className="product-card__body">
        <div className="product-card__title">{product.nombre}</div>
        <div className="product-card__specs">
          <div><div className="spec__label">Peso</div><div className="spec__value">{product.peso}</div></div>
          <div><div className="spec__label">Proteína</div><div className="spec__value">{product.proteina}</div></div>
          <div><div className="spec__label">Origen</div><div className="spec__value" style={{ fontSize: 12 }}>{product.origen.replace("Lote ", "")}</div></div>
        </div>
        <div className="product-card__foot">
          <div>
            <div className="product-card__price">{window.DATA.fmtARS(product.precio)}<small>por unidad</small></div>
          </div>
          <div className={`product-card__stock ${lowStock ? "low" : ""}`}>
            <span className="stock-dot"></span>
            {window.DATA.fmtNum(product.stock)} u.
          </div>
        </div>
        <a className="btn btn-wa btn-sm" style={{ justifyContent: "center" }} href="https://wa.me/5493564000000" target="_blank">
          <I name="MessageCircle" size={15} /> Consultar por WhatsApp
        </a>
      </div>
    </div>
  );
}

Object.assign(window, {
  I, Header, Hero, Counters, Nosotros, Servicios, Catalogo, BrandMark, AnimatedNumber,
});