// Hero, About, Topbar, Cursor, BackgroundGrid

const { useState, useEffect, useRef, useMemo, useCallback } = React;

// =========================================================
// Cursor (custom dot + ring, follows mouse, expands on hover)
// =========================================================
function CustomCursor() {
  const dotRef = useRef(null);
  const ringRef = useRef(null);
  useEffect(() => {
    let mx = window.innerWidth / 2, my = window.innerHeight / 2;
    let rx = mx, ry = my;
    let raf;
    const onMove = (e) => { mx = e.clientX; my = e.clientY; if (dotRef.current) { dotRef.current.style.left = mx + "px"; dotRef.current.style.top = my + "px"; } };
    const tick = () => {
      rx += (mx - rx) * 0.18;
      ry += (my - ry) * 0.18;
      if (ringRef.current) { ringRef.current.style.left = rx + "px"; ringRef.current.style.top = ry + "px"; }
      raf = requestAnimationFrame(tick);
    };
    const onOver = (e) => {
      const t = e.target;
      if (t && t.closest && t.closest("a, button, .proj-card, .cert-card, .tech-chip, [data-cursor='active']")) {
        document.body.classList.add("cursor-active");
      }
    };
    const onOut = () => document.body.classList.remove("cursor-active");
    window.addEventListener("mousemove", onMove);
    window.addEventListener("mouseover", onOver);
    window.addEventListener("mouseout", onOut);
    raf = requestAnimationFrame(tick);
    return () => {
      window.removeEventListener("mousemove", onMove);
      window.removeEventListener("mouseover", onOver);
      window.removeEventListener("mouseout", onOut);
      cancelAnimationFrame(raf);
    };
  }, []);
  return (
    <>
      <div ref={dotRef} className="cursor-dot"></div>
      <div ref={ringRef} className="cursor-ring"></div>
    </>
  );
}

// =========================================================
// Reveal on scroll
// =========================================================
function Reveal({ children, delay = 0, as: As = "div", className = "", ...rest }) {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          setTimeout(() => el.classList.add("in"), delay);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.12 });
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  return <As ref={ref} className={`reveal ${className}`} {...rest}>{children}</As>;
}

// =========================================================
// Live clock for top bar
// =========================================================
function useClock() {
  const [now, setNow] = useState(new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  return now;
}

// =========================================================
// Topbar
// =========================================================
function Topbar({ lang, setLang, theme, setTheme, ui, name }) {
  return (
    <header className="topbar">
      <div className="topbar-left">
        <div className="topbar-mark">
          <span className="dot"></span>
          <span>AYOUB ALOUANE</span>
        </div>
        <div className="topbar-meta">
          <span>MOHAMMEDIA · GMT+1</span>
          <span>{ui.sections.intro} v.2026</span>
        </div>
      </div>
      <nav>
        <a href="#about">{ui.nav.about}</a>
        <a href="#experience">{ui.nav.work}</a>
        <a href="#projects">{ui.nav.projects}</a>
        <a href="#skills">{ui.nav.skills}</a>
        <a href="#education">{ui.nav.education}</a>
        <a href="#contact">{ui.nav.contact}</a>
      </nav>
      <div className="topbar-right">
        <button className="topbar-btn" onClick={() => setLang(lang === "en" ? "fr" : "en")}>
          {lang === "en" ? "EN / fr" : "FR / en"}
        </button>
        <button className="topbar-btn" onClick={() => setTheme(theme === "light" ? "dark" : "light")} aria-label="Toggle theme">
          {theme === "light" ? "◐" : "◑"} {theme === "light" ? "LIGHT" : "DARK"}
        </button>
      </div>
    </header>
  );
}

// =========================================================
// Background grid + section divider
// =========================================================
function BackgroundGrid() {
  return <div className="bg-grid" aria-hidden="true"></div>;
}

// =========================================================
// Section header
// =========================================================
function SectionHead({ num, tag, title, subtitle }) {
  return (
    <div className="sec-head">
      <div>
        <div className="sec-tag"><span className="num">{num}</span>{tag}</div>
        <h2 className="sec-title">{title}</h2>
      </div>
      {subtitle && <div className="sec-subtitle">{subtitle}</div>}
    </div>
  );
}

// =========================================================
// Hero
// =========================================================
function Typer({ words, lang }) {
  const [text, setText] = useState("");
  const [idx, setIdx] = useState(0);
  const [del, setDel] = useState(false);
  useEffect(() => {
    setText(""); setIdx(0); setDel(false);
  }, [lang]);
  useEffect(() => {
    const w = words[idx % words.length];
    let t;
    if (!del && text.length < w.length) {
      t = setTimeout(() => setText(w.slice(0, text.length + 1)), 70);
    } else if (!del && text.length === w.length) {
      t = setTimeout(() => setDel(true), 1600);
    } else if (del && text.length > 0) {
      t = setTimeout(() => setText(w.slice(0, text.length - 1)), 32);
    } else {
      t = setTimeout(() => { setDel(false); setIdx(i => i + 1); }, 200);
    }
    return () => clearTimeout(t);
  }, [text, del, idx, words]);
  return <span className="typed">{text}<span className="caret"></span></span>;
}

function Hero({ data, lang, ui, heroVariant }) {
  const { hero, meta, about } = data;
  const [first, ...rest] = meta.name.split(" ");
  const last = rest.join(" ");

  return (
    <section className="hero" id="top">
      <div className="hero-grid">
        <div className="hero-left">
          <Reveal>
            <div className="hero-eyebrow">
              <span className="live"></span>
              <span>{meta.status[lang]}</span>
            </div>
          </Reveal>

          <Reveal delay={80}>
            <h1 className="hero-name">
              <span className="first">{first}</span>
              <span className="last">{last}.</span>
            </h1>
          </Reveal>

          <Reveal delay={140}>
            <div className="hero-role">
              <span className="role-pill">{hero.role[lang]}</span>
              <span>{hero.subrole[lang]}</span>
            </div>
          </Reveal>

          <Reveal delay={200}>
            <div className="hero-typing">
              <span className="prompt">FOCUS</span>
              <Typer words={hero.typing[lang]} lang={lang} />
            </div>
          </Reveal>

          <Reveal delay={260}>
            <p className="hero-tagline">{hero.tagline[lang]}</p>
          </Reveal>

          <Reveal delay={320}>
            <div className="hero-actions">
              <a href="#contact" className="btn btn-primary">
                {ui.labels.getInTouch} <span className="btn-arrow">→</span>
              </a>
              <a href="#projects" className="btn">{ui.nav.projects}</a>
              <a href={`uploads/Ayoub-Resume.v4.pdf`} target="_blank" rel="noopener" className="btn">
                {ui.labels.downloadResume} ↓
              </a>
            </div>
          </Reveal>

          <Reveal delay={380}>
            <div className="hero-stats">
              {about.stats.map((s, i) => (
                <div className="hero-stat" key={i}>
                  <div className="v">{s.value}</div>
                  <div className="l">{s.label[lang]}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>

        <div className="hero-right">
          <Reveal delay={140}>
            <div className="portrait-card">
              <div className="portrait-frame">
                <PortraitImage />
              </div>
              <div className="portrait-meta">
                <div className="row"><span className="key">SUBJECT</span><span className="val">AYOUB ALOUANE</span></div>
                <div className="row"><span className="key">ROLE</span><span className="val">{hero.role[lang]}</span></div>
                <div className="row"><span className="key">{ui.labels.location}</span><span className="val">{lang === "fr" ? meta.locationFr : meta.location}</span></div>
                <div className="row"><span className="key">{ui.labels.availability}</span><span className="val ok">PFA · 2025-26</span></div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function PortraitImage() {
  // Tries common upload paths; falls back to monogram placeholder
  const candidates = ["uploads/portrait.png", "uploads/Ayoub-compressed.png", "uploads/portrait.jpg", "uploads/me.jpg", "uploads/me.png", "uploads/photo.jpg"];
  const [ix, setIx] = useState(0);
  if (ix >= candidates.length) {
    return (
      <div className="portrait-placeholder">
        <div className="monogram">AA</div>
        <div className="label">[ DROP PORTRAIT IMAGE → uploads/portrait.png ]</div>
      </div>
    );
  }
  return (
    <img
      src={candidates[ix]}
      alt="Ayoub Alouane"
      onError={() => setIx(ix + 1)}
    />
  );
}

// =========================================================
// About
// =========================================================
function About({ data, lang, ui }) {
  const { about, meta } = data;
  return (
    <section className="sec" id="about">
      <SectionHead num="01" tag={ui.sections.about} title={lang === "fr" ? "Profil" : "Profile"} subtitle={lang === "fr" ? "Une perspective ingénieur, du noyau Linux à l'interface utilisateur." : "An engineer's perspective, from kernel to user interface."} />
      <div className="about-grid">
        <Reveal>
          <p className="about-text">{about[lang]}</p>
        </Reveal>
        <div className="about-side">
          <Reveal delay={120}>
            <div className="about-card">
              <h4>{ui.labels.focus}</h4>
              <div className="body">
                {lang === "fr" ? "Data Engineering · Data Science" : "Data Engineering · Data Science"}
                <small>{lang === "fr" ? "Ouvert au développement logiciel" : "Open to software engineering roles"}</small>
              </div>
            </div>
          </Reveal>
          <Reveal delay={180}>
            <div className="about-card">
              <h4>{ui.labels.location}</h4>
              <div className="body">
                {lang === "fr" ? meta.locationFr : meta.location}
                <small>{lang === "fr" ? "Disponible en hybride / sur site / distant" : "Available hybrid / on-site / remote"}</small>
              </div>
            </div>
          </Reveal>
          <Reveal delay={240}>
            <div className="about-card">
              <h4>{lang === "fr" ? "MÉTADONNÉES" : "METADATA"}</h4>
              <div className="about-meta-row"><span className="key">SCHOOL</span><span className="val">ENSET Mohammedia</span></div>
              <div className="about-meta-row"><span className="key">YEAR</span><span className="val">{lang === "fr" ? "2ème année · cycle ing." : "2nd year · eng. cycle"}</span></div>
              <div className="about-meta-row"><span className="key">FROM</span><span className="val">CPGE PSI</span></div>
              <div className="about-meta-row"><span className="key">EMAIL</span><span className="val">{meta.email}</span></div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { CustomCursor, Reveal, Topbar, BackgroundGrid, SectionHead, Hero, About, Typer });