/* Hero — split layout. Left: name + typewriter + skills. Right: featured story sticker. */
const { useState, useEffect, useRef } = React;

function Typewriter({ lines, speed = 55, pause = 1800 }) {
  const [text, setText] = useState("");
  const [lineIdx, setLineIdx] = useState(0);
  const [phase, setPhase] = useState("typing"); // typing | holding | erasing

  useEffect(() => {
    let t;
    const current = lines[lineIdx];
    if (phase === "typing") {
      if (text.length < current.length) {
        t = setTimeout(() => setText(current.slice(0, text.length + 1)), speed);
      } else {
        t = setTimeout(() => setPhase("holding"), pause);
      }
    } else if (phase === "holding") {
      t = setTimeout(() => setPhase("erasing"), pause);
    } else if (phase === "erasing") {
      if (text.length > 0) {
        t = setTimeout(() => setText(text.slice(0, -1)), speed * 0.5);
      } else {
        setLineIdx((lineIdx + 1) % lines.length);
        setPhase("typing");
      }
    }
    return () => clearTimeout(t);
  }, [text, phase, lineIdx, lines, speed, pause]);

  return (
    <p className="typewriter-line">
      <span className="quote-mark">“</span>{text}<span className="typewriter-cursor"></span>
    </p>);

}

function Hero({ skills, featured }) {
  const lines = [
  "I'll follow my dreams no matter what stands in my way.",
  "I write stories where robots feel and angels learn.",
  "Piano keys, ink lines, sewing pins — and a lot of WiFi."];

  return (
    <section className="hero">
      <div className="hero-left cascade">
        <div className="eyebrow"><span className="pulse"></span>Personal site · est. 2026</div>
        <h1 className="hero-name">
          <span className="first">Noora</span>
          <span className="last" style={{ color: "rgb(0, 200, 255)" }}>Rokni<span className="underline"></span></span>
        </h1>
        <div className="hero-tag">writer<span className="sep">/</span>pianist<span className="sep">/</span>designer-in-training</div>
        <Typewriter lines={lines} />
        <div className="hero-clip" aria-hidden="true" style={{ width: "300px", height: "155px" }}>
          <video src="assets/hero-clip.mp4" autoPlay muted loop playsInline></video>
          <span className="hero-clip-caption">writing in progress...</span>
        </div>
        <div>
          <div className="skills-label">// Skills &amp; Interests</div>
          <div className="skills-row">
            {skills.map((s) =>
            <span className="skill" key={s} style={{ backgroundColor: "rgb(0, 200, 255)" }}><span className="ico"></span>{s}</span>
            )}
          </div>
        </div>
      </div>

      <div className="hero-right">
        <div className="scribble">↳ latest publish</div>
        <div className="featured-card" style={{ "--cover": `url('${featured.cover}')` }}>
          <span className="featured-tag" style={{ backgroundColor: "rgb(0, 56, 118)" }}>★ Featured</span>
          <a className="featured-cover" href={featured.link} target="_blank" rel="noreferrer" aria-label={featured.title}></a>
          <h3>{featured.title}</h3>
          <div className="meta">
            <span>{featured.genre}</span><span className="dot"></span>
            <span>Wattpad</span><span className="dot"></span>
            <span>{featured.length}</span>
          </div>
          <div className="sticker">new<br />release!</div>
        </div>
      </div>
    </section>);

}
window.Hero = Hero;