/* OrchEcomm website — shared UI: Reveal, Btn, Eyebrow, Nav, Ticker, FinalCTA, Footer. */
const { useState, useEffect, useRef } = React;

/* Entrance fade-up — CSS-driven enhancement; content is visible even if
   animations are frozen (no fill-mode), so the page never renders blank. */
function Reveal({ children, delay = 0, y = 24, style = {}, as = "div" }) {
  return React.createElement(as, { className: "web-reveal", style: style }, children);
}

/* Marketing CTA button. */
function Btn({ children, variant = "primary", size = "md", onClick, href, iconRight, style = {} }) {
  const [h, setH] = useState(false);
  const sz = size === "lg" ? { h: 52, px: 26, fs: 16 } : { h: 44, px: 20, fs: 15 };
  const base = { display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8, height: sz.h, padding: `0 ${sz.px}px`, borderRadius: "var(--radius-full)", font: "var(--font-sans)", fontSize: sz.fs, fontWeight: 600, cursor: "pointer", border: "1.5px solid transparent", textDecoration: "none", whiteSpace: "nowrap", transition: "all var(--transition-base)", lineHeight: 1 };
  const variants = {
    primary: { background: h ? "var(--green-600)" : "var(--green-800)", color: "#fff", borderColor: h ? "var(--green-600)" : "var(--green-800)", boxShadow: h ? "0 8px 22px rgba(45,106,79,0.28)" : "0 2px 8px rgba(45,106,79,0.18)", transform: h ? "translateY(-1px)" : "none" },
    ghost: { background: h ? "var(--green-50)" : "transparent", color: "var(--green-800)", borderColor: "var(--green-700)" },
    whiteSolid: { background: "#fff", color: "var(--green-800)", borderColor: "#fff", transform: h ? "translateY(-1px)" : "none", boxShadow: h ? "0 8px 22px rgba(0,0,0,0.18)" : "none" },
    whiteGhost: { background: h ? "rgba(255,255,255,0.12)" : "transparent", color: "#fff", borderColor: "rgba(255,255,255,0.6)" },
  };
  const Tag = href ? "a" : "button";
  return <Tag href={href} onClick={onClick} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ ...base, ...variants[variant], ...style }}>{children}{iconRight}</Tag>;
}

function Eyebrow({ children, light = false, style = {} }) {
  return <div style={{ display: "inline-flex", alignItems: "center", gap: 8, font: "var(--font-sans)", fontSize: 13, fontWeight: 600, letterSpacing: "0.12em", textTransform: "uppercase", color: light ? "var(--green-300)" : "var(--green-700)", ...style }}>
    <span style={{ width: 7, height: 7, borderRadius: "50%", background: light ? "var(--green-400)" : "var(--green-600)", boxShadow: `0 0 0 4px ${light ? "rgba(149,213,178,0.25)" : "rgba(82,183,136,0.22)"}` }} />{children}
  </div>;
}

/* ---- Top navigation ---- */
function Nav({ route, go }) {
  const I = window.OcWebIcons;
  const [scrolled, setScrolled] = useState(false);
  const [menu, setMenu] = useState(false);
  useEffect(() => {
    const sc = document.getElementById("scroll-root");
    const onScroll = () => setScrolled((sc ? sc.scrollTop : window.scrollY) > 12);
    const tgt = sc || window; tgt.addEventListener("scroll", onScroll); onScroll();
    return () => tgt.removeEventListener("scroll", onScroll);
  }, []);
  const links = [["Product", "home"], ["Modules", "modules"], ["Pricing", "pricing"], ["About", "about"]];
  const NavLink = ({ label, to }) => {
    const [h, setH] = useState(false);
    const active = route === to;
    return <a onClick={(e) => { e.preventDefault(); go(to); }} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} href={"#" + to}
      style={{ font: "var(--type-body)", fontWeight: 500, color: active ? "var(--green-800)" : h ? "var(--ink-900)" : "var(--text-secondary)", cursor: "pointer", padding: "6px 2px", position: "relative" }}>
      {label}
      <span style={{ position: "absolute", left: 0, right: 0, bottom: -2, height: 2, borderRadius: 2, background: "var(--green-700)", transform: active ? "scaleX(1)" : "scaleX(0)", transformOrigin: "center", transition: "transform var(--transition-base)" }} />
    </a>;
  };
  return (
    <header style={{ position: "sticky", top: 0, zIndex: 100, background: scrolled ? "rgba(255,255,255,0.85)" : "var(--white)", backdropFilter: scrolled ? "saturate(180%) blur(12px)" : "none", borderBottom: "1px solid " + (scrolled ? "transparent" : "var(--border-subtle)"), boxShadow: scrolled ? "0 2px 16px rgba(16,24,40,0.07)" : "none", transition: "box-shadow var(--transition-base), background var(--transition-base)" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", height: 66, display: "flex", alignItems: "center", gap: 28, padding: "0 24px" }}>
        <a href="#home" onClick={(e) => { e.preventDefault(); go("home"); }} style={{ display: "flex", alignItems: "center", flexShrink: 0 }}><img src="../../assets/orchecomm-logo.svg" height="28" alt="OrchEcomm" /></a>
        <nav className="web-desktop-nav" style={{ display: "flex", gap: 26, marginLeft: 8 }}>{links.map(([l, t]) => <NavLink key={t} label={l} to={t} />)}</nav>
        <div className="web-desktop-nav" style={{ marginLeft: "auto", display: "flex", alignItems: "center", gap: 14 }}>
          <a href="#" onClick={(e) => { e.preventDefault(); go("home"); }} style={{ font: "var(--type-body)", fontWeight: 500, color: "var(--text-secondary)", cursor: "pointer" }}>Log in</a>
          <Btn size="md" onClick={() => window.OcSignup.open()}>Get started free</Btn>
        </div>
        <button className="web-mobile-toggle" onClick={() => setMenu(true)} style={{ display: "none", marginLeft: "auto", width: 40, height: 40, alignItems: "center", justifyContent: "center", border: "1px solid var(--border-default)", borderRadius: "var(--radius-sm)", background: "var(--white)", color: "var(--ink-900)", cursor: "pointer" }}><I.Menu size={20} /></button>
      </div>
      {menu ? (
        <div style={{ position: "fixed", inset: 0, zIndex: 200, background: "linear-gradient(160deg, var(--green-800), var(--green-900))", color: "#fff", display: "flex", flexDirection: "column", padding: 24 }}>
          <div style={{ display: "flex", alignItems: "center" }}>
            <img src="../../assets/orchecomm-logo-white.svg" height="28" alt="OrchEcomm" />
            <button onClick={() => setMenu(false)} style={{ marginLeft: "auto", width: 40, height: 40, display: "inline-flex", alignItems: "center", justifyContent: "center", border: "none", background: "rgba(255,255,255,0.12)", color: "#fff", borderRadius: "var(--radius-sm)", cursor: "pointer" }}><I.X size={20} /></button>
          </div>
          <nav style={{ display: "flex", flexDirection: "column", gap: 4, marginTop: 32 }}>
            {links.map(([l, t]) => <a key={t} href={"#" + t} onClick={(e) => { e.preventDefault(); go(t); setMenu(false); }} style={{ font: "var(--font-sans)", fontSize: 28, fontWeight: 600, color: "#fff", padding: "12px 0", borderBottom: "1px solid rgba(255,255,255,0.12)" }}>{l}</a>)}
          </nav>
          <div style={{ marginTop: "auto", display: "flex", flexDirection: "column", gap: 12 }}>
            <Btn variant="whiteSolid" size="lg" onClick={() => { setMenu(false); window.OcSignup.open(); }} style={{ width: "100%" }}>Get started free</Btn>
          </div>
        </div>
      ) : null}
    </header>
  );
}

/* ---- Integration scrolling ticker ---- */
function Ticker() {
  const items = window.OcWeb.WEB_INTEGRATIONS;
  const loop = [...items, ...items];
  return (
    <div style={{ background: "var(--green-900)", padding: "30px 0", position: "relative", overflow: "hidden" }}>
      <div style={{ textAlign: "center", marginBottom: 20 }}>
        <span style={{ font: "var(--font-sans)", fontSize: 12, fontWeight: 600, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--green-300)" }}>Works with your existing stack</span>
      </div>
      <div style={{ position: "relative", maskImage: "linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)", WebkitMaskImage: "linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent)" }}>
        <div style={{ display: "flex", gap: 56, width: "max-content", animation: "web-ticker 32s linear infinite" }}>
          {loop.map((it, i) => (
            <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 12, color: "rgba(255,255,255,0.92)", flexShrink: 0 }}>
              <img src={`https://cdn.simpleicons.org/${it.slug}/white`} alt="" width="26" height="26" style={{ display: "block", opacity: 0.92 }} loading="lazy" onError={(e) => { e.target.style.display = "none"; }} />
              <span style={{ font: "var(--font-sans)", fontSize: 17, fontWeight: 600, letterSpacing: "-0.01em" }}>{it.name}</span>
            </span>
          ))}
        </div>
      </div>
      <style>{`@keyframes web-ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}`}</style>
    </div>
  );
}

/* ---- Final CTA (shared across pages) ---- */
function FinalCTA({ go }) {
  return (
    <section style={{ position: "relative", background: "linear-gradient(165deg, var(--green-800), var(--green-900))", color: "#fff", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, opacity: 0.5, pointerEvents: "none" }}>{React.createElement(window.OrchestrationDiagram, { decorative: true })}</div>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse at center, transparent 20%, var(--green-900) 78%)" }} />
      <div style={{ position: "relative", maxWidth: 760, margin: "0 auto", padding: "100px 24px", textAlign: "center" }}>
        <Reveal>
          <h2 style={{ font: "var(--font-sans)", fontSize: 44, fontWeight: 700, letterSpacing: "-0.02em", lineHeight: 1.1, textWrap: "balance", color: "#fff" }}>Ready to orchestrate your store?</h2>
          <p style={{ font: "var(--font-sans)", fontSize: 18, lineHeight: 1.5, color: "var(--green-100)", marginTop: 16, maxWidth: 520, marginInline: "auto" }}>Join store owners who replaced their disconnected tools with one suite.</p>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 30, flexWrap: "wrap" }}>
            <Btn variant="whiteSolid" size="lg" onClick={() => window.OcSignup.open()}>Start for free</Btn>
            <Btn variant="whiteGhost" size="lg" onClick={() => window.OcSignup.open()}>Book a demo</Btn>
          </div>
          <p style={{ font: "var(--font-sans)", fontSize: 13, color: "var(--green-200)", marginTop: 20 }}>Free plan available · No credit card required</p>
        </Reveal>
      </div>
    </section>
  );
}

/* ---- Footer ---- */
function Footer({ go }) {
  const I = window.OcWebIcons;
  return (
    <footer style={{ background: "var(--ink-900)", color: "var(--ink-300)" }}>
      <div style={{ maxWidth: 1180, margin: "0 auto", padding: "48px 24px 24px", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24, flexWrap: "wrap" }}>
        <div>
          <img src="../../assets/orchecomm-logo-white.svg" height="28" alt="OrchEcomm" />
          <p style={{ font: "var(--type-body)", color: "var(--ink-400)", marginTop: 12, maxWidth: 280, lineHeight: 1.5 }}>The operating suite for your store.</p>
        </div>
        <a href="https://www.linkedin.com/company/orchecomm" target="_blank" rel="noopener noreferrer"
          style={{ display: "inline-flex", alignItems: "center", gap: 9, height: 40, padding: "0 16px", borderRadius: "var(--radius-sm)", background: "rgba(255,255,255,0.06)", color: "var(--ink-200)", textDecoration: "none", font: "var(--type-body)", fontWeight: 500 }}>
          {React.createElement(I.Linkedin, { size: 18 })} Follow us on LinkedIn
        </a>
      </div>
      <div style={{ borderTop: "1px solid rgba(255,255,255,0.08)" }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", padding: "18px 24px", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 8, font: "var(--type-caption)", color: "var(--ink-400)" }}>
          <span>© 2026 OrchEcomm. All rights reserved.</span>
          <span>Made for store owners.</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Reveal, Btn, Eyebrow, Nav, Ticker, FinalCTA, Footer });