// CAMCO v03 — single-page React app
const { useState, useEffect, useRef } = React;

// ---------- WhatsApp icon (outlined: green stroke, transparent fill) ----------
function WhatsAppIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" xmlns="http://www.w3.org/2000/svg" style={{ flexShrink: 0 }}>
      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/>
      <path d="M8.2 9.6c.1-.3.3-.5.5-.5h.6c.2 0 .3.1.4.3l.6 1.4c.1.2.1.4 0 .6l-.4.5c.5 1 1.3 1.8 2.3 2.3l.5-.4c.2-.1.4-.1.6 0l1.4.6c.2.1.3.2.3.4v.6c0 .3-.2.5-.5.6-1 .3-2.1.1-3-.5l-2-2c-.6-.9-.8-2-.5-3z"/>
    </svg>
  );
}

function PhoneLine({ ph }) {
  if (!ph) return null;
  const wa = ph.replace(/[^\d]/g, "");
  return (
    <a href={`https://wa.me/${wa}`} target="_blank" rel="noopener noreferrer" className="ph-link" title="Abrir WhatsApp">
      <WhatsAppIcon size={13} /><span>{ph}</span>
    </a>
  );
}

// ---------- Logo / lynx mark ----------
// Real lynx mark (PNG with transparency). Variant: 'green' (default, on light)
// or 'bone' (off-white, on dark).
function LynxMark({ size = 28, variant = "green", style = {} }) {
  const src = variant === "bone" ? "assets/brand/lynx-bone_sin texto.PNG" : "assets/brand/lynx - sin texto.png";
  return (
    <img
      src={src}
      alt=""
      aria-hidden="true"
      style={{
        width: size,
        height: "auto",
        display: "block",
        ...style,
      }}
    />
  );
}

// Lynx + CAMCO wordmark stacked (used in footer)
function LynxLockup({ size = 80, variant = "green", style = {} }) {
  const src = variant === "bone" ? "assets/brand/lynx-wordmark-bone.png" : "assets/brand/lynx-wordmark.png";
  return (
    <img
      src={src}
      alt="CAMCO"
      style={{ width: size, height: "auto", display: "block", ...style }}
    />
  );
}

function BrandLockup({ inverted = false }) {
  // Inline lynx + wordmark for the nav. Wordmark is text (Cormorant) so it
  // tracks fonts; the mark is the real lynx PNG.
  const variant = inverted ? "bone" : "green";
  const color = inverted ? "var(--bone)" : "var(--ink)";
  return (
    <div className="nav-brand" style={{ color }}>
      <LynxMark size={32} variant={variant} />
      <span style={{ fontFamily: "var(--serif)", fontSize: 22, letterSpacing: "0.18em", fontWeight: 500 }}>
        CAMCO
      </span>
    </div>
  );
}

// ---------- Title splitter ----------
// Splits a title on the first comma or period and italicizes the second half (or first if mode='first').
function SplitTitle({ text, mode = "second", sep = "auto" }) {
  let parts;
  if (sep === "auto") {
    // Try comma first, then period
    if (text.includes(",")) {
      const i = text.indexOf(",");
      parts = [text.slice(0, i + 1), text.slice(i + 1).trim()];
    } else if (text.lastIndexOf(".") > 0 && text.lastIndexOf(".") < text.length - 1) {
      const i = text.indexOf(".");
      parts = [text.slice(0, i + 1), text.slice(i + 1).trim()];
    } else {
      // No suitable split — italicize last 3 words
      const words = text.split(" ");
      const split = Math.max(1, words.length - 3);
      parts = [words.slice(0, split).join(" ") + " ", words.slice(split).join(" ")];
    }
  }
  if (mode === "first") {
    return (<><em>{parts[0]}</em><br />{parts[1]}</>);
  }
  return (<>{parts[0]}<br /><em>{parts[1]}</em></>);
}

// ---------- Reveal on scroll ----------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12, rootMargin: "0px 0px -60px 0px" }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ---------- Nav ----------
function Nav({ lang, setLang, t }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <a href="#top" style={{ display: "flex", alignItems: "center", gap: 12 }}>
        <LynxMark size={32} variant={scrolled ? "green" : "bone"} />
        <span className="nav-wordmark" style={{ fontFamily: "var(--serif)", fontSize: 20, letterSpacing: "0.18em", fontWeight: 500 }}>
          CAMCO
        </span>
      </a>
      <div className="nav-links">
        <a href="#soluciones">{t.nav.soluciones}</a>
        <a href="#alcance">{t.nav.alcance}</a>
        <a href="#portafolio">{t.nav.portafolio}</a>
        <a href="#mills">{t.nav.mills}</a>
        <a href="#contacto">{t.nav.contacto}</a>
      </div>
      <div className="nav-right">
        <div className="lang-switch">
          {["es", "en", "pt"].map((code) => (
            <button
              key={code}
              className={lang === code ? "active" : ""}
              onClick={() => setLang(code)}
            >
              {code}
            </button>
          ))}
        </div>
        <a href="#contacto" className="nav-cta">
          {t.nav.cta} →
        </a>
      </div>
    </nav>
  );
}

// ---------- Hero ----------
function Hero({ t }) {
  return (
    <section className="hero" id="top">
      {/* Lynx watermark */}
      <div className="hero-watermark" aria-hidden>
        <LynxMark size="100%" variant="bone" />
      </div>
      <div className="hero-inner">
        <div className="hero-eyebrow eyebrow">{t.hero.eyebrow}</div>
        <h1>
          {t.hero.titleA}<br />
          <span className="latam">{t.hero.titleB}.</span>
        </h1>
        <p className="hero-sub">{t.hero.sub}</p>
        <div className="hero-cta-row">
          <a href="#contacto" className="btn btn-primary">{t.hero.cta1} →</a>
          <a href="#soluciones" className="btn btn-ghost">{t.hero.cta2}</a>
        </div>
      </div>
      <div className="hero-meta">
        <span>EST. 1993 — BUENOS AIRES · SANTIAGO · MONTEVIDEO · LIMA · BOGOTÁ · CDMX · SÃO PAULO</span>
        <div className="hero-meta-stats">
          <span><b>+30</b>YRS</span>
          <span><b>+100</b>CUSTOMERS</span>
          <span><b>+20</b>SUPPLIERS</span>
          <span><b>+10</b>COUNTRIES</span>
        </div>
      </div>
    </section>
  );
}

// ---------- Soluciones ----------
function Soluciones({ t }) {
  return (
    <section className="soluciones" id="soluciones">
      <div className="container reveal">
        <div className="eyebrow">{t.soluciones.eyebrow}</div>
        <h2 className="section-title"><SplitTitle text={t.soluciones.title} mode="first" /></h2>
        <p className="lede">{t.soluciones.lede}</p>
        <div className="sol-grid">
          {t.soluciones.steps.map((s) => (
            <div key={s.n} className="sol-step">
              <div className="sol-num">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Alcance ----------
function Alcance({ t }) {
  return (
    <section className="alcance" id="alcance">
      <div className="container reveal">
        <div className="eyebrow">{t.alcance.eyebrow}</div>
        <h2 className="section-title"><SplitTitle text={t.alcance.title} /></h2>
        <div className="stats-row">
          {t.alcance.stats.map((s, i) => (
            <div key={i} className="stat">
              <div className="stat-num">{s.n}</div>
              <div className="stat-label">{s.l}</div>
            </div>
          ))}
        </div>
        <div className="map-wrap">
          <div className="map-legend">
            <div><span className="swatch sell"></span>{t.alcance.legendSell}</div>
            <div><span className="swatch supply" style={{ background: "transparent", border: "1.5px dashed var(--green-bright)" }}></span>{t.alcance.legendSupply}</div>
          </div>
          <window.WorldMap />
        </div>
      </div>
    </section>
  );
}

// ---------- Portafolio ----------
function Portafolio({ t }) {
  return (
    <section className="portafolio" id="portafolio">
      <div className="container reveal">
        <div className="eyebrow">{t.portafolio.eyebrow}</div>
        <h2 className="section-title"><SplitTitle text={t.portafolio.title} /></h2>
        <p className="lede">{t.portafolio.lede}</p>
        <div className="fam-grid">
          {t.portafolio.families.map((f) => (
            <div key={f.letter} className="fam">
              <div className="fam-header">
                <div className="fam-letter">{f.letter}</div>
                <div className="fam-meta">
                  <div className="eyebrow" style={{ paddingLeft: 0 }}>{f.eyebrow}</div>
                  <h3>{f.t}</h3>
                </div>
              </div>
              <p className="fam-headline">{f.h}</p>
              <p className="fam-desc">{f.d}</p>
              <div className="fam-grades">
                {f.grades.map((g) => (
                  <span key={g} className="fam-grade">{g}</span>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Mills (Suppliers) ----------
function Mills({ t }) {
  // 8 cells; some real logos, rest placeholders to convey "+20"
  const cells = [
    { type: "logo", src: "assets/suppliers/02_Billerud.png", name: "BillerudKorsnäs" },
    { type: "logo", src: "assets/suppliers/01_UPM.png", name: "UPM" },
    { type: "logo", src: "assets/suppliers/walki_logo_PNG_transparent_background.png", name: "Walki" },
    { type: "logo", src: "assets/suppliers/klingele.png", name: "Klingele" },
    { type: "logo", src: "assets/suppliers/burgo.png", name: "Burgo Group" },
    { type: "logo", src: "assets/suppliers/KINDEAL.webp", name: "Kindeal Paper" },
    { type: "logo", src: "assets/suppliers/April.webp", name: "APRIL" },
    { type: "ph", name: "+20 " + t.nav.mills.toLowerCase() },
  ];
  return (
    <section className="mills" id="mills">
      <div className="container reveal">
        <div className="eyebrow">{t.mills.eyebrow}</div>
        <h2 className="section-title"><SplitTitle text={t.mills.title} /></h2>
        <p className="lede">{t.mills.lede}</p>

        <div className="mills-stats">
          {t.mills.stats.map((s, i) => (
            <div key={i} className="stat">
              <div className="stat-num">{s.n}</div>
              <div className="stat-label">{s.l}</div>
            </div>
          ))}
        </div>

        <div className="mills-logos">
          {cells.map((c, i) => (
            <div key={i} className={"mill-cell" + (c.type === "ph" ? " placeholder" : "")}>
              {c.type === "logo" ? (
                <img src={c.src} alt={c.name} />
              ) : (
                <span>{c.name}</span>
              )}
            </div>
          ))}
        </div>

        <div className="become">
          <div>
            <div className="eyebrow">{t.mills.become.eyebrow}</div>
            <h3>{t.mills.become.title}</h3>
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 28, justifyContent: "space-between" }}>
            <p>{t.mills.become.body}</p>
            <a href="#contacto" className="btn btn-primary become-cta">{t.mills.become.cta} →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Clientes (marquee) ----------
function Clientes({ t }) {
  const logos = [
    "assets/customers/cmpc.png",
    "assets/customers/arcangel-maggio.png",
    "assets/customers/lapiz-lopez.png",
    "assets/customers/metrocolor.png",
    "assets/customers/bo-packaging.png",
    "assets/customers/puntapel.png",
    "assets/customers/urupaper.png",
    "assets/customers/calafox.png",
    "assets/customers/anselmo-morvillo.png",
    "assets/customers/dipisa.png",
    "assets/customers/envases-caraes.png",
    "assets/customers/maquinor.png",
    "assets/customers/a-impresores.png",
    "assets/customers/el-comercio.png",
    "assets/customers/lanacion.png",
    "assets/customers/logo1.png",
    "assets/customers/logo2.png",
    "assets/customers/logo4.png",
    "assets/customers/logo5.png",
    "assets/customers/logo6.png",
    "assets/customers/logo7.png",
    "assets/customers/logo8.png",
    "assets/customers/logo10.png",
    "assets/customers/logo11.png",
  ];
  return (
    <section className="clientes" id="clientes">
      <div className="clientes-head">
        <div className="eyebrow" style={{ justifyContent: "center" }}>{t.clientes.eyebrow}</div>
        <h2>{t.clientes.title}</h2>
      </div>
      <div className="marquee">
        <div className="marquee-track">
          {[...logos, ...logos].map((src, i) => (
            <img key={i} src={src} alt="" />
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Historia ----------
function Historia({ t }) {
  return (
    <section className="historia" id="historia">
      <div className="container reveal">
        <div className="eyebrow">{t.historia.eyebrow}</div>
        <h2 className="section-title">
          <em>+30 años</em>{t.historia.title.split("años").slice(1).join("años")}
        </h2>
        <ul className="tl" style={{ listStyle: "none", padding: 0, paddingLeft: 32 }}>
          {t.historia.items.map((it, i) => (
            <li key={i} className={"tl-item" + (it.emph ? " emph" : "")}>
              <div className="tl-year">{it.y}</div>
              <div className="tl-text">{it.t}</div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

// ---------- Equipo ----------
function Equipo({ t }) {
  const photos = ["andres", "gabriel", "alexis", "jan"];
  return (
    <section className="equipo" id="equipo">
      <div className="container reveal">
        <div className="eyebrow">{t.equipo.eyebrow}</div>
        <h2 className="section-title"><SplitTitle text={t.equipo.title} /></h2>
        <div className="equipo-grid">
          {t.equipo.members.map((m, i) => (
            <div key={i} className="member">
              <div className={"member-photo" + (m.memoriam ? " memoriam" : "")}>
                <img src={`assets/team/${photos[i]}.png`} alt={m.n} />
              </div>
              <h3 className="member-name">{m.n}</h3>
              <div className="member-role">{m.r}</div>
              <p className="member-bio">{m.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Contact form (Resend via /api/contact) ----------
function ContactForm({ t }) {
  const [values, setValues] = useState({ name: "", company: "", country: "", email: "", message: "", website: "" });
  const [status, setStatus] = useState("idle"); // idle | sending | success | error
  const [errorMsg, setErrorMsg] = useState("");

  const setField = (k) => (e) => setValues((v) => ({ ...v, [k]: e.target.value }));

  const onSubmit = async (e) => {
    e.preventDefault();
    if (status === "sending") return;
    setStatus("sending");
    setErrorMsg("");
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(values),
      });
      const data = await res.json().catch(() => ({}));
      if (!res.ok) {
        setStatus("error");
        setErrorMsg(data.error || t.form.statusError);
        return;
      }
      setStatus("success");
      setValues({ name: "", company: "", country: "", email: "", message: "", website: "" });
    } catch (err) {
      setStatus("error");
      setErrorMsg(t.form.statusError);
    }
  };

  return (
    <form className="form-card" onSubmit={onSubmit} noValidate>
      <h3>{t.eyebrow}</h3>
      <div className="form-row">
        <div className="field"><label>{t.form.name}</label><input type="text" value={values.name} onChange={setField("name")} required /></div>
        <div className="field"><label>{t.form.company}</label><input type="text" value={values.company} onChange={setField("company")} /></div>
      </div>
      <div className="form-row">
        <div className="field"><label>{t.form.country}</label><input type="text" value={values.country} onChange={setField("country")} /></div>
        <div className="field"><label>{t.form.email}</label><input type="email" value={values.email} onChange={setField("email")} required /></div>
      </div>
      <div className="field">
        <label>{t.form.message}</label>
        <textarea rows="3" value={values.message} onChange={setField("message")} required></textarea>
      </div>
      <input
        type="text"
        name="website"
        tabIndex="-1"
        autoComplete="off"
        value={values.website}
        onChange={setField("website")}
        style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }}
        aria-hidden="true"
      />
      <div className="form-foot">
        <button type="submit" className="btn btn-primary" disabled={status === "sending"}>
          {status === "sending" ? (t.form.sending || "...") : <>{t.form.send} →</>}
        </button>
        <div className="form-privacy">{t.form.privacy}</div>
      </div>
      {status === "success" && <div className="form-status form-status-ok">{t.form.statusOk}</div>}
      {status === "error" && <div className="form-status form-status-err">{errorMsg || t.form.statusError}</div>}
    </form>
  );
}

// ---------- Contacto ----------
function Contacto({ t }) {
  return (
    <section className="contacto" id="contacto">
      <div className="container reveal">
        <div className="eyebrow">{t.contacto.eyebrow}</div>
        <h2 className="section-title"><SplitTitle text={t.contacto.title} /></h2>
        <p className="lede">{t.contacto.lede}</p>
        <div className="contacto-grid">
          <div className="sales-card">
            <a
              className="wa-card"
              href={`https://wa.me/${t.contacto.sales.waNumber.replace(/[^\d]/g, "")}`}
              target="_blank"
              rel="noreferrer"
            >
              <div className="wa-card-top">
                <svg className="wa-icon" width="28" height="28" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                  <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-.9 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.6-.9-2.2-.2-.6-.5-.5-.7-.5-.2 0-.4 0-.6 0-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.7 1.2 2.9.2.3 2 3.1 4.9 4.3.7.3 1.2.5 1.6.6.7.2 1.3.2 1.8.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.3zM12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.5 1.3 5L2 22l5.2-1.4c1.5.8 3.1 1.2 4.8 1.2 5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18.1c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3.1.8.8-3-.2-.3c-.9-1.4-1.4-3-1.4-4.6 0-4.6 3.7-8.3 8.3-8.3 4.6 0 8.3 3.7 8.3 8.3.1 4.5-3.6 8.5-8 8.5z"/>
                </svg>
                <span className="wa-card-label">{t.contacto.sales.waLabel}</span>
              </div>
              <div className="wa-card-cta">
                <span>{t.contacto.sales.waCta}</span>
                <span className="wa-card-arrow" aria-hidden="true">→</span>
              </div>
            </a>
          </div>
          <div className="contacto-or" aria-hidden="true"><span>{t.contacto.or}</span></div>
          <ContactForm t={t.contacto} />
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer({ t }) {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div>
            <LynxLockup size={140} variant="bone" />
            <div className="footer-brand-tag" style={{ marginTop: 20 }}>Forest Products for Latin America · Since 1993</div>
          </div>
          <div className="footer-sustain">
            "{t.footer.sustain}"
          </div>
        </div>
        <div className="footer-bottom">
          <span>© {new Date().getFullYear()} CAMCO. {t.footer.rights}</span>
          <div className="footer-links">
            <a href="#soluciones">Solutions</a>
            <a href="#mills">Suppliers</a>
            <a href="#clientes">Customers</a>
            <a href="#contacto">Contact</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

// ---------- App ----------
// ---------- Tweaks ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "mode": "editorial",
  "accent": "forest",
  "hero": "forest"
}/*EDITMODE-END*/;

function CamcoTweaks({ tweaks, setTweak }) {
  return (
    <window.TweaksPanel title="Tweaks">
      <window.TweakSection label="Aesthetic">
        <window.TweakRadio
          label="Mode"
          value={tweaks.mode}
          options={[
            { value: "editorial", label: "Editorial" },
            { value: "industrial", label: "Industrial" },
            { value: "soft", label: "Soft" },
          ]}
          onChange={(v) => setTweak("mode", v)}
        />
      </window.TweakSection>
      <window.TweakSection label="Accent">
        <window.TweakRadio
          label="Color"
          value={tweaks.accent}
          options={[
            { value: "forest", label: "Forest" },
            { value: "kraft", label: "Kraft" },
            { value: "rust", label: "Rust" },
            { value: "ink", label: "Ink" },
            { value: "ocean", label: "Ocean" },
          ]}
          onChange={(v) => setTweak("accent", v)}
        />
      </window.TweakSection>
      <window.TweakSection label="Hero">
        <window.TweakRadio
          label="Treatment"
          value={tweaks.hero}
          options={[
            { value: "watermark", label: "Watermark" },
            { value: "forest", label: "Forest" },
            { value: "type", label: "Type-only" },
          ]}
          onChange={(v) => setTweak("hero", v)}
        />
      </window.TweakSection>
    </window.TweaksPanel>
  );
}

// ---------- App ----------
function App() {
  const [lang, setLang] = useState("es");
  const t = window.CAMCO_I18N[lang];
  const [tweaks, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  useReveal();

  // Apply tweaks to the document root as data-attrs
  useEffect(() => {
    document.documentElement.setAttribute("data-mode", tweaks.mode);
    document.documentElement.setAttribute("data-accent", tweaks.accent);
    document.documentElement.setAttribute("data-hero", tweaks.hero);
  }, [tweaks.mode, tweaks.accent, tweaks.hero]);

  return (
    <>
      <Nav lang={lang} setLang={setLang} t={t} />
      <Hero t={t} />
      <Soluciones t={t} />
      <Alcance t={t} />
      <Portafolio t={t} />
      <Mills t={t} />
      <Clientes t={t} />
      <Contacto t={t} />
      <Footer t={t} />
      <CamcoTweaks tweaks={tweaks} setTweak={setTweak} />
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);