/* Her Nail — sub pages: Concept, Menu, Flow, Voice, Area, FAQ */

function ConceptPage({ go }) {
  return (
    <div style={{ paddingTop: 120 }}>
      <section className="section-xl">
        <div className="container">
          <div style={{ textAlign: "center", maxWidth: 820, margin: "0 auto" }}>
            <div className="tag-en" style={{ color: "var(--rose-deep)" }}>— CONCEPT</div>
            <h1 className="h-display" style={{ marginTop: 20 }}>
              「きれい」の時間が、<br/>もう一度、<span style={{ color: "var(--rose-deep)" }}>ここに</span>。
            </h1>
            <p className="body-jp" style={{ marginTop: 32 }}>
              若い日、彼女たちは鏡の前で口紅を引き、指先の色を選んでいた。
              年齢を重ね、介護が必要になっても、美容の時間は失われてはなりません。
              Her Nail は、ご家族からお婆様へ贈る Beauty Gifting サービス。
              ネイリストがお伺いし、指先にやさしく色を添え、ともに笑い、ともに写真を残します。
            </p>
          </div>
        </div>
      </section>

      {/* 3 pillars */}
      <section style={{ padding: "100px 44px", background: "var(--cream-2)" }}>
        <div className="container">
          <div className="m-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 48 }}>
            {[
              { n: "01", en: "VISITING", jp: "出張ネイル", desc: "ご自宅、老人ホーム、介護施設へ。ネイリストが必要な道具を持って、指先のサロンをお届けします。" },
              { n: "02", en: "GENTLE", jp: "やさしい施術", desc: "ベッドサイドでもできる負担の少ない姿勢で、爪にやさしい低刺激のケアを心がけています。" },
              { n: "03", en: "GIFTING", jp: "想いを贈る", desc: "娘から母へ、孫から祖母へ。贈られたお婆様が、ふたたび鏡を楽しむきっかけになるように。" },
            ].map(p => (
              <div key={p.n}>
                <div className="num-en" style={{ fontSize: 72, color: "var(--rose)", lineHeight: 1 }}>{p.n}</div>
                <div className="tag-en" style={{ marginTop: 20, color: "var(--rose-deep)" }}>{p.en}</div>
                <h3 style={{ fontFamily: "var(--serif-jp)", fontSize: 22, margin: "8px 0 16px", letterSpacing: "0.14em" }}>{p.jp}</h3>
                <p className="body-jp" style={{ fontSize: 14, lineHeight: 2 }}>{p.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Message from founder */}
      <section className="section-xl">
        <div className="container m-stack" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="tag-en" style={{ color: "var(--rose-deep)" }}>— MESSAGE</div>
            <h2 className="h-section" style={{ marginTop: 16 }}>祖母の笑顔から、<br/>はじまりました。</h2>
            <p className="body-jp" style={{ marginTop: 28 }}>
              認知症を患っている私の祖母は老人ホームに入居していた時、日常会話もままならない状態でした。ですが、なぜか化粧品を持って行き、使い方を説明している時だけは会話が成り立つということが度々ありました。<br/>
              祖母に、はじめて爪を塗った日のこと。「きれいねぇ」と、何度も何度も手を眺めていた姿が忘れられません。美容とは、いつまでも「自分を大切にする時間」なのだと気付かされました。そして私の祖母のような高齢者って案外多いのかもしれません。
            </p>
            <p className="body-jp" style={{ marginTop: 16 }}>
              Her Nail は、まだ実証実験中のサービスです。ネイリストと、ご家族と、施設の皆さまの協力で成り立っています。
              あたたかい贈りものの時間をお届けしてまいります。
            </p>
            <div style={{ marginTop: 32, fontFamily: "var(--serif-en)", fontStyle: "italic", fontSize: 18, color: "var(--brown)" }}>
              Her Nail  チーム一同
            </div>
          </div>
          <div style={{ aspectRatio: "0.78", position: "relative", overflow: "hidden", background: "#fff" }}>
            <img src="assets/hero-key-visual.png?v=3" alt="Her Nail key visual"
                 style={{ width: "100%", height: "100%", objectFit: "cover", display: "block" }}/>
          </div>
        </div>
      </section>

      <CTABlock go={go} />
    </div>
  );
}

function MenuPage({ go, initialPlan }) {
  const planIdx = PLANS.findIndex(p => p.key === initialPlan);
  const [idx, setIdx] = React.useState(planIdx >= 0 ? planIdx : 0);
  const plan = PLANS[idx];

  return (
    <div style={{ paddingTop: 110 }}>
      <div className="container" style={{ padding: "0 44px" }}>
        <div className="md-epigraph" style={{ marginTop: 20, marginBottom: 40 }}>
          <div className="md-epigraph-eyebrow">
            <span className="md-line"/>
            <span>MOTHER'S DAY 2026  ·  期間限定</span>
            <span className="md-line"/>
          </div>
          <div className="md-epigraph-title">母の日キャンペーン価格にて、お届け中。</div>
          <div className="md-epigraph-sub">〜 5月31日（日）までのお申込み分に適用されます 〜</div>
        </div>

        {/* Plan selector — horizontal nav */}
        <nav className="menu-plan-nav" style={{
          display: "flex", alignItems: "stretch", justifyContent: "center",
          borderTop: "1px solid var(--line-soft)", borderBottom: "1px solid var(--line-soft)",
          marginBottom: 20,
        }}>
          <div className="tag-en" style={{ display: "flex", alignItems: "center", color: "var(--mute)", padding: "0 28px 0 0", borderRight: "1px solid var(--line-soft)", letterSpacing: "0.22em" }}>
            — SELECT PLAN
          </div>
          {PLANS.map((p, i) => {
            const active = i === idx;
            return (
              <button key={p.key}
                onClick={()=>setIdx(i)}
                style={{
                  flex: 1,
                  padding: "22px 18px",
                  background: "transparent",
                  border: "none",
                  borderRight: i < PLANS.length - 1 ? "1px solid var(--line-soft)" : "none",
                  cursor: "pointer",
                  color: active ? p.accent : "var(--ink-soft)",
                  display: "flex", flexDirection: "column", gap: 6, alignItems: "center",
                  position: "relative",
                  transition: "color .25s",
                }}>
                <span style={{ fontFamily: "var(--serif-en)", fontSize: 11, letterSpacing: "0.28em", color: "var(--mute)" }}>
                  N° {String(i+1).padStart(2,"0")}
                </span>
                <span style={{ fontFamily: "var(--serif-en)", fontSize: 22, fontStyle: active ? "italic" : "normal", fontWeight: 300, letterSpacing: "0.08em" }}>
                  {p.enName}
                </span>
                <span style={{ fontFamily: "var(--serif-jp)", fontSize: 11, letterSpacing: "0.2em", color: "var(--mute)" }}>
                  {p.jpName}
                </span>
                {active && <span aria-hidden="true" style={{ position: "absolute", left: 0, right: 0, bottom: -1, height: 2, background: p.accent }}/>}
              </button>
            );
          })}
        </nav>
      </div>
      <section className="menu-hero" style={{ position: "relative", minHeight: "calc(100vh - 110px)", display: "grid", gridTemplateColumns: "1fr 1fr", gap: 0 }}>
        {/* LEFT - plan color-field with nav arrows */}
        <div style={{ position: "relative", background: "#ffffff", padding: "80px 60px" }}>
          <div style={{ position: "absolute", top: 44, left: 60, right: 60, display: "flex", justifyContent: "space-between", alignItems: "center" }}>
            <div className="tag-en" style={{ color: plan.accent }}>
              {plan.tag} &nbsp; {plan.jpName}
            </div>
          </div>

          <div style={{ position: "relative", maxWidth: 520, margin: "40px auto 24px" }}>
            <div className={`cf ${plan.cfClass} gift-card ${plan.key === "premium" ? "gift-card-premium" : ""}`} style={{ aspectRatio: "1/1", position: "relative", overflow: "hidden" }}>
              <div className="gift-card-frame"/>
              <div className="gift-card-brand">Her <em>Nail</em></div>
              <div className="gift-card-no">N° {String(idx+1).padStart(2,"0")}</div>
              <div className="gift-card-mono">
                <div className="gift-card-mono-letter">{plan.enName.charAt(0)}</div>
                <div className="gift-card-mono-sub">{plan.enName.toLowerCase()}</div>
              </div>
              <div className="gift-card-sign">— for her</div>
              {plan.key === "premium" && <div className="gift-card-sheen" aria-hidden="true"/>}
            </div>

            {/* arrows — flanking the gift card */}
            <button className="menu-arrow-btn menu-arrow-prev" onClick={()=>setIdx((idx-1+PLANS.length)%PLANS.length)} style={arrowBtn(true, plan.accent)} aria-label="Previous plan">←</button>
            <button className="menu-arrow-btn menu-arrow-next" onClick={()=>setIdx((idx+1)%PLANS.length)} style={arrowBtn(false, plan.accent)} aria-label="Next plan">→</button>
          </div>
          <p className="menu-plan-summary" style={{ textAlign: "center", fontFamily: "var(--serif-jp)", fontSize: 13, letterSpacing: "0.18em", color: plan.accent, marginTop: 8, fontStyle: "normal" }}>
            〜 {plan.leadJp} 〜
          </p>

          {/* counter */}
          <div style={{ position: "absolute", bottom: 40, right: 60, fontFamily: "var(--serif-en)", fontSize: 14, color: "var(--mute)", letterSpacing: "0.08em" }}>
            <span style={{ color: "var(--ink)" }}>{String(idx+1).padStart(2,"0")}</span>
            <span style={{ margin: "0 8px" }}>—</span>
            <span>{String(PLANS.length).padStart(2,"0")}</span>
          </div>
        </div>

        {/* RIGHT - detail */}
        <div className="menu-detail" style={{ padding: "80px 64px", display: "flex", flexDirection: "column", justifyContent: "center" }}>
          <div className="menu-plan-jp" style={{ fontFamily: "var(--serif-jp)", fontSize: 20, color: "var(--ink-soft)", letterSpacing: "0.2em" }}>
            {plan.jpName}のプラン
          </div>
          <div className="menu-plan-tag" style={{ fontFamily: "var(--serif-en)", fontSize: 28, fontStyle: "italic", color: "var(--brown)", marginTop: 4 }}>
            {plan.tag.toLowerCase()}
          </div>
          <h1 className="menu-plan-name" style={{ fontFamily: "var(--serif-en)", fontWeight: 300, fontSize: 72, letterSpacing: "0.06em", margin: "24px 0 8px", lineHeight: 1, color: plan.accent }}>
            {plan.enName.toUpperCase()}
          </h1>

          {/* Catch copy */}
          <p style={{ fontFamily: "var(--serif-jp)", fontSize: 17, lineHeight: 1.9, letterSpacing: "0.12em", color: "var(--ink)", margin: "20px 0 0", maxWidth: 520, borderLeft: `1px solid ${plan.accent}`, paddingLeft: 18 }}>
            {plan.catch}
          </p>

          <div style={{ marginTop: 32, display: "flex", alignItems: "baseline", gap: 14, flexWrap: "wrap" }}>
            <span className="menu-price-main" style={{ fontFamily: "var(--serif-en)", fontSize: 48, fontWeight: 300, color: plan.accent, letterSpacing: "0.02em" }}>¥{plan.price.toLocaleString()}</span>
            <span style={{ fontFamily: "var(--serif-jp)", fontSize: 12, color: "var(--ink-soft)", letterSpacing: "0.1em" }}>(税込・交通費込)</span>
            <div style={{ width: "100%", marginTop: 10, display: "flex", alignItems: "center", gap: 10, flexWrap: "wrap" }}>
              <span className="md-price-flag">MOTHER'S DAY</span>
              <span style={{ fontFamily: "var(--serif-jp)", fontSize: 12, color: "var(--mute)", letterSpacing: "0.12em" }}>母の日キャンペーン価格 / 5月31日まで</span>
            </div>
          </div>

          {/* Service icons */}
          <div style={{ marginTop: 28, maxWidth: 360 }}>
            <PlanFeatureIcons features={{
              standard: { nail: true, hand: false, photo: false },
              relax:    { nail: true, hand: true,  photo: false },
              premium:  { nail: true, hand: true,  photo: true  },
            }[plan.key]} accent={plan.accent} />
          </div>

          {/* Description */}
          <div style={{ marginTop: 44 }}>
            <div className="tag-en" style={{ color: "var(--mute)", marginBottom: 14 }}>— ABOUT THIS PLAN</div>
            <p className="body-jp" style={{ margin: 0, maxWidth: 560, fontSize: 14, lineHeight: 2.1 }}>
              {plan.description}
            </p>
          </div>

          {/* includes */}
          <div style={{ marginTop: 40, display: "flex", flexDirection: "column", gap: 24, paddingTop: 32, borderTop: "1px solid var(--line-soft)" }}>
            <div className="tag-en" style={{ color: "var(--mute)" }}>— PLAN CONTENTS</div>
            {plan.includes.map(group => (
              <div key={group.head}>
                <div className="tag-en" style={{ color: plan.accent, marginBottom: 10 }}>{group.head}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
                  {group.items.map(it => (
                    <li key={it} style={{ fontFamily: "var(--serif-jp)", fontSize: 15, lineHeight: 1.9, letterSpacing: "0.08em", display: "flex", gap: 10 }}>
                      <span style={{ color: plan.accent }}>—</span>
                      <span>{it}</span>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>

          {/* CTAs */}
          <div style={{ marginTop: 48, display: "flex", gap: 16 }}>
            <button className="btn" style={{ background: plan.accent, color: "var(--cream)" }} onClick={()=>go("apply", {plan: plan.key})}>
              <span>APPLY &nbsp; このプランを贈る</span><span>→</span>
            </button>
          </div>
        </div>
      </section>

      {/* Comparison table */}
      <section className="compare-section" style={{ padding: "120px 44px", background: "var(--cream-2)" }}>
        <div className="container">
          <SectionTitle en="— COMPARE" jp="プラン比較" align="center" />
          <div className="compare-table-wrap">
            <table className="compare-table" style={{ width: "100%", borderCollapse: "collapse", fontFamily: "var(--serif-jp)" }}>
              <thead>
                <tr>
                  <th className="compare-th compare-th-label"></th>
                  {PLANS.map(p => (
                    <th key={p.key} className="compare-th compare-th-plan">
                      <div style={{ fontFamily: "var(--serif-en)", fontSize: 22, fontWeight: 300, letterSpacing: "0.06em" }}>{p.enName}</div>
                      <div style={{ fontSize: 12, color: "var(--mute)", letterSpacing: "0.14em", marginTop: 4 }}>{p.jpName}</div>
                      <div style={{ marginTop: 14, fontFamily: "var(--serif-en)", fontSize: 24, color: p.accent, fontWeight: 300 }}>¥{p.price.toLocaleString()}</div>
                      <div style={{ fontFamily: "var(--serif-jp)", fontSize: 10, color: "var(--mute)", letterSpacing: "0.16em", marginTop: 4 }}>母の日キャンペーン価格</div>
                    </th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {COMPARE_ROWS.map((row) => (
                  <tr key={row.label} style={{ borderTop: "1px solid var(--line)" }}>
                    <td className="compare-td compare-td-label">{row.label}</td>
                    {PLANS.map((p, i) => {
                      const has = row.k[i];
                      return (
                        <td key={p.key} className="compare-td compare-td-val" style={{ color: has ? p.accent : "var(--line)" }}>
                          {has ? "●" : "—"}
                        </td>
                      );
                    })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </section>

      <CTABlock go={go} />
    </div>
  );
}
function featureHas(plan, row) {
  // rows 0-2 = nail (all), 3-4 = hand care (relax & premium), 5 = photo (premium)
  if (row <= 2) return true;
  if (row <= 4) return plan.key !== "standard";
  return plan.key === "premium";
}
const COMPARE_ROWS = [
  { label: "ネイルケア（爪の形・甘皮整え）",         k: [true,  true,  true]  },
  { label: "ネイルカラー塗布 または ネイルチップ",   k: [true,  true,  true]  },
  { label: "ご家族からのメッセージカード",           k: [true,  true,  true]  },
  { label: "スマホ写真撮影＆メール報告",             k: [true,  true,  true]  },
  { label: "ハンドマッサージ ＆ ハンドパック",       k: [false, true,  true]  },
  { label: "ミニブーケのプレゼント",                k: [false, true,  false] },
  { label: "フォトフレーム（後日郵送）",             k: [false, true,  false] },
  { label: "季節の華やかなブーケ",                  k: [false, false, true]  },
  { label: "プロのカメラマンによる同行撮影",         k: [false, false, true]  },
  { label: "フォトアルバムにしてお届け",             k: [false, false, true]  },
];
const th = { fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--mute)", padding: "18px 14px", textAlign: "left", fontWeight: 400 };
const td = { fontFamily: "var(--serif-jp)", fontSize: 14, padding: "20px 14px", letterSpacing: "0.1em", color: "var(--ink-soft)" };
function arrowBtn(left, accent) {
  return {
    position: "absolute",
    top: "50%",
    [left ? "left" : "right"]: -64,
    transform: "translateY(-50%)",
    width: 44, height: 44,
    border: `1px solid ${accent}`,
    background: "#fff",
    color: accent,
    fontSize: 16,
    borderRadius: "50%",
    cursor: "pointer",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    fontFamily: "var(--serif-en)",
  };
}

function FlowPage({ go }) {
  return (
    <div style={{ paddingTop: 140 }}>
      <section className="section">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 80 }}>
            <div className="tag-en" style={{ color: "var(--rose-deep)" }}>— HOW IT WORKS</div>
            <h1 className="h-display" style={{ marginTop: 20 }}>ご利用の流れ</h1>
          </div>

          {/* Timeline */}
          <div style={{ maxWidth: 920, margin: "0 auto", position: "relative" }}>
            {[
              { n: 1, en: "APPLY", jp: "お申込み", lead: "まずはオンラインで", detail: "公式サイトのフォームより、プラン・ご訪問先住所・ご希望日時・お婆様のご体調をお知らせください。ギフティング利用の場合、サプライズ対応も可能です。" },
              { n: 2, en: "CONSULT", jp: "ご相談", lead: "担当ネイリストより連絡", detail: "ご訪問先の施設担当者様・ご家族様と、当日の動線、お婆様のご体調、アレルギーの有無、ご希望のデザインや色味を丁寧にすり合わせます。" },
              { n: 3, en: "VISIT & CARE", jp: "ご訪問・施術", lead: "お伺いし、約60〜90分", detail: "ネイリストが必要な器材を持参し、居室・ベッドサイドで施術を行います。手を温めながら、会話を楽しんでいただける時間です。" },
              { n: 4, en: "PHOTO (PREMIUM)", jp: "記念撮影", lead: "プレミアムのみ", detail: "施術後、ご家族とご一緒に記念のお写真をお撮りします。プライバシーに配慮しつつ、自然な笑顔を大切にしています。" },
              { n: 5, en: "DELIVER", jp: "お写真のお届け", lead: "後日、データ納品", detail: "ご家族様のメールアドレスへ、編集済みの写真データをお届けします。ご希望に応じて印刷写真もオプションでご用意可能です。" },
            ].map((s, i, arr) => (
              <div key={s.n} style={{ display: "grid", gridTemplateColumns: "100px 1fr", gap: 48, paddingBottom: i === arr.length - 1 ? 0 : 60, position: "relative" }}>
                <div style={{ position: "relative" }}>
                  <div style={{ fontFamily: "var(--serif-en)", fontWeight: 300, fontSize: 72, lineHeight: 1, color: "var(--rose-deep)" }}>
                    {String(s.n).padStart(2, "0")}
                  </div>
                  {i < arr.length - 1 && (
                    <div style={{ position: "absolute", top: 90, left: 34, bottom: -40, width: 1, background: "var(--line)" }}/>
                  )}
                </div>
                <div>
                  <div className="tag-en" style={{ color: "var(--brown)" }}>{s.en}</div>
                  <h3 style={{ fontFamily: "var(--serif-jp)", fontSize: 28, margin: "6px 0 4px", letterSpacing: "0.14em" }}>{s.jp}</h3>
                  <div style={{ fontFamily: "var(--serif-en)", fontStyle: "italic", fontSize: 16, color: "var(--rose-deep)", marginBottom: 14 }}>{s.lead}</div>
                  <p className="body-jp" style={{ maxWidth: 600 }}>{s.detail}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABlock go={go} />
    </div>
  );
}

function VoicePage({ go }) {
  return (
    <div style={{ paddingTop: 140 }}>
      <section className="section">
        <div className="container">
          <div style={{ textAlign: "center", marginBottom: 80 }}>
            <div className="tag-en" style={{ color: "var(--rose-deep)" }}>— VOICE &  STORIES</div>
            <h1 className="h-display" style={{ marginTop: 20 }}>贈った方々の、声。</h1>
          </div>

          <div className="m-stack-2" style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 32 }}>
            {[
              { id: 1, rel: "娘より / 72歳の母へ", cf: "cf-rose", quote: "母が自分の爪をじっと見つめて、『きれいねぇ』と笑ってくれた。こんな表情、何年ぶりでしょう。ネイリストさんは手を温めながら、母の若い頃の話をゆっくり聞いてくださいました。", plan: "Nail" },
              { id: 2, rel: "孫より / 85歳の祖母へ", cf: "cf-mint", quote: "祖母と一緒に撮った写真、額に入れて部屋に飾りました。祖母の宝物になっています。施術後、祖母が久しぶりに鏡を覗き込んでいる姿に、涙が止まりませんでした。", plan: "Premium" },
              { id: 3, rel: "娘より / 78歳の母へ", cf: "cf-lavender", quote: "施術中、ネイリストさんが手を握りながら話してくれて、母が20分以上ずっと笑っていました。ハンドマッサージの時間は、母にとって大切な時間になったようです。", plan: "Relax" },
              { id: 4, rel: "嫁より / 91歳の義母へ", cf: "cf-peach", quote: "義母は寝たきりなのですが、ベッドサイドで丁寧に塗っていただきました。『おばあちゃん、若返ったね』と家族みんなで盛り上がりました。", plan: "Nail" },
            ].map(v => (
              <article key={v.id} style={{ background: "#fff", padding: 40, border: "1px solid var(--line-soft)" }}>
                <div style={{ display: "flex", gap: 20, alignItems: "center", marginBottom: 28 }}>
                  <div className={`cf ${v.cf}`} style={{ width: 80, height: 80, flexShrink: 0 }} />
                  <div>
                    <div className="tag-en" style={{ color: "var(--rose-deep)" }}>{v.plan.toUpperCase()}</div>
                    <div style={{ fontFamily: "var(--serif-jp)", fontSize: 14, marginTop: 6, letterSpacing: "0.1em", color: "var(--ink-soft)" }}>{v.rel}</div>
                  </div>
                </div>
                <div style={{ fontFamily: "var(--serif-en)", fontStyle: "italic", fontSize: 56, color: "var(--rose)", lineHeight: 0.4, marginBottom: 16 }}>“</div>
                <p className="body-jp" style={{ fontSize: 15, lineHeight: 2.1, margin: 0 }}>
                  {v.quote}
                </p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <CTABlock go={go} />
    </div>
  );
}

function FaqAreaPage({ go }) {
  const [open, setOpen] = React.useState(0);
  const faqs = [
    { q: "要介護のお婆様でも施術を受けられますか？", a: "はい。寝たきりの方や、体が不自由な方でも施術可能です。ベッドサイドで、姿勢に合わせた方法で丁寧に行います。ご不安な点は事前のご相談時にお知らせください。" },
    { q: "爪が弱くなっているのですが大丈夫ですか？", a: "高齢の方の爪は薄く脆くなりがちです。低刺激のマニキュアを使用し、爪を守るベースコートを必ず塗布しています。ジェルネイルご希望の場合も専門知識を持つネイリストが対応します。" },
    { q: "施術中、お婆様がじっとできるか心配です。", a: "ご心配いりません。塗布は片手15〜20分程度で完了します。ネイリストが会話やマッサージで、楽しくリラックスした時間となるよう工夫いたします。" },
    { q: "色やデザインは選べますか？", a: "もちろんです。約40色からお選びいただけます。ご本人がお好きな色をお選びいただくのが一番の喜びになります。事前にサンプルチップをお送りすることも可能です。" },
    { q: "プレミアムのお写真はどのように届きますか？", a: "施術から約1週間後、ご家族様のメールアドレスへデータでお送りします。ご希望に応じてアルバム印刷も対応可能です（別途料金）。" },
    { q: "ギフトとして、サプライズで贈れますか？", a: "はい。贈り主様のお名前を伏せて、ギフトカードのみお届けすることも可能です。ご予約時にサプライズ希望の旨お知らせください。" },
  ];
  const areas = [
    { region: "首都圏", cities: "東京 / 神奈川 / 千葉 / 埼玉", active: true },
    { region: "関西", cities: "大阪 / 京都 / 兵庫 / 奈良", active: true },
    { region: "東海", cities: "愛知 / 岐阜 / 三重 / 静岡（一部）", active: true },
    { region: "その他", cities: "福岡 / 札幌 / 仙台  ※順次拡大中", active: true },
  ];
  return (
    <div style={{ paddingTop: 140 }}>
      {/* Area */}
      <section className="section">
        <div className="container">
          <SectionTitle en="— AREA" jp="対応エリア" sub="全国どこでも出張対応中です。" align="center" />
          <div className="m-stack-2" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24, maxWidth: 960, margin: "0 auto" }}>
            {areas.map(a => (
              <div key={a.region} style={{
                padding: 28,
                background: a.active ? "var(--cream-2)" : "transparent",
                border: "1px solid var(--line-soft)",
                opacity: a.active ? 1 : 0.55,
                filter: a.active ? "none" : "grayscale(1)",
                position: "relative",
              }}>
                <div className="tag-en" style={{ color: a.active ? "var(--rose-deep)" : "var(--mute)" }}>
                  {a.active ? "AREA" : "COMING SOON"}
                </div>
                <div style={{ fontFamily: "var(--serif-jp)", fontSize: 22, margin: "12px 0 16px", letterSpacing: "0.18em", color: a.active ? "var(--ink)" : "var(--ink-soft)" }}>{a.region}</div>
                <p style={{ fontFamily: "var(--serif-jp)", fontSize: 13, lineHeight: 2, color: "var(--ink-soft)", letterSpacing: "0.08em", margin: 0 }}>
                  {a.cities}
                </p>
                {!a.active && (
                  <p style={{ fontFamily: "var(--serif-jp)", fontSize: 11, lineHeight: 1.8, color: "var(--mute)", letterSpacing: "0.06em", margin: "14px 0 0", paddingTop: 14, borderTop: "1px dashed var(--line-soft)" }}>
                    まずは購入前に<br/>お問い合わせください。
                  </p>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section style={{ padding: "100px 44px", background: "var(--cream-2)" }}>
        <div className="container" style={{ maxWidth: 920 }}>
          <SectionTitle en="— FAQ" jp="よくあるご質問" align="center" />
          <div>
            {faqs.map((f, i) => (
              <div key={i} style={{ borderTop: i === 0 ? "1px solid var(--line)" : "none", borderBottom: "1px solid var(--line)" }}>
                <button onClick={()=>setOpen(open === i ? -1 : i)}
                  style={{ width: "100%", textAlign: "left", padding: "28px 0", background: "transparent", border: "none", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20 }}>
                  <span style={{ display: "flex", gap: 20, alignItems: "baseline" }}>
                    <span style={{ fontFamily: "var(--serif-en)", fontSize: 14, color: "var(--rose-deep)", letterSpacing: "0.1em" }}>Q.{String(i+1).padStart(2,"0")}</span>
                    <span style={{ fontFamily: "var(--serif-jp)", fontSize: 17, letterSpacing: "0.1em", color: "var(--ink)" }}>{f.q}</span>
                  </span>
                  <span style={{ fontFamily: "var(--serif-en)", fontSize: 22, color: "var(--rose-deep)", transform: open === i ? "rotate(45deg)" : "rotate(0)", transition: "transform 220ms" }}>+</span>
                </button>
                {open === i && (
                  <div style={{ padding: "0 0 28px 70px" }}>
                    <p className="body-jp" style={{ margin: 0, maxWidth: 700 }}>{f.a}</p>
                  </div>
                )}
              </div>
            ))}
          </div>
        </div>
      </section>

      <CTABlock go={go} />
    </div>
  );
}

function CTABlock({ go }) {
  return (
    <section className="cta-block" style={{ padding: "140px 44px", textAlign: "center", background: "#ffffff", color: "var(--ink)" }}>
      <div className="tag-en" style={{ color: "var(--rose-deep)" }}>— BEAUTY GIFTING</div>
      <h2 className="h-display cta-heading" style={{ color: "var(--ink)", margin: "20px auto 40px", maxWidth: 820, fontSize: "52px" }}>
        娘・孫からの出張ネイルギフト<br/>
        大切な方の指先に、<br/>
        あなたからの贈りものを。
      </h2>
      <button className="btn" style={{ background: "var(--rose-deep)", color: "var(--cream)" }} onClick={()=>go("apply")}>
        <span>APPLY &nbsp; お申込みはこちら</span><span>→</span>
      </button>
    </section>
  );
}

Object.assign(window, { ConceptPage, MenuPage, FlowPage, VoicePage, FaqAreaPage, CTABlock });