/* global React, M_IMAGES */

const M_L2_PAGE_DATA = {
  wear: {
    number: "02",
    label: "The Everyday",
    title: "Wear",
    italic: "the uniform.",
    deck:
      "Outfit formulas for work, weekends, travel, dates, heat, and cold. The point is not more clothes. The point is fewer decisions that look deliberate.",
    image: M_IMAGES.wear3,
    stats: [["08", "sections"], ["44", "planned guides"], ["JT", "edited"]],
    ledger: [["Best first read", "Outfit Formulas"], ["Most useful", "Smart Casual"], ["Weather split", "Warm / Cold"], ["Built for", "Repeat wear"]],
    intro:
      "Men's wear is where the closet proves itself. A navy blazer, raw denim, white oxford, knit, and coat only matter if they can turn into Tuesday, Saturday, dinner, airport, and the first hot night of the year without becoming costume.",
    sections: [
      ["01", "Outfit Formulas", "outfit-formulas", "The repeatable math: jacket plus knit, oxford plus denim, trouser plus tee, coat plus boot. Build the uniform before you chase the exception."],
      ["02", "Smart Casual", "smart-casual", "Clean enough for dinner, relaxed enough for daytime. Loafers, soft jackets, denim that behaves, and shirts that do not announce themselves."],
      ["03", "Business Casual", "business-casual", "Office clothes without the full suit: trousers, shirts, knit layers, dress shoes, and the line between relaxed and unfinished."],
      ["04", "Date Night", "date-night", "Texture, dark color, better shoes, less effort showing. Dinner, drinks, galleries, and the jacket you keep near the door."],
      ["05", "Weekend", "weekend", "Chinos, denim, tees, crews, field jackets, sneakers, and the off-duty pieces that still hold shape."],
      ["06", "Travel", "travel", "Airport layers, wrinkle-tolerant cloth, one-shoe trips, carry-on capsules, and clothes that survive a delayed dinner."],
      ["07", "Warm Weather", "warm-weather", "Linen, cotton, open weaves, lighter shoes, no-show sock rules, and staying sharp when the wool comes off."],
      ["08", "Cold Weather", "cold-weather", "Overcoats, boots, scarves, base layers, heavy knits, and keeping proportion when warmth starts adding bulk."],
    ],
    notes: ["Start with one reliable formula per setting.", "Change fabric before changing silhouette.", "Let weather decide weight, not taste alone."],
  },
  fit: {
    number: "03",
    label: "The Specifics",
    title: "Fit",
    italic: "the body.",
    deck:
      "Shoulders, sleeves, rise, break, waist, chest, seat, hem, and shoe shape. The quiet measurements that decide whether good clothes look good.",
    image: M_IMAGES.buildHero,
    stats: [["07", "sections"], ["38", "planned guides"], ["2", "tailor trips"]],
    ledger: [["First check", "Shoulders"], ["Most fixable", "Trousers"], ["Most ignored", "Shoes"], ["Rule", "Tailor down"]],
    intro:
      "Fit is not tightness. Fit is where the garment lands on the body and whether it lets you move without collapsing. This hub keeps the language simple enough to use in a mirror and specific enough to use with a tailor.",
    sections: [
      ["01", "Shirts", "shirts", "Collar, chest, yoke, cuff, sleeve pitch, hem length, oxford cloth, poplin, and the shirt that can be worn tucked or open."],
      ["02", "Trousers", "trousers", "Rise, waist, seat, thigh, taper, hem, break, pleats, and the difference between modern and skinny."],
      ["03", "Suits", "suits", "Shoulder line, lapel width, jacket length, button stance, trouser balance, vents, sleeves, and the first navy suit worth altering."],
      ["04", "Denim", "denim", "Waist stretch, rise, thigh room, leg opening, inseam, stacking, raw break-in, and when jeans should be hemmed."],
      ["05", "Outerwear", "outerwear", "Coat length, sleeve room, shoulder allowance, layering space, collar height, and the top layer that does not swallow the outfit."],
      ["06", "Shoes", "shoes", "Last shape, toe room, heel slip, width, arch, break-in, loafers versus lace-ups, and when pain means wrong size."],
      ["07", "Alterations", "alterations", "What to tailor, what to leave, what to pay, what to ask, and when the garment is not worth saving."],
    ],
    notes: ["Buy for the largest fixed point.", "Alter length before width when possible.", "A cleaner fit should still let you sit down."],
  },
  finish: {
    number: "04",
    label: "The Detail",
    title: "Finish",
    italic: "the read.",
    deck:
      "Grooming, fragrance, hair, skin, and the small visible choices that change how the clothes land before anyone notices the jacket.",
    image: M_IMAGES.fin3,
    stats: [["04", "sections"], ["24", "planned guides"], ["AM", "routine"]],
    ledger: [["Bridge", "Beauty later"], ["Best first read", "Grooming Basics"], ["Most personal", "Fragrance"], ["Tone", "Clean, quiet"]],
    intro:
      "Finish is not a vanity lane. It is maintenance. Skin, hair, scent, shave, nails, and fabric all sit in the same visual field. When the finish is calm, the clothes look more expensive than they are.",
    sections: [
      ["01", "Skincare for Men", "skincare-for-men", "Cleanser, moisturizer, sunscreen, shave irritation, winter dryness, oily skin, gym bags, and routines that take less than five minutes."],
      ["02", "Fragrance", "fragrance", "Clean, woody, citrus, amber, office-safe, date-night, summer, winter, and how much is too much."],
      ["03", "Hair", "hair", "Cut cadence, product weight, shine, texture, collar relationship, beard balance, and the haircut that matches the clothes."],
      ["04", "Grooming Basics", "grooming-basics", "Nails, collars, lint, shoe polish, shaving, beard lines, laundry smell, and the small maintenance that makes everything else work."],
    ],
    notes: ["The best finish is noticed second.", "Clean beats complicated.", "Scent should arrive late and leave early."],
  },
  seasonal: {
    number: "05",
    label: "The Drops",
    title: "Seasonal",
    italic: "rotation.",
    deck:
      "Spring, summer, fall, winter, and the awkward weeks between them. The weather changes. The standards do not.",
    image: M_IMAGES.fall,
    stats: [["05", "drops"], ["30", "planned guides"], ["4", "closet resets"]],
    ledger: [["Current focus", "Transitional"], ["Hardest season", "Summer"], ["Best investment", "Outerwear"], ["Rule", "Layer by weight"]],
    intro:
      "Seasonal dressing is a rotation problem. The closet needs a light layer, a heat plan, a texture plan, a cold plan, and a bridge between all of them. This page keeps those decisions in one place.",
    sections: [
      ["01", "Spring", "spring", "Rain layers, light knits, suede caution, soft color, loafers, field jackets, and the first week the coat comes off."],
      ["02", "Summer", "summer", "Linen, cotton, open weave shirts, lighter trousers, sandals, heat-proof work clothes, and evening outfits that still breathe."],
      ["03", "Fall", "fall", "Texture, denim, boots, overshirts, flannel, suede, wool trousers, and the month when men dress best by accident."],
      ["04", "Winter", "winter", "Overcoats, scarves, gloves, base layers, heavy socks, knitwear, boots, and keeping shape under actual warmth."],
      ["05", "Transitional Dressing", "transitional-dressing", "Forty-degree mornings, seventy-degree afternoons, packable layers, rain, wind, and the pieces that work both ways."],
    ],
    notes: ["Rotate by temperature first.", "One coat can change the whole season.", "Transitional weeks need a middle layer, not a new closet."],
  },
};

function MenL2Hub({ page }) {
  const data = M_L2_PAGE_DATA[page];
  return (
    <React.Fragment>
      <section className={`ml2-hero ml2-${page}`}>
        <div className="ml2-bg" style={{ backgroundImage: `url(${data.image})` }} />
        <div className="frame ml2-hero-frame">
          <nav className="crumb">
            <a href="/">Fashion</a><span>/</span><a href="/en/men/">Men</a><span>/</span><span className="here">{data.title}</span>
          </nav>
          <div className="ml2-copy">
            <span className="ml2-kicker">Men / {data.label}</span>
            <h1>{data.title} <span>{data.italic}</span></h1>
            <p>{data.deck}</p>
          </div>
          <div className="hero-stats ml2-stats">
            {data.stats.map(([n, l]) => (
              <div className="stat" key={l}><span className="n">{n}</span><span className="l">{l}</span></div>
            ))}
          </div>
        </div>
      </section>

      <nav className="ml2-nav">
        <div className="frame">
          <span className="label">The Index</span>
          <div className="links">
            {data.sections.map(([n, name, slug]) => (
              <a key={slug} href={`/en/men/${page}/${slug}/`}><span>{n}</span>{name}</a>
            ))}
          </div>
        </div>
      </nav>

      <section className="ml2-intro">
        <div className="frame">
          <aside className="ml2-ledger">
            {data.ledger.map(([k, v]) => <div key={k}><span>{k}</span><b>{v}</b></div>)}
          </aside>
          <div className="ml2-intro-copy">
            <p className="standfirst">{data.intro}</p>
            <div className="ml2-notes">
              {data.notes.map((note, i) => <span key={note}><b>{String(i + 1).padStart(2, "0")}</b>{note}</span>)}
            </div>
          </div>
        </div>
      </section>

      <section className="ml2-sections">
        <div className="frame">
          <header className="ml2-head">
            <span className="num">No. {data.number}</span>
            <h2>{data.title} <em>menu.</em></h2>
            <p>Every card below is a planned static hub. The links are live now so the structure, schema, and crawl paths are already in place.</p>
          </header>
          <div className="ml2-grid">
            {data.sections.map(([n, name, slug, body]) => (
              <a id={slug} key={slug} className="ml2-card" href={`/en/men/${page}/${slug}/`}>
                <span className="idx">{n}</span>
                <h3>{name}</h3>
                <p>{body}</p>
                <span className="cta">Open section</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      <section className="ml2-cross">
        <div className="frame">
          <span>Men / Next</span>
          <h2>Back to the full <em>men's handbook.</em></h2>
          <a href="/en/men/">Open Men lane</a>
        </div>
      </section>
    </React.Fragment>
  );
}

function MenWearPage() { return <MenL2Hub page="wear" />; }
function MenFitPage() { return <MenL2Hub page="fit" />; }
function MenFinishPage() { return <MenL2Hub page="finish" />; }
function MenSeasonalPage() { return <MenL2Hub page="seasonal" />; }

window.MenWearPage = MenWearPage;
window.MenFitPage = MenFitPage;
window.MenFinishPage = MenFinishPage;
window.MenSeasonalPage = MenSeasonalPage;