// Enclaverse homepage v2 — nav, hero, ticker. Playful/dynamic direction (Tano-style motion).
const heroDS = window.EnclaverseDesignSystem_e22b90;

/* Scroll-in reveal */
function Reveal({ children, delay = 0, y = 28, style, as }) {
  const ref = React.useRef(null);
  const [vis, setVis] = React.useState(false);
  React.useEffect(() => {
    // Progressive enhancement: never leave content hidden if IO can't fire.
    if (ref.current && ref.current.getBoundingClientRect().top < window.innerHeight) {
      setVis(true);
      return;
    }
    const io = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setVis(true); io.disconnect(); } },
      { threshold: 0.12 }
    );
    if (ref.current) io.observe(ref.current);
    const fallback = setTimeout(() => setVis(true), 1000);
    return () => { io.disconnect(); clearTimeout(fallback); };
  }, []);
  return (
    <div ref={ref} style={{
      opacity: vis ? 1 : 0,
      transform: vis ? "none" : "translateY(" + y + "px)",
      transition: "opacity .7s var(--ease-out) " + delay + "ms, transform .7s var(--ease-out) " + delay + "ms",
      ...style,
    }}>{children}</div>
  );
}

/* Floating pill nav */
function PillNav({ onNavigate, onCta, links, homeHref = "#home" }) {
  const { Wordmark, Button } = heroDS;
  const anchorLinks = [["Services", "services"], ["Work", "work"], ["Creators", "creators"], ["Reviews", "reviews"]];
  return (
    <header data-screen-label="Nav" style={{ position: "fixed", top: 16, left: 0, right: 0, zIndex: 90, display: "flex", justifyContent: "center", pointerEvents: "none" }}>
      <div style={{
        pointerEvents: "auto", display: "flex", alignItems: "center", gap: 6,
        background: "rgba(255,255,255,0.85)", backdropFilter: "blur(14px)", WebkitBackdropFilter: "blur(14px)",
        border: "1px solid var(--border-subtle)", borderRadius: 999, padding: "8px 8px 8px 20px",
        boxShadow: "var(--shadow-pop)",
      }}>
        <a href={homeHref} onClick={(e) => { if (onNavigate) { e.preventDefault(); onNavigate("home"); } }} style={{ display: "flex", marginRight: 14, textDecoration: "none" }}>
          <Wordmark size={20} />
        </a>
        {(links || anchorLinks).map((it) =>
          Array.isArray(it) ? (
            <a key={it[1]} href={"#" + it[1]} className="ens-navlink" onClick={(e) => { e.preventDefault(); onNavigate(it[1]); }}>{it[0]}</a>
          ) : (
            <a key={it.href} href={it.href} className="ens-navlink" style={it.active ? { background: "var(--accent-soft)", color: "var(--text-heading)" } : undefined}>{it.label}</a>
          )
        )}
        <span style={{ width: 8 }}></span>
        <Button variant="primary" size="sm" onClick={onCta}>Work with us</Button>
      </div>
    </header>
  );
}

/* Floating creator card used in the hero */
function HeroCard({ id, tag, meta, rot, top, left, right, delay, width = 216, height = 300 }) {
  return (
    <div className="ens-hero-card ens-float" style={{
      position: "absolute", top, left, right, width, "--rot": rot, animationDelay: delay,
      zIndex: 1,
    }}>
      <div style={{
        width: "100%", height, borderRadius: 22, overflow: "hidden", position: "relative",
        border: "1px solid var(--border-subtle)", background: "var(--surface-tint)", boxShadow: "var(--shadow-pop)",
      }}>
        <image-slot id={id} shape="rect" placeholder={"Drop reel — " + meta}></image-slot>
        <span style={{
          position: "absolute", top: 12, left: 12, background: "rgba(23,18,58,0.78)", color: "#fff",
          fontSize: 10.5, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.08em",
          padding: "4px 10px", borderRadius: 999, pointerEvents: "none",
        }}>{tag}</span>
        <span style={{
          position: "absolute", left: 12, bottom: 12, background: "rgba(255,255,255,0.94)", color: "var(--ink-900)",
          fontSize: 12, fontWeight: 600, padding: "5px 10px", borderRadius: 8, pointerEvents: "none",
        }}>{meta}</span>
      </div>
    </div>
  );
}

function Hero({ onCta, onServices }) {
  return (
    <section id="home" data-screen-label="Hero" style={{ position: "relative", overflow: "hidden", padding: "168px 0 96px" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(900px 520px at 50% -10%, var(--violet-100), transparent 72%)" }}></div>

      <HeroCard id="hero-reel-a" tag="Product launch" meta="Garmin · Clara L." rot="-7deg" top={130} left="max(2vw, 16px)" delay="0s" />
      <HeroCard id="hero-reel-b" tag="UGC series" meta="Gentle Brands · Clizia S." rot="6deg" top={210} right="max(2vw, 16px)" delay="-2.6s" width={200} height={276} />

      <div className="ens-hero-card ens-float" style={{ position: "absolute", top: 96, right: "16vw", "--rot": "4deg", animationDelay: "-4s", zIndex: 1 }}>
        <span className="ens-chip">Awareness</span>
      </div>
      <div className="ens-hero-card ens-float" style={{ position: "absolute", top: 470, left: "17vw", "--rot": "-5deg", animationDelay: "-1.4s", zIndex: 1 }}>
        <span className="ens-chip">Conversion</span>
      </div>

      <div className="ens-wrap" style={{ position: "relative", zIndex: 2, maxWidth: 900, textAlign: "center" }}>
        <Reveal>
          <span style={{
            display: "inline-flex", alignItems: "center", gap: 8, background: "var(--surface-raised)",
            border: "1px solid var(--border-accent)", borderRadius: 999, padding: "7px 16px",
            fontSize: 13, fontWeight: 600, color: "var(--violet-700)",
          }}>
            <span style={{ width: 7, height: 7, borderRadius: 999, background: "var(--green-500)", display: "inline-block" }}></span>
            Boutique influencer marketing · EU + US
          </span>
        </Reveal>
        <Reveal delay={80}>
          <h1 style={{
            fontFamily: "var(--font-display)", fontWeight: 700, letterSpacing: "var(--tracking-display)",
            fontSize: "clamp(52px, 7.4vw, 96px)", lineHeight: 1.02, color: "var(--text-heading)", margin: "28px 0 0",
          }}>
            Influencer marketing that <span className="ens-mark">sells</span>,<br />
            <em style={{ fontStyle: "normal", color: "var(--accent)" }}>without selling out.</em>
          </h1>
        </Reveal>
        <Reveal delay={160}>
          <p style={{ fontSize: "var(--text-lead)", color: "var(--text-body)", lineHeight: 1.6, maxWidth: 600, margin: "28px auto 0" }}>
            We don't chase trends. We build campaigns that work — for brands tired of the noise, and creators who know their worth.
          </p>
        </Reveal>
        <Reveal delay={240}>
          <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 40 }}>
            <heroDS.Button variant="primary" size="lg" onClick={onCta}>Get started →</heroDS.Button>
            <heroDS.Button variant="secondary" size="lg" onClick={onServices}>See how it works</heroDS.Button>
          </div>
        </Reveal>
        <Reveal delay={320}>
          <p style={{ fontSize: 13.5, color: "var(--text-muted)", marginTop: 20 }}>
            Campaigns from €500 to €50,000. First proposal in 48 hours.
          </p>
        </Reveal>
      </div>
    </section>
  );
}

/* Brand + creator ticker */
function Ticker() {
  const items = ["Garmin", "Clara Lambrughi", "L'Oréal", "Costanza Tebaldini", "Gentle Brands", "Clizia Somma", "Niccolò Cesari", "Niccolò Spoto"];
  const row = items.map((t, i) => (
    <span key={i} style={{ display: "inline-flex", alignItems: "center", gap: 28 }}>
      <span style={{
        fontFamily: "var(--font-display)", fontSize: 22, fontWeight: 600, letterSpacing: "-0.01em",
        color: i % 2 === 0 ? "var(--text-heading)" : "var(--ink-400)", whiteSpace: "nowrap",
      }}>{t}</span>
      <span style={{ color: "var(--violet-300)", fontSize: 14 }}>✦</span>
    </span>
  ));
  return (
    <section data-screen-label="Ticker" style={{ borderTop: "1px solid var(--border-subtle)", borderBottom: "1px solid var(--border-subtle)", background: "var(--surface-raised)", padding: "22px 0" }}>
      <div className="ens-wrap" style={{ textAlign: "center", marginBottom: 14 }}>
        <span className="ens-kicker">Campaigns with</span>
      </div>
      <div className="ens-marquee">
        <div className="ens-marquee-track" style={{ gap: 28, "--dur": "28s" }}>
          <div style={{ display: "flex", gap: 28 }}>{row}</div>
          <div style={{ display: "flex", gap: 28 }} aria-hidden="true">{row}</div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { EnclaverseHome: { Reveal, PillNav, Hero, Ticker } });