// Viyu Partners — Hero (editorial, per build brief)
// Restyle (July 2026, reference pass): full-bleed panoramic media that reads
// LARGE and bright — minimal scrim, no container gutters. Copy anchored to the
// lower-left third. Carousel controls + segmented progress bottom-right so the
// rotation reads as deliberate. Minimalist hairline geometry replaces the old
// gradient wash. Palette, fonts, and copy unchanged.

const VIYU_HERO_LOCATIONS = [
  { id: "heroNYC", name: "New York City", image: "https://images.unsplash.com/photo-1496588152823-86ff7695e68f?fit=crop&w=2400&q=80" },
  { id: "heroJerseyCity", name: "Jersey City", image: "https://images.unsplash.com/photo-1572053675669-036f6b9232fd?fit=crop&w=2400&q=80" },
  { id: "heroPrinceton", name: "Princeton", image: "https://images.unsplash.com/photo-1562774053-701939374585?fit=crop&w=2400&q=80" },
  { id: "heroHoboken", name: "Hoboken", image: "https://images.unsplash.com/photo-1522083165195-3424ed129620?fit=crop&w=2400&q=80" },
  { id: "heroJerseyShore", name: "Jersey Shore", image: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?fit=crop&w=2400&q=80" },
  { id: "heroPhiladelphia", name: "Philadelphia", image: "https://images.unsplash.com/photo-1569761316261-9a8696fa2ca3?fit=crop&w=2400&q=80" },
  { id: "heroStamford", name: "Stamford", image: "https://images.unsplash.com/photo-1584378110532-0b19152ca837?fit=crop&w=2400&q=80" },
  { id: "heroBoston", name: "Boston", image: "https://images.unsplash.com/photo-1606373664971-bf9b25eb508d?fit=crop&w=2400&q=80" },
  { id: "heroHartford", name: "Hartford", image: "https://images.unsplash.com/photo-1611008715758-e56c60b9476d?fit=crop&w=2400&q=80" },
];
const HERO_INTERVAL = 5600;

// Resolve to the bundler's inlined blob when present (standalone export), else the live URL.
const viyuResolve = (loc) => (typeof window !== "undefined" && window.__resources && window.__resources[loc.id]) || loc.image;

function HeroBackground({ active }) {
  return (
    <div style={{ position: "absolute", inset: 0, overflow: "hidden", background: "var(--navy-950)" }} aria-hidden="true">
      {VIYU_HERO_LOCATIONS.map((loc, i) => (
        <div key={loc.name}
          className="viyu-pan-layer"
          style={{
            position: "absolute", inset: 0,
            backgroundImage: `url(${viyuResolve(loc)})`,
            backgroundSize: "cover",
            backgroundPosition: "center",
            opacity: i === active ? 1 : 0,
            transition: "opacity var(--dur-crossfade) var(--ease-out)",
            animation: "viyuPan 30s ease-in-out infinite alternate",
            animationDelay: `${i * -6}s`,
            willChange: "opacity, transform",
          }} />
      ))}
      {/* Minimal scrim: enough for legibility at lower-left, image stays bright and open */}
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(70deg, rgba(8,21,34,0.94) 0%, rgba(8,21,34,0.78) 34%, rgba(8,21,34,0.34) 64%, rgba(8,21,34,0.12) 100%)", pointerEvents: "none" }} />
      <div style={{ position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(8,21,34,0.80) 0%, rgba(8,21,34,0.18) 34%, transparent 62%)", pointerEvents: "none" }} />

    </div>
  );
}

function Hero({ navigate }) {
  const { Button } = window.ViyuPartnersDesignSystem_8838e3;
  const Arrow = () => <span style={{ display: "inline-flex" }} dangerouslySetInnerHTML={{ __html: lucide.createElement(lucide.ArrowRight, { width: 16, height: 16 }).outerHTML }} />;
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);
  const count = VIYU_HERO_LOCATIONS.length;

  React.useEffect(() => {
    if (paused) return;
    if (window.matchMedia && window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
    const id = setInterval(() => setActive((i) => (i + 1) % count), HERO_INTERVAL);
    return () => clearInterval(id);
  }, [paused, count]);

  const go = (d) => setActive((i) => (i + d + count) % count);
  const icon = (n) => <span style={{ display: "inline-flex" }} dangerouslySetInnerHTML={{ __html: lucide.createElement(lucide[n], { width: 14, height: 14 }).outerHTML }} />;

  return (
    <div style={{ position: "relative", minHeight: "100vh", width: "100%", overflow: "hidden", background: "var(--navy-900)", color: "#fff", display: "flex", flexDirection: "column", justifyContent: "flex-end" }}>
      <HeroBackground active={active} />

      {/* Copy anchored to the lower-left third */}
      <div className="viyu-hero-copy" style={{ position: "relative", zIndex: 10, maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 24px", width: "100%" }}>
        <div style={{ maxWidth: "1000px" }} className="viyu-fade-up">
          <span style={{ display: "inline-flex", alignItems: "center", gap: "12px", fontFamily: "var(--font-mono)", fontSize: "var(--eyebrow-size)", fontWeight: 500, letterSpacing: "var(--eyebrow-tracking)", textTransform: "uppercase", color: "var(--copper-text)", marginBottom: "28px" }}>
            <span style={{ width: "28px", height: "1px", background: "var(--copper)" }}></span>
            One firm. Every sector.
          </span>
          <h1 style={{ fontSize: "clamp(40px, 6.6vw, 94px)", fontWeight: 700, letterSpacing: "var(--tracking-tighter)", lineHeight: 1.01, marginBottom: "24px", textWrap: "pretty" }}>
            Enterprise Intelligence,<br /><em style={{ fontStyle: "italic", fontWeight: 400, color: "var(--copper-text)" }}>without enterprise overhead.</em>
          </h1>
          <p style={{ fontSize: "clamp(19px, 2.4vw, 28px)", fontWeight: 400, color: "#fff", letterSpacing: "var(--tracking-tight)", lineHeight: 1.2, marginBottom: "24px" }}>
            We engineer the work, then we run it.
          </p>
          <p style={{ maxWidth: "680px", fontSize: "clamp(16px, 1.8vw, 19px)", fontWeight: 300, color: "var(--gray-300)", lineHeight: 1.7 }}>
            Viyu Partners is a Business Process Management firm and Managed Services Provider serving SMB and mid-market organizations across the Northeast through a single model: we advise, we build, and we operate. Every engagement is led by senior specialists assembled around your challenge, with one partner accountable for the result from first diagnosis through years of operation.
          </p>
          <div style={{ marginTop: "36px", display: "flex", gap: "16px", flexWrap: "wrap" }}>
            <Button variant="secondary" onClick={() => navigate("about")}>See how we operate</Button>
          </div>
          {/* Three pillars, folded into the hero (addendum S11) */}
          <div className="viyu-hero-pillars" style={{ marginTop: "40px", display: "flex", flexWrap: "wrap", gap: "0", borderTop: "1px solid rgba(255,255,255,0.16)", maxWidth: "680px" }}>
            {[["Revenue", "The growth side"], ["Cost", "The operating side"], ["Risk", "The protection layer"]].map(([t, f], i) => (
              <div key={t} style={{ flex: "1 1 160px", padding: "16px 20px 0 0", marginLeft: i ? "20px" : 0, borderLeft: i ? "1px solid rgba(255,255,255,0.16)" : "none", paddingLeft: i ? "20px" : 0 }}>
                <div style={{ color: "#fff", fontWeight: 600, fontSize: "16px", letterSpacing: "var(--tracking-tight)" }}>{t}</div>
                <div style={{ color: "var(--gray-400)", fontWeight: 300, fontSize: "13px", marginTop: "4px" }}>{f}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Carousel rail: location + segmented progress + controls */}
      <div className="viyu-hero-rail" style={{ position: "relative", zIndex: 10, maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 24px", width: "100%" }}>
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "24px", flexWrap: "wrap", paddingTop: "36px", paddingBottom: "30px" }}>
          <span style={{ display: "inline-flex", alignItems: "baseline", gap: "12px", fontFamily: "var(--font-mono)", fontSize: "12px", letterSpacing: "0.14em", textTransform: "uppercase", whiteSpace: "nowrap" }}>
            <span style={{ color: "var(--gray-500)" }}>We serve</span>
            <span key={active} className="viyu-loc-label" style={{ color: "#fff" }}>{VIYU_HERO_LOCATIONS[active].name}</span>
          </span>
          <div style={{ display: "flex", alignItems: "center", gap: "20px" }}>
            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
              {VIYU_HERO_LOCATIONS.map((loc, i) => (
                <button key={loc.id} onClick={() => setActive(i)} aria-label={loc.name}
                  style={{ width: i === active ? "40px" : "22px", height: "2px", padding: 0, border: "none", cursor: "pointer", background: i === active ? "var(--copper)" : "rgba(255,255,255,0.26)", transition: "width var(--dur-base) var(--ease-out), background var(--dur-base)" }}></button>
              ))}
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
              <button className="viyu-hero-btn" onClick={() => setPaused((p) => !p)} aria-label={paused ? "Play" : "Pause"}>{icon(paused ? "Play" : "Pause")}</button>
              <button className="viyu-hero-btn" onClick={() => go(-1)} aria-label="Previous">{icon("ArrowLeft")}</button>
              <button className="viyu-hero-btn" onClick={() => go(1)} aria-label="Next">{icon("ArrowRight")}</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Hero });