/* global React */

const MO_IMG = {
  hero: "https://images.unsplash.com/photo-1516257984-b1b4d707412e?w=2400&q=80",
  trench: "https://images.unsplash.com/photo-1539109136881-3be0616acf4b?w=1200&q=80",
  overcoat: "https://images.unsplash.com/photo-1611312449412-6cefac5dc3e4?w=1200&q=80",
  field: "https://images.unsplash.com/photo-1516826957135-700dedea698c?w=1200&q=80",
  leather: "https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?w=1200&q=80",
  detail: "https://images.unsplash.com/photo-1490578474895-699cd4e2cf59?w=1200&q=80",
  care: "https://images.unsplash.com/photo-1523398002811-999ca8dec234?w=1200&q=80",
};

const MO_NAV = [
  { n: "01", id: "rotation", nm: "Rotation" },
  { n: "02", id: "weather", nm: "Weather" },
  { n: "03", id: "fit", nm: "Fit" },
  { n: "04", id: "fabric", nm: "Fabric" },
  { n: "05", id: "care", nm: "Care" },
  { n: "06", id: "guides", nm: "Guides" },
  { n: "07", id: "faq", nm: "FAQ" },
];

function MOHero() {
  return (
    <section className="mo-hero" data-screen-label="01 Hero">
      <div className="mo-hero-img" style={{ backgroundImage: `url(${MO_IMG.hero})` }} />
      <div className="frame">
        <div className="mo-crumb">
          <a href="/en/men/">Men</a><span>/</span>
          <a href="/en/men/build/">Build</a><span>/</span>
          <span>Outerwear</span>
        </div>
        <div className="mo-hero-copy">
          <span className="mo-kicker">Build / 02 - The Top Layer</span>
          <h1>Outerwear, <span>without the costume.</span></h1>
          <p>
            Six coat families, three climate bands, one useful rule: buy the coat for the weather
            you actually walk through, then let the silhouette do the talking.
          </p>
        </div>
        <div className="mo-hero-stats">
          <div><span>06</span><small>Coat families</small></div>
          <div><span>18</span><small>Placeholder guides</small></div>
          <div><span>3x</span><small>Climate bands</small></div>
          <div><span>10 yr</span><small>Target wear life</small></div>
        </div>
      </div>
    </section>
  );
}

function MONav() {
  const [active, setActive] = React.useState("rotation");
  React.useEffect(() => {
    const onScroll = () => {
      let cur = MO_NAV[0].id;
      for (const item of MO_NAV) {
        const el = document.getElementById(item.id);
        if (el && el.getBoundingClientRect().top < 180) cur = item.id;
      }
      setActive(cur);
    };
    window.addEventListener("scroll", onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className="mo-nav">
      <div className="frame">
        <span className="label">Outerwear Index</span>
        <div className="links">
          {MO_NAV.map((item) => (
            <a key={item.id} href={`#${item.id}`} className={active === item.id ? "on" : ""}>
              <span>{item.n}</span>{item.nm}
            </a>
          ))}
        </div>
      </div>
    </nav>
  );
}

function MOIntro() {
  return (
    <section className="section mo-intro" data-screen-label="02 Intro">
      <div className="frame">
        <aside>
          <div><span>Lane</span><b>Men</b></div>
          <div><span>Chapter</span><b>Build / 02</b></div>
          <div><span>Section</span><b>Outerwear</b></div>
          <div><span>Updated</span><b>April 2026</b></div>
          <div><span>Status</span><b>Sample build</b></div>
        </aside>
        <div className="body">
          <p className="standfirst">
            Outerwear is where a men's closet either becomes useful or starts pretending. The coat has to solve weather first, proportion second, and image last.
          </p>
          <p>
            This page is a working L2 section shell. The guide cards, weather rules, fabric notes, and FAQ are sample inventory for the launch pass, ready to become deeper articles as the hierarchy fills in.
          </p>
          <p>
            The standard is simple: a coat should close, layer, move, and still look intentional when the temperature changes twenty degrees between morning and dinner.
          </p>
        </div>
      </div>
    </section>
  );
}

const LEADS = [
  { img: "trench", tag: "Start here", title: "The trench coat", it: "for men", desc: "Khaki, navy, or stone. Knee length. The coat that handles shoulder season without becoming a rain costume.", href: "/en/men/build/outerwear/best-trench-coats/" },
  { img: "overcoat", tag: "Cold weather", title: "Best wool overcoats", it: "for men", desc: "Charcoal or camel, below the knee, enough room for tailoring underneath. The winter purchase that should outlive the car.", href: "/en/men/build/outerwear/best-wool-overcoats/" },
  { img: "field", tag: "Weekend", title: "The field jacket", it: "explained", desc: "Olive cotton, four pockets, no fake military theatre. The casual top layer that still has structure.", href: "/en/men/build/outerwear/field-jacket-guide/" },
  { img: "leather", tag: "Buy carefully", title: "Leather jacket rules", it: "after 35", desc: "Cafe racer, A-2, or don't. How to keep leather from looking borrowed from a younger man.", href: "/en/men/build/outerwear/leather-jacket-rules/" },
];

function MOLeadCards() {
  return (
    <section className="mo-sec" data-screen-label="03 Lead cards">
      <div className="frame">
        <div className="mo-head">
          <div className="num">01</div>
          <div><span>Featured Guides</span><h2>Four coats to <em>solve first.</em></h2></div>
          <p>These are placeholders with final route logic. Replace the cards with real leaf pages as the editorial fills in.</p>
        </div>
        <div className="mo-leads">
          {LEADS.map((card, i) => (
            <a className="mo-card" href={card.href} key={card.title}>
              <div className="img" style={{ backgroundImage: `url(${MO_IMG[card.img]})` }}>
                <span>{card.tag}</span>
              </div>
              <small>No. {String(i + 1).padStart(2, "0")} / Outerwear</small>
              <h3>{card.title} <em>{card.it}</em></h3>
              <p>{card.desc}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const ROTATION = [
  ["Trench coat", "55-70 F", "Cotton gabardine", "Rain, travel, weekday"],
  ["Wool overcoat", "20-45 F", "Melton or cashmere blend", "Suiting, dinners, winter commute"],
  ["Field jacket", "45-65 F", "Waxed or washed cotton", "Weekend, denim, errand uniform"],
  ["Leather jacket", "50-65 F", "Calf, lamb, or horsehide", "Night, off-duty, one hard edge"],
  ["Topcoat", "35-55 F", "Worsted or covert cloth", "Tailoring without full winter weight"],
  ["Down liner", "15-40 F", "Matte nylon or wool shell", "Underlayer, deep cold, travel"],
];

function MORotation() {
  return (
    <section id="rotation" className="mo-sec" data-screen-label="04 Rotation">
      <div className="frame">
        <div className="mo-head">
          <div className="num">02</div>
          <div><span>The Rotation</span><h2>Six coats, <em>three you need now.</em></h2></div>
          <p>Most men need three coats immediately and three later. Climate decides which three, not taste.</p>
        </div>
        <div className="mo-rotation">
          {ROTATION.map((row, i) => (
            <a href={`/en/men/build/outerwear/${row[0].toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")}/`} key={row[0]}>
              <span className="rank">{String(i + 1).padStart(2, "0")}</span>
              <h3>{row[0]}</h3>
              <span>{row[1]}</span>
              <span>{row[2]}</span>
              <p>{row[3]}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const WEATHER = [
  { t: "Wet shoulder season", temp: "55-70 F", answer: "Trench or waxed field jacket", note: "Water resistance matters more than insulation. Skip down unless you enjoy sweating in April." },
  { t: "Dry cold commute", temp: "25-45 F", answer: "Wool overcoat", note: "The overcoat is not formal by default. It becomes formal only when the coat is too clean and the shoes are too shiny." },
  { t: "Deep winter", temp: "Below 25 F", answer: "Down liner under wool", note: "The warmest adult answer is often two quiet layers, not one technical jacket shouting over everything else." },
  { t: "Weekend errands", temp: "45-60 F", answer: "Field jacket", note: "Enough pocket, enough structure, enough room for knitwear. Olive first, navy second." },
];

function MOWeather() {
  return (
    <section id="weather" className="mo-sec mo-weather" data-screen-label="05 Weather">
      <div className="frame">
        <div className="mo-head">
          <div className="num">03</div>
          <div><span>Decision Tree</span><h2>Buy for the <em>forecast.</em></h2></div>
          <p>The wrong coat usually came from buying a mood instead of a temperature range.</p>
        </div>
        <div className="weather-grid">
          {WEATHER.map((item) => (
            <article key={item.t}>
              <span>{item.temp}</span>
              <h3>{item.t}</h3>
              <b>{item.answer}</b>
              <p>{item.note}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

const FIT = [
  ["Shoulder", "The seam can sit slightly wide on a coat, but it cannot collapse. If the sleeve head dents, leave it."],
  ["Sleeve", "Jacket cuff should disappear. Shirt cuff can show only under a topcoat worn open."],
  ["Length", "A winter coat should cover the jacket. A short casual jacket should end at the hip, not the belt."],
  ["Closure", "If it cannot close over knitwear, it is not outerwear. It is an expensive weather suggestion."],
  ["Collar", "The collar should sit against the neck. A coat that floats at the collar looks cheap from twenty feet."],
];

function MOFit() {
  return (
    <section id="fit" className="mo-sec" data-screen-label="06 Fit">
      <div className="frame">
        <div className="mo-split">
          <div className="photo" style={{ backgroundImage: `url(${MO_IMG.detail})` }}><span>Fit file / coat collar</span></div>
          <div>
            <div className="mo-head compact">
              <div className="num">04</div>
              <div><span>Fit Notes</span><h2>Five places a coat <em>fails.</em></h2></div>
            </div>
            <div className="fit-list">
              {FIT.map((item, i) => (
                <div key={item[0]}>
                  <span>{String(i + 1).padStart(2, "0")}</span>
                  <h3>{item[0]}</h3>
                  <p>{item[1]}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const FABRIC = [
  ["Gabardine", "Cotton, tight weave", "Trench coats, rain, travel", "Spring / Fall"],
  ["Waxed cotton", "Cotton canvas with wax finish", "Field jackets, weekend coats", "Three seasons"],
  ["Melton wool", "Dense felted wool", "Overcoats, pea coats", "Winter"],
  ["Covert cloth", "Twill with hard finish", "Topcoats, car coats", "Fall / Winter"],
  ["Horsehide", "Dense leather", "Cafe racers, A-2 jackets", "Cool dry weather"],
  ["Matte nylon", "Technical shell or liner", "Down liners, travel warmth", "Deep cold"],
];

function MOFabric() {
  return (
    <section id="fabric" className="mo-sec" data-screen-label="07 Fabric">
      <div className="frame">
        <div className="mo-head">
          <div className="num">05</div>
          <div><span>Fabric Table</span><h2>The cloth <em>does the work.</em></h2></div>
          <p>A coat's job is mostly decided before the pattern is cut. Fabric sets warmth, drape, noise, and weather tolerance.</p>
        </div>
        <div className="mo-table">
          <div className="head"><span>Cloth</span><span>Construction</span><span>Best use</span><span>Season</span></div>
          {FABRIC.map((row) => (
            <a href={`/en/men/build/outerwear/${row[0].toLowerCase().replace(/[^a-z0-9]+/g, "-")}/`} key={row[0]}>
              {row.map((cell) => <span key={cell}>{cell}</span>)}
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function MOCare() {
  const care = [
    ["Wool", "Brush after wear, steam lightly, dry clean once a season at most."],
    ["Waxed cotton", "Wipe with a damp cloth. Rewax when water stops beading, not on a calendar."],
    ["Leather", "Condition sparingly. Hang wide. Never store in plastic."],
    ["Down", "Dry fully, store uncompressed, wash only when loft starts to collapse."],
  ];
  return (
    <section id="care" className="mo-sec mo-care" data-screen-label="08 Care">
      <div className="frame">
        <div className="mo-care-card">
          <div className="img" style={{ backgroundImage: `url(${MO_IMG.care})` }} />
          <div className="body">
            <span>Maintenance</span>
            <h2>Outerwear gets expensive when you <em>treat it like laundry.</em></h2>
            <p>Care is part of the purchase. A coat bought for ten years needs a hanger, a brush, a tailor, and a better answer than throwing it over a chair.</p>
            <div className="care-list">
              {care.map((item) => (
                <div key={item[0]}><b>{item[0]}</b><p>{item[1]}</p></div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const LEAVES = [
  ["Best trench coats for men", "8 min", "/en/men/build/outerwear/best-trench-coats/"],
  ["Best wool overcoats for men", "11 min", "/en/men/build/outerwear/best-wool-overcoats/"],
  ["Field jacket guide", "7 min", "/en/men/build/outerwear/field-jacket-guide/"],
  ["Leather jackets after 35", "9 min", "/en/men/build/outerwear/leather-jacket-rules/"],
  ["Topcoat vs overcoat", "5 min", "/en/men/build/outerwear/topcoat-vs-overcoat/"],
  ["How a coat should fit", "8 min", "/en/men/build/outerwear/how-a-coat-should-fit/"],
  ["Best winter coats for men", "12 min", "/en/men/build/outerwear/best-winter-coats/"],
  ["How to store wool coats", "4 min", "/en/men/build/outerwear/how-to-store-wool-coats/"],
];

function MOLeafIndex() {
  return (
    <section id="guides" className="mo-sec" data-screen-label="09 Guide index">
      <div className="frame">
        <div className="mo-head">
          <div className="num">06</div>
          <div><span>Sample Article Slots</span><h2>The pages this hub <em>will feed.</em></h2></div>
          <p>These route-ready placeholders give the section depth now and clear fill-in work later.</p>
        </div>
        <div className="leaf-list mo-leaf-list">
          {LEAVES.map((item, i) => (
            <a className="leaf-row" href={item[2]} key={item[0]}>
              <span className="n">{String(i + 1).padStart(2, "0")}</span>
              <span className="t">{item[0]}</span>
              <span className="read">{item[1]}</span>
              <span className="arr">-></span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const FAQ = [
  ["How many coats should a man own?", "Most men need three immediately: a rain-capable coat, a cold-weather wool coat, and a casual field or leather jacket. The full adult rotation is usually six."],
  ["What coat should I buy first?", "If you wear tailoring, buy a wool overcoat first. If you dress casually and live in mild weather, buy a field jacket or trench first."],
  ["Should an overcoat be navy, charcoal, camel, or black?", "Charcoal is safest, camel is warmest visually, navy is easiest with denim, and black is the least useful unless your closet is already very black."],
  ["Can a man wear a trench coat casually?", "Yes, but it needs length and softness. A short shiny trench reads like office rainwear. A knee-length cotton trench reads like clothes."],
  ["Are leather jackets still worth it?", "Yes, if the cut is quiet and the fit is exact. A cafe racer or A-2 ages better than anything with too many zips, straps, or claims."],
];

function MOFAQ() {
  return (
    <section id="faq" className="mo-sec" data-screen-label="10 FAQ">
      <div className="frame">
        <div className="mo-head">
          <div className="num">07</div>
          <div><span>SEO Questions</span><h2>Outerwear questions <em>men actually ask.</em></h2></div>
          <p>Sample FAQ copy for the first static pass.</p>
        </div>
        <div className="faq mo-faq">
          {FAQ.map((item, i) => (
            <details key={item[0]}>
              <summary><span className="n">Q.{String(i + 1).padStart(2, "0")}</span><span className="q">{item[0]}</span><span className="plus">+</span></summary>
              <div className="ans"><p>{item[1]}</p></div>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
}

function MOCross() {
  const cards = [
    ["/en/men/build/basics/", "Build / 01", "Basics", "The pieces underneath the coat."],
    ["/en/men/build/footwear/", "Build / 03", "Footwear", "The shoes that decide the hem."],
    ["/en/men/build/accessories/", "Build / 04", "Accessories", "Scarves, gloves, belts, and finish."],
    ["/en/men/build/", "Up a level", "Build", "All men's build chapters."],
  ];
  return (
    <section className="section section-rule" data-screen-label="11 Cross">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 08</div>
          <h2 className="title">Keep <span className="display italic" style={{ color: "var(--gold)" }}>building.</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 }}>
            Sister sections<br />and one level up
          </div>
        </div>
        <div className="cross-lanes">
          {cards.map((card, i) => (
            <a href={card[0]} key={card[1]} className={i === 3 ? "bridge-card" : ""}>
              <span className="n">{card[1]}</span>
              <h6>{card[2]}</h6>
              <p>{card[3]}</p>
              <span className="arr">Open</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  MOHero, MONav, MOIntro, MOLeadCards, MORotation,
  MOWeather, MOFit, MOFabric, MOCare, MOLeafIndex, MOFAQ, MOCross,
});
