// Sticky Nav + Hero

const Nav = ({ onCTA }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  const links = [
    { href: "#content-services", label: "Services" },
    { href: "#work", label: "Work" },
    { href: "#process", label: "Process" },
    { href: "#about", label: "About" },
    { href: "#contact", label: "Contact" },
  ];
  return (
    <header className={"fixed top-0 inset-x-0 z-40 transition-all " + (scrolled ? "backdrop-blur-xl bg-black/40 border-b border-white/5" : "bg-transparent")}>
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10 h-16 flex items-center justify-between">
        <a href="#top" className="flex items-center gap-2.5 group">
          <span className="relative inline-flex items-center justify-center h-8 w-8">
            <span className="absolute inset-0 rounded-[10px] bg-accent" />
            <span className="absolute inset-[3px] rounded-[7px] bg-[var(--bg)]" />
            <span className="relative font-mono text-[11px] font-bold tracking-tighter">m✦</span>
          </span>
          <span className="display text-[18px] tracking-[-0.04em]">mercentalabs</span>
        </a>
        <nav className="hidden md:flex items-center gap-1 text-[13.5px] text-white/70">
          {links.map(l => (
            <a key={l.href} href={l.href} className="px-3.5 py-2 rounded-full hover:text-white hover:bg-white/5 transition">{l.label}</a>
          ))}
        </nav>
        <div className="flex items-center gap-2">
          <a href="#contact" className="hidden sm:inline-flex btn-accent items-center gap-1.5 px-4 py-2 rounded-full text-[13px] font-medium">
            Start a project
            <Icon name="arrow-up-right" size={14} strokeWidth={2} />
          </a>
          <button onClick={() => setOpen(!open)} className="md:hidden btn-ghost w-9 h-9 rounded-full inline-flex items-center justify-center">
            <Icon name={open ? "x" : "menu"} size={16} />
          </button>
        </div>
      </div>
      {open && (
        <div className="md:hidden border-t border-white/5 bg-black/80 backdrop-blur-xl">
          <div className="px-6 py-4 flex flex-col gap-1">
            {links.map(l => (
              <a key={l.href} href={l.href} onClick={() => setOpen(false)} className="py-2.5 text-white/80">{l.label}</a>
            ))}
          </div>
        </div>
      )}
    </header>
  );
};

const HeroVisual = ({ accent }) => {
  const [imgFailed, setImgFailed] = React.useState(false);
  // animated mesh + floating tags
  return (
    <div className="relative h-[440px] lg:h-[560px] rounded-[28px] overflow-hidden border border-white/10 bg-[var(--bg-2)]">
      {/* mesh */}
      <div className="mesh" style={{
        background: `radial-gradient(40% 40% at 25% 30%, ${accent} 0%, transparent 60%),
                     radial-gradient(35% 35% at 80% 20%, var(--warm) 0%, transparent 60%),
                     radial-gradient(50% 50% at 60% 85%, #5b8cff 0%, transparent 60%)`
      }}/>
      <div className="absolute inset-0 dotgrid opacity-40" />

      {/* Center "post" preview */}
      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-[280px] sm:w-[320px] rounded-[22px] border border-white/15 bg-black/60 backdrop-blur-xl shadow-2xl overflow-hidden">
        <div className="px-4 py-3 flex items-center gap-2.5 border-b border-white/10">
          <div className="h-7 w-7 rounded-full bg-accent text-black flex items-center justify-center font-mono text-[11px] font-bold">M</div>
          <div className="flex-1">
            <div className="text-[12px] font-medium">mercentalabs</div>
            <div className="text-[10.5px] text-white/50 font-mono">posted 2m ago · sponsored</div>
          </div>
          <Icon name="more-horizontal" size={16} className="text-white/60" />
        </div>
        <div className="aspect-[4/5] relative bg-gradient-to-br from-[#1a1a22] via-[#0f0f14] to-[#0a0a0b] overflow-hidden">
          {!imgFailed && (
            <img
              src="/images/hero-post.jpg"
              alt="Behind the scenes — content shoot"
              loading="lazy"
              decoding="async"
              onError={() => setImgFailed(true)}
              className="absolute inset-0 w-full h-full object-cover"
            />
          )}
          {/* Tinted gradient + bottom darken keep the brand text legible over any photo */}
          <div className="absolute inset-0" style={{
            background: `radial-gradient(60% 60% at 30% 35%, ${accent}26 0%, transparent 60%)`
          }}/>
          <div className="absolute inset-0 bg-gradient-to-b from-black/40 via-black/10 to-black/70" />
          <div className="absolute inset-6 flex flex-col justify-between">
            <div className="font-serif italic text-[26px] leading-[1.05] text-white drop-shadow-[0_2px_10px_rgba(0,0,0,0.6)]">
              Content<br/>that <span className="text-accent not-italic font-sans">converts.</span>
            </div>
            <div className="flex items-end justify-between">
              <div className="font-mono text-[10px] text-white/80 leading-relaxed">
                CAMPAIGN_034<br/>↳ 02:14 / 00:30
              </div>
              <div className="h-10 w-10 rounded-full bg-white text-black flex items-center justify-center">
                <Icon name="play" size={14} strokeWidth={2.4} />
              </div>
            </div>
          </div>
        </div>
        <div className="px-4 py-3 flex items-center gap-4 text-white/80">
          <Icon name="heart" size={18} />
          <Icon name="message-circle" size={18} />
          <Icon name="send" size={18} />
          <span className="ml-auto font-mono text-[11px] text-white/50">12.4k saves</span>
        </div>
      </div>

      {/* Floating chips */}
      <div className="absolute top-6 left-6 float-y rounded-full border border-white/15 bg-black/40 backdrop-blur px-3 py-1.5 text-[11px] font-mono text-white/80 flex items-center gap-2">
        <span className="h-1.5 w-1.5 rounded-full bg-accent animate-pulse" />
        live · +2,418 saves today
      </div>
      <div className="absolute top-12 right-8 float-y rounded-2xl border border-white/15 bg-black/50 backdrop-blur px-3.5 py-2.5 text-[11px] font-mono" style={{ animationDelay: ".7s" }}>
        <div className="text-white/50 mb-1">CTR · 30d</div>
        <div className="text-accent text-[18px] font-sans font-semibold">4.62%<span className="text-white/40 text-[10px] ml-1.5">↑ 1.8%</span></div>
      </div>
      <div className="absolute bottom-6 left-6 float-y rounded-2xl border border-white/15 bg-black/50 backdrop-blur px-3.5 py-2.5" style={{ animationDelay: "1.4s" }}>
        <div className="font-mono text-[10px] text-white/50 mb-1.5">REELS / WK</div>
        <div className="flex items-end gap-1 h-8">
          {[3,5,4,7,6,9,8,12].map((h,i) => (
            <span key={i} className="w-1.5 rounded-sm bg-white/30" style={{ height: h*3+"px", background: i>5 ? "var(--accent)" : undefined }} />
          ))}
        </div>
      </div>
      <div className="absolute bottom-10 right-6 float-y rounded-full border border-accent/40 bg-accent/10 backdrop-blur px-3 py-1.5 text-[11px] font-mono text-accent flex items-center gap-2" style={{ animationDelay: "2s" }}>
        <Icon name="trending-up" size={12} strokeWidth={2.4} />
        +340% engagement
      </div>
    </div>
  );
};

// Renders a single client logo lockup. Accepts a string (legacy text-only),
// or an object { name, icon?, logo? }. With a real `logo` SVG we show just
// the mark — that's how real brand walls read. Without one, we fall back
// to lucide icon + wordmark.
const ClientLockup = ({ item }) => {
  if (typeof item === "string") {
    return <span className="font-mono text-[12px] tracking-[0.2em] text-white/45 whitespace-nowrap">{item}</span>;
  }
  if (item.logo) {
    // brightness-0 + invert collapses brand-colored SVGs into a white silhouette,
    // the convention for monochrome "trusted by" walls.
    return (
      <img
        src={item.logo}
        alt={item.name}
        loading="lazy"
        className="h-6 lg:h-7 w-auto object-contain brightness-0 invert opacity-55 hover:opacity-100 transition"
      />
    );
  }
  return (
    <span className="inline-flex items-center gap-2.5 whitespace-nowrap text-white/55 hover:text-white/85 transition">
      <Icon name={item.icon || "circle"} size={15} strokeWidth={1.6} className="text-white/55" />
      <span className="font-mono text-[12px] tracking-[0.22em] font-medium">{item.name}</span>
    </span>
  );
};

const Marquee = ({ items, reverse }) => (
  <div className="relative overflow-hidden">
    <div className={"flex items-center gap-12 marquee-track" + (reverse ? " reverse" : "") } style={{ width: "max-content" }}>
      {[...items, ...items].map((item, i) => (
        <span key={i} className="flex items-center gap-12">
          <ClientLockup item={item} />
          <span className="h-1 w-1 rounded-full bg-white/20" />
        </span>
      ))}
    </div>
    <div className="absolute inset-y-0 left-0 w-24 bg-gradient-to-r from-[var(--bg)] to-transparent pointer-events-none" />
    <div className="absolute inset-y-0 right-0 w-24 bg-gradient-to-l from-[var(--bg)] to-transparent pointer-events-none" />
  </div>
);

const Hero = ({ accent, headline }) => {
  return (
    <section id="top" className="relative pt-28 lg:pt-36 pb-16 lg:pb-24">
      <div className="max-w-[1320px] mx-auto px-6 lg:px-10">
        {/* eyebrow row */}
        <div className="flex flex-wrap items-center gap-3 reveal in mb-8">
          <span className="inline-flex items-center gap-2 rounded-full border border-white/12 bg-white/[0.03] px-3 py-1.5 text-[11.5px] font-mono text-white/70">
            <span className="h-1.5 w-1.5 rounded-full bg-accent animate-pulse" />
            Now booking Q3 · 2 slots left
          </span>
          <span className="font-mono text-[11.5px] text-white/40">A content & social studio · est. 2021</span>
        </div>

        <div className="grid lg:grid-cols-12 gap-10 lg:gap-14 items-end">
          <div className="lg:col-span-7">
            <h1 className="display display-tight text-[58px] sm:text-[80px] lg:text-[108px] reveal in">
              Content that<br/>
              <span className="font-serif italic font-normal">converts.</span><br/>
              Social that<br/>
              <span className="relative inline-block">
                <span className="font-serif italic font-normal text-accent">scales<span className="caret text-accent">.</span></span>
              </span>
            </h1>
            <p className="mt-8 max-w-[560px] text-[17px] leading-[1.55] text-white/65 reveal reveal-delay-1 in">
              We're an embedded studio for brands who want their content to do real work — strategy, video, copy, and paid built in one room and shipped on a cadence your competitors can't match.
            </p>
            <div className="mt-9 flex flex-wrap items-center gap-3 reveal reveal-delay-2 in">
              <a href="#contact" className="btn-accent inline-flex items-center gap-2 pl-5 pr-4 py-3 rounded-full text-[14px] font-medium">
                Book a call
                <span className="h-6 w-6 rounded-full bg-black/15 flex items-center justify-center">
                  <Icon name="arrow-up-right" size={13} strokeWidth={2.4} />
                </span>
              </a>
              <a href="#work" className="btn-ghost inline-flex items-center gap-2 px-5 py-3 rounded-full text-[14px] text-white/85">
                See our work
                <Icon name="arrow-right" size={14} strokeWidth={2} />
              </a>
              <span className="font-mono text-[11.5px] text-white/40 ml-2 hidden sm:inline">avg. reply time · 4h</span>
            </div>
          </div>
          <div className="lg:col-span-5 reveal reveal-delay-2 in">
            <HeroVisual accent={accent} />
          </div>
        </div>
      </div>

      {/* Client marquee */}
      <div className="mt-20 lg:mt-28 border-y border-white/8 py-5 reveal in">
        <div className="max-w-[1320px] mx-auto">
          <div className="flex items-center gap-6">
            <div className="hidden md:flex items-center gap-2 pl-6 lg:pl-10 pr-6 border-r border-white/8 shrink-0">
              <span className="font-mono text-[10.5px] tracking-[0.2em] text-white/40">TRUSTED BY</span>
            </div>
            <Marquee items={window.MERCENTA.CLIENTS} />
          </div>
        </div>
      </div>
    </section>
  );
};

window.Nav = Nav;
window.Hero = Hero;
window.Marquee = Marquee;