/* global React */

// Shared image library — Unsplash fashion photos
const IMAGES = {
  // Heroes
  heroCine: "https://images.unsplash.com/photo-1558769132-cb1aea458c5e?w=2400&q=80",  // moody fashion editorial woman
  heroAsym: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=1600&q=80", // tailored navy suit woman
  heroStrip1: "https://images.unsplash.com/photo-1581338834647-b0fb40704e21?w=1200&q=80",
  heroStrip2: "https://images.unsplash.com/photo-1492707892479-7bc8d5a4ee93?w=1200&q=80",
  heroStrip3: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=1200&q=80",

  // Women lane
  women: "https://images.unsplash.com/photo-1483985988355-763728e1935b?w=1600&q=80",

  // Men lane
  men: "https://images.unsplash.com/photo-1617137968427-85924c800a22?w=1600&q=80",

  // Features
  feat1: "https://images.unsplash.com/photo-1551803091-e20673f15770?w=1600&q=80", // tailoring
  feat2: "https://images.unsplash.com/photo-1539533113208-f6df8cc8b543?w=1200&q=80", // denim
  feat3: "https://images.unsplash.com/photo-1485231183945-fffde7cc051e?w=1200&q=80", // accessories

  // Lookbook
  look1: "https://images.unsplash.com/photo-1490481651871-ab68de25d43d?w=900&q=80",
  look2: "https://images.unsplash.com/photo-1525507119028-ed4c629a60a3?w=900&q=80",
  look3: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=900&q=80",
  look4: "https://images.unsplash.com/photo-1509631179647-0177331693ae?w=900&q=80",
  look5: "https://images.unsplash.com/photo-1487222477894-8943e31ef7b2?w=900&q=80",
  look6: "https://images.unsplash.com/photo-1469334031218-e382a71b716b?w=900&q=80",
  look7: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=900&q=80",
  look8: "https://images.unsplash.com/photo-1496747611176-843222e1e57c?w=900&q=80",
};
window.IMAGES = IMAGES;

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

/* ---------------- Header / nav ---------------- */
function Header() {
  const path = window.location.pathname;
  const isWomen = path.startsWith("/en/women/");
  const isMen = path.startsWith("/en/men/");

  return (
    <header className="header">
      <div className="header-inner">
        <a className="logo" href="/">
          How To<span className="ampersand">:</span> <span style={{fontStyle: "italic"}}>Fashion</span>
          <small>The How To Co. — Edition 02</small>
        </a>
        <nav className="nav">
          <a href="/en/women/" className={isWomen || (!isMen && path === "/") ? "active" : ""}>Women</a>
          <a href="/en/men/" className={isMen ? "active" : ""}>Men</a>
          <a href="/#features">Features</a>
          <a href="/#lookbook">Lookbook</a>
          <a href="/en/contributors/nelly/">Contributors</a>
        </nav>
        <div className="header-right">
          <span>Search</span>
          <span className="pill">Saved · 12</span>
        </div>
      </div>
    </header>
  );
}
window.Header = Header;

/* ---------------- Search composer with rotating placeholder ---------------- */
const PROMPTS = [
  "wear a navy blazer in spring",
  "build a five-piece capsule wardrobe",
  "fit a suit without a tailor",
  "layer for shoulder-season weather",
  "style white sneakers without looking lazy",
  "pack a carry-on for a long weekend",
  "finish an outfit with one accessory",
  "soften a sharp tailored look",
];

function SearchComposer({ size = "lg" }) {
  const [text, setText] = React.useState("");
  const [idx, setIdx] = React.useState(0);
  const [phase, setPhase] = React.useState("typing"); // typing | holding | deleting
  const [focused, setFocused] = 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">Search</button>
      </div>
      <div className="search-howto">How to — anything you wear, anywhere you go.</div>
      <div className="hero-chips">
        <button className="chip">tailoring</button>
        <button className="chip">denim</button>
        <button className="chip">outerwear</button>
        <button className="chip">shoes</button>
        <button className="chip">layering</button>
        <button className="chip">care</button>
      </div>
    </div>
  );
}
window.SearchComposer = SearchComposer;