/* global React, W_IMAGES, L2_MENU */

/* A women-tone Lookbook (re-uses .lookbook* CSS but with women images and a women title). */
const W_LOOKS = [
  { n: "01", title: "Tailored Navy", tag: "Build · 01" },
  { n: "02", title: "Soft Layers", tag: "Wear · 02" },
  { n: "03", title: "The Trench", tag: "Build · 04" },
  { n: "04", title: "Loafer Hours", tag: "Finish · 03" },
  { n: "05", title: "Spring Pastels", tag: "Seasonal · 04" },
  { n: "06", title: "Off-Duty Knit", tag: "Wear · 03" },
  { n: "07", title: "Evening Sharp", tag: "Style · 06" },
  { n: "08", title: "White Sneakers", tag: "Wear · 02" },
];

function WomenLookbook() {
  const [paused, setPaused] = React.useState(false);
  const imgs = [W_IMAGES.look1, W_IMAGES.look2, W_IMAGES.look3, W_IMAGES.look4, W_IMAGES.look5, W_IMAGES.look6, W_IMAGES.look7, W_IMAGES.look8];
  const doubled = [...W_LOOKS, ...W_LOOKS];
  const doubledImgs = [...imgs, ...imgs];
  return (
    <section className="section section-rule lookbook" data-screen-label="11 Lookbook">
      <div className="lookbook-head">
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            No. 08<span className="dot" />The Lookbook
          </div>
          <h2>From the <span className="it">runway</span> — and the sidewalk.</h2>
        </div>
      </div>
      <div
        className="lookbook-marquee"
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}
      >
        <div className={`lookbook-track-marquee ${paused ? "paused" : ""}`}>
          {doubled.map((l, i) => (
            <div key={i} className="look">
              <div className="img" style={{ backgroundImage: `url(${doubledImgs[i]})` }} />
              <div className="info" style={{ flexDirection: "column", alignItems: "flex-start", gap: 4 }}>
                <div style={{ display: "flex", justifyContent: "space-between", width: "100%" }}>
                  <span className="num">Look {l.n}</span>
                  <span>{l.tag}</span>
                </div>
                <span className="title">{l.title}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
window.WomenLookbook = WomenLookbook;

/* Women contributor — Nelly, large-format spotlight */
function WomenEditor() {
  return (
    <section id="contributors" className="section section-rule" data-screen-label="12 Editor">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 09</div>
          <h2 className="title">
            The voice <span className="display italic" style={{ color: "var(--gold)" }}>behind the lane.</span>
          </h2>
          <div className="meta" style={{
            fontFamily: "var(--f-mono)", fontSize: 10,
            letterSpacing: "0.28em", textTransform: "uppercase",
            color: "var(--ink-dim)", textAlign: "right", lineHeight: 1.7
          }}>
            One editor<br />Twelve years on the floor
          </div>
        </div>
        <article className="contrib">
          <div className="c-portrait">
            <span className="frame-tag">Lane Editor · No. 01</span>
            <img src={W_IMAGES.editor} alt="Nelly" />
            <span className="signature">— N.</span>
          </div>
          <div className="c-body">
            <div className="c-eyebrow"><span>Lane Editor — Women</span></div>
            <h3 className="c-name">Nelly<span className="it">.</span></h3>
            <p className="c-role">Tailoring, travel, and the case for one good blazer.</p>
            <p className="c-bio">
              Nelly leads the Women lane. Twelve years dressing women for boardrooms,
              beaches, and the long flights between. She believes in fewer pieces, better
              cut, and the quiet authority of navy.
            </p>
            <div className="c-tags">
              {["Tailoring", "Mediterranean", "Capsule", "Travel", "Editor's pick"].map((t, i) =>
                <span key={i} className="c-tag">{t}</span>
              )}
            </div>
            <div className="c-stats">
              <div className="c-stat"><div className="n">12yr<span className="it">.</span></div><div className="l">On the floor</div></div>
              <div className="c-stat"><div className="n">248</div><div className="l">Guides published</div></div>
              <div className="c-stat"><div className="n"><span className="it">Istanbul</span></div><div className="l">Home base</div></div>
            </div>
            <a className="c-cta">Read Nelly's guides <span className="arr">→</span></a>
          </div>
        </article>
      </div>
    </section>
  );
}
window.WomenEditor = WomenEditor;

/* Sticky in-page nav for the L2 menu */
function L2Nav() {
  const [active, setActive] = React.useState("build");
  React.useEffect(() => {
    const onScroll = () => {
      const ids = L2_MENU.map(m => m.id);
      let cur = ids[0];
      for (const id of ids) {
        const el = document.getElementById(id);
        if (!el) continue;
        if (el.getBoundingClientRect().top < 200) cur = id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <div className="ticker" style={{ position: "sticky", top: 70, zIndex: 40 }} data-screen-label="L2 Nav">
      <div style={{
        maxWidth: "var(--maxw)", margin: "0 auto",
        padding: "0 var(--gutter)",
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24
      }}>
        <span style={{
          fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.3em",
          textTransform: "uppercase", color: "var(--ink-dim)"
        }}>The Index</span>
        <div style={{ display: "flex", gap: 28 }}>
          {L2_MENU.map(m => (
            <a key={m.id} href={m.href} style={{
              fontFamily: "var(--f-mono)", fontSize: 11, letterSpacing: "0.22em",
              textTransform: "uppercase",
              color: active === m.id ? "var(--ink)" : "var(--ink-dim)",
              borderBottom: active === m.id ? "1px solid var(--gold)" : "1px solid transparent",
              paddingBottom: 4, transition: "color 0.2s"
            }}>
              <span style={{ color: "var(--gold)", marginRight: 8 }}>{m.n}</span>{m.nm}
            </a>
          ))}
        </div>
        <span style={{
          fontFamily: "var(--f-mono)", fontSize: 10, letterSpacing: "0.3em",
          textTransform: "uppercase", color: "var(--ink-mute)"
        }}>69 guides</span>
      </div>
    </div>
  );
}
window.L2Nav = L2Nav;