// LP sections.

const { Chev, Ornament, IconDry, IconSpread, IconDrop, IconHat, IconHand, IconWrap, IconShower, ImgFrame, Eucalyptus } = window;

const safetyNotes = [
  "※公共施設では各施設のルールに従ってご使用ください。",
  "※施設によっては浴室・サウナ室内でのヘアケア用品の使用が制限される場合があります。",
  "※頭皮ではなく、毛髪の中間から毛先を中心にご使用ください。",
  "※使用中または使用後に異常を感じた場合は使用を中止してください。",
  "※開発中商品のため、仕様・価格・内容は変更になる場合があります。"
];

const SafetyNotice = ({ compact = false }) => (
  <div className="notice" style={compact ? { maxWidth: 900, margin: "34px auto 0" } : undefined}>
    {safetyNotes.map((note) => <div key={note}>{note}</div>)}
  </div>
);

const CTAButton = ({ onClick, label, section, size = "md", type = "button", disabled = false }) => (
  <button
    type={type}
    className="cta-btn"
    onClick={onClick}
    disabled={disabled}
    data-event={type === "submit" ? "submit-monitor-form" : "click-monitor-cta"}
    data-section={section}
    style={size === "lg" ? { padding: "22px 46px", fontSize: 15 } : undefined}
  >
    <span className="mincho">{label}</span>
    {type !== "submit" && <Chev color="#fff" size={14} />}
  </button>
);

const TopBar = () => (
  <header style={{ position: "absolute", top: 0, left: 0, right: 0, padding: "22px 34px", display: "flex", justifyContent: "space-between", alignItems: "center", zIndex: 10 }}>
    <div className="latin" style={{ fontSize: 14, color: "var(--ink)", fontWeight: 500 }}>SAUNA&nbsp;HAIR&nbsp;VEIL</div>
    <nav className="topbar-nav" aria-label="ページ内メニュー" style={{ display: "flex", gap: 20, fontSize: 11, color: "var(--ink-soft)", letterSpacing: ".16em" }}>
      <a href="#concept">CONCEPT</a>
      <a href="#howto">HOW TO</a>
      <a href="#entry">ENTRY</a>
    </nav>
  </header>
);

const Hero = ({ onCta }) => (
  <section style={{ position: "relative", background: "var(--ivory)" }} aria-labelledby="hero-title">
    <TopBar />
    <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "minmax(0,.95fr) minmax(0,1.05fr)", alignItems: "stretch" }}>
      <div className="pad-mobile" style={{ padding: "140px 56px 80px", position: "relative", zIndex: 2 }}>
        <div className="latin" style={{ display: "inline-block", fontSize: 10, color: "var(--mocha-dark)", letterSpacing: ".28em", padding: "5px 12px", border: "1px solid var(--mocha)", borderRadius: 999, marginBottom: 28 }}>
          PRE-LAUNCH · 少人数モニター募集中
        </div>
        <p className="latin" style={{ fontSize: 22, color: "var(--ink)", fontWeight: 500, letterSpacing: ".2em", margin: "0 0 6px" }}>
          SAUNA HAIR VEIL
        </p>
        <p className="mincho" style={{ fontSize: 12, color: "var(--ink-mute)", letterSpacing: ".28em", margin: "0 0 38px" }}>
          サウナ前ヘアトリートメント
        </p>
        <h1 id="hero-title" className="mincho hero-title" style={{ fontSize: 54, lineHeight: 1.3, fontWeight: 500, color: "var(--ink)", margin: 0, letterSpacing: ".04em" }}>
          サウナ前、<br />毛先にひと塗り。<br />
          <span style={{ fontSize: 33, color: "var(--mocha-dark)" }}>大人の髪に、<br />うるおいのひと手間を。</span>
        </h1>
        <div style={{ height: 1, width: 64, background: "var(--mocha)", opacity: .5, margin: "34px 0 22px" }} />
        <p className="mincho" style={{ fontSize: 16, color: "var(--ink-soft)", margin: "0 0 10px", lineHeight: 1.85 }}>
          開発中商品の先行モニターを募集しています。
        </p>
        <p style={{ fontSize: 13, color: "var(--ink-soft)", margin: "0 0 34px", lineHeight: 2, maxWidth: 390 }}>
          サウナ後の髪のパサつきや広がりが気になる方へ。毛髪の中間から毛先を中心になじませる、サウナ前のヘアケア習慣を一緒に検証してください。
        </p>
        <CTAButton onClick={onCta} label="先行モニターに応募する" section="hero" />
        <div style={{ marginTop: 18, fontSize: 11, color: "var(--ink-mute)", letterSpacing: ".14em" }}>
          先行モニター <span className="latin-tight" style={{ margin: "0 3px", fontSize: 13 }}>10〜20</span> 名限定
        </div>
      </div>
      <div className="pad-mobile" style={{ padding: "82px 56px 46px", position: "relative" }}>
        <Eucalyptus style={{ position: "absolute", right: "-2%", top: "4%", width: 120, opacity: .45, transform: "rotate(160deg)", zIndex: 1 }} />
        <ImgFrame
          src="assets/hero-woman-hair-care.jpg"
          alt="サウナ前に髪を整える女性のイメージ"
          frameClass="img-frame--hero"
          tag="HERO"
          style={{ maxWidth: 460, marginLeft: "auto", position: "relative", zIndex: 2 }}
        />
      </div>
    </div>
  </section>
);

const Worry = () => {
  const items = [
    { icon: <IconDry />, image: "assets/worry-dry-ends.jpg", alt: "サウナ後の乾燥が気になる毛先のイメージ", label: "サウナ後、髪がパサつく", body: "まずは気になる変化を、応募フォームで教えてください。" },
    { icon: <IconSpread />, image: "assets/worry-spread-ends.jpg", alt: "毛先が広がりやすい髪のイメージ", label: "毛先が広がりやすい", body: "普段のサウナ後の髪悩みを、商品づくりの参考にします。" },
    { icon: <IconDrop />, image: "assets/worry-color-dryness.jpg", alt: "カラー後の乾燥が気になる髪のイメージ", label: "カラー後の乾燥が気になる", body: "カラーや白髪染めの有無も、モニター選考で確認します。" },
    { icon: <IconHat />, image: "assets/worry-hat-only.jpg", alt: "タオル地サウナハットとタオルのイメージ", label: "サウナハットだけでは物足りない", body: "ハットと一緒に使う前提の使いやすさを検証します。" }
  ];
  return (
    <section className="pad-mobile" style={{ padding: "100px 56px", background: "var(--ivory-2)", textAlign: "center" }} aria-labelledby="worry-title">
      <Ornament />
      <h2 id="worry-title" className="mincho" style={{ fontSize: 30, fontWeight: 500, margin: "24px 0 8px", color: "var(--ink)" }}>こんなお悩みありませんか？</h2>
      <p className="latin" style={{ fontSize: 11, color: "var(--mocha)", letterSpacing: ".3em", margin: "0 0 54px" }}>MONITOR THEME</p>
      <div className="grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18, maxWidth: 920, margin: "0 auto" }}>
        {items.map((item) => (
          <article key={item.label} style={{ background: "#fff", border: "1px solid var(--line-soft)", borderRadius: 4, overflow: "hidden" }}>
            <ImgFrame src={item.image} alt={item.alt} frameClass="img-frame--square" tag="VOICE" />
            <div style={{ padding: "20px 18px 24px" }}>
              <div style={{ width: 58, height: 58, borderRadius: "50%", background: "var(--ivory-2)", display: "flex", alignItems: "center", justifyContent: "center", margin: "-48px auto 14px", position: "relative", zIndex: 4, border: "1px solid var(--line-soft)" }}>{item.icon}</div>
              <h3 className="mincho" style={{ fontSize: 14, color: "var(--ink)", lineHeight: 1.8, margin: "0 0 8px" }}>{item.label}</h3>
              <p style={{ fontSize: 11.5, color: "var(--ink-soft)", lineHeight: 1.8, margin: 0 }}>{item.body}</p>
            </div>
          </article>
        ))}
      </div>
    </section>
  );
};

const Concept = () => (
  <section id="concept" style={{ background: "#fff" }} aria-labelledby="concept-title">
    <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "minmax(0,1fr) minmax(0,1.05fr)", alignItems: "center" }}>
      <div className="pad-mobile" style={{ padding: "88px 56px" }}>
        <p className="latin" style={{ fontSize: 11, color: "var(--mocha)", letterSpacing: ".3em", margin: "0 0 18px" }}>A NEW RITUAL</p>
        <h2 id="concept-title" className="mincho" style={{ fontSize: 32, fontWeight: 500, margin: "0 0 26px", lineHeight: 1.45 }}>サウナ前に、<br />髪にも準備を。</h2>
        <div style={{ height: 1, width: 48, background: "var(--mocha)", opacity: .55, margin: "0 0 26px" }} />
        <p style={{ fontSize: 14, color: "var(--ink-soft)", lineHeight: 2.05, maxWidth: 450, margin: 0 }}>
          SAUNA HAIR VEILは、サウナに入る前の髪を考えた開発中のヘアケア商品です。毛髪の中間から毛先を中心に使い、使用感や使いやすさをモニターの方に確認していただきます。
        </p>
      </div>
      <div className="pad-mobile" style={{ padding: "44px 56px 60px" }}>
        <ImgFrame src="assets/treatment-texture.jpg" alt="ヘアトリートメントのテクスチャイメージ" frameClass="img-frame--wide" tag="TEXTURE" />
      </div>
    </div>
  </section>
);

const FeatureCards = () => {
  const cards = [
    { src: "assets/card-apply-ends.jpg", alt: "毛先にヘアケアをなじませる手元のイメージ", title: "毛先中心の使い方", copy: "頭皮ではなく、毛髪の中間から毛先を中心に使う設計です。応募前に使い方のイメージを確認できます。" },
    { src: "assets/card-carry-kit.jpg", alt: "サウナバッグに入れやすい小分けアイテムのイメージ", title: "持ち運びやすさを確認", copy: "サウナバッグに入れやすい形か、1回分の量が使いやすいかをモニターで確認します。" },
    { src: "assets/card-feedback-note.jpg", alt: "アンケート記入を想起させるノートとペンのイメージ", title: "声を商品づくりへ", copy: "使用感、香り、量、洗い流しやすさ、セット内容の希望をアンケートで確認します。" }
  ];
  return (
    <section className="pad-mobile" style={{ padding: "100px 56px", background: "var(--ivory)" }} aria-labelledby="features-title">
      <div style={{ textAlign: "center", marginBottom: 52 }}>
        <Ornament />
        <h2 id="features-title" className="mincho" style={{ fontSize: 28, fontWeight: 500, margin: "18px 0 0" }}>モニターで確認したいこと</h2>
      </div>
      <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 22, maxWidth: 1000, margin: "0 auto" }}>
        {cards.map((card, index) => (
          <article key={card.title} style={{ background: "#fff", border: "1px solid var(--line-soft)", borderRadius: 4, overflow: "hidden", boxShadow: "0 22px 40px -28px rgba(82,68,52,.18)" }}>
            <ImgFrame src={card.src} alt={card.alt} frameClass="img-frame--texture" tag={`POINT 0${index + 1}`} />
            <div style={{ padding: "24px 22px 28px" }}>
              <h3 className="mincho" style={{ fontSize: 18, fontWeight: 500, margin: "0 0 10px" }}>{card.title}</h3>
              <p style={{ fontSize: 13, color: "var(--ink-soft)", lineHeight: 1.95, margin: 0 }}>{card.copy}</p>
            </div>
          </article>
        ))}
      </div>
      <p style={{ maxWidth: 900, margin: "28px auto 0", color: "var(--ink-mute)", fontSize: 11, textAlign: "center" }}>
        開発中商品のため、処方・香り・内容量・セット内容は変更になる場合があります。
      </p>
    </section>
  );
};

const Steps = () => {
  const steps = [
    { icon: <IconHand />, image: "assets/card-apply-ends.jpg", alt: "毛先にヘアケアをなじませる手元のイメージ", title: "毛先中心になじませる", body: "サウナ前、毛髪の中間から毛先を中心に少量をなじませます。" },
    { icon: <IconWrap />, image: "assets/card-wrap-towel.jpg", alt: "髪をタオルでやさしくまとめるイメージ", title: "髪をまとめる", body: "必要に応じて髪をまとめ、タオルやサウナハットを使います。" },
    { icon: <IconShower />, image: "assets/card-rinse-after.jpg", alt: "サウナ後に洗い流すことを想起させるシャワーのイメージ", title: "サウナ後に洗い流す", body: "サウナ後、シャワーで髪をよく洗い流します。" }
  ];
  return (
    <section id="howto" className="pad-mobile" style={{ padding: "100px 56px", background: "var(--ivory-2)" }} aria-labelledby="steps-title">
      <div style={{ textAlign: "center", marginBottom: 56 }}>
        <p className="latin" style={{ fontSize: 11, color: "var(--mocha)", letterSpacing: ".3em", margin: "0 0 8px" }}>HOW TO USE</p>
        <h2 id="steps-title" className="mincho" style={{ fontSize: 28, fontWeight: 500, margin: 0 }}>使い方は 3 STEP</h2>
      </div>
      <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, maxWidth: 1000, margin: "0 auto" }}>
        {steps.map((step, index) => (
          <article key={step.title} style={{ background: "#fff", border: "1px solid var(--line-soft)", borderRadius: 4, overflow: "hidden" }}>
            <ImgFrame src={step.image} alt={step.alt} frameClass="img-frame--square" tag={`STEP 0${index + 1}`} />
            <div style={{ padding: "26px 24px 30px" }}>
              <div className="latin-tight" style={{ width: 42, height: 42, borderRadius: "50%", background: "var(--mocha)", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: 18 }}>0{index + 1}</div>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 14 }}>
                <div style={{ width: 50, height: 50, borderRadius: "50%", background: "var(--ivory-3)", display: "flex", alignItems: "center", justifyContent: "center" }}>{step.icon}</div>
                <h3 className="mincho" style={{ fontSize: 16, margin: 0 }}>{step.title}</h3>
              </div>
              <p style={{ fontSize: 13, color: "var(--ink-soft)", lineHeight: 2, margin: 0 }}>{step.body}</p>
            </div>
          </article>
        ))}
      </div>
      <SafetyNotice compact />
    </section>
  );
};

const SetSection = () => (
  <section className="pad-mobile" style={{ padding: "100px 40px", background: "var(--ivory-3)" }} aria-labelledby="set-title">
    <div style={{ textAlign: "center", marginBottom: 46 }}>
      <p className="latin" style={{ fontSize: 11, color: "var(--mocha)", letterSpacing: ".3em", margin: "0 0 10px" }}>MONITOR KIT</p>
      <h2 id="set-title" className="mincho" style={{ fontSize: 28, fontWeight: 500, margin: 0 }}>想定しているモニター内容</h2>
    </div>
    <div className="grid-3" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20, maxWidth: 960, margin: "0 auto" }}>
      <ImgFrame src="assets/sauna-hair-veil-sachets.jpg" alt="SAUNA HAIR VEILのパウチイメージ" frameClass="img-frame--square" tag="SACHETS" />
      <ImgFrame src="assets/towel-sauna-hat.jpg" alt="タオル地サウナハットのイメージ" frameClass="img-frame--square" tag="HAT" />
      <ImgFrame src="assets/set-products.jpg" alt="モニターセット内容のイメージ" frameClass="img-frame--square" tag="SET" />
    </div>
    <p style={{ maxWidth: 760, margin: "28px auto 0", color: "var(--ink-soft)", fontSize: 13, lineHeight: 2, textAlign: "center" }}>
      実際のモニター内容は選考後にご案内します。内容量や同梱物は、需要検証の結果により変更になる場合があります。
    </p>
  </section>
);

const MidCTA = ({ onCta }) => (
  <section className="pad-mobile" style={{ padding: "70px 56px", textAlign: "center", background: "linear-gradient(180deg, var(--ivory-3) 0%, var(--cream) 100%)" }} aria-labelledby="mid-cta-title">
    <Ornament />
    <p className="latin" style={{ fontSize: 10, color: "var(--mocha)", letterSpacing: ".3em", margin: "14px 0 12px" }}>LIMITED · 10-20 PLACES</p>
    <h2 id="mid-cta-title" className="mincho" style={{ fontSize: 22, fontWeight: 500, margin: "0 0 22px", lineHeight: 1.6 }}>
      少人数モニター募集中
    </h2>
    <CTAButton onClick={onCta} label="応募フォームへ進む" section="middle" />
  </section>
);

Object.assign(window, { CTAButton, Hero, Worry, Concept, FeatureCards, Steps, SetSection, MidCTA, SafetyNotice, safetyNotes });