// BOSQE — Aplicación principal

const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "moss",
  "viewMode": "grid",
  "heroImage": "jasmund"
}/*EDITMODE-END*/;

// Fotos de bosque libres (Wikimedia Commons · dominio público / CC).
// Servidas en alta resolución; cámbialas desde el panel de Tweaks.
const HERO_IMAGES = {
  jasmund: {
    label: "Hayedo (Jasmund)",
    url: "https://commons.wikimedia.org/wiki/Special:FilePath/Forest%20in%20Jasmund%20national%20park.jpg?width=1800"
  },
  path: {
    label: "Sendero verde",
    url: "https://commons.wikimedia.org/wiki/Special:FilePath/Forest%20and%20path%20at%20Zombieskogen,%20V%C3%A4stertorp%20(Stockholm)%20-%20panoramio.jpg?width=1800"
  },
  ipanema: {
    label: "Selva (Ipanema)",
    url: "https://commons.wikimedia.org/wiki/Special:FilePath/Floresta%20nacional%20de%20ipanema.jpg?width=1800"
  },
  sunrise: {
    label: "Amanecer dorado",
    url: "https://commons.wikimedia.org/wiki/Special:FilePath/Forest%20sunrise.jpg?width=1800"
  }
};

const PALETTES = {
  moss:   { primary: "#2F4A2D", deep: "#1A2D1A", tan: "#B89568", sage: "#8FA17A", cream: "#F4EFE3", paper: "#EAE3D2", label: "Musgo" },
  olive:  { primary: "#54603A", deep: "#2E361F", tan: "#C9A05D", sage: "#A8B485", cream: "#F2EDDC", paper: "#E5DFC7", label: "Oliva"  },
  earth:  { primary: "#5C4530", deep: "#2F2014", tan: "#C19A6B", sage: "#9DA383", cream: "#F4ECD9", paper: "#E8DCBE", label: "Tierra" },
  forest: { primary: "#1F3A2D", deep: "#0F2018", tan: "#A88858", sage: "#7B9173", cream: "#F0EBDD", paper: "#DDD6C2", label: "Bosque" }
};

function applyPalette(name) {
  const p = PALETTES[name] || PALETTES.moss;
  const r = document.documentElement;
  r.style.setProperty("--color-primary", p.primary);
  r.style.setProperty("--color-moss",    p.primary);
  r.style.setProperty("--color-deep",    p.deep);
  r.style.setProperty("--color-tan",     p.tan);
  r.style.setProperty("--color-accent",  p.tan);
  r.style.setProperty("--color-sage",    p.sage);
  r.style.setProperty("--color-cream",   p.cream);
  r.style.setProperty("--color-bg",      p.cream);
  r.style.setProperty("--color-paper",   p.paper);
}

// ---------- NAV ----------
function Nav({ active }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    { id: "sobre",     label: "Sobre" },
    { id: "servicios", label: "Servicios" },
    { id: "catalogo",  label: "Catálogo" },
    { id: "proceso",   label: "Proceso" }
  ];
  return (
    <nav className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="container nav-inner">
        <a className="nav-logo" href="#top" aria-label="BOSQE — inicio">
          <img className="nav-logo-img" src="assets/logo-bosqe.png" alt="BOSQE" />
        </a>
        <ul className="nav-links">
          {links.map(l => (
            <li key={l.id}>
              <a href={"#" + l.id} className={active === l.id ? "active" : ""}>{l.label}</a>
            </li>
          ))}
        </ul>
        <a href="#contacto" className="nav-cta">Contacto</a>
      </div>
    </nav>
  );
}

// "BOSQE" wordmark composed from Dense
function BosgeWord({ size = 22 }) {
  return (
    <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
      <BosqeLogo size={size + 4} />
      <span style={{ fontFamily: "var(--font-display)", fontSize: size, letterSpacing: "0.12em", color: "var(--color-primary)" }}>
        BOSQE
      </span>
    </span>
  );
}

// ---------- HERO ----------
function Hero({ heroImage }) {
  const img = HERO_IMAGES[heroImage] || HERO_IMAGES.jasmund;
  return (
    <section className="hero" id="top">
      <LeafSVG className="hero-leaf hero-leaf-1" />
      <LeafSVG className="hero-leaf hero-leaf-2" />
      <div className="container hero-grid">
        <div>
          <div className="hero-eyebrow t-eyebrow" style={{ color: "var(--color-primary)" }}>
            Cosmética natural · Artesanal
          </div>
          <h1 className="hero-title">
            Cuidado<br/>
            que viene<br/>
            <em>del bosque.</em>
          </h1>
          <p className="hero-sub">
            Champús sólidos, jabones y aceites esenciales formulados a mano con ingredientes 100% naturales. Sin plástico, sin sulfatos, sin atajos.
          </p>
          <div className="hero-actions">
            <a href="#catalogo" className="btn btn-primary">Ver catálogo <Arrow /></a>
            <a href="#sobre" className="btn btn-ghost">Conoce BOSQE</a>
          </div>
        </div>
        <div className="hero-visual">
          <img className="hero-photo" src={img.url} alt="Bosque" loading="eager" />
          <div className="hero-photo-overlay"></div>
          <div className="hero-badge">
            <span>
              <strong>100%</strong>
              natural
            </span>
          </div>
        </div>
      </div>
      <div className="container hero-meta">
        <span>EST. 2023 · CHILE</span>
        <span>FORMULADO A MANO</span>
        <span>LIBRE DE PLÁSTICO</span>
      </div>
    </section>
  );
}

// ---------- VALORES ----------
function Valores() {
  const values = [
    { icon: <IconLeaf />,    title: "100% Natural", text: "Ingredientes botánicos, aceites esenciales puros y nada que no entiendas en la etiqueta." },
    { icon: <IconHand />,    title: "Hecho a mano", text: "Cada barra es saponificada y prensada artesanalmente en pequeños lotes." },
    { icon: <IconDrop />,    title: "Sin agua añadida", text: "Fórmulas concentradas que rinden más y pesan menos en tu rutina diaria." },
    { icon: <IconRecycle />, title: "Cero plástico", text: "Envases compostables, papel kraft y materiales que vuelven a la tierra." }
  ];
  return (
    <section className="section" style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="container">
        <div className="values-grid">
          {values.map((v, i) => (
            <div key={i} className="value">
              <div className="value-icon">{v.icon}</div>
              <h4 className="value-title">{v.title}</h4>
              <p className="value-text">{v.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- SOBRE ----------
function Sobre() {
  return (
    <section className="section about" id="sobre">
      <div className="container about-grid">
        <div className="about-image">
          <image-slot id="about" shape="rounded" radius="22" placeholder="Atelier / proceso artesanal"></image-slot>
        </div>
        <div>
          <div className="section-num">01 — SOBRE BOSQE</div>
          <h2 className="about-title">
            Volver a lo simple,<br/>
            <span style={{ fontFamily: "var(--font-accent)", color: "var(--color-primary)", fontWeight: 300 }}>
              volver al bosque.
            </span>
          </h2>
          <p className="about-text">
            BOSQE nació con una idea: la cosmética puede ser tan honesta como el bosque del que toma su nombre. Sin químicos agresivos, sin envases plásticos, sin promesas exageradas. Solo plantas, aceites esenciales y oficio.
          </p>
          <p className="about-text">
            Trabajamos en lotes pequeños desde nuestro taller, cada producto pensado para durar más y dejar menos huella. Lo que hacemos vuelve a la tierra.
          </p>
          <div className="about-stats">
            <div>
              <div className="stat-num">100%</div>
              <div className="stat-label">Natural</div>
            </div>
            <div>
              <div className="stat-num">0</div>
              <div className="stat-label">Plástico</div>
            </div>
            <div>
              <div className="stat-num">12+</div>
              <div className="stat-label">Productos</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- SERVICIOS ----------
function Servicios() {
  const services = [
    { name: "Venta directa", desc: "Pedidos online y entregas a domicilio en Santiago y regiones, con embalaje 100% compostable." },
    { name: "Mayorista", desc: "Para tiendas, peluquerías y hoteles que comparten nuestra filosofía. Precios y formatos especiales." },
    { name: "Custom & Marca blanca", desc: "Desarrollamos fórmulas y barras a medida con tu identidad — perfectas para regalos corporativos o spas." },
    { name: "Talleres", desc: "Aprende a hacer tu propio champú sólido, jabón o aceite esencial en nuestros talleres mensuales." }
  ];
  return (
    <section className="section services" id="servicios">
      <div className="container">
        <div className="section-header">
          <div>
            <div className="section-num">02 — QUÉ HACEMOS</div>
            <h2 className="services-title">Servicios</h2>
          </div>
          <p style={{ maxWidth: 380, fontSize: 15, lineHeight: 1.6, color: "rgba(244, 239, 227, 0.7)", margin: 0 }}>
            Más que producto: una forma de acompañar a personas y negocios que quieren cambiar su forma de cuidarse.
          </p>
        </div>
        <div className="services-list">
          {services.map((s, i) => (
            <div key={i} className="service-row">
              <div className="service-num">0{i+1}</div>
              <h3 className="service-name">{s.name}</h3>
              <p className="service-desc">{s.desc}</p>
              <div className="service-arrow"><Arrow size={20} /></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- CATÁLOGO ----------
function Catalogo({ viewMode, setViewMode }) {
  const [active, setActive] = useState("all");
  const [selected, setSelected] = useState(null);

  const products = active === "all"
    ? window.BOSQE_PRODUCTS
    : window.BOSQE_PRODUCTS.filter(p => p.category === active);

  useEffect(() => {
    if (!selected) return;
    const onKey = e => { if (e.key === "Escape") setSelected(null); };
    document.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = "";
    };
  }, [selected]);

  return (
    <section className="section" id="catalogo">
      <div className="container">
        <div className="section-header">
          <div>
            <div className="section-num">03 — TIENDA</div>
            <h2 className="about-title" style={{ margin: 0 }}>Catálogo</h2>
          </div>
          <p style={{ maxWidth: 380, fontSize: 15, lineHeight: 1.6, color: "rgba(42, 37, 32, 0.7)", margin: 0 }}>
            Cada pieza está formulada con plantas y aceites de cosecha local. Haz click en un producto para ver la ficha completa.
          </p>
        </div>

        <div className="catalog-controls">
          <div className="filter-chips">
            {window.BOSQE_CATEGORIES.map(c => (
              <button
                key={c.id}
                className={"chip" + (active === c.id ? " active" : "")}
                onClick={() => setActive(c.id)}
              >
                {c.label}
              </button>
            ))}
          </div>
          <div className="catalog-toggle">
            <button className={"toggle-btn" + (viewMode === "grid" ? " active" : "")} onClick={() => setViewMode("grid")}>Grilla</button>
            <button className={"toggle-btn" + (viewMode === "list" ? " active" : "")} onClick={() => setViewMode("list")}>Lista</button>
          </div>
        </div>

        <div className={"catalog-grid" + (viewMode === "list" ? " list" : "")}>
          {products.map(p => (
            <article key={p.id} className="product" onClick={() => setSelected(p)}>
              <div className="product-image">
                {p.tag && <span className={"product-tag" + (p.tagType === "new" ? " new" : "")}>{p.tag}</span>}
                <image-slot id={"prod-" + p.id} shape="rounded" radius="10" placeholder={p.name + " · " + p.variant}></image-slot>
              </div>
              <div className="product-info">
                <div>
                  <h3 className="product-name">{p.name}</h3>
                  <p className="product-meta">{p.variant}</p>
                </div>
                <div className="product-price">{p.price}</div>
              </div>
            </article>
          ))}
        </div>

        {selected && (
          <div className="modal-backdrop" onClick={() => setSelected(null)}>
            <div className="modal" onClick={e => e.stopPropagation()}>
              <button className="modal-close" onClick={() => setSelected(null)} aria-label="Cerrar">×</button>
              <div className="modal-image">
                <image-slot id={"prod-" + selected.id} shape="rect" placeholder={selected.name + " · " + selected.variant}></image-slot>
              </div>
              <div className="modal-body">
                <div className="modal-tag">{selected.tag || "Producto BOSQE"}</div>
                <h3 className="modal-title">{selected.name}</h3>
                <p className="modal-sub">{selected.variant}</p>
                <p className="modal-text">{selected.desc}</p>
                <ul className="modal-list">
                  {Object.entries(selected.specs).map(([k, v]) => (
                    <li key={k}><span>{k}</span><span>{v}</span></li>
                  ))}
                </ul>
                <div className="modal-cta">
                  <div className="modal-price">{selected.price}</div>
                  <button className="btn btn-primary">Comprar <Arrow /></button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    </section>
  );
}

// ---------- PROCESO ----------
function Proceso() {
  const steps = [
    { name: "Cosecha", text: "Hierbas y flores cultivadas localmente, secadas al aire para preservar sus aceites." },
    { name: "Formulación", text: "Mezclamos las recetas en pequeños lotes, sin agua añadida ni rellenos." },
    { name: "Saponificación", text: "Saponificación en frío para mantener vivas las propiedades de los aceites esenciales." },
    { name: "Curado", text: "Cada barra reposa 4–6 semanas antes de salir del taller. Tiempo, no atajos." }
  ];
  return (
    <section className="section process" id="proceso">
      <div className="container">
        <div className="section-header" style={{ marginBottom: 0 }}>
          <div>
            <div className="section-num">04 — CÓMO LO HACEMOS</div>
            <h2 className="about-title" style={{ margin: "16px 0 0" }}>
              Cuatro pasos,<br/>
              <span style={{ fontFamily: "var(--font-accent)", color: "var(--color-primary)", fontWeight: 300 }}>
                un solo oficio.
              </span>
            </h2>
          </div>
        </div>
        <div className="process-steps">
          {steps.map((s, i) => (
            <div key={i} className="step">
              <div className="step-num">0{i+1}</div>
              <h4 className="step-name">{s.name}</h4>
              <p className="step-text">{s.text}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- CTA ----------
function CTA() {
  return (
    <section className="section cta" id="contacto">
      <div className="container cta-inner">
        <div className="cta-eyebrow">Hablemos</div>
        <h2 className="cta-title">
          ¿Listo para volver<br/>
          <em>al bosque?</em>
        </h2>
        <p className="cta-sub">
          Escríbenos para pedidos al por mayor, regalos corporativos o simplemente para conocernos.
        </p>
        <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
          <a href="mailto:hola@bosqe.cl" className="btn btn-primary">hola@bosqe.cl <Arrow /></a>
          <a href="#" className="btn btn-ghost" style={{ borderColor: "var(--color-cream)", color: "var(--color-cream)" }}>
            Instagram @bosqe
          </a>
        </div>
      </div>
    </section>
  );
}

// ---------- FOOTER ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div>
            <h4 className="footer-logo">BOSQE</h4>
            <p className="footer-tag">Cuidado que viene del bosque.</p>
            <p className="footer-text">
              Cosmética artesanal 100% natural. Hecho a mano en Chile con plantas y aceites de cosecha local.
            </p>
          </div>
          <div>
            <h5>Tienda</h5>
            <ul>
              <li><a href="#catalogo">Champú</a></li>
              <li><a href="#catalogo">Acondicionador</a></li>
              <li><a href="#catalogo">Jabones</a></li>
              <li><a href="#catalogo">Aceites esenciales</a></li>
            </ul>
          </div>
          <div>
            <h5>BOSQE</h5>
            <ul>
              <li><a href="#sobre">Sobre nosotros</a></li>
              <li><a href="#proceso">Proceso</a></li>
              <li><a href="#servicios">Mayorista</a></li>
              <li><a href="#servicios">Talleres</a></li>
            </ul>
          </div>
          <div>
            <h5>Contacto</h5>
            <ul>
              <li>hola@bosqe.cl</li>
              <li>+56 9 0000 0000</li>
              <li>Santiago, Chile</li>
              <li><a href="#">Instagram</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 BOSQE · Cosmética natural · Todos los derechos reservados</span>
          <span style={{ fontFamily: "var(--font-accent)", letterSpacing: "0.05em" }}>Hecho con ♢ en Chile</span>
        </div>
      </div>
    </footer>
  );
}

// ---------- APP ----------
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyPalette(t.palette); }, [t.palette]);

  const paletteOptions = [
    { value: "moss",   label: "Musgo"  },
    { value: "olive",  label: "Oliva"  },
    { value: "earth",  label: "Tierra" },
    { value: "forest", label: "Bosque" }
  ];

  return (
    <>
      <Nav />
      <Hero heroImage={t.heroImage} />
      <Valores />
      <Sobre />
      <Servicios />
      <Catalogo viewMode={t.viewMode} setViewMode={v => setTweak("viewMode", v)} />
      <Proceso />
      <CTA />
      <Footer />
      <TweaksPanel title="Tweaks BOSQE">
        <TweakSection label="Hero">
          <TweakSelect
            label="Imagen de bosque"
            value={t.heroImage}
            options={Object.entries(HERO_IMAGES).map(([value, o]) => ({ value, label: o.label }))}
            onChange={v => setTweak("heroImage", v)}
          />
          <p style={{ fontSize: 11, color: "rgba(0,0,0,0.5)", margin: "8px 0 0", lineHeight: 1.4 }}>
            Fotos libres en alta resolución. ¿Tienes una propia? Pásamela y la incrusto.
          </p>
        </TweakSection>
        <TweakSection label="Paleta">
          <TweakSelect
            label="Tono"
            value={t.palette}
            options={paletteOptions}
            onChange={v => setTweak("palette", v)}
          />
          <p style={{ fontSize: 11, color: "rgba(0,0,0,0.5)", margin: "8px 0 0", lineHeight: 1.4 }}>
            Paletas propuestas — confírmame los códigos oficiales del manual y los reemplazo.
          </p>
        </TweakSection>
        <TweakSection label="Catálogo">
          <TweakRadio
            label="Vista"
            value={t.viewMode}
            options={[{ value: "grid", label: "Grilla" }, { value: "list", label: "Lista" }]}
            onChange={v => setTweak("viewMode", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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