/* Women's Kimono LP sections */

/* ---------- S1 HERO ---------- */
function HeroWomen() {
  return (
    <section className="hero" id="top" data-screen-label="01 Hero">
      <div className="hero__bg" />
      <div className="hero__photo">
        <img src="assets/women/hero.jpg" alt="誇KIMONO 女性モデル" className="hero__photo-img" />
        <span className="hero__photo-label">// IMG_W_04 — Milano editorial</span>
        <span className="hero__photo-vertical">大和撫子の装い</span>
      </div>
      <div className="hero__content">
        <div className="hero__text">
          <div className="hero__serial reveal">N°01 — Spring / Summer 2026</div>
          <h1 className="hero__headline reveal delay-1">
            <span className="large-kanji">誇</span>りを、<br/>纏う。<em>Parisienne</em>
          </h1>
          <div className="hero__brand reveal delay-2">
            <span className="kanji">誇</span>Kimono
          </div>
          <div className="hero__subtitle reveal delay-2">— The New Kimono —</div>
          <p className="hero__tagline reveal delay-3">
            ミラノから、<strong>日本の美意識</strong>を。<br/>
            ブーツに、ジャケットに、<strong>日常</strong>に。<br/>
            和と洋の境界を、溶かす一着。
          </p>
          <div className="hero__actions reveal delay-4">
            <a href="#order" className="cta cta--hero-w">
              <span>来店・採寸予約</span>
              <span className="cta__arrow"></span>
            </a>
            <a href="#concept" className="cta cta--ghost-w">
              <span>Brand Story</span>
              <span className="cta__arrow"></span>
            </a>
          </div>
        </div>
      </div>
      <div className="hero__credits reveal delay-4">
        <span><strong>MFW '25</strong>Milano Fashion Week</span>
        <span><strong>¥150k–</strong>Full Set Starting</span>
        <span><strong>01 min</strong>Dress Time</span>
      </div>
    </section>
  );
}

/* ---------- S2 Why ---------- */
function WhyWomen() {
  return (
    <section className="why" id="concept" data-screen-label="02 Why">
      <div className="container">
        <div className="why__grid">
          <div className="why__photo reveal">
            <img src="assets/women/everyday.jpg" alt="日常に着る誇KIMONO" className="why__photo-img" />
            <div className="why__photo-caption">— Everyday Kimono —</div>
            <span className="why__photo-label">// IMG_W_12 — 街中スタイリング</span>
          </div>
          <div className="why__text">
            <span className="eyebrow reveal">Not Just for Special Days</span>
            <h2 className="why__title reveal delay-1">
              着物は、<br/>
              <span className="soft">「特別な日」</span>だけの<br/>
              ものですか？
            </h2>
            <div className="why__body">
              <p className="reveal delay-1">誇KIMONOは、違います。</p>
              <p className="reveal delay-2">
                ブーツと合わせて、<span className="accent">日常</span>に。<br/>
                ジャケットの代わりに、<span className="accent">ビジネス</span>に。<br/>
                パーティーに、旅行に、<br/>
                自分だけの一着で。
              </p>
              <p className="reveal delay-3">
                「和」と「洋」の境界を溶かし、<br/>
                あなたの毎日に<span className="accent">誇り</span>を添える着物です。
              </p>
              <div className="why__quote reveal delay-4">
                “ A kimono that lives with you,<br/>not one that waits in the closet. ”
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- S3 Strengths ---------- */
function StrengthsWomen() {
  return (
    <section className="strengths" id="product" data-screen-label="03 Strengths">
      <div className="container">
        <div className="strengths__head">
          <span className="eyebrow reveal">Three Reasons</span>
          <h2 className="strengths__title reveal delay-1">
            美しさは、<span className="rose">軽やかに</span>。<br/>
            新しい着物の、<span className="rose">三つの理由</span>。
          </h2>
        </div>
        <div className="strengths__grid">
          <article className="strength-card reveal delay-1">
            <div className="strength-card__num">— N° 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">— N° 002</div>
            <div className="strength-card__icon"><IconLeaf /></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">— N° 003</div>
            <div className="strength-card__icon"><IconSparkle /></div>
            <h3 className="strength-card__title">オーダーの、軽やかさ。</h3>
            <p className="strength-card__body">
              長着＋帯ベルトのセットから。<br/>
              完全オーダーメイドを、<br/>
              手の届く価格で。<br/>
              <span style={{color: "var(--rose-deep)"}}>本物の軽やかさを、日常に。</span>
            </p>
            <div className="strength-card__price">
              <span className="small">Starting From</span>
              ¥150,000 — ¥200,000
            </div>
          </article>
        </div>
      </div>
    </section>
  );
}

/* ---------- S4 Milano collab ---------- */
function MilanoWomen() {
  return (
    <section className="milano" data-screen-label="04 Milano">
      <div className="container">
        <div className="milano__grid">
          <div className="milano__photo reveal">
            <img src="assets/women/soura.jpg" alt="SOURA × 誇高 HYBRID KIMONO" className="milano__photo-img" />
            <span className="milano__photo-tag">— Runway —</span>
            <span className="milano__photo-label">// IMG_W_RW_03 — SOURA × 誇KIMONO</span>
          </div>
          <div className="milano__text">
            <span className="eyebrow on-dark reveal milano__eyebrow">Milano Fashion Week</span>
            <h2 className="milano__title reveal delay-1">
              <em>SOURA</em> × 誇高。<br/>
              ミラノから、<br/>世界の日常へ。
            </h2>
            <p className="milano__body reveal delay-2">
              ミラノファッションウィーク出展のSOURAと、<br/>
              誇高のコラボレーション。<br/>
              ヨーロッパの美意識と日本の精神性を、<br/>
              一着の中で溶け合わせました。
            </p>
            <div className="milano__meta reveal delay-3">
              <div className="milano__meta-k">Collection</div>
              <div className="milano__meta-v">SS 2026 Capsule</div>
              <div className="milano__meta-k">Designer</div>
              <div className="milano__meta-v">SOURA × 誇高</div>
              <div className="milano__meta-k">Showcase</div>
              <div className="milano__meta-v">Milano Fashion Week</div>
              <div className="milano__meta-k">Edition</div>
              <div className="milano__meta-v">Limited / Made-to-order</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- S5 Full Set ---------- */
function FullSetWomen() {
  const items = [
    { num: "01", jp: "長着（ながぎ）", en: "NAGAGI (Robe)"  },
    { num: "02", jp: "帯ベルト",       en: "OBI BELT"       },
  ];
  const tones = [
    { bg1: "#f4e3dd", bg2: "#dbc0b8", angle: "125deg", tag: "SAKURA / 桜" },
    { bg1: "#e8dcc3", bg2: "#c8a27a", angle: "145deg", tag: "KINARI / 生成" },
    { bg1: "#c8bcb0", bg2: "#8b8278", angle: "115deg", tag: "HAIIRO / 灰" },
    { bg1: "#a9b29f", bg2: "#7a8370", angle: "135deg", tag: "MOSS / 苔" },
    { bg1: "#d2c4b3", bg2: "#9a8877", angle: "155deg", tag: "SUNA / 砂" },
    { bg1: "#e5cec8", bg2: "#b89088", angle: "125deg", tag: "NAGATSUKI / 長月" },
  ];
  return (
    <section className="fullset" data-screen-label="05 Full Set">
      <div className="container">
        <div className="fullset__grid">
          <div className="fullset__text">
            <span className="eyebrow reveal">The Essentials</span>
            <h2 className="fullset__title reveal delay-1">
              迷わず、始められる。<br/>一式の、軽やかさ。
            </h2>
            <ul className="fullset__list reveal delay-2">
              {items.map((it) => (
                <li key={it.num}>
                  <span className="num">{it.num}</span>
                  <span>{it.jp}</span>
                  <span className="en">{it.en}</span>
                </li>
              ))}
            </ul>
            <div className="fullset__price reveal delay-3">
              <span className="fullset__price-label">Starting From</span>
              <span className="fullset__price-value">¥150,000 — ¥200,000</span>
              <span className="fullset__price-sub">長着＋帯ベルトのセット / 完全オーダーメイド / 税込</span>
            </div>
          </div>
          <div className="gallery reveal delay-1">
            {tones.map((t, i) => (
              <div key={i} className="gallery__cell"
                style={{ "--bg1": t.bg1, "--bg2": t.bg2, "--angle": t.angle }}
                data-tag={t.tag} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- S6 Fabrics (15 curated) ---------- */
function FabricsWomen() {
  const codes = ["SK-01","SK-02","KN-01","KN-02","HI-01","MS-01","MS-02","SN-01","NG-01","NG-02","RS-01","IV-01","AO-01","MB-01","MB-02"];
  const palette = ["#f4e3dd","#e5cec8","#e8dcc3","#c8a27a","#c8bcb0","#a9b29f","#7a8370","#d2c4b3","#e5d3bc","#b89088","#dbc0b8","#ebe6db","#8ea098","#8b7862","#6b5f4e"];
  const patterns = [
    "repeating-linear-gradient(125deg, rgba(42,35,32,0.06) 0 1px, transparent 1px 4px)",
    "repeating-linear-gradient(45deg,  rgba(42,35,32,0.05) 0 1px, transparent 1px 6px)",
    "radial-gradient(circle at 30% 30%, rgba(42,35,32,0.08) 0.5px, transparent 1px) 0 0 / 6px 6px",
    "repeating-linear-gradient(90deg,  rgba(42,35,32,0.05) 0 1px, transparent 1px 3px)",
    "repeating-linear-gradient(0deg, rgba(42,35,32,0.05) 0 1px, transparent 1px 5px), repeating-linear-gradient(90deg, rgba(42,35,32,0.05) 0 1px, transparent 1px 5px)",
    "repeating-linear-gradient(135deg, rgba(42,35,32,0.07) 0 2px, transparent 2px 8px)",
    "repeating-linear-gradient(60deg, rgba(251,247,242,0.18) 0 1px, transparent 1px 4px)",
    "radial-gradient(circle at 50% 50%, rgba(42,35,32,0.06) 0.5px, transparent 1px) 0 0 / 5px 5px",
    "repeating-linear-gradient(105deg, rgba(42,35,32,0.05) 0 1px, transparent 1px 6px)",
    "repeating-linear-gradient(45deg, rgba(251,247,242,0.2) 0 2px, transparent 2px 10px)",
    "repeating-linear-gradient(180deg, rgba(42,35,32,0.06) 0 1px, transparent 1px 4px)",
    "repeating-linear-gradient(75deg, rgba(42,35,32,0.05) 0 1px, transparent 1px 5px)",
    "repeating-linear-gradient(95deg, rgba(251,247,242,0.15) 0 1px, transparent 1px 4px)",
    "radial-gradient(circle at 40% 40%, rgba(251,247,242,0.12) 0.5px, transparent 1px) 0 0 / 5px 5px",
    "repeating-linear-gradient(125deg, rgba(251,247,242,0.1) 0 2px, transparent 2px 10px)",
  ];
  return (
    <section className="fabrics" id="fabrics" data-screen-label="06 Fabrics">
      <div className="container">
        <div className="fabrics__head">
          <span className="eyebrow reveal fabrics__eyebrow">Curated Fabrics</span>
          <h2 className="fabrics__title reveal delay-1">
            <span className="big">15</span>種類の生地から、<br/>
            あなたの、一着を。
          </h2>
          <p className="fabrics__body reveal delay-2">
            フレンチシック × 日本の美意識。<br/>
            スーツ生地をベースにした、<br/>
            軽やかで、美しい15色。
          </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">— 15 carefully curated tones —</div>
      </div>
    </section>
  );
}

/* ---------- S7 Scenes ---------- */
function ScenesWomen() {
  const scenes = [
    { num: "01", title: "ビジネスの日々", cap: "ジャケット感覚で、<br/>会議にも登壇にも。",   tag: "SCENE / DAY",    wide: true,  img: "assets/women/scene-day.jpg",     overlay: "linear-gradient(180deg, transparent 30%, rgba(14,18,30,0.55) 75%, rgba(10,12,22,0.92) 100%)", sceneBg: "linear-gradient(170deg, #5a6478 0%, #2a3142 60%, #10141f 100%)" },
    { num: "02", title: "街を歩く",      cap: "ブーツと、<br/>デニムと、<br/>日常に。",   tag: "SCENE / CASUAL", wide: false, img: "assets/women/scene-casual.jpg", overlay: "linear-gradient(180deg, transparent 30%, rgba(36,24,20,0.55) 75%, rgba(22,14,12,0.92) 100%)", sceneBg: "linear-gradient(165deg, #8a6f58 0%, #3e2f26 60%, #1a120e 100%)", hideText: true },
    { num: "03", title: "旅先で",        cap: "ホテルのラウンジに、<br/>ギャラリーに。",   tag: "SCENE / TRAVEL", wide: false, img: "assets/women/scene-travel.jpg", overlay: "linear-gradient(180deg, transparent 30%, rgba(20,36,34,0.55) 75%, rgba(10,20,22,0.92) 100%)", sceneBg: "linear-gradient(170deg, #5c7a72 0%, #2c4a48 55%, #121e22 100%)", hideText: true },
    { num: "04", title: "祝宴の席で",    cap: "ドレスコードに、<br/>自分の美学で応える。",   tag: "SCENE / PARTY",  wide: false, img: "assets/women/scene-party.jpg", overlay: "linear-gradient(180deg, transparent 30%, rgba(36,14,24,0.55) 75%, rgba(18,8,14,0.92) 100%)", sceneBg: "linear-gradient(165deg, #7a3d55 0%, #3a1a2a 55%, #1a0a14 100%)" },
    { num: "05", title: "特別な日",      cap: "大切な誰かと、<br/>記念日を、新年を。",    tag: "SCENE / FORMAL", wide: false, img: "assets/women/scene-formal.jpg", overlay: "linear-gradient(180deg, transparent 30%, rgba(50,28,12,0.5) 75%, rgba(22,12,8,0.92) 100%)", sceneBg: "linear-gradient(165deg, #c8954a 0%, #6a3f1a 55%, #2a1608 100%)" },
  ];
  return (
    <section className="scenes" data-screen-label="07 Scenes">
      <div className="container">
        <div className="scenes__head">
          <span className="eyebrow reveal">Styling Proposals</span>
          <h2 className="scenes__title reveal delay-1">
            あらゆる日を、<br/>あなたらしく。
          </h2>
        </div>
        <div className="scenes__grid">
          {scenes.map((s, i) => (
            <article key={s.num}
              className={`scene scene--photo ${s.wide ? 'scene--wide' : ''} reveal delay-${Math.min(i+1, 4)}`}
              style={{ "--scene-bg": s.sceneBg, "--scene-overlay": s.overlay }}>
              <div className="scene__bg" />
              {s.img && <img className="scene__model" src={s.img} alt={s.title} />}
              <div className="scene__gloss" />
              {!s.hideText && <span className="scene__num">— {s.num}</span>}
              {!s.hideText && <span className="scene__tag">// {s.tag}</span>}
              {!s.hideText && (
                <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 ---------- */
function FounderWomen() {
  return (
    <section className="founder" data-screen-label="08 Founder">
      <div className="container">
        <div className="founder__grid">
          <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/>
                世界のどこにいても、<br/>
                日本人としての誇りを、美しく。
              </p>
              <p className="reveal delay-3">
                誇KIMONOは、あなたの毎日に<br/>
                新しい選択肢を、そっと添えます。
              </p>
              <div className="founder__sign reveal delay-4">
                株式会社誇高 代表取締役
                <span className="founder__sign-name">小倉 瑞季</span>
              </div>
            </div>
          </div>
          <div className="founder__photo founder__photo--real reveal delay-1">
            <img src="assets/women/founder.jpg" alt="株式会社誇高 代表取締役 小倉瑞季" />
            <div className="founder__photo-vertical">誇 × 纏</div>
            <span className="founder__photo-label">// IMG_5443 — 小倉瑞季</span>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ---------- S9 Flow ---------- */
function FlowWomen() {
  const steps = [
    { label: "STEP ONE",   title: "お問い合わせ", body: "LINE または<br/>フォームから<br/>ご連絡ください。" },
    { label: "STEP TWO",   title: "ご相談・採寸", body: "オンラインまたは対面で、<br/>生地選び＋採寸。<br/>シーンもご提案。" },
    { label: "STEP THREE", title: "制作",         body: "職人による完全オーダー。<br/>約2〜3ヶ月で仕上げます。" },
    { label: "STEP FOUR",  title: "お届け",       body: "着こなし動画とともに<br/>お手元にお届け。<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">
          <span>来店・採寸予約する</span>
          <span className="cta__arrow"></span>
        </a>
      </div>
    </section>
  );
}

/* ---------- S10 Closing ---------- */
function ClosingWomen() {
  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-w 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, {
  HeroWomen, WhyWomen, StrengthsWomen, MilanoWomen, FullSetWomen,
  FabricsWomen, ScenesWomen, FounderWomen, FlowWomen, ClosingWomen
});