/* Main app — wrapped in IIFE so destructured names don't collide with
   the globals exposed by icons.jsx / countdown.jsx (babel-standalone runs
   all <script type="text/babel"> in the same global scope). */

(function () {
const { Leaf, Basket, Truck, Heart, Sparkle, InstagramGlyph, ArrowRight, LeafDeco } = window.LogoIcons;
const Countdown = window.LogoCountdown;

const FEATURES = [
  { icon: Basket, title: "MÁS PRODUCTOS", text: "Saludables y exclusivos, seleccionados a mano" },
  { icon: Truck, title: "ENVÍOS RÁPIDOS", text: "Entregas más ágiles desde nuestra nueva bodega" },
  { icon: Heart, title: "MEJOR EXPERIENCIA", text: "Una tienda renovada, fácil y disfrutable" },
  { icon: Sparkle, title: "NOVEDADES", text: "Productos y sorpresas que te van a encantar" },
];

const Scene = () => (
  <div className="scene" aria-hidden="true">
    <div className="scene__blob scene__blob--1" />
    <div className="scene__blob scene__blob--2" />
    <div className="scene__leaf scene__leaf--1" style={{ "--r": "-25deg" }}>
      <LeafDeco size={110} color="#a8d85f" rotate={-25} />
    </div>
    <div className="scene__leaf scene__leaf--2" style={{ "--r": "140deg" }}>
      <LeafDeco size={130} color="#8bc34a" rotate={140} />
    </div>
    <div className="scene__leaf scene__leaf--3" style={{ "--r": "60deg" }}>
      <LeafDeco size={90} color="#ffc58a" rotate={60} />
    </div>
    <div className="scene__leaf scene__leaf--4" style={{ "--r": "-110deg" }}>
      <LeafDeco size={120} color="#a8d85f" rotate={-110} />
    </div>
    <div className="scene__leaf scene__leaf--5" style={{ "--r": "30deg" }}>
      <LeafDeco size={70} color="#ff8c42" rotate={30} />
    </div>
  </div>
);

const Header = () => (
  <header className="header reveal reveal--1">
    <img className="header__logo" src="assets/logo.png" alt="Lo-Go.cl — Vive saludable, vive bien" />
    <span className="header__pill">En vivo · Mig­rando</span>
  </header>
);

const Hero = ({ centered }) => (
  <section className={`hero ${centered ? "hero--centered" : ""}`}>
    <div className="hero__copy">
      <div className="hero__eyebrow reveal reveal--2">
        <Leaf size={22} />
        Algo nuevo está creciendo
      </div>
      <h1 className="hero__title reveal reveal--2">
        <span className="hero__title-row">¡ESTAMOS</span>
        <span className="hero__title-row">
          <span className="hero__title-accent">EVOLUCIONANDO!</span>
        </span>
      </h1>
      <p className="hero__subtitle reveal reveal--3">
        Nueva bodega, <strong>una mejor experiencia para ti.</strong>
        {" "}Estamos puliendo cada detalle para recibirte como mereces.
      </p>
      <p className="hero__caption reveal reveal--4">
        Estamos trabajando para traerte <em>algo increíble</em>
      </p>
    </div>

    {!centered && (
      <div className="hero__visual reveal reveal--3">
        <DateCard />
      </div>
    )}
  </section>
);

const DateCard = () => (
  <div className="date-card">
    <div className="date-card__sticker">
      <span>¡Vuelta<br/>oficial!</span>
    </div>
    <div className="date-card__head">
      <span>Viernes · Mayo</span>
    </div>
    <div className="date-card__day">
      <span className="date-card__day-num">08</span>
    </div>
    <div className="date-card__month">de mayo, 2026</div>
    <div className="date-card__time">
      <span>Apertura</span>
      <span className="date-card__time-val">23:00 hrs</span>
    </div>
  </div>
);

const Feature = ({ icon: Icon, title, text, n }) => (
  <article className={`feature reveal reveal--${n + 2}`}>
    <span className="feature__num">0{n}</span>
    <span className="feature__icon"><Icon size={32} /></span>
    <h2 className="feature__title">{title}</h2>
    <p className="feature__text">{text}</p>
  </article>
);

const Features = () => (
  <section className="features">
    {FEATURES.map((f, i) => (
      <Feature key={f.title} {...f} n={i + 1} />
    ))}
  </section>
);

const CTA = () => (
  <section className="cta reveal reveal--5">
    <div className="cta__inner">
      <p className="cta__lead">
        ¡Síguenos y sé el primero<br/>
        en descubrir <strong>todas las novedades!</strong>
      </p>
      <div className="cta__row">
        <a className="cta__instagram" href="https://www.instagram.com/distribuidora_logo/" target="_blank" rel="noopener">
          <InstagramGlyph />
          @distribuidora_logo
        </a>
        <a className="cta__email" href="mailto:info@lo-go.cl">
          ✉ info@lo-go.cl
        </a>
      </div>
      <p className="cta__closing">
        Gracias por tu paciencia
        <span className="cta__closing-divider">✦</span>
        ¡Lo mejor está por venir!
      </p>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    © 2026 Lo-Go.cl · Distribuidora Logo · Vive saludable, vive bien
  </footer>
);


const App = () => {
  const tweaks = {
    theme: "default",
    heroLayout: "split",
    showLeaves: true,
    showBlobs: true,
    headerPill: true,
  };

  return (
    <>
      {tweaks.showBlobs || tweaks.showLeaves ? (
        <div className="scene" aria-hidden="true">
          {tweaks.showBlobs && <>
            <div className="scene__blob scene__blob--1" />
            <div className="scene__blob scene__blob--2" />
          </>}
          {tweaks.showLeaves && <>
            <div className="scene__leaf scene__leaf--1" style={{ "--r": "-25deg" }}>
              <LeafDeco size={110} color="#a8d85f" rotate={-25} />
            </div>
            <div className="scene__leaf scene__leaf--2" style={{ "--r": "140deg" }}>
              <LeafDeco size={130} color="#8bc34a" rotate={140} />
            </div>
            <div className="scene__leaf scene__leaf--3" style={{ "--r": "60deg" }}>
              <LeafDeco size={90} color="#ffc58a" rotate={60} />
            </div>
            <div className="scene__leaf scene__leaf--4" style={{ "--r": "-110deg" }}>
              <LeafDeco size={120} color="#a8d85f" rotate={-110} />
            </div>
          </>}
        </div>
      ) : null}

      <div className="app">
        <header className="header reveal reveal--1">
          <img className="header__logo" src="assets/logo.png" alt="Lo-Go.cl — Vive saludable, vive bien" />
          {tweaks.headerPill && <span className="header__pill">En vivo · Migrando</span>}
        </header>

        <Hero centered={tweaks.heroLayout === "centered"} />

        <section className="cd-section reveal reveal--4">
          <div className="cd-section__head">
            <span className="cd-section__head-label">Faltan exactamente</span>
          </div>
          <Countdown accent="var(--green-deep)" />
        </section>

        <Features />
        <CTA />
        <Footer />
      </div>

      </>
  );
};

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