/* Men's Kimono LP sections — S1 through S10 */

const { useEffect: useEffectM, useRef: useRefM, useState: useStateM } = React;

/* ---------- S1 HERO ---------- */
function HeroMen() {
  const heroVidRef = useRefM(null);
  useEffectM(() => {
    const v = heroVidRef.current;
    if (!v) return;
    // Force mute immediately and on every play attempt
    v.muted = true;
    v.volume = 0;
    v.defaultMuted = true;
    v.removeAttribute("controls");
    const forceMute = () => { v.muted = true; v.volume = 0; };
    v.addEventListener("volumechange", forceMute);
    v.addEventListener("play", forceMute);
    v.addEventListener("playing", forceMute);
    const seek = () => {
      try { if (v.duration && v.duration > 3.1) v.currentTime = 3; } catch(e) {}
    };
    const onLoop = () => { try { v.currentTime = 3; } catch(e) {} };
    if (v.readyState >= 1) seek();
    else v.addEventListener("loadedmetadata", seek, { once: true });
    v.addEventListener("seeked", () => v.play().catch(()=>{}), { once: true });
    v.addEventListener("ended", onLoop);
    return () => {
      v.removeEventListener("ended", onLoop);
      v.removeEventListener("volumechange", forceMute);
      v.removeEventListener("play", forceMute);
      v.removeEventListener("playing", forceMute);
    };
  }, []);
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <video ref={heroVidRef} className="hero__video" autoPlay muted loop playsInline preload="auto"
        src="assets/men/hero-video.mp4"
        onLoadedMetadata={(e)=>{ e.currentTarget.muted = true; e.currentTarget.volume = 0; }} />
      <div className="hero__vignette" />
      <div className="hero__content">
        <div className="hero__eyebrow reveal">Sakurajima. Navy silk. A man of pride.</div>
        <h1 className="hero__headline reveal delay-1">
          <span className="large-kanji">誇</span>りを、<br/>身に纏う。
        </h1>
        <div className="hero__brandmark reveal delay-2">
          <span className="hero__brandmark-kanji">誇</span>
          <span className="hero__brandmark-en">KIMONO</span>
        </div>
        <div className="hero__subtitle reveal delay-2">Gentleman&apos;s Japanese attire</div>
        <p className="hero__tagline reveal delay-3">
          技術不要。<strong>1分</strong>で着られる。<br/>
          完全オーダーメイドの、<strong>誇り</strong>。
        </p>
        <a href="#order" className="cta reveal delay-4">
          <span>オーダーについて相談する</span>
          <span className="cta__arrow"></span>
        </a>
      </div>
      <div className="hero__scroll">SCROLL</div>
    </section>
  );
}

/* ---------- S2 Why Kimono ---------- */
function WhyMen() {
  return (
    <section className="why" id="concept" data-screen-label="02 Why">
      <div className="container">
        <div className="why__grid">
          <div className="why__text">
            <span className="eyebrow reveal">Why Kimono, Now</span>
            <h2 className="why__title reveal delay-1">
              日本人が着物を<br/>着なくなって、<br/>
              <span style={{color: "var(--gold-deep)"}}>何を失ったか。</span>
            </h2>
            <div className="why__body">
              <p className="reveal delay-1">それは「装い」ではありません。<br/><span className="accent">「在り方」</span>です。</p>
              <p className="reveal delay-2">着物を纏う時、背筋が伸びる。<br/>所作が変わる。言葉が変わる。<br/>人としての「格」が、自然と立ち上がる。</p>
              <p className="reveal delay-3">誇KIMONOは、<br/>日本の精神性を日常に<br/>取り戻すための、一着です。</p>
              <div className="why__quote reveal delay-4">
                “ The kimono does not cover the body.<br/>It reveals the spirit. ”
              </div>
            </div>
          </div>
          <div className="why__photo why__photo--real reveal delay-2">
            <img src="assets/men/studio.jpg" alt="紳士の和装 — スタジオ撮影" />
            <div className="why__photo-caption">紳士の和装</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- S3 Three Strengths ---------- */
function StrengthsMen() {
  return (
    <section className="strengths" id="product" data-screen-label="03 Strengths">
      <div className="container">
        <div className="strengths__head">
          <span className="eyebrow on-dark reveal">Three Virtues</span>
          <h2 className="strengths__title reveal delay-1">
            纏うほどに、<span className="gold">誇り</span>が宿る。<br/>
            三つの確かな、理由。
          </h2>
        </div>
        <div className="strengths__grid">
          <article className="strength-card reveal delay-1">
            <div className="strength-card__num">— 001</div>
            <div className="strength-card__icon"><IconClock /></div>
            <h3 className="strength-card__title">1分で、凛と。</h3>
            <p className="strength-card__body">
              着付けの技術は不要。<br/>
              特殊構造により、ベルトを締めるだけで、<br/>
              誰でも1分で美しく着られます。<br/>
              初めての日から、武士の所作が蘇る。
            </p>
          </article>
          <article className="strength-card reveal delay-2">
            <div className="strength-card__num">— 002</div>
            <div className="strength-card__icon"><IconSparkle /></div>
            <h3 className="strength-card__title">日常に、溶ける。</h3>
            <p className="strength-card__body">
              スーツ生地を採用しているため、<br/>
              お手入れはスーツと同様に、<br/>
              数ヶ月に一度のドライクリーニング。<br/>
              畳んで収納でき、扱いはスーツと変わりません。
            </p>
          </article>
          <article className="strength-card reveal delay-3">
            <div className="strength-card__num">— 003</div>
            <div className="strength-card__icon"><IconCoin /></div>
            <h3 className="strength-card__title">破格の、本物。</h3>
            <p className="strength-card__body">
              従来のオーダー着物は50〜100万円。<br/>
              誇KIMONOはフルセットで、<br/>
              その約半分の価格を実現。<br/>
              本物を、もっと身近に。
            </p>
            <div className="strength-card__price">
              <span className="small">Full Set / Price</span>
              ¥300,000 — ¥400,000
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ---------- S4 Video ---------- */
function VideoMen() {
  return (
    <section className="video" data-screen-label="04 Video">
      <div className="container-narrow">
        <span className="eyebrow reveal video__eyebrow">One Minute Kimono</span>
        <h2 className="video__title reveal delay-1">
          たった <span className="num">1</span> 分で、<br/>この姿に。
        </h2>
        <div className="video__frame video__frame--real reveal delay-2">
          <video src="assets/men/dress-video.mp4" autoPlay muted loop playsInline preload="auto"
            ref={(el) => {
              if (!el) return;
              el.muted = true; el.volume = 0; el.defaultMuted = true;
              el.addEventListener("volumechange", () => { el.muted = true; el.volume = 0; });
              el.addEventListener("play", () => { el.muted = true; el.volume = 0; });
            }}
            onLoadedMetadata={(e)=>{ e.currentTarget.muted = true; e.currentTarget.volume = 0; }} />
        </div>
        <p className="video__caption reveal delay-3">
          着付け教室に通う必要はありません。<br/>
          ベルトを締めるだけで、武士の凛々しさが蘇ります。
        </p>
      </div>
    </section>
  );
}

/* ---------- S5 Full Set ---------- */
function FullSetMen() {
  return (
    <section className="fullset fullset--visual" data-screen-label="05 Full Set">
      <div className="container">
        <header className="fullset__header">
          <span className="eyebrow reveal">The Full Set</span>
          <h2 className="fullset__title reveal delay-1">
            一式、すべて。<br/>迷いを、削ぐ。
          </h2>
        </header>

        <div className="fullset__visual reveal delay-2">
          <figure className="fullset__shot fullset__shot--main">
            <img src="assets/men/product-navy.jpg" alt="誇KIMONO 着用ビジュアル / NAVY" />
            <figcaption>NAVY / 紺</figcaption>
          </figure>
          <div className="fullset__center">
            <span className="fullset__center-en">SET OF SIX</span>
            <p className="fullset__center-jp">一分で纏う、男の礼装。</p>
            <span className="fullset__center-mark">六</span>
          </div>
          <figure className="fullset__shot fullset__shot--sub">
            <img src="assets/men/product-grey.jpg" alt="誇KIMONO 着用ビジュアル / GREY" />
            <figcaption>GREY / 鼠</figcaption>
          </figure>
        </div>

        <div className="fullset__includes reveal delay-3">
          <span className="fullset__includes-label">同梱内容</span>
          <p className="fullset__includes-text">
            上衣 ・ 羽織 ・ 袴 ・ 羽織紐 ・ 長襦袢Tシャツ ・ 着物ベルト
          </p>
        </div>

        <div className="fullset__price reveal delay-3">
          <span className="fullset__price-label">Full Set Price</span>
          <span className="fullset__price-value">¥300,000 — ¥400,000</span>
          <span className="fullset__price-sub">完全オーダーメイド / 税込 / 採寸・相談無料</span>
        </div>
      </div>
    </section>
  );
}

/* ---------- S6 Fabrics ---------- */
function FabricsMen() {
  const codes = [
    "NV-01","NV-02","NV-03","SM-01","SM-02","SM-03",
    "CH-01","CH-02","CH-03","MT-01","MT-02","MT-03",
  ];
  const palette = [
    "#1a1d3e","#23274f","#2a2f5a","#191a24","#23231f","#34312b",
    "#3a2820","#4a3426","#5a4230","#2c3a1e","#3a4a2a","#4a5c36",
  ];
  const patterns = [
    "repeating-linear-gradient(125deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px)",
    "repeating-linear-gradient(45deg,  rgba(255,255,255,0.03) 0 1px, transparent 1px 6px)",
    "repeating-linear-gradient(90deg,  rgba(255,255,255,0.03) 0 1px, transparent 1px 3px)",
    "radial-gradient(circle at 30% 30%, rgba(255,255,255,0.04) 0.5px, transparent 1px) 0 0 / 6px 6px",
    "repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 5px)",
    "repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 2px, transparent 2px 8px)",
    "repeating-linear-gradient(60deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 4px)",
    "radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0.5px, transparent 1px) 0 0 / 5px 5px",
    "repeating-linear-gradient(105deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 6px)",
    "repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 10px)",
    "repeating-linear-gradient(180deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px)",
    "repeating-linear-gradient(75deg, rgba(255,255,255,0.035) 0 1px, transparent 1px 5px)",
  ];
  return (
    <section className="fabrics" id="fabrics" data-screen-label="06 Fabrics">
      <div className="container">
        <div className="fabrics__head">
          <span className="eyebrow reveal fabrics__eyebrow">100+ Fabrics</span>
          <h2 className="fabrics__title reveal delay-1">
            <span className="big">100</span>種類の生地から、<br/>
            あなただけの、一着を。
          </h2>
          <p className="fabrics__body reveal delay-2">
            オーダーメイドスーツの生地をベースに、<br/>
            100種類以上からお選びいただけます。<br/>
            体型に合わせた完全オーダーメイド — <br/>
            <span style={{color: "var(--gold-deep)"}}>世界にたった一着の、誇り。</span>
          </p>
        </div>
        <div className="fabrics__grid reveal delay-2">
          {codes.map((c, i) => (
            <div key={c} className="fabric-swatch" data-code={c}
              style={{ background: `${patterns[i]}, ${palette[i]}` }} />
          ))}
        </div>
        <div className="fabrics__count reveal delay-3">— and 88 more fabrics available —</div>
      </div>
    </section>
  );
}

/* ---------- S7 Scenes ---------- */
function ScenesMen() {
  const scenes = [
    { num: "01", title: "経営者の日常", cap: "修学旅行、講演、<br/>経営者の集いに。", tag: "SCENE / DAY", bg1: "#2e2a1a", bg2: "#14120a", angle: "135deg", img: "assets/men/scene-daily.jpg", focus: "50% 62%" },
    { num: "02", title: "ビジネスシーン", cap: "和道経営塾、<br/>MATSURIでの登壇に。", tag: "SCENE / BUSINESS", bg1: "#23274f", bg2: "#0e1025", angle: "115deg", img: "assets/men/scene-business.jpg", focus: "50% 60%" },
    { num: "03", title: "特別な日",     cap: "記念日、新年、<br/>祝いの席に。",       tag: "SCENE / FORMAL", bg1: "#3a2820", bg2: "#1a0f08", angle: "155deg", img: "assets/men/scene-formal.jpg", focus: "50% 35%" },
  ];
  return (
    <section className="scenes" data-screen-label="07 Scenes">
      <div className="container">
        <div className="scenes__head">
          <span className="eyebrow on-dark reveal">Scenes of Pride</span>
          <h2 className="scenes__title reveal delay-1">
            あらゆる、舞台に。
          </h2>
        </div>
        <div className="scenes__grid">
          {scenes.map((s, i) => (
            <article key={s.num}
              className={`scene ${s.img ? "scene--real" : ""} reveal delay-${i+1}`}
              style={{ "--bg1": s.bg1, "--bg2": s.bg2, "--angle": s.angle }}>
              {s.img && (
                <img className="scene__img" src={s.img} alt={s.title}
                  style={{ objectPosition: s.focus || "50% 50%" }} />
              )}
              <span className="scene__num">— {s.num}</span>
              <span className="scene__tag">// {s.tag}</span>
              <div className="scene__body">
                <h3 className="scene__title">{s.title}</h3>
                <p className="scene__cap" dangerouslySetInnerHTML={{__html: s.cap}} />
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- S8 Founder Message ---------- */
function FounderMen() {
  return (
    <section className="founder" data-screen-label="08 Founder">
      <div className="container">
        <div className="founder__grid">
          <div className="founder__photo founder__photo--real reveal">
            <img src="assets/men/founder.jpg" alt="誇KIMONO — 誇りと袴をかけて" />
            <div className="founder__photo-vertical">誇 × 袴</div>
          </div>
          <div className="founder__text">
            <div className="founder__quote-mark reveal">“</div>
            <h2 className="founder__title reveal delay-1">
              <span className="accent">「誇り」</span>と<br/>
              <span className="accent">「袴」</span>を、かけて。
            </h2>
            <div className="founder__body">
              <p className="reveal delay-1">私が着物を着るのは、<br/>かっこいいからではありません。</p>
              <p className="reveal delay-2">着物を纏った時、<br/>先祖と繋がる感覚があるのです。</p>
              <p className="reveal delay-3">日本人の精神性は、装いに宿る。<br/>あなたも誇りを、身に纏いませんか。</p>
              <div className="founder__sign reveal delay-4">
                株式会社誇高 代表取締役
                <span className="founder__sign-name">小倉 瑞季</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- S9 Order Flow ---------- */
function FlowMen() {
  const steps = [
    { label: "STEP ONE",   title: "お問い合わせ", body: "LINE または<br/>フォームからご連絡ください。" },
    { label: "STEP TWO",   title: "ご相談・採寸", body: "オンラインまたは対面で、<br/>生地選び＋採寸を行います。" },
    { label: "STEP THREE", title: "制作",         body: "職人による完全オーダーメイド。<br/>約2〜3ヶ月で仕上げます。" },
    { label: "STEP FOUR",  title: "お届け",       body: "着用方法の動画付きで<br/>お手元にお届けします。" },
  ];
  return (
    <section className="flow" id="order" data-screen-label="09 Order Flow">
      <div className="container">
        <div className="flow__head">
          <span className="eyebrow reveal">Order Process</span>
          <h2 className="flow__title reveal delay-1">ご注文の、流れ。</h2>
        </div>
        <div className="flow__steps">
          {steps.map((s, i) => (
            <div key={i} className={`flow-step reveal delay-${i+1}`}>
              <div className="flow-step__num">{String(i+1).padStart(2,"0")}</div>
              <div className="flow-step__label">{s.label}</div>
              <h3 className="flow-step__title">{s.title}</h3>
              <p className="flow-step__body" dangerouslySetInnerHTML={{__html: s.body}} />
            </div>
          ))}
        </div>
        <a href="#closing" className="cta reveal delay-4" style={{background:"var(--navy)", color:"var(--gold)"}}>
          <span>来店・採寸予約する</span>
          <span className="cta__arrow" style={{background:"var(--gold)"}}></span>
        </a>
      </div>
    </section>
  );
}

/* ---------- S10 Closing ---------- */
function ClosingMen() {
  return (
    <section className="closing" id="closing" data-screen-label="10 Closing">
      <div className="closing__bg-kanji">誇</div>
      <div className="closing__content">
        <div className="closing__eyebrow reveal">The Pride You Wear</div>
        <h2 className="closing__tagline reveal delay-1">
          誇りを、身に纏う。
        </h2>
        <div className="closing__brand reveal delay-2">誇  KIMONO</div>
        <p className="closing__body reveal delay-2">
          日本人としての誇りを、<br/>
          あなたの装いから。
        </p>
        <a href="#" className="cta cta--ghost reveal delay-3">
          <span>来店・採寸予約する</span>
          <span className="cta__arrow"></span>
        </a>
        <p className="closing__note reveal delay-4">
          ※ 誇高の受講生・MUSUBI会員の方は、<br/>
          LINE公式からお気軽にご相談ください。
        </p>
      </div>
    </section>
  );
}

Object.assign(window, {
  HeroMen, WhyMen, StrengthsMen, VideoMen, FullSetMen,
  FabricsMen, ScenesMen, FounderMen, FlowMen, ClosingMen
});