/* Her Nail — Home page */

const { useState: useState_H, useEffect: useEffect_H, useRef: useRef_H } = React;

/* ---- Plan feature icons (Nail / Hand / Photo) ---- */
function PlanFeatureIcons({ features, accent = "var(--rose-deep)" }) {
  const items = [
    { key: "nail",  label: "NAIL",  jp: "ネイル",    svg: (
      <svg viewBox="0 0 48 48" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
        {/* Finger with nail */}
        <path d="M17 40 L17 20 Q17 10 24 10 Q31 10 31 20 L31 40 Z"/>
        <path d="M17 20 Q17 12 24 12 Q31 12 31 20 Q31 24 24 24 Q17 24 17 20 Z" fill="currentColor" fillOpacity="0.12"/>
        <path d="M21 32 Q24 30 27 32"/>
      </svg>
    )},
    { key: "hand",  label: "HAND CARE", jp: "ハンドケア", svg: (
      <svg viewBox="0 0 48 48" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
        {/* Hand silhouette */}
        <path d="M14 40 L14 24 Q14 21 17 21 Q20 21 20 24 L20 14 Q20 11 23 11 Q26 11 26 14 L26 22 L26 12 Q26 9 29 9 Q32 9 32 12 L32 23 L32 16 Q32 13 35 13 Q38 13 38 16 L38 30 Q38 40 30 42 L20 42 Q14 42 14 38 Z"/>
        {/* Sparkle for "care" */}
        <path d="M10 14 L10 10 M8 12 L12 12" strokeWidth="1"/>
      </svg>
    )},
    { key: "photo", label: "PHOTO", jp: "フォト", svg: (
      <svg viewBox="0 0 48 48" width="28" height="28" fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round">
        {/* Camera */}
        <rect x="8" y="15" width="32" height="22" rx="2"/>
        <path d="M17 15 L19 11 L29 11 L31 15"/>
        <circle cx="24" cy="26" r="6"/>
        <circle cx="24" cy="26" r="2.5" fill="currentColor" fillOpacity="0.18"/>
        <circle cx="34" cy="19" r="0.8" fill="currentColor"/>
      </svg>
    )},
  ];
  return (
    <div style={{ display: "flex", gap: 18, marginTop: 4 }}>
      {items.map(it => {
        const on = features[it.key];
        return (
          <div key={it.key} style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 6, flex: 1, opacity: on ? 1 : 0.24, color: on ? accent : "var(--mute)", transition: "opacity 200ms" }}>
            <div style={{
              width: 48, height: 48, borderRadius: "50%",
              border: `1px solid ${on ? accent : "var(--line)"}`,
              background: on ? "var(--cream-2)" : "transparent",
              display: "flex", alignItems: "center", justifyContent: "center",
              position: "relative",
            }}>
              {it.svg}
              {!on && (
                <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
                  <div style={{ width: "70%", height: 1, background: "var(--mute)", transform: "rotate(-25deg)" }}/>
                </div>
              )}
            </div>
            <div style={{ fontFamily: "var(--serif-en)", fontSize: 9, letterSpacing: "0.2em", color: on ? accent : "var(--mute)" }}>{it.label}</div>
          </div>
        );
      })}
    </div>
  );
}

function HomePage({ go, variant }) {
  const [idx, setIdx] = useState_H(0);
  const sections = [
    { n: 0, id: "hero",     label: "HERO" },
    { n: 1, id: "concept",  label: "CONCEPT" },
    { n: 2, id: "campaign", label: "CAMPAIGN" },
    { n: 3, id: "menu",     label: "MENU" },
    { n: 4, id: "flow",     label: "FLOW" },
    { n: 5, id: "voice",    label: "VOICE" },
  ];
  const [pagerVisible, setPagerVisible] = useState_H(true);

  // Honor a requested scroll target after route navigation (e.g. clicking CAMPAIGN in nav)
  useEffect_H(() => {
    try {
      const target = sessionStorage.getItem("hn:scrollTo");
      if (target) {
        sessionStorage.removeItem("hn:scrollTo");
        setTimeout(() => {
          const el = document.getElementById(target);
          if (el) window.scrollTo({ top: el.offsetTop, behavior: "smooth" });
        }, 80);
      }
    } catch {}
  }, []);

  useEffect_H(() => {
    const onScroll = () => {
      const y = window.scrollY + window.innerHeight * 0.45;
      let current = 0;
      for (const s of sections) {
        const el = document.getElementById(s.id);
        if (el && el.offsetTop <= y) current = s.n;
      }
      setIdx(current);
      // Hide pager near footer
      const footerTop = document.body.scrollHeight - window.innerHeight - 400;
      setPagerVisible(window.scrollY < footerTop);
    };
    window.addEventListener("scroll", onScroll);
    onScroll();
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const jumpTo = (id) => {
    const el = document.getElementById(id);
    if (el) window.scrollTo({ top: el.offsetTop, behavior: "smooth" });
  };

  return (
    <div style={{ background: "var(--cream)" }}>
      {/* ========== HERO — split (Opera-style) ========== */}
      <section id="hero" className="hero-split" style={{ position: "relative", height: "100vh", minHeight: 620, paddingTop: 0, overflow: "hidden", display: "grid", gridTemplateColumns: variant === "magazine" ? "1fr" : "minmax(0, 1fr) minmax(0, 50vw)", gap: 0, background: "#ffffff", maxWidth: 1600, margin: "0 auto" }}>

        {variant === "magazine" && (
          <div style={{ position: "absolute", inset: 0, zIndex: 0, opacity: 0.25 }}>
            <KeyVisualSVG showLabel={false} />
          </div>
        )}

        {/* LEFT — text */}
        <div className="hero-text" style={{
          position: "relative", zIndex: 2,
          display: "flex", flexDirection: "column", justifyContent: "center",
          padding: variant === "magazine" ? "160px 64px 80px" : "clamp(100px, 12vh, 140px) clamp(32px, 5vw, 72px) clamp(30px, 6vh, 60px)",
          background: variant === "magazine" ? "transparent" : "var(--cream)",
          maxWidth: variant === "magazine" ? 640 : "none",
          height: "100%",
          overflow: "hidden",
        }}>
          <div style={{ width: "100%", maxWidth: 520 }}>
          <div className="fade-up" style={{ fontFamily: "var(--serif-jp)", fontSize: 13, letterSpacing: "0.22em", color: "var(--ink-soft)", marginBottom: "clamp(8px, 1.2vh, 12px)", fontWeight: 600 }}>娘・孫から母・祖母に贈るビューティーギフト</div>
          <div className="fade-up tag-en" style={{ color: "var(--rose-deep)", marginBottom: "clamp(10px, 1.8vh, 18px)", fontWeight: 700 }}>BEAUTY GIFTING</div>
          <h1 className="fade-up delay-2 h-display hero-h1" style={{ margin: 0, fontSize: "36px", fontWeight: 300, color: "var(--ink-soft)", lineHeight: 1.5, maxWidth: "100%" }}>
            いくつになっても、<br/>
            <span style={{ color: "var(--rose-deep)" }}>キレイは楽しい</span>から。<br/>
            指先に気持ちと彩りを贈ろう。
          </h1>

          <p className="fade-up delay-3 body-jp" style={{ marginTop: "clamp(16px, 2.8vh, 28px)", maxWidth: 440 }}>
            ネイリストがご自宅・老人ホーム・介護施設へお伺いし、お婆様の指先に、やさしく色をのせてまいります。
          </p>

          <div className="fade-up delay-4" style={{ marginTop: "clamp(24px, 4.4vh, 44px)", display: "flex", gap: 16, flexWrap: "wrap" }}>
            <button className="btn" onClick={()=>go("menu")}>
              <span>VIEW MENU</span>
              <span style={{ fontSize: 14 }}>→</span>
            </button>
            <button className="btn btn-ghost" onClick={()=>go("concept")}>
              <span>CONCEPT</span>
              <span style={{ fontSize: 14 }}>→</span>
            </button>
          </div>

          {/* Price chip */}
          <div style={{ marginTop: "clamp(24px, 4.4vh, 44px)", display: "flex", alignItems: "baseline", gap: 14 }}>
            <span className="tag-en" style={{ color: "var(--mute)" }}>FROM</span>
            <span style={{ fontFamily: "var(--serif-en)", fontSize: "clamp(24px, 2.4vw, 32px)", fontWeight: 300 }}>¥8,800</span>
            <span style={{ fontFamily: "var(--serif-jp)", fontSize: 12, color: "var(--mute)", letterSpacing: "0.1em" }}>/ 出張1回(税込)</span>
          </div>
          </div>
        </div>

        {/* RIGHT — hero image */}
        {variant !== "magazine" && (
          <div className="hero-image" style={{ position: "relative", height: "100%", display: "flex", alignItems: "center", justifyContent: "center", overflow: "hidden", background: "#ffffff" }}>
            <div style={{ position: "relative", height: "100%", aspectRatio: "0.707", maxWidth: "100%" }}>
              <KeyVisualSVG showLabel={false} />
            </div>
            {/* Vertical pager — now fixed to viewport & scroll-linked (moved outside image container) */}
            <div className={`scroll-hint ${idx > 0 ? "hidden" : ""}`}>SCROLL</div>
          </div>
        )}
      </section>

      {/* Fixed vertical pager — tracks scroll across sections */}
      <div className={`v-pager ${pagerVisible ? "" : "hidden"}`}>
        {sections.map((s, i) => (
          <React.Fragment key={s.n}>
            <div className={`dot ${idx===s.n?"active":""}`} onClick={() => jumpTo(s.id)} style={{ cursor: "pointer" }} title={s.label}>
              {String(s.n).padStart(2,"0")}
            </div>
            {i < sections.length-1 && <div className="tick"/>}
          </React.Fragment>
        ))}
      </div>

      {/* ========== CONCEPT teaser ========== */}
      <section id="concept" className="section-xl">
        <div className="container m-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 100, alignItems: "center" }}>
          <div className="photo-frame" style={{ aspectRatio: "4/5", position: "relative" }}>
            <img src="assets/service-session.jpg" alt="ご自宅での出張ネイル施術の様子"/>
            <div className="photo-caption">— at a family home</div>
          </div>
          <div>
            <div className="tag-en" style={{ color: "var(--rose-deep)" }}>— CONCEPT  01</div>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              いつまでも変わらない<br/>
              「キレイを楽しむ気持ち」を<br/>
              ギフトとして届けたい。
            </h2>
            <p className="body-jp" style={{ marginTop: 28, maxWidth: 520 }}>
              もう化粧をしなくなって久しいお婆様も、普段はそんな余裕もない要介護のお婆様も、
              かつては鏡の前で口紅を引き、指先の色を選んでいた一人の女性です。年齢を重ね、
              介護が必要になっても、美容を楽しむ時間は失われてはなりません。Her Nail は、
              ご家族から お婆様への <em style={{ fontFamily: "var(--serif-en)", color: "var(--rose-deep)" }}>Beauty Gifting</em> サービスです。
              ネイリストがお伺いし、指先にやさしく色を添え、ともに笑い、ともに写真を残します。
              <br/><br/>
              美容を通じてお婆様の「キレイを楽しむ気持ち」を呼び起こし、心のハリを取り戻す時間をお届けします。
            </p>
            <button className="btn btn-ghost" style={{ marginTop: 40 }} onClick={()=>go("concept")}>
              <span>READ MORE</span>
              <span>→</span>
            </button>
          </div>
        </div>
      </section>

      {/* ========== MOTHER'S DAY CAMPAIGN SECTION ========== */}
      <section id="campaign" className="mothers-day-section">
        <div className="mothers-day-bg" aria-hidden="true">
          <img src="assets/ribbon-top.png" alt="" className="md-ribbon md-ribbon-top" />
          <img src="assets/ribbon-bottom.png" alt="" className="md-ribbon md-ribbon-bottom" />
        </div>

        <div className="mothers-day-inner">
          <div className="md-eyebrow">
            <span className="md-line"/>
            <span style={{ whiteSpace: "nowrap" }}>MOTHER'S DAY 2026 &nbsp;·&nbsp; 期間限定</span>
            <span className="md-line"/>
          </div>

          <div className="md-headline">
            <span className="md-headline-jp">母の日キャンペーン価格にて、<br/>お届け中です。</span>
          </div>

          <div className="md-deadline">
            <span className="md-deadline-label">CAMPAIGN PERIOD</span>
            <span className="md-deadline-divider" aria-hidden="true"/>
            <span className="md-deadline-date">— now &nbsp;·&nbsp; 2026.5.31&nbsp;SUN</span>
          </div>

          <p className="md-message">
            日頃の「ありがとう」を、いちばん美しいかたちで。<br/>
            お母さま・お祖母さまの指先に、あなたの気持ちを贈りませんか。<br/>
            <span className="md-message-accent">5月31日（日）までのお申込み分に、母の日キャンペーン価格を適用しています。</span>
          </p>

          <div className="md-cta">
            <button className="btn" onClick={()=>go("menu")}>
              <span>VIEW PLANS</span>
              <span style={{ fontSize: 14 }}>→</span>
            </button>
            <button className="btn btn-ghost" onClick={()=>go("apply")}>
              <span>APPLY NOW</span>
              <span style={{ fontSize: 14 }}>→</span>
            </button>
          </div>
        </div>
      </section>

      {/* ========== MENU preview ========== */}
      <section id="menu" style={{ padding: "140px 44px", background: "var(--cream-2)" }}>
        <div className="container">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-end", marginBottom: 64, flexWrap: "wrap", gap: 24 }}>
            <div>
              <div className="tag-en" style={{ color: "var(--rose-deep)" }}>— MENU  02</div>
              <h2 className="h-section" style={{ marginTop: 12 }}>3つのプラン</h2>
            </div>
            <button className="btn btn-ghost" onClick={()=>go("menu")}>
              <span>ALL PLANS</span>
              <span>→</span>
            </button>
          </div>

          <div className="m-stack" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32 }}>
            {PLANS.map((p, i) => {
              const features = {
                standard: { nail: true, hand: false, photo: false },
                relax:    { nail: true, hand: true,  photo: false },
                premium:  { nail: true, hand: true,  photo: true  },
              }[p.key];
              return (
              <div key={p.key} onClick={()=>go("menu", {plan: p.key})} style={{ cursor: "pointer", background: "#fff", padding: 28, transition: "transform 300ms", position: "relative" }}>
                <div className={`cf ${p.cfClass} gift-card ${p.key === "premium" ? "gift-card-premium" : ""}`} style={{ aspectRatio: "4/4.2", marginBottom: 24, position: "relative", overflow: "hidden" }}>
                  {/* Inner border frame */}
                  <div className="gift-card-frame"/>
                  {/* Top row: brand + No */}
                  <div className="gift-card-brand">Her <em>Nail</em></div>
                  <div className="gift-card-no">N° {String(i+1).padStart(2,"0")}</div>
                  {/* Center plan monogram */}
                  <div className="gift-card-mono">
                    <div className="gift-card-mono-letter">{p.enName.charAt(0)}</div>
                    <div className="gift-card-mono-sub">{p.enName.toLowerCase()}</div>
                  </div>
                  {/* Bottom right signature */}
                  <div className="gift-card-sign">— for her</div>
                  {/* Premium foil sheen */}
                  {p.key === "premium" && <div className="gift-card-sheen" aria-hidden="true"/>}
                </div>
                <div className="tag-en" style={{ color: p.accent }}>PLAN  0{i+1}</div>
                <h3 style={{ fontFamily: "var(--serif-en)", fontSize: 32, fontWeight: 300, margin: "8px 0 4px", letterSpacing: "0.04em", color: p.accent }}>{p.enName}</h3>
                <div style={{ fontFamily: "var(--serif-jp)", fontSize: 15, letterSpacing: "0.14em", color: "var(--ink-soft)", marginBottom: 16 }}>{p.jpName}</div>

                {/* Service icons */}
                <PlanFeatureIcons features={features} accent={p.accent} />

                <div className="divider" style={{ margin: "20px 0" }}/>
                <div style={{ fontFamily: "var(--serif-jp)", fontSize: 12, letterSpacing: "0.16em", color: "var(--rose-deep)", marginBottom: 10 }}>〜 {p.leadJp} 〜</div>
                <p className="body-jp" style={{ fontSize: 13, lineHeight: 1.9 }}>{p.summary}</p>
                <div style={{ marginTop: 24, display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 8 }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 10, flexWrap: "wrap" }}>
                    <span style={{ fontFamily: "var(--serif-en)", fontSize: 28, fontWeight: 300, color: p.accent, letterSpacing: "0.02em" }}>¥{p.price.toLocaleString()}</span>
                    <span style={{ fontFamily: "var(--serif-jp)", fontSize: 11, color: "var(--mute)", letterSpacing: "0.1em" }}>(税込)</span>
                  </div>
                  <span style={{ fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.22em", color: "var(--rose-deep)" }}>DETAIL →</span>
                </div>
                <div style={{ marginTop: 8, fontFamily: "var(--serif-jp)", fontSize: 11, color: "var(--mute)", letterSpacing: "0.14em" }}>
                  <span style={{ display: "inline-block", width: 12, height: 1, background: "var(--rose-deep)", verticalAlign: "middle", marginRight: 8 }}/>
                  母の日キャンペーン価格 (5月31日まで)
                </div>

                <div style={{ marginTop: 24, paddingTop: 20, borderTop: "1px solid var(--line-soft)" }}>
                  <div className="tag-en" style={{ color: "var(--mute)", marginBottom: 14 }}>— PLAN CONTENTS</div>
                  {p.includes.map(group => (
                    <div key={group.head} style={{ marginBottom: 12 }}>
                      <div className="tag-en" style={{ color: p.accent, marginBottom: 6, fontSize: 10 }}>{group.head}</div>
                      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 3 }}>
                        {group.items.map(it => (
                          <li key={it} style={{ fontFamily: "var(--serif-jp)", fontSize: 12, lineHeight: 1.8, letterSpacing: "0.06em", color: "var(--ink-soft)", display: "flex", gap: 8, alignItems: "flex-start" }}>
                            <span style={{ color: p.accent, flexShrink: 0 }}>—</span>
                            <span>{it}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  ))}
                </div>
              </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* ========== FLOW preview (horizontal steps) ========== */}
      <section id="flow" className="section-xl">
        <div className="container">
          <SectionTitle en="— FLOW  03" jp="ご利用の流れ" sub="お申込みからネイル施術、フォトサービスのお届けまで。" />

          <div className="m-stack-2" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 24, position: "relative" }}>
            {FLOW_STEPS.map((s, i) => (
              <div key={s.n} style={{ position: "relative" }}>
                <div className="num-en" style={{ fontSize: 64, color: "var(--peach-2)", lineHeight: 1 }}>
                  {String(s.n).padStart(2, "0")}
                </div>
                <div className="tag-en" style={{ marginTop: 16, color: "var(--brown)" }}>{s.en}</div>
                <h4 style={{ fontFamily: "var(--serif-jp)", fontSize: 20, margin: "8px 0 14px", letterSpacing: "0.12em" }}>{s.jp}</h4>
                <p className="body-jp" style={{ fontSize: 13, lineHeight: 1.95 }}>{s.desc}</p>
                {i < FLOW_STEPS.length-1 && (
                  <div style={{ position: "absolute", top: 34, right: -20, color: "var(--rose-deep)", fontFamily: "var(--serif-en)", fontSize: 14 }}>→</div>
                )}
              </div>
            ))}
          </div>
          <div style={{ textAlign: "center", marginTop: 64 }}>
            <button className="btn btn-ghost" onClick={()=>go("flow")}>
              <span>ABOUT FLOW</span><span>→</span>
            </button>
          </div>
        </div>
      </section>

      {/* ========== Voice teaser ========== */}
      <section id="voice" style={{ padding: "140px 44px", background: "var(--peach)", color: "var(--ink)" }}>
        <div className="container m-stack" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "center" }}>
          <div>
            <div className="tag-en" style={{ color: "var(--rose-deep)" }}>— VOICE  04</div>
            <h2 className="h-section" style={{ color: "var(--ink)", marginTop: 12 }}>
              娘や孫から、<br/>お婆様へ。
            </h2>
            <p className="body-jp" style={{ maxWidth: 320 }}>
              Her Nailは、ご家族のためのサービスです。ご利用いただいた方々からの声を、ほんの一部ご紹介します。
            </p>
            <button className="btn" style={{ marginTop: 36, background: "var(--rose-deep)", color: "var(--cream)" }} onClick={()=>go("voice")}>
              <span>READ STORIES</span><span>→</span>
            </button>
          </div>
          <div className="m-stack-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
            {VOICES.slice(0,2).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: 70, height: 70, 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.author}</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>

      {/* ========== CTA ========== */}
      <section className="section-xl" style={{ textAlign: "center", padding: "160px 44px", background: "#ffffff", fontSize: "48px" }}>
        <div className="eyebrow">— beauty gifting —</div>
        <h2 className="h-display" style={{ margin: "24px auto 40px", maxWidth: 820, fontSize: "48px" }}>
          娘・孫から母・祖母に贈る<br/>ビューティーギフト<br/>
          大切な方の指先に、<br/>
          あなたからの贈りものを。
        </h2>
        <button className="btn btn-dark" onClick={()=>go("apply")}>
          <span>APPLY  —  お申込みはこちら</span>
          <span>→</span>
        </button>
        <div style={{ marginTop: 32, fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.32em", textTransform: "uppercase", color: "var(--mute)" }}>
          ¥12,800 — / From One Visit
        </div>
      </section>
    </div>
  );
}

/* ---- Data ---- */
const PLANS = [
  {
    key: "standard", enName: "Nail", jpName: "ネイル", price: 8800,
    accent: "var(--rose-deep)",
    cfClass: "cf-rose",
    leadJp: "まずは、ささやかな彩りとメッセージを",
    catch: "「元気でいてね」の言葉を、プロのネイリストが直接お伝えします。",
    summary: "丁寧なネイルケアと、あなたから預かった大切なメッセージ。指先を見るたびに愛情を感じられる時間を。",
    description: "「最近おしゃれをしていないお婆ちゃんに、ちょっとした刺激を贈りたい」。そんなお孫様に選ばれている、最も身近なギフトプランです。丁寧なネイルケアと、あなたから預かった大切なメッセージ。ネイリストが心を込めて代読し、指先を見るたびにあなたの愛情を感じられる時間をお届けします。",
    occasion: "日常のちょっとしたプレゼント、離れて暮らすお婆様へのご挨拶に。",
    includes: [
      { head: "NAIL", items: ["ネイルケア（爪の形・甘皮整え）", "ネイルカラー塗布 または ネイルチップ（当日選択可）"] },
      { head: "GIFT", items: ["ご家族からのメッセージカードをお届け", "スマホ写真撮影＆メール報告"] }
    ],
    tag: "FOR EVERYDAY",
  },
  {
    key: "relax", enName: "Relax", jpName: "リラックス", price: 16500,
    accent: "var(--slate-deep)",
    cfClass: "cf-silver",
    leadJp: "五感で楽しむ、魔法のひととき",
    catch: "お婆ちゃんのリラックスした笑顔が見たいから。心まで潤う美容体験。",
    summary: "ハンドマッサージとミニブーケで、指先の彩りを五感で味わう特別な時間。",
    description: "ネイルの彩りだけでなく、ハンドマッサージによる極上の癒やしをセットにしました。施術の最後には、当日の思い出を彩るミニブーケをお渡しします。指先の美しさだけでなく、心まで解きほぐれる特別な体験を贈りたい方に。",
    occasion: "お誕生日、母の日、敬老の日など、特別な日のサプライズに。",
    includes: [
      { head: "NAIL", items: ["ネイルケア（爪の形・甘皮整え）", "ネイルカラー塗布 または ネイルチップ（当日選択可）"] },
      { head: "HAND CARE", items: ["ハンドマッサージ", "ハンドパック"] },
      { head: "GIFT", items: ["ミニブーケのプレゼント", "ご家族からのメッセージカードをお届け", "スマホ写真撮影＆メール報告"] }
    ],
    tag: "MOST POPULAR",
  },
  {
    key: "premium", enName: "Premium", jpName: "プレミアム", price: 33000,
    accent: "var(--gold-deep)",
    cfClass: "cf-gold",
    leadJp: "家族の絆を、未来へ残す。プロが綴る「人生」の１ページ",
    catch: "思い出を最高のかたちで。",
    summary: "プロのカメラマンが同行し、お婆様の最も輝く表情を一冊のアルバムに。",
    description: "お誕生日、母の日、米寿、卒寿など、大切な人生の節目に。プロのカメラマンが同行し、お婆様の最も輝く表情と、ネイリストとの温かい交流を記録します。その日、その瞬間の空気感まで閉じ込めた一冊のアルバムは、ご家族全員にとってもきっと大事なものになるはず。離れていても心が繋がる贈り物です。",
    occasion: "お誕生日・母の日・米寿・卒寿・白寿などの長寿祝い、親戚一同での特別な贈り物に。",
    includes: [
      { head: "NAIL", items: ["ネイルケア（爪の形・甘皮整え）", "ネイルカラー塗布 または ネイルチップ（当日選択可）"] },
      { head: "HAND CARE", items: ["ハンドマッサージ", "ハンドパック"] },
      { head: "GIFT", items: ["季節の華やかなブーケ", "ご家族からのメッセージカードをお届け"] },
      { head: "PHOTO", items: ["カメラマンによる撮影", "フォトアルバムにしてお届け"] }
    ],
    tag: "FOR THE MILESTONE",
  },
];

const FLOW_STEPS = [
  { n: 1, en: "APPLY", jp: "お申込み", desc: "オンラインフォームより、プラン・ご訪問先・ご希望日時をお知らせください。" },
  { n: 2, en: "CONSULT", jp: "ご相談", desc: "施設様・ご家族様と、お婆様の体調やご希望のデザインを事前にすり合わせいたします。" },
  { n: 3, en: "VISIT", jp: "ご訪問・施術", desc: "ネイリストがお伺いし、ベッドサイドや居室で、負担のないよう丁寧に施術します。" },
  { n: 4, en: "PHOTO", jp: "記念撮影", desc: "プレミアムのみ。ご家族とご一緒に、自然な笑顔の記念写真をお撮りします。" },
  { n: 5, en: "DELIVER", jp: "お届け", desc: "後日、編集済みのお写真データをご家族様のメールアドレスへお届けします。" },
];

const VOICES = [
  { id: 1, quote: "母が自分の爪をじっと見つめて、『きれいねぇ』と笑ってくれた。こんな表情、何年ぶりでしょう。", author: "娘より / 72歳の母へ", cf: "cf-rose", plan: "Nail" },
  { id: 2, quote: "祖母と一緒に撮った写真、額に入れて部屋に飾りました。祖母の宝物になっています。", author: "孫より / 85歳の祖母へ", cf: "cf-mint", plan: "Premium" },
  { id: 3, quote: "施術中、ネイリストさんが手を握りながら話してくれて、母が20分以上ずっと笑っていました。", author: "娘より / 78歳の母へ" },
];

Object.assign(window, { HomePage, PlanFeatureIcons, PLANS, FLOW_STEPS, VOICES });