/* Luxotene — Main app */
const { useState, useEffect, useRef } = React;
const { Icon } = window;

/* --------- Bottle placeholder SVG --------- */
function BottlePlaceholder() {
  // a stylized amber bottle so the hero looks finished without requiring user upload
  return (
    <svg viewBox="0 0 400 600" style={{ width: "100%", height: "100%", filter: "drop-shadow(0 30px 40px rgba(70,40,10,0.25))" }}>
      <defs>
        <linearGradient id="amber" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0" stopColor="#7a3a08" />
          <stop offset="0.5" stopColor="#a04f10" />
          <stop offset="1" stopColor="#5a2a05" />
        </linearGradient>
        <linearGradient id="cap" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#e6b956" />
          <stop offset="0.5" stopColor="#c89238" />
          <stop offset="1" stopColor="#9c6e1a" />
        </linearGradient>
        <linearGradient id="label" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#fbf5ea" />
          <stop offset="1" stopColor="#f0e4cc" />
        </linearGradient>
        <linearGradient id="glass-hi" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="rgba(255,220,160,0.6)" />
          <stop offset="1" stopColor="rgba(255,220,160,0)" />
        </linearGradient>
        <linearGradient id="liquid" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stopColor="#e89b3a" />
          <stop offset="1" stopColor="#a85a10" />
        </linearGradient>
      </defs>

      {/* Splash particles */}
      <g opacity="0.85">
        {[
          [350, 180, 14], [370, 240, 9], [355, 320, 11], [345, 400, 8],
          [60, 230, 7], [75, 320, 10], [50, 410, 8],
          [380, 460, 12], [40, 480, 9]
        ].map(([x, y, r], i) => (
          <circle key={i} cx={x} cy={y} r={r} fill="url(#liquid)" opacity={0.55} />
        ))}
        <path d="M340 200 Q380 240 370 300 Q360 360 380 420" stroke="url(#liquid)" strokeWidth="6" fill="none" opacity="0.4" />
      </g>

      {/* Cap */}
      <rect x="160" y="40" width="80" height="80" rx="6" fill="url(#cap)" />
      <rect x="160" y="40" width="80" height="14" fill="#7e570f" />
      <rect x="160" y="106" width="80" height="14" fill="#7e570f" />

      {/* Neck */}
      <rect x="175" y="120" width="50" height="22" fill="url(#amber)" />

      {/* Bottle body */}
      <path d="M100 200
               C 100 160, 175 142, 175 142
               L 225 142
               C 225 142, 300 160, 300 200
               L 300 540
               C 300 565, 280 580, 250 580
               L 150 580
               C 120 580, 100 565, 100 540
               Z" fill="url(#amber)" />

      {/* Glass highlight */}
      <path d="M115 220 C 115 200, 130 180, 145 180 L 150 180 L 150 540 L 130 540 C 120 540, 115 530, 115 520 Z" fill="url(#glass-hi)" opacity="0.5" />

      {/* Label */}
      <rect x="120" y="260" width="160" height="220" fill="url(#label)" />
      {/* Label logomark dots */}
      <g transform="translate(200,300)" fill="#b8841c">
        {Array.from({ length: 14 }).map((_, i) => {
          const a = (i / 14) * Math.PI * 2;
          const r = 18;
          return <circle key={i} cx={Math.cos(a) * r} cy={Math.sin(a) * r} r={i % 2 ? 1.1 : 1.6} />;
        })}
        <circle cx="0" cy="0" r="2.4" />
      </g>
      <text x="200" y="350" fontFamily="Cormorant Garamond, serif" fontSize="22" fontWeight="500" letterSpacing="3" textAnchor="middle" fill="#3d2a14">LUXOTENE</text>
      <text x="200" y="378" fontFamily="Inter, sans-serif" fontSize="9" letterSpacing="2.5" textAnchor="middle" fill="#6e5a44">WATER-SOLUBLE CAROTENE</text>
      <text x="200" y="392" fontFamily="Inter, sans-serif" fontSize="9" letterSpacing="2.5" textAnchor="middle" fill="#6e5a44">DIETARY SUPPLEMENT</text>
      <line x1="150" y1="408" x2="250" y2="408" stroke="#b8841c" strokeWidth="0.8" />
      <text x="200" y="428" fontFamily="Inter, sans-serif" fontSize="8" letterSpacing="2" fontWeight="700" textAnchor="middle" fill="#b8841c">ADVANCED ANTIOXIDANT</text>
      <text x="200" y="440" fontFamily="Inter, sans-serif" fontSize="8" letterSpacing="2" fontWeight="700" textAnchor="middle" fill="#b8841c">&amp; CELLULAR PROTECTION</text>
      <circle cx="200" cy="462" r="5" fill="#b8841c" />
    </svg>
  );
}

/* --------- Header --------- */
function Header({ activeNav, setActiveNav, cartCount, onShop }) {
  const links = [
    { label: "HOME", href: "#home", internal: true },
    { label: "SCIENCE", href: "#science", internal: true },
    { label: "SHOP", href: "Shop.html", internal: false },
    { label: "INDUSTRIAL", href: "Industrial.html", internal: false },
    { label: "FAQ", href: "#faq", internal: true },
  ];
  return (
    <header className="nav" data-screen-label="Header">
      <a href="#" className="nav__logo" onClick={(e) => { e.preventDefault(); setActiveNav("HOME"); }}>
        LUXOTENE
      </a>
      <ul className="nav__links">
        {links.map((l) => (
          <li key={l.label}>
            <a
              href={l.href}
              className={`nav__link ${activeNav === l.label ? "nav__link--active" : ""}`}
              onClick={(e) => {
                if (!l.internal) return; // let real link navigate
                e.preventDefault();
                setActiveNav(l.label);
                const el = document.getElementById(l.href.replace("#", ""));
                if (el) window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
              }}
            >
              {l.label}
            </a>
          </li>
        ))}
      </ul>
      <div className="nav__right">
        <button className="btn" onClick={onShop}>SHOP NOW</button>
        <button className="nav__cart" aria-label="Cart" onClick={onShop}>
          <Icon.Bag size={26} />
          {cartCount > 0 && <span className="nav__cart-badge">{cartCount}</span>}
        </button>
      </div>
    </header>
  );
}

/* --------- Hero --------- */
function Hero({ tweaks, onShop, onLearn }) {
  const features = [
    { icon: <Icon.Droplet />, label: "WATER-SOLUBLE", desc: "Superior absorption and bioavailability" },
    { icon: <Icon.Shield />, label: "ANTIOXIDANT PROTECTION", desc: "Helps protect cells from oxidative stress" },
    { icon: <Icon.Cells />, label: "IMMUNE SUPPORT", desc: "Supports natural immune defenses" },
    { icon: <Icon.Eye />, label: "EYE & SKIN HEALTH", desc: "Promotes healthy vision and radiant skin" },
  ];
  return (
    <section className="hero" id="home" data-screen-label="Hero">
      <div className="hero__bokeh" aria-hidden="true" />
      <div className="hero__grid">
        <div>
          <p className="eyebrow">LIQUID NUTRITION. ADVANCED BY SCIENCE.</p>
          <h1 className="hero__title">{tweaks.heroTitle}</h1>
          <p className="hero__lede">{tweaks.heroLede}</p>
          <div className="feature-row">
            {features.map((f) => (
              <div className="feature" key={f.label}>
                <div className="feature__icon">{f.icon}</div>
                <p className="feature__label">{f.label}</p>
                <p className="feature__desc">{f.desc}</p>
              </div>
            ))}
          </div>
          <div className="hero__cta">
            <button className="btn" onClick={onShop}>SHOP NOW</button>
            <button className="btn btn--outline" onClick={onLearn}>LEARN MORE</button>
          </div>
          <p className="maker-inline">
            <span className="maker-inline__you">You know carotenoids and antioxidants. </span>
            <span className="maker-inline__we">We know how to make them.</span>
          </p>
        </div>
        <div className="hero__product">
          <img
            src="assets/luxotene_bottle_shadow.png"
            alt="Luxotene bottle"
            style={{ height: "100%", width: "100%", objectFit: "contain", display: "block" }}
          />
        </div>
      </div>
    </section>
  );
}

/* --------- Science section --------- */
function Science({ onExplore }) {
  const pills = [
    { icon: <Icon.Droplet />, label: "SUPERIOR\nABSORPTION" },
    { icon: <Icon.Flask />, label: "CLINICALLY\nRESEARCHED" },
    { icon: <Icon.Leaf />, label: "CLEAN &\nHIGH QUALITY" },
    { icon: <Icon.Seedling />, label: "NON-GMO" },
    { icon: <Icon.Wheat />, label: "GLUTEN FREE" },
    { icon: <Icon.Leaf />, label: "VEGAN" },
  ];
  return (
    <section className="science" id="science" data-screen-label="Science">
      <svg className="science__bubbles" viewBox="0 0 1280 500" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        <defs>
          <radialGradient id="bubble" cx="50%" cy="40%">
            <stop offset="0" stopColor="rgba(255,210,140,0.6)" />
            <stop offset="0.4" stopColor="rgba(255,210,140,0.15)" />
            <stop offset="1" stopColor="rgba(255,210,140,0)" />
          </radialGradient>
        </defs>
        {[[480,220,90],[400,360,55],[560,150,42],[330,260,30],[610,300,35],[150,380,28]].map(([x,y,r],i)=>(
          <circle key={i} cx={x} cy={y} r={r} fill="url(#bubble)" />
        ))}
      </svg>
      <div className="science__grid">
        <div>
          <p className="science__eyebrow">THE LUXOTENE DIFFERENCE</p>
          <h2 className="science__title">Science Behind<br />Your Best Day</h2>
          <p className="science__lede">
            Our proprietary water-soluble carotene is designed for optimal absorption and maximum cellular protection.
          </p>
          <button className="btn btn--on-dark" onClick={onExplore}>EXPLORE THE SCIENCE</button>
        </div>
        <div className="science__pills">
          {pills.map((p) => (
            <div className="science__pill" key={p.label}>
              {p.icon}
              <div className="science__pill-label">
                {p.label.split("\n").map((line, i) => <div key={i}>{line}</div>)}
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* --------- Benefits --------- */
function Benefits() {
  const cards = [
    { id: "ben-skin",    title: "Radiant Skin",       desc: "Supports healthy, glowing skin from within.", tint: "linear-gradient(135deg,#f4c990,#c97f3d)", caption: "Skin photo" },
    { id: "ben-vision",  title: "Healthy Vision",     desc: "Supports eye health and visual function.",     tint: "linear-gradient(135deg,#e8a868,#a05a1f)", caption: "Eye photo" },
    { id: "ben-immune",  title: "Immune Support",     desc: "Strengthens your body's natural defenses.",    tint: "linear-gradient(135deg,#d99a5a,#7a4a18)", caption: "Lifestyle photo" },
    { id: "ben-cell",    title: "Cellular Protection",desc: "Helps protect cells from oxidative stress.",   tint: "linear-gradient(135deg,#f0a050,#8a3e08)", caption: "Cells photo" },
  ];
  return (
    <section className="benefits" id="benefits" data-screen-label="Benefits">
      <div className="benefits__head">
        <p className="eyebrow">BENEFITS YOU CAN FEEL</p>
        <h2 className="benefits__title">Support Your Body. Elevate Your Life.</h2>
      </div>
      <div className="benefits__grid">
        {cards.map((c) => (
          <article className="benefit-card" key={c.id}>
            <div className="benefit-card__img">
              <image-slot id={c.id} shape="rounded" radius="0" placeholder={c.caption}>
                <div style={{
                  width: "100%", height: "100%", background: c.tint,
                  display: "flex", alignItems: "flex-end", padding: 14,
                  color: "rgba(255,255,255,0.85)", fontFamily: "ui-monospace, monospace",
                  fontSize: 11, letterSpacing: 1
                }}>
                  {c.caption}
                </div>
              </image-slot>
            </div>
            <h3 className="benefit-card__title">{c.title}</h3>
            <p className="benefit-card__desc">{c.desc}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

/* --------- Footer --------- */
function Footer({ onSubscribe }) {
  const [email, setEmail] = useState("");
  return (
    <footer className="footer">
      <div className="footer__grid">
        <div>
          <div style={{ color: "var(--gold-light)", marginBottom: 16 }}>
            <Icon.LuxoMark size={42} />
          </div>
          <p className="footer__logo">LUXOTENE</p>
          <p className="footer__tagline">Liquid nutrition. Advanced by science.</p>
        </div>
        <div id="ingredients">
          <p className="footer__head">STAY IN THE KNOW</p>
          <p className="footer__copy">Get exclusive offers, health tips and product updates straight to your inbox.</p>
          <form className="subscribe" onSubmit={(e) => { e.preventDefault(); onSubscribe(email); setEmail(""); }}>
            <input
              type="email"
              required
              placeholder="Enter your email"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
            />
            <button type="submit">SUBSCRIBE</button>
          </form>
        </div>
        <ul className="footer__links" id="faq">
          {["ABOUT US", "CONTACT", "SHIPPING & RETURNS", "PRIVACY POLICY", "TERMS OF SERVICE"].map((l) => (
            <li key={l}><a href="#">{l}</a></li>
          ))}
        </ul>
      </div>
      <div className="footer__bottom">
        <span>© 2026 Luxotene. All rights reserved.</span>
        <div className="socials">
          <a href="#" aria-label="Instagram"><Icon.Instagram /></a>
          <a href="#" aria-label="Facebook"><Icon.Facebook /></a>
          <a href="#" aria-label="YouTube"><Icon.Youtube /></a>
        </div>
      </div>
    </footer>
  );
}

/* --------- Toast --------- */
function Toast({ msg }) {
  return <div className={`toast ${msg ? "toast--show" : ""}`}>{msg}</div>;
}

/* --------- Default Tweaks --------- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroTitle": "Advanced Antioxidant & Cellular Protection",
  "heroLede": "Luxotene is a premium water-soluble carotene formula that supports your cells, skin, vision and immune system from within.",
  "palette": ["#b8841c", "#3d2a14", "#fbf5ec"]
}/*EDITMODE-END*/;

/* --------- App --------- */
function App() {
  const { useTweaks, TweaksPanel, TweakSection, TweakText, TweakColor } = window;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [activeNav, setActiveNav] = useState("HOME");
  const [cart, setCart] = useState(0);
  const [toast, setToast] = useState("");

  // Apply palette tweak as CSS variables
  useEffect(() => {
    const [gold, brown, bg] = tweaks.palette || [];
    if (gold) document.documentElement.style.setProperty("--gold", gold);
    if (brown) document.documentElement.style.setProperty("--ink", brown);
    if (bg) document.documentElement.style.setProperty("--bg", bg);
  }, [tweaks.palette]);

  const showToast = (msg) => {
    setToast(msg);
    clearTimeout(showToast._t);
    showToast._t = setTimeout(() => setToast(""), 2400);
  };

  const onShop = () => {
    window.location.href = "Shop.html";
  };
  const onLearn = () => {
    const el = document.getElementById("science");
    el && window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
    setActiveNav("SCIENCE");
  };
  const onExplore = () => {
    const el = document.getElementById("benefits");
    el && window.scrollTo({ top: el.offsetTop - 80, behavior: "smooth" });
    setActiveNav("BENEFITS");
  };
  const onSubscribe = (email) => {
    showToast(`Subscribed · ${email}`);
  };

  // Scrollspy
  useEffect(() => {
    const sections = ["home", "science", "benefits", "ingredients", "faq"];
    const onScroll = () => {
      const y = window.scrollY + 120;
      for (let i = sections.length - 1; i >= 0; i--) {
        const el = document.getElementById(sections[i]);
        if (el && el.offsetTop <= y) {
          setActiveNav(sections[i].toUpperCase());
          break;
        }
      }
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  return (
    <>
      <Header activeNav={activeNav} setActiveNav={setActiveNav} cartCount={cart} onShop={onShop} />
      <Hero tweaks={tweaks} onShop={onShop} onLearn={onLearn} />
      <Science onExplore={onExplore} />
      <Benefits />
      <Footer onSubscribe={onSubscribe} />
      <Toast msg={toast} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Copy">
          <TweakText label="Hero headline" value={tweaks.heroTitle} onChange={(v) => setTweak("heroTitle", v)} />
          <TweakText label="Hero subhead" value={tweaks.heroLede} onChange={(v) => setTweak("heroLede", v)} />
        </TweakSection>
        <TweakSection title="Palette">
          <TweakColor
            label="Brand palette"
            value={tweaks.palette}
            onChange={(v) => setTweak("palette", v)}
            options={[
              ["#b8841c", "#3d2a14", "#fbf5ec"],
              ["#a05a18", "#2a1a08", "#f5ece0"],
              ["#d4a14a", "#1f1408", "#fff8ec"],
              ["#8e6b2a", "#1a1408", "#f0e8d8"],
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

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