/* ============================================================
   AGROTHECA — Landing app
   ============================================================ */
const { useState: uS, useEffect: uE, useRef: uR } = React;

const SECTIONS = window.AGRO_SECTIONS;

const EXPLORE = SECTIONS.map((s) => ({ icon: s.icon, label: s.name }));
const NAV = [
  { label: 'Secciones', href: '#biblioteca' },
  { label: 'El Lab', href: '#lab' },
  { label: 'Servicios', href: '#servicios' },
  { label: 'Acerca', href: '#acerca' },
  { label: 'Contacto', href: '#contacto' },
];

/* Servicios — consultoría & capacitación (your specialty) */
const SERVICES = [
  { name: 'Consultoría en innovación AgTech & IA', icon: 'terminal',
    desc: 'Acompañamiento en proyectos de innovación para aplicar herramientas digitales e inteligencia artificial a tus procesos agrícolas.' },
  { name: 'Análisis de datos', icon: 'database',
    desc: 'Convierte los datos de tu finca o negocio en información clara para decidir mejor: rendimiento, clima, suelo y más.' },
  { name: 'Tu página web agro', icon: 'globe',
    desc: 'Creación de tu propia página web para tu negocio agrícola — a la medida, moderna y lista para crecer.' },
  { name: 'Capacitación a equipos', icon: 'sprout',
    desc: 'Formaciones prácticas para que tu equipo adopte tecnología y datos en el día a día del campo.' },
];

/* El Lab — tools/utilities. live: tool (modal) or link (page); rest "Próximamente" */
const LAB_TOOLS = [
  { name: 'Simulador de Invernadero', kicker: 'Simulador 3D', icon: 'globe', link: 'simulador-invernadero.html',
    desc: 'Explora en 3D cómo el VPD afecta a un cultivo de tomate en un invernadero de alta tecnología.' },
  { name: 'Simulador El Niño / La Niña', kicker: 'Simulador 3D', icon: 'cloud', link: 'simulador-enso.html',
    desc: 'Mueve el Pacífico en un globo interactivo y observa cómo El Niño y La Niña alteran lluvias y temperaturas.' },
  { name: 'Calculadora de Siembra', kicker: 'Calculadora', icon: 'sprout', tool: 'siembra',
    desc: 'Densidad, distancia entre plantas y semilla necesaria por hectárea.' },
  { name: 'Dosis de Fertilizante', kicker: 'Calculadora', icon: 'leaf', tool: 'fertilizante',
    desc: 'Cuánto aplicar según cultivo, área y análisis de suelo.' },
  { name: 'Conversor de Unidades', kicker: 'Conversor', icon: 'database', tool: 'conversor',
    desc: 'Superficie, masa, rendimiento, temperatura y volumen del agro, al instante.' },
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroStyle": "cinematico",
  "accent": "#C27D38",
  "greenTheme": "Bosque",
  "headingFont": "serif",
  "autoplay": true
} /*EDITMODE-END*/;

/* Green characters live in js/theme.js (window.GREEN_THEMES) so they apply
   site-wide — landing + article — and persist across navigation. */
const GREEN_THEMES = window.GREEN_THEMES || {
  Bosque: { deep: '#1E3A2D' }, Oliva: { deep: '#2C3B22' }, Esmeralda: { deep: '#123F2D' },
  Pino: { deep: '#163530' }, Salvia: { deep: '#38463A' }
};

/* ---------------- HERO ---------------- */
function Hero({ t, showBg, menuOpen, setMenuOpen }) {
  const style = t.heroStyle;
  const titleRef = useParallax(14);
  const ADJ = ['oculta', 'digital', 'implacable'];
  const headline = style === 'editorial' ?
  <span className="hero-h display">
      <span className="hero-lead">La ciencia</span>
      <RotatingWord words={ADJ} className="serif-italic shimmer rot-em rot-block" />
      <span className="hero-tail serif-italic">del agro.</span>
    </span> :
  <h1 className="hero-h mega">
      <span className="hero-lead">La ciencia</span>
      <RotatingWord words={ADJ} className="rot-mega rot-block" />
      <span className="hero-tail">del agro.</span>
    </h1>;

  const Intro =
  <div className="hero-left" ref={titleRef}>
      <Reveal className="hero-idx" delay={1}>
        <span className="mono" style={{ fontSize: 12 }}>01</span><span className="ln" />
        <span className="mono" style={{ fontSize: 10, opacity: .7 }}>El archivo</span>
      </Reveal>
      {headline}
      <Reveal as="p" className="hero-desc" delay={2}>
        AGROTECHA nació para entender el agro de una manera diferente, respondiendo las
        preguntas más curiosas de este mundo.
      </Reveal>
      <Reveal delay={3} style={{ textAlign: 'left' }}>
        <a href="#biblioteca" className="cta">
          <span className="cta-bg" /><Ico name="leaf" size={18} /> Explorar Archivos
        </a>
      </Reveal>
    </div>;

  const Theo = null;

  return (
    <header className={`hero hero--${style}`}>
      {style === 'cinematico' &&
      <HeroMedia show={showBg} />}
      {style === 'dividido' &&
      <div className="hero-split-img"><img src="assets/hero.jpg" alt="" /></div>}

      <div className="topbar">
        <div className="topbar-bg" aria-hidden="true" />
        <BrandCorner dark={false} />
        <nav className="nav">{NAV.map((n) => <a key={n.label} href={n.href}>{n.label}</a>)}</nav>
        <button className="menu-btn" onClick={() => setMenuOpen((o) => !o)} aria-label="Menú">
          <span /><span />
        </button>
      </div>
      {menuOpen &&
      <div className="mobile-menu">
          {NAV.map((n) => <a key={n.label} href={n.href} onClick={() => setMenuOpen(false)}>{n.label}</a>)}
        </div>}

      <div className="subnav">
        <div className="col-mid">Ciencia agrícola <em>para</em> mentes curiosas — un archivo vivo de
          biología, datos y campo.</div>
      </div>

      <div className="hero-body">
        {Intro}
        {style === 'editorial' &&
        <Reveal className="hero-frame" delay={2}>
            <img src="assets/ch2.jpg" alt="" />
            <span className="cap">Metraje · germinación (ejemplo)</span>
          </Reveal>}
      </div>

      <div className="scroll-ind">
        <span className="dot"><span className="bars"><i /><i /></span></span>
        <span className="mono" style={{ fontSize: 10, textAlign: "justify" }}>Desliza para explorar</span>
      </div>
    </header>);
}

/* ---------------- SECTION 2 — Explore ---------------- */
function Explore({ t }) {
  const serif = t.headingFont === 'serif';
  return (
    <section className="sec sec-explore" id="explorar">
      <Reveal className="section-label">
        <span className="label">[ 02 ]</span>
        <span className="label" style={{ color: 'var(--ink)', fontWeight: 600 }}>El Ecosistema</span>
      </Reveal>
      <Reveal as="h2" className={`big ${serif ? 'serif' : 'sans'}`} delay={1}>
        {serif ?
        <>La ciencia <em>invisible</em> detrás de cada cosecha.</> :
        <>La ciencia invisible detrás de cada cosecha.</>}
      </Reveal>
      <Reveal as="p" className="explore-sub" delay={2}>
        Cinco secciones temáticas. Dentro de cada una, artículos increíbles para los curiosos del agro.
      </Reveal>
      <Reveal className="pills" delay={2}>
        {EXPLORE.map((e, i) =>
        <a key={i} href={`seccion.html?s=${SECTIONS[i].slug}`} className="pill"><Ico name={e.icon} size={15} />{e.label}</a>
        )}
      </Reveal>
    </section>);
}

/* ---------------- SECTION 3 — Library (dark) ---------------- */
const countLabel = (n) => n === 0 ? 'Próximamente' : n === 1 ? '1 artículo' : `${n} artículos`;

function Library({ t, active, setActive }) {
  const [leafRef, leafIn] = useInView({ threshold: 0.01, rootMargin: '0px 0px -10% 0px' });
  const leafParallax = useParallax(22);
  const setLeaf = React.useCallback((node) => { leafRef.current = node; leafParallax.current = node; }, []);
  const serif = t.headingFont === 'serif';
  const s = SECTIONS[active];
  return (
    <section className="sec lib" id="biblioteca">
      <img ref={setLeaf} src="assets/lib-motif.png" alt="" className={`lib-leaf ${leafIn ? 'in' : ''}`} />

      <div className="lib-head lib-intro">
        <Reveal className="lib-eyebrow">
          <span className="ln" />
          <span className="mono">Sección 03 · Has llegado a la biblioteca</span>
          <span className="ln" />
        </Reveal>
        <Reveal as="h2" className={`lib-title ${serif ? 'serif' : ''}`} delay={1}>
          <span className="agt-la">La</span>{' '}
          <span className="agt" aria-label="AGROTECHA">
            {'AGROTECHA'.split('').map((ch, i) =>
              <span key={i} className="agt-l" style={{ animationDelay: `${i * 0.09}s` }}>{ch}</span>
            )}
          </span>
        </Reveal>
        <Reveal as="p" className="lib-intro-p" delay={2}>
          El corazón de todo. Aquí es donde puedes explorar nuestros artículos, notas e
          historias del agro, ordenados por temas. Cada publicación parte de información real y
          verificada, contada de forma sencilla, visual y fácil de disfrutar — para que aprendas
          sin que nadie te abrume con tecnicismos.
        </Reveal>
        <Reveal className="lib-qualities" delay={3}>
          <span><b>Veraz</b> · Información real y verificada</span>
          <span className="sep" />
          <span><b>Visual</b> · Que se ve y se siente</span>
          <span className="sep" />
          <span><b>Curiosa</b> · Preguntas antes que respuestas</span>
        </Reveal>
      </div>

      <div className="lib-panel">
        {/* LEFT — the active SECTION and its articles */}
        <div className="lib-col-l">
          <div className="sec-cover">
            <OrganicTransitionImage className="frame" src={s.img} alt={s.name} />
            <span className="sec-count mono">{countLabel(s.articles.length)}</span>
            <span className="sec-ico"><Ico name={s.icon} size={18} /></span>
          </div>
          <div className="sec-info">
            <span className="mono sec-kicker">Sección {String(active + 1).padStart(2, '0')} · {s.kicker}</span>
            <a href={`seccion.html?s=${s.slug}`} className="sec-name-link"><h3 className="sec-name">{s.name}</h3></a>
            <p className="sec-blurb">{s.blurb}</p>
          </div>
          <div className="sec-articles" key={active}>
            {s.articles.length === 0 ? (
              <div className="sec-empty">
                <span className="sec-empty-tag mono">Próximamente</span>
                <p>Estamos preparando los artículos de esta sección. Vuelve pronto.</p>
              </div>
            ) : (<>
              {s.articles.map((a, i) =>
              <a key={i} href={a.link || `seccion.html?s=${s.slug}`} className="art-row">
                  <span className="r mono">{String(i + 1).padStart(2, '0')}</span>
                  <span className="t">{a.title}</span>
                  <span className="rt mono">{a.read}</span>
                  <span className="arr"><Ico name="arrowUpRight" size={17} sw={1.4} /></span>
                </a>
              )}
              <a href={`seccion.html?s=${s.slug}`} className="sec-viewall">
                Ver la sección completa <Ico name="arrowRight" size={16} />
              </a>
            </>)}
          </div>
        </div>

        {/* RIGHT — the section index */}
        <div className="lib-col-r">
          <div className="top">
            <span className="mono" style={{ fontSize: 10 }}>Elige una sección</span>
            <span className="mono" style={{ fontSize: 10, color: 'var(--gold)' }}>
              {String(SECTIONS.length).padStart(2, '0')} secciones
            </span>
          </div>
          {SECTIONS.map((c, i) =>
          <a key={i} href={`seccion.html?s=${c.slug}`} className={`chap ${i === active ? 'active' : ''}`}
          onMouseEnter={() => setActive(i)}>
              <span style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
                <span className="mono" style={{ fontSize: 11, opacity: .6 }}>{String(i + 1).padStart(2, '0')}</span>
                <span className="nm">{c.name}</span>
              </span>
              <span style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
                <span className="meta">{countLabel(c.articles.length)}</span>
                <span className="arr"><Ico name="arrowUpRight" size={22} sw={1.2} /></span>
              </span>
            </a>
          )}
        </div>
      </div>

      <div className="lib-foot">
        <span className="mono" style={{ fontSize: 10 }}>Agricultural science for curious minds</span>
        <span className="mono" style={{ fontSize: 10 }}>AGROTECHA · MMXXVI</span>
      </div>
    </section>);
}

/* ---------------- SECTION 4 — El Lab (light) ---------------- */
function Lab({ t, onOpen }) {
  const serif = t.headingFont === 'serif';
  return (
    <section className="sec sec-lab" id="lab">
      <div className="lab-head">
        <Reveal className="section-label">
          <span className="label">[ 04 ]</span>
          <span className="label" style={{ color: 'var(--ink)', fontWeight: 600 }}>El Lab</span>
        </Reveal>
        <Reveal as="h2" className={`lab-h ${serif ? 'serif' : ''}`} delay={1}>
          Herramientas para llevar <br />la ciencia <em>al campo</em>.
        </Reveal>
        <Reveal as="p" className="lab-sub" delay={2}>
          Calculadoras, conversores y utilidades prácticas para tus decisiones diarias.
          Algunas ya están listas — el resto, muy pronto.
        </Reveal>
      </div>

      <div className="lab-grid">
        {LAB_TOOLS.map((tool, i) => {
          const isLink = !!tool.link;
          const isModal = !!tool.tool;
          const live = isLink || isModal;
          const as = isLink ? 'a' : (isModal ? 'button' : 'article');
          const extra = isLink
            ? { href: tool.link }
            : (isModal ? { type: 'button', onClick: () => onOpen(tool.tool) } : {});
          return (
            <Reveal as={as} key={i}
              className={`tool-card ${live ? 'tool-card--live' : ''}`} delay={(i % 3) + 1} {...extra}>
              <div className="tool-top">
                <span className="tool-ico"><Ico name={tool.icon} size={22} /></span>
                <span className={live ? 'tool-live' : 'tool-soon'}>{live ? 'Disponible' : 'Próximamente'}</span>
              </div>
              <div className="tool-body">
                <span className="tool-kicker mono">{tool.kicker}</span>
                <h3 className="tool-name">{tool.name}</h3>
                <p className="tool-desc">{tool.desc}</p>
              </div>
              <div className="tool-foot">
                <span className="mono">{String(i + 1).padStart(2, '0')}</span>
                <span className="tool-cta">{isLink ? 'Abrir' : (isModal ? 'Usar' : 'Avísame')} <Ico name="arrowRight" size={15} /></span>
              </div>
            </Reveal>
          );
        })}
        <Reveal as="article" className="tool-card tool-card--ghost" delay={1}>
          <div className="ghost-inner">
            <span className="tool-ico ghost"><Ico name="plus" size={22} /></span>
            <h3 className="tool-name">¿Tienes una idea?</h3>
            <p className="tool-desc">Cuéntanos qué herramienta te gustaría ver en El Lab.</p>
            <a href="#contacto" className="cta ghost" style={{ marginTop: 4 }}>
              <span className="cta-bg" /> Sugerir herramienta
            </a>
          </div>
        </Reveal>
      </div>
    </section>);
}

/* ---------------- Tool modal + calculators ---------------- */
function TkField({ label, suffix, value, onChange, step, min, hint, placeholder }) {
  return (
    <label className="tk-field">
      <span className="tk-flabel">{label}{hint && <small>{hint}</small>}</span>
      <span className="tk-input-wrap">
        <input type="number" inputMode="decimal" value={value} step={step || 'any'}
          min={min != null ? min : 0} placeholder={placeholder || '0'}
          onChange={(e) => onChange(e.target.value)} />
        {suffix && <span className="tk-suffix">{suffix}</span>}
      </span>
    </label>
  );
}
function TkResult({ k, v, unit, big }) {
  return (
    <div className={`tk-res ${big ? 'big' : ''}`}>
      <span className="tk-res-k">{k}</span>
      <span className="tk-res-v">{v}<small>{unit}</small></span>
    </div>
  );
}
const fmt = (n, d = 0) => (isFinite(n) && n >= 0)
  ? n.toLocaleString('es', { maximumFractionDigits: d, minimumFractionDigits: 0 }) : '—';

function SiembraCalc() {
  const [area, setArea] = uS('1');
  const [rowS, setRowS] = uS('75');
  const [plantS, setPlantS] = uS('20');
  const [seeds, setSeeds] = uS('1');
  const [germ, setGerm] = uS('90');
  const [pms, setPms] = uS('300');

  const A = +area || 0, R = (+rowS || 0) / 100, P = (+plantS || 0) / 100;
  const S = +seeds || 1, G = (+germ || 100) / 100, PMS = +pms || 0;
  const plantasHa = (R > 0 && P > 0) ? (10000 / (R * P)) * S : 0;
  const poblacion = plantasHa * A;
  const semillasHa = G > 0 ? plantasHa / G : 0;
  const kgHa = semillasHa * PMS / 1e6;
  const kgTotal = kgHa * A;

  return (
    <>
      <div className="tk-grid">
        <TkField label="Área a sembrar" suffix="ha" value={area} onChange={setArea} />
        <TkField label="Distancia entre hileras" suffix="cm" value={rowS} onChange={setRowS} />
        <TkField label="Distancia entre plantas" suffix="cm" value={plantS} onChange={setPlantS} />
        <TkField label="Semillas por golpe" suffix="ud" value={seeds} onChange={setSeeds} min={1} />
        <TkField label="Germinación" suffix="%" value={germ} onChange={setGerm} hint="del lote" />
        <TkField label="Peso de 1000 semillas" suffix="g" value={pms} onChange={setPms} hint="PMS" />
      </div>
      <div className="tk-results">
        <TkResult k="Plantas por hectárea" v={fmt(plantasHa)} unit="pl/ha" big />
        <TkResult k="Población total" v={fmt(poblacion)} unit="plantas" />
        <TkResult k="Semilla por hectárea" v={fmt(kgHa, 1)} unit="kg/ha" />
        <TkResult k="Semilla total" v={fmt(kgTotal, 1)} unit="kg" big />
      </div>
      <p className="tk-note">Estimación orientativa. La densidad real depende de la calidad del lote, el método de siembra y las condiciones del suelo.</p>
    </>
  );
}

function FertilizanteCalc() {
  const [nutr, setNutr] = uS('120');
  const [conc, setConc] = uS('46');
  const [area, setArea] = uS('1');
  const [bulto, setBulto] = uS('50');

  const N = +nutr || 0, C = (+conc || 0) / 100, A = +area || 0, B = +bulto || 0;
  const dosisHa = C > 0 ? N / C : 0;
  const total = dosisHa * A;
  const bultos = B > 0 ? total / B : 0;

  return (
    <>
      <div className="tk-grid">
        <TkField label="Nutriente requerido" suffix="kg/ha" value={nutr} onChange={setNutr} hint="ej. N, P₂O₅, K₂O" />
        <TkField label="Concentración del fertilizante" suffix="%" value={conc} onChange={setConc} hint="ej. urea 46% N" />
        <TkField label="Área a fertilizar" suffix="ha" value={area} onChange={setArea} />
        <TkField label="Peso por bulto" suffix="kg" value={bulto} onChange={setBulto} />
      </div>
      <div className="tk-results">
        <TkResult k="Dosis por hectárea" v={fmt(dosisHa, 1)} unit="kg/ha" big />
        <TkResult k="Fertilizante total" v={fmt(total, 1)} unit="kg" big />
        <TkResult k="Bultos necesarios" v={fmt(bultos, 1)} unit={`× ${fmt(B)} kg`} />
      </div>
      <p className="tk-note">Cálculo del fertilizante para aportar el nutriente indicado. Ajusta según tu análisis de suelo y la recomendación agronómica del cultivo.</p>
    </>
  );
}

const CONV_CATS = {
  Superficie: { unit: 'ha', factors: { 'ha': 1, 'm²': 10000, 'acre': 2.471053, 'manzana': 1.43, 'fanega': 1.59 } },
  Masa: { unit: 'kg', factors: { 'kg': 1, 't (ton)': 0.001, 'lb': 2.204623, 'qq (quintal)': 0.01, 'arroba': 0.08 } },
  Rendimiento: { unit: 'kg/ha', factors: { 'kg/ha': 1, 't/ha': 0.001, 'lb/acre': 0.892179, 'qq/ha': 0.01 } },
  Volumen: { unit: 'L', factors: { 'L': 1, 'm³': 0.001, 'galón US': 0.264172, 'galón UK': 0.219969 } },
};
function ConversorCalc() {
  const [cat, setCat] = uS('Superficie');
  const [amount, setAmount] = uS('1');
  const [from, setFrom] = uS('ha');
  // temperatura is special-cased
  const isTemp = cat === 'Temperatura';
  const C = CONV_CATS[cat];

  uE(() => {
    if (isTemp) { setFrom('°C'); return; }
    setFrom(Object.keys(CONV_CATS[cat].factors)[0]);
  }, [cat]);

  const A = parseFloat(amount);
  let rows = [];
  if (isTemp) {
    const c = from === '°C' ? A : from === '°F' ? (A - 32) * 5 / 9 : A - 273.15;
    rows = [['°C', c], ['°F', c * 9 / 5 + 32], ['K', c + 273.15]];
  } else {
    const base = isFinite(A) ? A / C.factors[from] : NaN; // to base unit
    rows = Object.keys(C.factors).map((u) => [u, base * C.factors[u]]);
  }
  const cats = [...Object.keys(CONV_CATS), 'Temperatura'];
  const units = isTemp ? ['°C', '°F', 'K'] : Object.keys(C.factors);

  return (
    <>
      <div className="conv-cats">
        {cats.map((k) => (
          <button key={k} type="button" className={`conv-cat ${cat === k ? 'on' : ''}`} onClick={() => setCat(k)}>{k}</button>
        ))}
      </div>
      <div className="conv-input">
        <TkField label="Cantidad" value={amount} onChange={setAmount} />
        <label className="tk-field">
          <span className="tk-flabel">Unidad de origen</span>
          <span className="tk-input-wrap">
            <select className="conv-select" value={from} onChange={(e) => setFrom(e.target.value)}>
              {units.map((u) => <option key={u} value={u}>{u}</option>)}
            </select>
          </span>
        </label>
      </div>
      <div className="conv-results">
        {rows.filter(([u]) => u !== from).map(([u, v]) => (
          <div key={u} className="conv-row">
            <span className="conv-u mono">{u}</span>
            <span className="conv-v">{fmt(v, 3)}</span>
          </div>
        ))}
      </div>
      <p className="tk-note">Conversiones aproximadas de uso común en el agro. La «manzana» y la «fanega» varían por país: aquí se usan valores promedio de referencia.</p>
    </>
  );
}

const TOOLS_META = {
  siembra: { title: 'Calculadora de Siembra', icon: 'sprout', Comp: SiembraCalc },
  fertilizante: { title: 'Dosis de Fertilizante', icon: 'leaf', Comp: FertilizanteCalc },
  conversor: { title: 'Conversor de Unidades', icon: 'database', Comp: ConversorCalc },
};

function ToolModal({ slug, onClose }) {
  uE(() => {
    if (!slug) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [slug]);
  if (!slug) return null;
  const meta = TOOLS_META[slug];
  const Comp = meta.Comp;
  return (
    <div className="tk-overlay" onMouseDown={onClose}>
      <div className="tk-modal" onMouseDown={(e) => e.stopPropagation()} role="dialog" aria-modal="true">
        <div className="tk-head">
          <span className="tk-head-ico"><Ico name={meta.icon} size={22} /></span>
          <div className="tk-head-txt">
            <span className="tk-head-kicker mono">El Lab · Calculadora</span>
            <h3 className="tk-head-title">{meta.title}</h3>
          </div>
          <button className="tk-close" onClick={onClose} aria-label="Cerrar"><Ico name="plus" size={20} /></button>
        </div>
        <div className="tk-body"><Comp /></div>
      </div>
    </div>
  );
}

/* ---------------- FEATURED — Último artículo (after Hero) ---------------- */
function Featured({ t }) {
  const serif = t.headingFont === 'serif';
  // pick the most-recently-added real article (last section that has one with a link)
  const FEATURED = {
    sec: SECTIONS.find((s) => s.slug === 'expedientes-agricolas'),
    desc: 'De un sotobosque africano a fundar bolsas de valores y mover ferrocarriles: el expediente de la pequeña cereza que despertó a la humanidad.',
  };
  const sec = FEATURED.sec;
  const art = sec.articles[0];
  const href = art.link || `seccion.html?s=${sec.slug}`;
  return (
    <section className="sec sec-featured" id="ultimo">
      <Reveal className="ft-eyebrow section-label">
        <span className="label">[ ★ ]</span>
        <span className="label" style={{ color: 'var(--ink)', fontWeight: 600 }}>Último artículo</span>
      </Reveal>
      <div className="ft-wrap">
        <Reveal className="ft-media">
          <a href={href}><img src={art.img} alt="" /></a>
          <span className="ft-badge mono">Recién publicado</span>
        </Reveal>
        <div className="ft-body">
          <Reveal className="ft-sec mono" delay={1}>
            <span className="ft-sec-ico"><Ico name={sec.icon} size={15} /></span>
            {sec.name} · {art.kicker}
          </Reveal>
          <Reveal as="h2" className={`ft-title ${serif ? 'serif' : ''}`} delay={2}>
            <a href={href}>{art.title}</a>
          </Reveal>
          <Reveal as="p" className="ft-desc" delay={3}>
            {FEATURED.desc}
          </Reveal>
          <Reveal className="ft-foot" delay={4}>
            <a href={href} className="cta">
              <span className="cta-bg" /><Ico name="arrowRight" size={17} /> Leer el artículo
            </a>
            <span className="ft-read mono">{art.read} de lectura</span>
          </Reveal>
        </div>
      </div>
    </section>);
}

/* ---------------- ACERCA DE (brand + author) ---------------- */
function About({ t }) {
  const serif = t.headingFont === 'serif';
  return (
    <section className="sec sec-about" id="acerca">
      <div className="ab-wrap">
        <div className="ab-left">
          <Reveal className="section-label">
            <span className="label">[ 06 ]</span>
            <span className="label" style={{ color: 'var(--ink)', fontWeight: 600 }}>Acerca de</span>
          </Reveal>
          <Reveal as="h2" className={`ab-h ${serif ? 'serif' : ''}`} delay={1}>
            Entender el agro <em>de otra manera</em>.
          </Reveal>
        </div>
        <div className="ab-right">
          <Reveal as="p" className="ab-p" delay={1}>
            AGROTECHA nació para responder las preguntas más curiosas del mundo agrícola y contarlas
            de forma clara, visual y disfrutable. Reunimos biología, datos y campo en un archivo vivo
            de artículos, notas e historias — siempre a partir de <b>información real y verificada</b>.
          </Reveal>
          <Reveal as="p" className="ab-p" delay={2}>
            Creemos que la ciencia detrás de cada cosecha merece contarse bien: sin tecnicismos
            innecesarios, con rigor y con respeto por la curiosidad de quien lee.
          </Reveal>
          <Reveal className="ab-author" delay={3}>
            <span className="ab-avatar"><Ico name="leaf" size={20} /></span>
            <span className="ab-author-txt">
              <b>Ing. Agrónomo Alberth Ugalde Solano</b>
              <small>Fundador · AgTech &amp; IA para la agricultura</small>
            </span>
          </Reveal>
        </div>
      </div>
    </section>);
}

/* ---------------- NEWSLETTER + CONTACTO (final) ---------------- */
function Newsletter({ t }) {
  const serif = t.headingFont === 'serif';
  const [sent, setSent] = uS(false);
  const onSubmit = (e) => { e.preventDefault(); setSent(true); };
  return (
    <section className="sec sec-news" id="contacto">
      <div className="nl-wrap">
        <Reveal className="nl-top">
          <span className="label" style={{ color: 'var(--gold)' }}>[ Mantente cerca ]</span>
          <h2 className={`nl-h ${serif ? 'serif' : ''}`}>
            No te pierdas <em>el próximo expediente</em>.
          </h2>
          <p className="nl-sub">Recibe cada nuevo artículo de AGROTECHA en tu correo. Sin spam, solo ciencia del agro.</p>
        </Reveal>

        <Reveal className="nl-form-wrap" delay={1}>
          {sent ? (
            <div className="nl-done">
              <span className="nl-check"><Ico name="leaf" size={20} /></span>
              ¡Gracias! Te avisaremos cuando publiquemos algo nuevo.
            </div>
          ) : (
            <form className="nl-form" onSubmit={onSubmit}>
              <input type="email" required placeholder="tu@correo.com" className="nl-input" aria-label="Tu correo" />
              <button type="submit" className="cta on-dark nl-btn">
                <span className="cta-bg" /> Suscribirme
              </button>
            </form>
          )}
        </Reveal>

        <Reveal className="nl-contact" delay={2}>
          <span className="nl-or mono">o escríbenos directo</span>
          <div className="nl-links">
            <a href="mailto:hola@agrotecha.com" className="nl-link"><Ico name="globe" size={16} /> hola@agrotecha.com</a>
            <a href="#" className="nl-link"><Ico name="arrowUpRight" size={16} /> Instagram</a>
            <a href="#" className="nl-link"><Ico name="arrowUpRight" size={16} /> LinkedIn</a>
          </div>
        </Reveal>

        <div className="nl-foot">
          <span className="mono">Agricultural science for curious minds</span>
          <span className="mono">AGROTECHA · MMXXVI</span>
        </div>
      </div>
    </section>);
}

/* ---------------- SECTION 5 — Servicios (dark, your specialty) ---------------- */
function Services({ t }) {
  const serif = t.headingFont === 'serif';
  return (
    <section className="sec sec-services" id="servicios">
      <div className="srv-wrap">
        <div className="srv-left">
          <Reveal className="section-label">
            <span className="label" style={{ color: 'var(--gold)' }}>[ 05 ]</span>
            <span className="label" style={{ color: 'var(--on-dark)', fontWeight: 600 }}>Servicios</span>
          </Reveal>
          <Reveal as="h2" className={`srv-h ${serif ? 'serif' : ''}`} delay={1}>
            ¿Quieres llevar la <em>IA</em> y lo digital a tu campo?
          </Reveal>
          <Reveal as="p" className="srv-p" delay={2}>
            Más allá de los artículos, AGROTECHA ofrece <b>consultoría y capacitación</b> en la
            aplicación de herramientas digitales e inteligencia artificial para la agricultura.
            Te ayudamos a tomar mejores decisiones con tecnología y datos.
          </Reveal>
          <Reveal delay={3}>
            <a href="#contacto" className="cta on-dark">
              <span className="cta-bg" /><Ico name="leaf" size={18} /> Conversemos
            </a>
          </Reveal>
        </div>

        <div className="srv-right">
          {SERVICES.map((sv, i) => (
            <Reveal as="article" key={i} className="srv-card" delay={i + 1}>
              <span className="srv-ico"><Ico name={sv.icon} size={22} /></span>
              <div>
                <h3 className="srv-name">{sv.name}</h3>
                <p className="srv-desc">{sv.desc}</p>
              </div>
              <span className="srv-arrow"><Ico name="arrowUpRight" size={20} sw={1.4} /></span>
            </Reveal>
          ))}
        </div>
      </div>
    </section>);
}

/* ---------------- Green theme picker (visible swatches) ---------------- */
function GreenPicker({ value, onChange }) {
  return (
    <div style={{ padding: '4px 2px 2px' }}>
      <div style={{ fontSize: 11, fontWeight: 600, opacity: .55, margin: '0 0 8px', letterSpacing: '.02em' }}>VERDE</div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 7 }}>
        {Object.keys(GREEN_THEMES).map((name) => {
          const on = value === name;
          return (
            <button key={name} type="button" onClick={() => onChange(name)} title={name}
            style={{
              display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 5,
              border: 0, background: 'transparent', cursor: 'pointer', padding: 0
            }}>
              <span style={{
                width: '100%', height: 30, borderRadius: 7,
                background: (GREEN_THEMES[name] || {}).deep || '#1E3A2D',
                boxShadow: on ? '0 0 0 2px #11150f, 0 0 0 3.5px ' + ((GREEN_THEMES[name] || {}).deep || '#1E3A2D') :
                'inset 0 0 0 1px rgba(0,0,0,.18)',
                transition: 'box-shadow .15s'
              }} />
              <span style={{ fontSize: 9.5, fontWeight: on ? 700 : 500, opacity: on ? 1 : .6 }}>{name}</span>
            </button>);

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

}

/* ---------------- Tweaks ---------------- */
function Panel({ t, setTweak }) {
  return (
    <TweaksPanel>
      <TweakSection label="Hero" />
      <TweakRadio label="Estilo" value={t.heroStyle}
      options={['cinematico', 'editorial', 'dividido']}
      onChange={(v) => setTweak('heroStyle', v)} />
      <TweakSection label="Tipografía" />
      <TweakRadio label="Títulos" value={t.headingFont}
      options={['serif', 'sans']} onChange={(v) => setTweak('headingFont', v)} />
      <TweakSection label="Color" />
      <TweakColor label="Acento" value={t.accent}
      options={['#C27D38', '#6F8F4E', '#3B5848', '#A9692E']}
      onChange={(v) => setTweak('accent', v)} />
      <GreenPicker value={t.greenTheme} onChange={(v) => setTweak('greenTheme', v)} />
      <TweakSection label="Secciones" />
      <TweakToggle label="Auto-rotar" value={t.autoplay}
      onChange={(v) => setTweak('autoplay', v)} />
    </TweaksPanel>);
}

/* ---------------- App ---------------- */
function App() {
  const defaults = { ...TWEAK_DEFAULTS, greenTheme: window.getGreenTheme && window.getGreenTheme() || TWEAK_DEFAULTS.greenTheme };
  const [t, setTweak] = useTweaks(defaults);
  const [showBg, setShowBg] = uS(false);
  const [menuOpen, setMenuOpen] = uS(false);
  const [active, setActive] = uS(2);
  const [toolOpen, setToolOpen] = uS(null);

  uE(() => {const id = setTimeout(() => setShowBg(true), 1200);return () => clearTimeout(id);}, []);
  uE(() => {document.documentElement.style.setProperty('--gold', t.accent);}, [t.accent]);
  uE(() => {
    // apply + persist site-wide (article page reads the same localStorage key)
    if (window.setGreenTheme) window.setGreenTheme(t.greenTheme);
  }, [t.greenTheme]);
  uE(() => {
    if (!t.autoplay) return;
    const id = setInterval(() => setActive((p) => (p + 1) % SECTIONS.length), 4500);
    return () => clearInterval(id);
  }, [t.autoplay]);

  // Section-level entrance transitions (fade + rise as each scrolls into view).
  uE(() => {
    const secs = Array.from(document.querySelectorAll('main > section.sec, #root > section.sec, section.sec'));
    const targets = secs.filter((s) => !s.classList.contains('sec-featured') || true);
    targets.forEach((s) => s.classList.add('sec-anim'));
    const reveal = (s) => s.classList.add('sec-shown');
    let io = null;
    const check = () => {
      const vh = window.innerHeight || document.documentElement.clientHeight;
      targets.forEach((s) => {
        if (s.classList.contains('sec-shown')) return;
        const r = s.getBoundingClientRect();
        if (r.top < vh * 0.85 && r.bottom > 0) reveal(s);
      });
    };
    if (typeof IntersectionObserver !== 'undefined') {
      io = new IntersectionObserver((entries) => {
        entries.forEach((e) => { if (e.isIntersecting) reveal(e.target); });
      }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
      targets.forEach((s) => io.observe(s));
    }
    window.addEventListener('scroll', check, { passive: true });
    window.addEventListener('resize', check);
    requestAnimationFrame(check);
    const t1 = setTimeout(check, 400);
    return () => {
      if (io) io.disconnect();
      window.removeEventListener('scroll', check);
      window.removeEventListener('resize', check);
      clearTimeout(t1);
    };
  }, []);

  return (
    <>
      <Hero t={t} showBg={showBg} menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
      <Featured t={t} />
      <Explore t={t} />
      <Library t={t} active={active} setActive={setActive} />
      <Lab t={t} onOpen={setToolOpen} />
      <Services t={t} />
      <About t={t} />
      <Newsletter t={t} />
      <ToolModal slug={toolOpen} onClose={() => setToolOpen(null)} />
      <Panel t={t} setTweak={setTweak} />
    </>);
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);