// sections-hero.jsx — above-the-fold hero with 3 layout variations.
const { useState: useHeroState, useEffect: useHeroEffect } = React;

function HeroThumb({ p, ratio = '4 / 5', big = false }) {
  const accent = window.acColor(p.accent);
  return (
    <a href="work.html" className="hero-thumb" data-cursor="view" style={{ '--ac': accent }}>
      <div className="hero-thumb-frame" style={{ aspectRatio: ratio }}>
        <image-slot id={`proj-${p.slot}`} shape="rect" placeholder={`${p.title} — drop image`} style={{ width: '100%', height: '100%' }}></image-slot>
        <span className="hero-thumb-tag">{p.cat.split(' · ')[0]}</span>
      </div>
      <div className="hero-thumb-meta">
        <span className="mono dim">{p.n}</span>
        <span className="hero-thumb-title">{p.title}</span>
        <span className="mono dim">{p.year}</span>
      </div>
    </a>);

}

function Hero({ layout = 'cosmos' }) {
  const feat = window.PROJECTS.slice(0, 4);

  // Endless-cosmos parallax: background layers drift slower than the page.
  useHeroEffect(() => {
    if (layout !== 'cosmos') return;
    const hero = document.querySelector('.hero-cosmos');
    if (!hero) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    const starsL = hero.querySelector('.stars-layer');
    const horizonL = hero.querySelector('.horizon-layer');
    const content = hero.querySelector('.cosmos-content');
    let raf = 0;
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(() => {
        const y = window.scrollY;
        if (y > window.innerHeight * 1.4) return; // stop once hero is well off-screen
        if (starsL) starsL.style.transform = `translate3d(0, ${y * 0.5}px, 0)`;
        if (horizonL) horizonL.style.transform = `translate3d(0, ${y * 0.82}px, 0)`;
        if (content) {
          content.style.transform = `translate3d(0, ${y * -0.18}px, 0)`;
          content.style.opacity = String(Math.max(0, 1 - y / 560));
        }
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => {window.removeEventListener('scroll', onScroll);cancelAnimationFrame(raf);};
  }, [layout]);

  const Headline = () =>
  <h1 className="hero-head">
      <span className="impact">Order</span>{' '}
      <span className="impact">from</span>{' '}
      <span className="serif-ital accent-text">noise.</span>
    </h1>;


  if (layout === 'cosmos') {
    // generate a stable starfield
    const stars = window.__stars || (window.__stars = Array.from({ length: 70 }, () => ({
      x: Math.random() * 100, y: Math.random() * 78,
      s: Math.random() * 1.6 + 0.5, o: Math.random() * 0.5 + 0.25,
      d: Math.random() * 4 + 2, delay: Math.random() * 4
    })));
    return (
      <header className="hero hero-cosmos" id="top">
        <div className="cosmos-parallax stars-layer" aria-hidden="true">
          <div className="cosmos-stars">
            {stars.map((st, i) =>
            <span key={i} className="cosmos-star" style={{
              left: st.x + '%', top: st.y + '%', width: st.s + 'px', height: st.s + 'px',
              opacity: st.o, animationDuration: st.d + 's', animationDelay: st.delay + 's'
            }} />
            )}
          </div>
          <div className="cosmos-shoot" />
          <div className="cosmos-shoot two" />
        </div>
        <div className="cosmos-parallax horizon-layer" aria-hidden="true">
          <div className="cosmos-aurora" />
          <div className="cosmos-glow" />
          <div className="cosmos-planet" />
        </div>

        <div className="cosmos-content">
          <span className="cosmos-pill" data-cursor="link"><span className="avail-dot" style={{ backgroundColor: "rgb(99, 247, 115)" }} />Open to opportunities</span>
          <h1 className="cosmos-head">
            <span className="serif-up">Hey,</span> <span className="serif-ital">I'm Sajjad.</span>
          </h1>
          <p className="cosmos-sub">
            Sr. Creative Designer with <strong>5+ years</strong> of experience,<br />
            crafting brand, advertising &amp; digital at <strong>Impact BBDO</strong>, Dubai
          </p>
          <div className="cosmos-actions">
            <a href={window.CONTACT.resume} target="_blank" rel="noopener" className="btn-cosmos ghost" data-magnetic data-cursor="link" data-no-transition>
              <span>Resume</span><i className="arr-circle">↗</i>
            </a>
            <a href="contact.html" className="btn-cosmos solid" data-magnetic data-cursor="link">
              <span>Get In Touch</span>
            </a>
          </div>
        </div>
      </header>);

  }

  if (layout === 'giant') {
    return (
      <header className="hero hero-giant" id="top">
        <div className="hero-giant-type">
          <span className="impact">SAJJAD</span>
          <span className="impact outline">DESIGNS</span>
        </div>
        <div className="hero-giant-bleed">
          <div className="hero-thumb-frame tall" style={{ aspectRatio: '3 / 4' }}>
            <image-slot id={`proj-${feat[0].slot}`} shape="rect" placeholder={`${feat[0].title} — drop image`} style={{ width: '100%', height: '100%' }}></image-slot>
            <span className="hero-thumb-tag">{feat[0].cat.split(' · ')[0]}</span>
          </div>
        </div>
        <div className="hero-giant-foot">
          <p className="lede">Sr. Creative Designer building brand, advertising &amp; digital work that holds together at every scale.</p>
          <a href="work.html" className="btn" data-magnetic data-cursor="view"><span>Selected work</span><i className="arr">→</i></a>
        </div>
      </header>);

  }

  if (layout === 'featured') {
    const p = feat[0];
    return (
      <header className="hero hero-featured" id="top" style={{ '--ac': window.acColor(p.accent) }}>
        <div className="hero-feat-frame">
          <image-slot id={`proj-${p.slot}`} shape="rect" placeholder={`${p.title} — drop hero image`} style={{ width: '100%', height: '100%' }}></image-slot>
          <div className="hero-feat-grad" />
        </div>
        <div className="hero-feat-overlay">
          <div className="hero-feat-top">
            <span className="mono">SELECTED · 01 / 15</span>
            <span className="mono">{p.year}</span>
          </div>
          <div className="hero-feat-bottom">
            <span className="mono dim">{p.cat}</span>
            <h1 className="hero-head big"><span className="impact">{p.title}</span></h1>
            <p className="lede">{p.blurb}</p>
            <a href="work.html" className="btn" data-magnetic data-cursor="view"><span>Enter the work</span><i className="arr">→</i></a>
          </div>
        </div>
        <div className="hero-feat-rail">
          {feat.slice(1, 4).map((q) =>
          <a key={q.slot} href="work.html" className="rail-chip" data-cursor="view" style={{ '--ac': window.acColor(q.accent) }}>
              <span className="mono">{q.n}</span><span>{q.title}</span>
            </a>
          )}
        </div>
      </header>);

  }

  // default: editorial grid
  return (
    <header className="hero hero-grid" id="top">
      <div className="hero-grid-lead">
        <p className="eyebrow mono"><span className="dot" /> Sr. Creative Designer — Available 2026</p>
        <Headline />
        <p className="lede">Muhammed Sajjad — building brand, advertising &amp; digital for people who sweat the details. 5+ years turning ideas into work that drives real results.</p>
        <div className="hero-grid-actions">
          <a href="work.html" className="btn" data-magnetic data-cursor="view"><span>Selected work</span><i className="arr">→</i></a>
          <a href="about.html" className="btn ghost" data-magnetic><span>About</span></a>
        </div>
      </div>
      <div className="hero-grid-thumbs">
        {feat.map((p, i) => <HeroThumb key={p.slot} p={p} ratio={i % 2 === 0 ? '4 / 5' : '4 / 3'} />)}
      </div>
    </header>);

}

Object.assign(window, { Hero });