/* global React, IMAGES */

/* ============================================================
   LANES — Women + Men, equal-but-different
   ============================================================ */
const womenCats = [
{ n: "01", name: "Build", meta: "12 guides" },
{ n: "02", name: "Wear", meta: "24 guides" },
{ n: "03", name: "Style", meta: "18 guides" },
{ n: "04", name: "Finish", meta: "9 guides" },
{ n: "05", name: "Seasonal", meta: "6 drops" }];

const menCats = [
{ n: "01", name: "Build", meta: "10 guides" },
{ n: "02", name: "Wear", meta: "20 guides" },
{ n: "03", name: "Fit", meta: "14 guides" },
{ n: "04", name: "Finish", meta: "8 guides" },
{ n: "05", name: "Seasonal", meta: "5 drops" }];


function Lane({ side, eyebrow, title, italic, lede, cats, image, stamp, indexNum, ctaLabel, reverse }) {
  const chapterSlug = (name) => name.toLowerCase().replace(/\s+/g, "-");
  return (
    <article className={`lane ${reverse ? "reverse" : ""}`}>
      <div className="lane-img" style={{ backgroundImage: `url(${image})` }}>
        <span className="stamp">{stamp}</span>
        <span className="index-num">{indexNum}</span>
      </div>
      <div className="lane-body">
        <div className="lane-eyebrow">
          <span>{eyebrow}</span>
        </div>
        <h2 className="lane-title">
          {title} <span className="it">{italic}</span>
        </h2>
        <p className="lane-lede">{lede}</p>
        <div className="lane-cats">
          {cats.map((c, i) =>
          <a key={i} className="lane-cat" href={`/en/${side}/${chapterSlug(c.name)}/`}>
              <span className="cat-num">{c.n}</span>
              <span className="cat-name">{c.name}</span>
              <span className="cat-meta">{c.meta}</span>
              <span className="cat-arrow">→</span>
            </a>
          )}
        </div>
        <a className="lane-cta" href={`/en/${side}/`}>
          Open the {side} lane <span className="arr">→</span>
        </a>
      </div>
    </article>);

}

function Lanes() {
  return (
    <section id="lanes" className="section" data-screen-label="03 Lanes">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 01</div>
          <h2 className="title">
            Two lanes, <span className="display italic" style={{ color: "var(--accent)" }}>same handbook.</span>
          </h2>
          <div className="meta">
            
          </div>
        </div>
        <div className="lanes">
          <Lane side="women"
          eyebrow="Lane 01 — Women"
          title="For her,"
          italic="head to toe."
          lede="Tailoring that flatters, denim that fits, and the small finishes that turn a get-up into a look. Build a wardrobe that travels with you, season after season."
          cats={womenCats}
          image={IMAGES.women}
          stamp="Lane 01"
          indexNum="01"
          ctaLabel="women" />
          
          <Lane
            side="men"
            eyebrow="Lane 02 — Men"
            title="For him,"
            italic="from the shoulders down."
            lede="The everyday closet, sharpened. From a starter blazer to a denim that ages well — practical answers to questions you’d rather not ask out loud."
            cats={menCats}
            image={IMAGES.men}
            stamp="Lane 02"
            indexNum="02"
            ctaLabel="men"
            reverse />
          
        </div>
      </div>
    </section>);

}
window.Lanes = Lanes;

/* ============================================================
   FEATURES — No. 01 hero feature + 2 smaller
   ============================================================ */
function Features() {
  return (
    <section id="features" className="section section-rule" data-screen-label="04 Features">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 02</div>
          <h2 className="title">
            This <span className="display italic" style={{ color: "var(--accent)" }}>week’s</span> reading.
          </h2>
          <div className="meta">
            Updated Tuesdays<br />—five new each week
          </div>
        </div>

        <div className="features">
          <a className="feature f-1" href="/en/women/build/basics/first-real-blazer/">
            <div className="feat-img" style={{ backgroundImage: `url(${IMAGES.feat1})` }} />
            <div className="feat-meta">
              <span className="feat-num">No. 01 · Feature</span>
              <span>8 min · Build</span>
            </div>
            <h3 className="feat-title">
              How to buy your <span className="it">first real blazer</span> — and never look back.
            </h3>
            <p className="feat-desc">
              The piece that does the most lifting in any wardrobe. We cover fabric, fit at the shoulder, the case for navy first, and how much you should actually spend.
            </p>
          </a>
          <a className="feature f-2" href="/en/men/wear/weekend/denim-that-ages-with-you/">
            <div className="feat-img" style={{ backgroundImage: `url(${IMAGES.feat2})` }} />
            <div className="feat-meta">
              <span className="feat-num">No. 02 · Wear</span>
              <span>5 min</span>
            </div>
            <h3 className="feat-title">
              Denim that <span className="it">ages</span> with you.
            </h3>
            <p className="feat-desc">
              How to pick raw denim once and wear it for a decade.
            </p>
          </a>
          <a className="feature f-3" href="/en/women/style/accessories/one-belt-two-outfits/">
            <div className="feat-img" style={{ backgroundImage: `url(${IMAGES.feat3})` }} />
            <div className="feat-meta">
              <span className="feat-num">No. 03 · Finish</span>
              <span>4 min</span>
            </div>
            <h3 className="feat-title">
              One belt, <span className="it">two outfits.</span>
            </h3>
            <p className="feat-desc">
              The accessory that quietly does the most. Pick once, finish anything.
            </p>
          </a>
        </div>
      </div>
    </section>);

}
window.Features = Features;

/* ============================================================
   PULL QUOTE
   ============================================================ */
function PullQuote() {
  return (
    <section className="section" data-screen-label="05 Quote">
      <div className="frame">
        <div className="pullquote">
          <div className="qmark">“</div>
          <blockquote>
            Style isn’t having more — it’s knowing what to do with <span className="accent">what you already own.</span>
          </blockquote>
          <cite>— The How To Co. · Editorial Standard No. 03</cite>
        </div>
      </div>
    </section>);

}
window.PullQuote = PullQuote;

/* ============================================================
   LOOKBOOK runway strip
   ============================================================ */
const LOOKS = [
{ n: "01", title: "Tailored Navy", tag: "Women · Build" },
{ n: "02", title: "Soft Layers", tag: "Women · Style" },
{ n: "03", title: "Cold-weather Knit", tag: "Men · Wear" },
{ n: "04", title: "The Trench", tag: "Women · Build" },
{ n: "05", title: "Off-Duty", tag: "Men · Wear" },
{ n: "06", title: "Evening Sharp", tag: "Men · Fit" },
{ n: "07", title: "Spring Pastels", tag: "Women · Seasonal" },
{ n: "08", title: "Loafer Hours", tag: "Men · Finish" }];


function Lookbook() {
  const trackRef = React.useRef(null);
  const [paused, setPaused] = React.useState(false);
  const lookImgs = [IMAGES.look1, IMAGES.look2, IMAGES.look3, IMAGES.look5, IMAGES.look6, IMAGES.look7, IMAGES.look8, IMAGES.look4];
  const doubled = [...LOOKS, ...LOOKS];
  const doubledImgs = [...lookImgs, ...lookImgs];

  const nudge = (dir) => {
    setPaused(true);
    setTimeout(() => setPaused(false), 2400);
    if (trackRef.current) {
      trackRef.current.style.animation = "none";
      trackRef.current.offsetHeight; // reflow
      const cur = parseFloat(getComputedStyle(trackRef.current).getPropertyValue("--shift") || "0");
      const next = cur + dir * 340;
      trackRef.current.style.setProperty("--shift", `${next}px`);
      trackRef.current.style.transform = `translateX(${-next}px)`;
      setTimeout(() => {
        if (trackRef.current) {
          trackRef.current.style.animation = "";
          trackRef.current.style.transform = "";
          trackRef.current.style.removeProperty("--shift");
        }
      }, 2400);
    }
  };

  return (
    <section id="lookbook" className="section section-rule lookbook" data-screen-label="06 Lookbook">
      <div className="lookbook-head">
        <div>
          <div className="eyebrow" style={{ marginBottom: 18 }}>
            No. 03<span className="dot" />The Lookbook
          </div>
          <h2>From the <span className="it">runway</span> — and the sidewalk.</h2>
        </div>
        <div className="controls">
          <button className="ctl" onClick={() => nudge(-1)} aria-label="prev">←</button>
          <button className="ctl" onClick={() => nudge(1)} aria-label="next">→</button>
        </div>
      </div>
      <div
        className="lookbook-marquee"
        onMouseEnter={() => setPaused(true)}
        onMouseLeave={() => setPaused(false)}>
        <div
          ref={trackRef}
          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.Lookbook = Lookbook;

/* ============================================================
   TICKER
   ============================================================ */
function Ticker() {
  const items = [
  "How to wear a navy blazer",
  "The case for raw denim",
  "Pack a carry-on for a weekend",
  "One trench, four ways",
  "The starter shoe rotation",
  "Spring layering, decoded",
  "Care for cashmere at home",
  "How to buy a suit once"];

  const repeated = [...items, ...items];
  return (
    <div className="ticker" data-screen-label="Ticker">
      <div className="ticker-track">
        {repeated.map((t, i) =>
        <span key={i} className="ticker-item">
            {t}<span className="dot" />
          </span>
        )}
      </div>
    </div>);

}
window.Ticker = Ticker;