/* global React */

/* ---------------- Image library ---------------- */
const IMAGES = {
  // Hero — split-screen feel: active human in motion, warm light
  heroHealth: "https://images.unsplash.com/photo-1518611012118-696072aa579a?w=2400&q=80", // sunlit yoga / breath
  heroFitness: "https://images.unsplash.com/photo-1534438327276-14e5300c3a48?w=2400&q=80", // running
  heroDuo: "https://images.unsplash.com/photo-1545205597-3d9d02c29597?w=2400&q=80", // outdoor athletic body
  // Lane portraits
  health: "https://images.unsplash.com/photo-1545389336-cf090694435e?w=1600&q=80", // calm meditation light
  fitness: "https://images.unsplash.com/photo-1517836357463-d25dfeac3438?w=1600&q=80", // gym strength
};
window.IMAGES = IMAGES;

/* ---------------- Masthead bar ---------------- */
function Masthead() {
  const [time, setTime] = React.useState("");
  React.useEffect(() => {
    const tick = () => {
      const d = new Date();
      setTime(d.toLocaleDateString("en-US", { weekday: "long", month: "long", day: "numeric", year: "numeric" }));
    };
    tick();
    const id = setInterval(tick, 60000);
    return () => clearInterval(id);
  }, []);
  return (
    <div className="masthead">
      <div className="masthead-inner">
        <div>Issue 08 · Spring/Summer ’26</div>
        <div className="masthead-mid">
          <span>{time}</span>
          <span>·</span>
          <span>The How To Co.</span>
          <span>·</span>
          <span className="pulse">Vol. 08 — Health &amp; Fitness</span>
        </div>
        <div>EN / USD</div>
      </div>
    </div>
  );
}
window.Masthead = Masthead;

/* ---------------- Header / nav ---------------- */
function Header() {
  const lbl = { a: "Health", b: "Fitness" };
  return (
    <header className="header">
      <div className="header-inner">
        <a className="logo" href="#">
          How To<span className="ampersand">:</span> <span style={{fontStyle:"italic"}}>{lbl.a}</span> <span className="amp-roman">&amp;</span> <span style={{fontStyle:"italic"}}>{lbl.b}</span>
          <small>The How To Co. — Edition 08</small>
        </a>
        <nav className="nav">
          <a href="#letter" className="active">Editor’s Letter</a>
          <a href="#lanes">Lanes</a>
          <a href="#tiles">How-Tos</a>
          <a href="#program">This Week</a>
          <a href="#contributors">Contributors</a>
        </nav>
        <div className="header-right">
          <span>Search</span>
          <span className="pill">Saved · 04</span>
        </div>
      </div>
    </header>
  );
}
window.Header = Header;

/* ---------------- Search composer with rotating placeholder ---------------- */
const PROMPTS = [
  "sleep through the whole night",
  "deadlift without throwing out my back",
  "build a habit that actually sticks",
  "stretch when I'm stuck at a desk",
  "fast for sixteen hours like a normal person",
  "breathe when I'm two cups in",
  "take a real rest day",
  "walk ten thousand steps without trying",
  "eat enough protein, finally",
  "warm up in five minutes or less",
];

function SearchComposer() {
  const [text, setText] = React.useState("");
  const [idx, setIdx] = React.useState(0);
  const [phase, setPhase] = React.useState("typing");
  const [focused] = React.useState(false);

  React.useEffect(() => {
    if (focused) return;
    const target = PROMPTS[idx];
    let to;
    if (phase === "typing") {
      if (text.length < target.length) {
        to = setTimeout(() => setText(target.slice(0, text.length + 1)), 38 + Math.random() * 40);
      } else {
        to = setTimeout(() => setPhase("holding"), 1500);
      }
    } else if (phase === "holding") {
      to = setTimeout(() => setPhase("deleting"), 1200);
    } else if (phase === "deleting") {
      if (text.length > 0) {
        to = setTimeout(() => setText(text.slice(0, -1)), 22);
      } else {
        setIdx((i) => (i + 1) % PROMPTS.length);
        setPhase("typing");
      }
    }
    return () => clearTimeout(to);
  }, [text, phase, idx, focused]);

  return (
    <div className="search">
      <div className="search-input">
        <svg className="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4">
          <circle cx="11" cy="11" r="7" />
          <path d="m20 20-3.5-3.5" strokeLinecap="round"/>
        </svg>
        <div className="search-typer">
          <span className="prefix">how to</span>
          <span className="typed">{text}</span>
          <span className="caret" />
        </div>
        <button className="search-cta">Ask Iris</button>
      </div>
      <div className="search-howto">Ask anything. Iris answers what she can — and tells you when she shouldn’t.</div>
    </div>
  );
}
window.SearchComposer = SearchComposer;

/* ---------------- Hero ---------------- */
function Hero() {
  const [active, setActive] = React.useState("both");
  const lbl = { a: "Health", b: "Fitness" };
  const bg =
    active === "health" ? IMAGES.heroHealth :
    active === "fitness" ? IMAGES.heroFitness :
    IMAGES.heroDuo;

  return (
    <section className="hero-shell" data-screen-label="01 Hero">
      <div className="hero-cine">
        <div className="bg" style={{ backgroundImage: `url(${bg})` }} />
        <div className="frame">
          <div className="h-top">
            <div className="kicker"><span className="dot" />Vol. 08 — Live Issue</div>
            <div className="h-spec">
              <strong>52</strong> guides this week<br/>
              <strong>2</strong> lanes · <strong>1</strong> handbook<br/>
              No medical advice. Ever.
            </div>
          </div>
          <h1 className="h1">
            How to <span className="it">live</span><br/>
            in the body <span className="amp">&amp;</span><br/>
            <span className="it">mind</span> you have.
          </h1>
          <p className="lede">
            Two lanes — {lbl.a.toLowerCase()} and {lbl.b.toLowerCase()} — one calm, plain-spoken handbook. Big questions, small answers, nothing prescriptive.
          </p>
          <div className="h-search-wrap">
            <div style={{ width: "100%", display:"flex", flexDirection:"column", alignItems:"center" }}>
              <SearchComposer />
              <div className="hero-chips">
                <button className="chip"><span className="lane-mark health" />sleep</button>
                <button className="chip"><span className="lane-mark fitness" />warm-up</button>
                <button className="chip"><span className="lane-mark health" />breathwork</button>
                <button className="chip"><span className="lane-mark fitness" />pull day</button>
                <button className="chip"><span className="lane-mark health" />habits</button>
                <button className="chip"><span className="lane-mark fitness" />mobility</button>
                <button className="chip"><span className="lane-mark health" />hydration</button>
                <button className="chip"><span className="lane-mark fitness" />rest day</button>
              </div>
            </div>
          </div>
          <div className="h-bottom">
            <div className="credit">Cover · Atlanta + DC · April ’26</div>
            <div className="lane-toggle">
              <button className={active==="both"?"active":""} onClick={()=>setActive("both")}>Both lanes</button>
              <button className={active==="health"?"active":""} onClick={()=>setActive("health")}>{lbl.a} only</button>
              <button className={active==="fitness"?"active":""} onClick={()=>setActive("fitness")}>{lbl.b} only</button>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Hero = Hero;