/* global React */

const MSC_IMG = {
  hero: "https://images.unsplash.com/photo-1552374196-1ab2a1c593e8?w=2400&q=80",
  blazer: "https://images.unsplash.com/photo-1593032465175-481ac7f401a0?w=1200&q=80",
  knit: "https://images.unsplash.com/photo-1521572163474-6864f9cf17ab?w=1200&q=80",
  denim: "https://images.unsplash.com/photo-1516257984-b1b4d707412e?w=1200&q=80",
  shoes: "https://images.unsplash.com/photo-1543163521-1bf539c55dd2?w=1200&q=80",
  dinner: "https://images.unsplash.com/photo-1488161628813-04466f872be2?w=1200&q=80",
};

const MSC_NAV = [
  { n: "01", id: "formula", nm: "Formula" },
  { n: "02", id: "wardrobe", nm: "Wardrobe" },
  { n: "03", id: "situations", nm: "Situations" },
  { n: "04", id: "rules", nm: "Rules" },
  { n: "05", id: "guides", nm: "Guides" },
  { n: "06", id: "faq", nm: "FAQ" },
];

function MSCHero() {
  return (
    <section className="msc-hero" data-screen-label="01 Hero">
      <div className="msc-hero-img" style={{ backgroundImage: `url(${MSC_IMG.hero})` }} />
      <div className="frame">
        <div className="msc-crumb">
          <a href="/en/men/">Men</a><span>/</span>
          <a href="/en/men/wear/">Wear</a><span>/</span>
          <span>Smart Casual</span>
        </div>
        <div className="msc-hero-copy">
          <span className="msc-kicker">Wear / 02 - The Middle Register</span>
          <h1>Smart casual, <span>without the shrug.</span></h1>
          <p>
            The useful space between suit and sweatshirt: soft tailoring, clean denim,
            real shoes, quiet knitwear, and enough structure to look like you meant it.
          </p>
        </div>
        <div className="msc-hero-stats">
          <div><span>06</span><small>Core formulas</small></div>
          <div><span>24</span><small>Article slots</small></div>
          <div><span>4x</span><small>Dress settings</small></div>
          <div><span>0</span><small>Costume moves</small></div>
        </div>
      </div>
    </section>
  );
}

function MSCNav() {
  const [active, setActive] = React.useState("formula");
  React.useEffect(() => {
    const onScroll = () => {
      let cur = MSC_NAV[0].id;
      for (const item of MSC_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="msc-nav">
      <div className="frame">
        <span className="label">Smart Casual Index</span>
        <div className="links">
          {MSC_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 MSCIntro() {
  return (
    <section className="section msc-intro" data-screen-label="02 Intro">
      <div className="frame">
        <aside>
          <div><span>Lane</span><b>Men</b></div>
          <div><span>Chapter</span><b>Wear / 02</b></div>
          <div><span>Section</span><b>Smart Casual</b></div>
          <div><span>Updated</span><b>April 2026</b></div>
          <div><span>Status</span><b>Gold L3 test</b></div>
        </aside>
        <div className="body">
          <p className="standfirst">
            Smart casual is not a dress code so much as a negotiation. It asks for polish without ceremony, ease without collapse, and clothes that can sit at dinner after a full day.
          </p>
          <p>
            This page is the first non-build L3 model. It uses the existing men outerwear standard, but the sections are built around situations, outfit formulas, and leaf article inventory instead of product categories.
          </p>
          <p>
            The rule is simple: start with one tailored or structured piece, soften everything around it, and keep the shoes better than the rest of the room expects.
          </p>
        </div>
      </div>
    </section>
  );
}

const FORMULAS = [
  ["Soft jacket + tee + trouser", "Dinner, first date, relaxed office", "The jacket carries the polish. The tee keeps it human. The trouser prevents it from becoming weekend wear."],
  ["Oxford + knit + dark denim", "Travel, casual Fridays, drinks", "The shirt gives shape, the knit quiets it down, and the denim makes it repeatable."],
  ["Overshirt + merino + chinos", "Saturday lunch, errands, daytime plans", "A casual formula with architecture: one layer, one soft surface, one clean pant."],
  ["Blazer + polo + loafers", "Warm weather, resort city, dinner outside", "The polo is only smart casual when the collar holds and the shoe is grown-up."],
  ["Topcoat + crewneck + jeans", "Cold nights, low-formality events", "The coat upgrades the whole thing. Keep the jeans dark and the knit plain."],
  ["Cardigan + shirt + suede shoe", "Home hosting, galleries, low-key meetings", "Soft authority. Works best when every color is quiet."],
];

function MSCFormula() {
  return (
    <section id="formula" className="msc-sec" data-screen-label="03 Formula">
      <div className="frame">
        <div className="msc-head">
          <div className="num">01</div>
          <div><span>The Formula</span><h2>One sharp thing, <em>two quiet things.</em></h2></div>
          <p>Smart casual fails when every piece tries to be the clever one. Pick one structured move and let the rest support it.</p>
        </div>
        <div className="msc-formulas">
          {FORMULAS.map((row, i) => (
            <a href={`/en/men/wear/smart-casual/${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>
              <p>{row[2]}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const WARDROBE = [
  { img: "blazer", tag: "Structure", title: "The soft blazer", desc: "Unstructured shoulder, open weave, navy or brown. It should look like clothing, not corporate armor." },
  { img: "knit", tag: "Texture", title: "The thin knit", desc: "Merino crew, cardigan, or quarter-zip if quiet. It gives depth without asking for attention." },
  { img: "denim", tag: "Ground", title: "Dark straight denim", desc: "Dark, clean, no distressing. Jeans can be smart casual when the leg is calm and the shoe is right." },
  { img: "shoes", tag: "Finish", title: "Loafers or derbies", desc: "The shoe decides the room. Brown suede, dark leather, or a clean loafer will do more than another jacket." },
];

function MSCWardrobe() {
  return (
    <section id="wardrobe" className="msc-sec" data-screen-label="04 Wardrobe">
      <div className="frame">
        <div className="msc-head">
          <div className="num">02</div>
          <div><span>The Pieces</span><h2>The smart casual <em>short list.</em></h2></div>
          <p>These pieces do the work repeatedly. The point is not novelty. The point is being able to get dressed fast and still look edited.</p>
        </div>
        <div className="msc-cards">
          {WARDROBE.map((card, i) => (
            <a className="msc-card" href={`/en/men/wear/smart-casual/${card.title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "")}/`} key={card.title}>
              <div className="img" style={{ backgroundImage: `url(${MSC_IMG[card.img]})` }}><span>{card.tag}</span></div>
              <small>No. {String(i + 1).padStart(2, "0")} / Smart Casual</small>
              <h3>{card.title}</h3>
              <p>{card.desc}</p>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const SITUATIONS = [
  ["Relaxed office", "Jacket, oxford, knit, trouser, loafer", "Keep the palette navy, white, grey, brown. The shirt can be open-necked, but the shoes cannot be lazy."],
  ["Dinner out", "Soft blazer, dark tee, wool trouser, suede shoe", "Texture replaces formality. A good dark tee works only when the jacket and shoe are doing enough."],
  ["Weekend plans", "Overshirt, knit, straight denim, boot", "The clean weekend version. No gym shapes, no performance fabrics, no loud sneaker dependency."],
  ["Travel day", "Cardigan, oxford, dark denim, loafer", "Comfort that still works if the hotel room is not ready and dinner happens early."],
];

function MSCSituations() {
  return (
    <section id="situations" className="msc-sec msc-situations" data-screen-label="05 Situations">
      <div className="frame">
        <div className="msc-head">
          <div className="num">03</div>
          <div><span>Dress Code Translation</span><h2>Four rooms, <em>one register.</em></h2></div>
          <p>The same closet should move across the day. Change weight and shoe before changing personality.</p>
        </div>
        <div className="situation-grid">
          {SITUATIONS.map((item) => (
            <article key={item[0]}>
              <span>{item[1]}</span>
              <h3>{item[0]}</h3>
              <p>{item[2]}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function MSCDoDont() {
  const rules = [
    ["Do", "Anchor the outfit with one tailored line: jacket, trouser, coat, or shirt collar."],
    ["Do", "Use leather or suede shoes when the room is ambiguous."],
    ["Do", "Let texture make the outfit richer instead of adding color for no reason."],
    ["Do not", "Wear a business shirt with casual jeans and call the mismatch intentional."],
    ["Do not", "Rely on white sneakers every time the dress code gets confusing."],
    ["Do not", "Let the jacket be too structured. Smart casual dies in boardroom shoulders."],
  ];
  return (
    <section id="rules" className="msc-sec" data-screen-label="06 Rules">
      <div className="frame">
        <div className="msc-split">
          <div className="photo" style={{ backgroundImage: `url(${MSC_IMG.dinner})` }}><span>Evening file / quiet polish</span></div>
          <div>
            <div className="msc-head compact">
              <div className="num">04</div>
              <div><span>Rules</span><h2>The line between <em>easy and unfinished.</em></h2></div>
            </div>
            <div className="rule-list">
              {rules.map((item, i) => (
                <div key={`${item[0]}-${i}`} className={item[0] === "Do" ? "good" : "bad"}>
                  <span>{String(i + 1).padStart(2, "0")}</span>
                  <h3>{item[0]}</h3>
                  <p>{item[1]}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

const LEAVES = [
  ["Smart casual outfits for men", "10 min", "/en/men/wear/smart-casual/smart-casual-outfits-for-men/"],
  ["Business casual vs smart casual", "7 min", "/en/men/wear/smart-casual/business-casual-vs-smart-casual/"],
  ["Best smart casual shoes for men", "8 min", "/en/men/wear/smart-casual/best-smart-casual-shoes/"],
  ["How to wear jeans smart casual", "6 min", "/en/men/wear/smart-casual/how-to-wear-jeans-smart-casual/"],
  ["Smart casual date night outfits", "7 min", "/en/men/wear/smart-casual/date-night-outfits/"],
  ["Smart casual office outfits", "8 min", "/en/men/wear/smart-casual/office-outfits/"],
  ["Smart casual in summer", "6 min", "/en/men/wear/smart-casual/summer/"],
  ["Smart casual in winter", "6 min", "/en/men/wear/smart-casual/winter/"],
];

function MSCLeafIndex() {
  return (
    <section id="guides" className="msc-sec" data-screen-label="07 Guide index">
      <div className="frame">
        <div className="msc-head">
          <div className="num">05</div>
          <div><span>Article Slots</span><h2>The pages this section <em>will feed.</em></h2></div>
          <p>Route-ready placeholders give the L3 body depth now and a clean fill-in list later.</p>
        </div>
        <div className="msc-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">-&gt;</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

const FAQ = [
  ["What does smart casual mean for men?", "Smart casual means polished but not formal: a structured piece, a clean base layer, better shoes, and fabric choices that feel intentional without looking like a suit."],
  ["Can jeans be smart casual?", "Yes, if they are dark, straight or slim-straight, clean, and worn with a better shoe. Distressed denim makes the outfit casual before anything else can help."],
  ["Are sneakers smart casual?", "Sometimes, but they are the weakest answer. Clean leather sneakers can work in casual rooms. Loafers, derbies, or suede shoes usually solve the dress code better."],
  ["Do I need a blazer for smart casual?", "No, but a soft jacket is the easiest way to create the register. An overshirt, cardigan, topcoat, or clean knit can also provide structure."],
  ["What colors work best?", "Navy, grey, white, brown, stone, olive, and black in small doses. Smart casual gets easier when the palette is quiet and the texture carries the interest."],
];

function MSCFAQ() {
  return (
    <section id="faq" className="msc-sec" data-screen-label="08 FAQ">
      <div className="frame">
        <div className="msc-head">
          <div className="num">06</div>
          <div><span>SEO Questions</span><h2>Smart casual questions <em>men actually ask.</em></h2></div>
          <p>Sample FAQ copy for the first static pass.</p>
        </div>
        <div className="msc-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 MSCCross() {
  const cards = [
    ["/en/men/wear/outfit-formulas/", "Wear / 01", "Outfit Formulas", "The repeatable math underneath every situation."],
    ["/en/men/wear/business-casual/", "Wear / 03", "Business Casual", "A more office-focused version of the register."],
    ["/en/men/fit/trousers/", "Fit", "Trousers", "The fit choice that decides whether smart casual works."],
    ["/en/men/wear/", "Up a level", "Wear", "All men's wear chapters."],
  ];
  return (
    <section className="section section-rule" data-screen-label="09 Cross">
      <div className="frame">
        <div className="sec-head">
          <div className="num">No. 07</div>
          <h2 className="title">Keep <span className="display italic" style={{ color: "var(--gold)" }}>wearing.</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, {
  MSCHero, MSCNav, MSCIntro, MSCFormula, MSCWardrobe,
  MSCSituations, MSCDoDont, MSCLeafIndex, MSCFAQ, MSCCross,
});