/* Sections part 1: Nav, Hero, Marquee, Edge */
const { motion, useScroll, useTransform } = window.Motion;
const { useRef, useState, useEffect } = React;

function Nav() {
  const { profile } = window.PORTFOLIO_DATA;
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const on = () => setScrolled(window.scrollY > 80);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  return (
    <header className="nav" style={{
      background: scrolled ? "rgba(242,234,211,0.92)" : "rgba(242,234,211,0)",
      borderBottom: "1px solid " + (scrolled ? "rgba(26,24,21,1)" : "rgba(26,24,21,0)"),
      backdropFilter: "blur(6px)",
      transition: "background 0.3s, border-color 0.3s",
    }}>
      <div className="nav-inner">
        <a href="#top" className="nav-brand" data-hover>
          <span className="brand-chip">{profile.initials}</span>
          <span className="brand-role">{profile.role}</span>
        </a>
        <nav className="nav-links">
          {profile.nav.map((n) =>
          <a key={n} href={`#${n.toLowerCase().replace(" ", "-")}`} data-hover>{n}</a>
          )}
        </nav>
        <a href={`mailto:${profile.email}`} className="nav-cta" data-hover>Say hi ↗</a>
      </div>
    </header>);

}

function Hero() {
  const { profile } = window.PORTFOLIO_DATA;
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start start", "end start"] });
  const headlineY = useTransform(scrollYProgress, [0, 1], [0, -120]);
  const stickerRot = useTransform(scrollYProgress, [0, 1], [-8, 18]);
  const blobY = useTransform(scrollYProgress, [0, 1], [0, -260]);

  return (
    <section ref={ref} id="top" className="hero">
      <div className="tape" style={{ top: 88, left: "12%", width: 120, height: 26, transform: "rotate(-8deg)", backgroundColor: "rgb(194, 61, 186)" }} />
      <div className="tape" style={{ top: 96, right: "10%", width: 90, height: 22, transform: "rotate(6deg)", background: "rgb(155, 94, 190)" }} />
      <motion.div style={{ y: blobY }} className="hero-halftone" aria-hidden />

      <motion.div initial={{ opacity: 0, y: 12 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: 0.2 }} className="tagline">{profile.tagline}</motion.div>

      <motion.h1 style={{ y: headlineY }} className="headline ransom">
        {profile.hero.split(" ").map((w, i) => <span key={`${i}-${w}`}>{w} </span>)}
      </motion.h1>

      <motion.div style={{ rotate: stickerRot, opacity: 11, fontFamily: "sans-serif" }} className="sticker">Open<br />for<br />work<br />— '26</motion.div>

      <div className="hero-bottom">
        <p className="hero-intro">{profile.intro}</p>
        <div className="hero-ctas">
          <a href="#work" data-hover className="btn btn-mustard"><span>Explore projects</span><span>↓</span></a>
          <a href="#process" data-hover className="btn btn-cream"><span>See my approach</span><span>→</span></a>
          <a href={profile.cv} download data-hover className="btn btn-ink"><span>Download CV</span><span>↓</span></a>
          <div className="status scribble">{profile.status}</div>
        </div>
      </div>

      <div className="stats">
        {profile.stats.map((s, i) =>
        <div key={i} className="stat">
            <div className="stat-n">{s.n}</div>
            <div className="stat-l">{s.label}</div>
          </div>
        )}
      </div>

      <div className="scroll-cue"><span className="line" />Scroll to explore</div>
    </section>);

}

function Marquee() {
  const { profile } = window.PORTFOLIO_DATA;
  const ref = useRef(null);
  const { scrollYProgress } = useScroll({ target: ref, offset: ["start end", "end start"] });
  const skew = useTransform(scrollYProgress, [0, 0.5, 1], [-8, 0, -8]);
  const items = [...profile.tags, ...profile.tags];
  return (
    <div ref={ref} className="marquee-wrap">
      <motion.div style={{ skewY: skew }} className="marquee-stack">
        <div className="marquee-track" style={{ ["--marquee-dur"]: "32s" }}>
          {items.map((t, i) => <span key={"a-" + i + "-" + t} className="m-item">{t}<span className="m-star">★</span></span>)}
          {items.map((t, i) => <span key={"b-" + i + "-" + t} className="m-item">{t}<span className="m-star">★</span></span>)}
        </div>
        <div className="marquee-track marquee-reverse" style={{ ["--marquee-dur"]: "44s" }}>
          {items.map((t, i) => <span key={"c-" + i + "-" + t} className="m-item m-out">{t}<span className="m-slash">/</span></span>)}
          {items.map((t, i) => <span key={"d-" + i + "-" + t} className="m-item m-out">{t}<span className="m-slash">/</span></span>)}
        </div>
      </motion.div>
    </div>);

}

function Edge() {
  const { edges } = window.PORTFOLIO_DATA;
  return (
    <section className="edge">
      <div className="eyebrow eyebrow-rust">My edge</div>
      <h2 className="h-serif">Three lenses, <em>one</em> product outcome.</h2>
      <div className="edge-grid">
        {edges.map((e, i) =>
        <motion.div key={e.n}
        initial={{ opacity: 0, y: 40 }}
        whileInView={{ opacity: 1, y: 0 }}
        viewport={{ once: true, amount: 0.4 }}
        transition={{ delay: i * 0.1, duration: 0.6 }}
        className={`edge-card edge-card-${i}`}>
            <div className="tape edge-tape" />
            <div className="edge-n">{e.n}</div>
            <div className="edge-t">{e.title}</div>
            <p className="edge-b">{e.body}</p>
          </motion.div>
        )}
      </div>
    </section>);

}

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