/* Akasha — content pages: Services, Pricing, About, Access, Contact */
const { useState: pS } = React;

function ProductCard({ p }) {
  return (
    <article className="mcard reveal">
      <div className="mcard__top"><div className="mcard__ico"><Icon name={p.icon} /></div><span className="mcard__tag">{p.cat}</span></div>
      <h3>{p.name}</h3>
      <p style={{ marginBottom: 0 }}>{p.desc}</p>
    </article>
  );
}

function Services() {
  const ref = useReveal();
  return (
    <div className="page" ref={ref}>
      <SubHero crumb="施術メニュー" eyebrow="Menu" title="巡りを整える、三つの時間。"
        lead="手技を中心にした全身血流改善を軸に、気功オイル・妊活サポートを。その日の身体とお悩みに合わせて、丁寧にお選びします。" />
      <section className="section">
        <div className="wrap">
          <div className="women-note reveal" style={{ marginBottom: 32 }}><Icon name="flower-2" /><div><strong>女性専用サロンです</strong><span>男性の方は、ご夫婦でのご来店、またはご家族からのご紹介の場合に限りお受けしています。</span></div></div>
          <div className="menu menu--3">
            {SERVICES.map((s) => <ServiceCard key={s.id} s={s} onBook={() => go("contact")} />)}
          </div>
          <p className="center muted reveal" style={{ marginTop: 18, fontSize: 12.5 }}>表示はすべて税込価格です／完全予約制</p>
        </div>
      </section>
      <section className="section about-split" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="photo photo--tall reveal"><img src={A("assets/treat-6.webp")} alt="施術の様子" /></div>
          <div className="reveal">
            <div className="divider"></div>
            <p className="eyebrow">The visit</p>
            <h2 className="serif" style={{ margin: "0 0 22px" }}>施術の流れ。</h2>
            <dl className="dl">
              {FLOW.map((f, i) => (<div className="dl__row" key={i}><dt>{f.n} {f.h}</dt><dd>{f.p}</dd></div>))}
            </dl>
          </div>
        </div>
      </section>
      <section className="section" style={{ paddingTop: 0 }}>
        <div className="wrap">
          <div className="pnote" style={{ marginTop: 0 }}>
            <div className="pnote__card reveal"><h4><Icon name="moon-star" />プチ運命鑑定（初回無料）</h4><p>はじめの30分のカウンセリングの中で、お話ししながらそっと鑑定を。身体だけでなく、これからの巡り合わせにも光を。</p></div>
            <div className="pnote__card reveal"><h4><Icon name="shirt" />服装について</h4><p>ラフな服装ならそのままお受けいただけます。オイルの施術はお着替えを（ご用意あります）。</p></div>
          </div>
        </div>
      </section>
      <section className="section" style={{ background: "var(--paper-alt)", paddingTop: 0 }}>
        <div className="wrap" style={{ paddingTop: 80 }}>
          <Head center eyebrow="Home care" title="内側からのケア、取り扱い商品。" />
          <div className="prods">{PRODUCTS.map((p, i) => <ProductCard p={p} key={i} />)}</div>
          <p className="center muted reveal" style={{ marginTop: 26, fontSize: 13.5 }}>商品のご相談は施術の際に承ります。押し売りはいたしません。</p>
        </div>
      </section>
      <section className="section cta">
        <div className="wrap">
          <p className="eyebrow">Begin the ritual</p>
          <h2>まずは、全身血流改善コースから。</h2>
          <p>はじめての方は初回1,000円OFF。ご希望のコースはご予約時にご相談ください。</p>
          <div className="cta__row"><Button variant="primary" icon="arrow-right" onClick={() => go("contact")}>ご予約・お問い合わせ</Button><Button variant="ghost" onClick={() => go("pricing")}>料金を見る</Button></div>
        </div>
      </section>
    </div>
  );
}

function Pricing() {
  const ref = useReveal();
  const rows = [
    { name: "全身血流改善コース", sub: "初めての方はこちら · 手技を中心にした基本のコース", dur: "90分", price: "¥8,800" },
    { name: "気功オイルめぐりコース", sub: "オイルを使った気功マッサージを重ねたフルコース", dur: "100分", price: "¥11,000" },
    { name: "妊活サポートコース", sub: "骨盤まわりと下半身の巡りを重点的に", dur: "100分", price: "¥13,200" },
    { name: "プチ運命鑑定（おまけ）", sub: "はじめのカウンセリングの中で、会話しながら", dur: "約30分内", price: "初回無料" },
  ];
  const notes = [
    { icon: "gift", h: "はじめての方へ 初回1,000円OFF", p: "はじめてご来店の方は、初回の施術料金から1,000円お引きします。" },
    { icon: "users", h: "ご紹介特典 2,000円OFF", p: "ご紹介した方・された方、どちらも2,000円OFF。ご予約時にご紹介者のお名前をお伝えください（初回割引と併用不可）。" },
    { icon: "moon-star", h: "プチ運命鑑定は初回無料", p: "はじめの30分のカウンセリングの中で、お話ししながらそっと鑑定を。" },
    { icon: "heart-handshake", h: "医療行為ではありません", p: "不調・妊活・後遺症のケアに寄り添うリラクゼーションです。通院中の方は主治医とご相談ください。" },
  ];
  return (
    <div className="page" ref={ref}>
      <SubHero crumb="料金" eyebrow="Price" title="料金のご案内。"
        lead="わかりやすい、シンプルな料金です。表示はすべて税込価格です。" />
      <section className="section">
        <div className="wrap">
          <div className="women-note reveal" style={{ maxWidth: 820, margin: "0 auto 28px" }}><Icon name="flower-2" /><div><strong>女性専用サロンです</strong><span>男性の方は、ご夫婦でのご来店、またはご家族からのご紹介の場合に限りお受けしています。</span></div></div>
          <div className="ptable reveal">
            <div className="prow prow--head"><span className="prow__name" style={{ fontFamily: "var(--font-display)", fontSize: 18 }}>メニュー</span><span style={{ display: "flex", gap: 28, alignItems: "baseline" }}><span className="prow__name" style={{ fontFamily: "var(--font-display)", fontSize: 18 }}>時間</span><span className="prow__name" style={{ fontFamily: "var(--font-display)", fontSize: 18 }}>料金（税込）</span></span></div>
            {rows.map((r, i) => (
              <div className="prow" key={i}>
                <div className="prow__name">{r.name}<small>{r.sub}</small></div>
                <span style={{ display: "flex", gap: 24, alignItems: "center" }}>
                  <span className="prow__dur"><Icon name="clock" />{r.dur}</span>
                  <span className="price" style={{ fontSize: 24, minWidth: 96, textAlign: "right" }}>{r.price}</span>
                </span>
              </div>
            ))}
          </div>
          <div className="price-split">
            <div className="photo reveal"><img src={A("assets/treat-6.webp")} alt="施術の様子" /></div>
            <div className="pnote pnote--stack">
              {notes.map((n, i) => (
                <div className="pnote__card reveal" key={i}><h4><Icon name={n.icon} />{n.h}</h4><p>{n.p}</p></div>
              ))}
            </div>
          </div>
          <p className="center reveal" style={{ marginTop: 40 }}><Button variant="primary" icon="arrow-right" onClick={() => go("contact")}>このメニューで予約する</Button></p>
        </div>
      </section>
    </div>
  );
}

function About() {
  const ref = useReveal();
  const company = [
    ["屋号", "Akasha（アカーシャ）血流改善専門サロン"],
    ["代表", "福谷 未穂"],
    ["サロン形態", "血流改善を主とした、自宅で営む女性専用のリラクゼーションサロン（完全予約制・一日4名まで）"],
    ["男性のお客様", "ご夫婦でのご来店、またはご家族からのご紹介の場合に限りお受けしています"],
    ["主なメニュー", "全身血流改善コース / 気功オイルめぐりコース / 妊活サポートコース / プチ運命鑑定"],
    ["所在地", "名古屋市中川区 伏屋駅 徒歩3分（詳しいご住所はご予約後にお伝えします）"],
    ["Instagram", "@akasha_nagoya"],
    ["取り扱い", "乳酸菌生産物質（腸活）・幹細胞ケア商品（エイジングケア）・CBD（リラックスケア）"],
    ["こんな方へ", "冷えや不調が続く方、妊活やこれからの身体を考えたい方、心を穏やかに整えたい方に。感性を澄ませたい方にも"],
    ["ご予約", "公式LINEの友だち追加より（完全予約制）"],
    ["注意事項", "医療行為ではありません。効果には個人差があります"],
  ];
  return (
    <div className="page" ref={ref}>
      <SubHero crumb="サロンについて" eyebrow="Profile" title="結局は、血流でした。"
        lead="— 妊活も、主人の病気も。" />
      <section className="section about-split">
        <div className="wrap">
          <div className="reveal">
            <div className="owner">
              <img className="owner__img" src={A("assets/owner.webp")} alt="福谷未穂" />
              <div className="owner__name">福谷 未穂<span>FUKUTANI MIHO</span></div>
            </div>
          </div>
          <div className="story reveal" style={{ margin: 0 }}>
            <p className="lede">同じ不安のなかにいる方に、そっと寄り添える場所にしたいと思っています。</p>
            <p>妊活中に、主人が脳梗塞を発症しました。病院でできることは少なく、いろいろな施術を探しては受けに行き、やっとたどり着いたのが血流改善の施術でした。</p>
            <p>妊活も病気も、結局は血流なのだと思うようになりました。友人に施術をすると身体が楽になったと言ってもらえて、その気持ちでAkashaを始めました。</p>
            <p>美容師としても15年。髪と身体、どちらからも、その方の毎日が少し軽くなるお手伝いをしています。</p>
            <div style={{ marginTop: 8 }}><Button variant="ghost" icon="arrow-right" onClick={() => go("services")}>施術メニューを見る</Button></div>
          </div>
        </div>
      </section>
      <section className="section reasons">
        <div className="wrap">
          <Head center eyebrow="Why Akasha" title="Akashaが大切にしていること。" />
          <div className="rgrid">
            {REASONS.map((r, i) => (<div className="reason reveal" key={i}><Icon name={r.icon} /><div><h4>{r.h}</h4><p>{r.p}</p></div></div>))}
          </div>
        </div>
      </section>
      <section className="section">
        <div className="wrap" style={{ maxWidth: 820 }}>
          <Head center eyebrow="Information" title="サロン概要。" />
          <dl className="dl reveal">
            {company.map((c, i) => (<div className="dl__row" key={i}><dt>{c[0]}</dt><dd>{c[1]}</dd></div>))}
          </dl>
        </div>
      </section>
    </div>
  );
}

function Access() {
  const ref = useReveal();
  const info = [
    ["営業時間", "9:30 / 12:00 / 14:30 / 17:00（17:00最終受付・一日4名まで）"],
    ["定休日", "不定休"],
    ["時間外", "応相談"],
    ["ご予約", "完全予約制・女性専用"],
    ["男性のお客様", "ご夫婦でのご来店、またはご家族からのご紹介の場合に限りお受けしています"],
    ["アクセス", "名古屋市中川区　伏屋駅 徒歩3分（詳しいご住所はご予約後にお伝えします）"],
    ["駐車場", "なし（近隣パーキングをご利用ください）"],
    ["Instagram", "@akasha_nagoya"],
  ];
  return (
    <div className="page" ref={ref}>
      <SubHero crumb="店舗・アクセス" eyebrow="Access" title="伏屋駅から、徒歩3分。"
        lead="名古屋市中川区の、静かな自宅サロン。お一人ずつ、ご自身のためだけの時間を。詳しいご住所はご予約後にお伝えします。" />
      <section className="section">
        <div className="wrap info-grid">
          <div className="reveal">
            <div className="divider"></div>
            <h2 className="serif" style={{ margin: "0 0 24px", fontSize: 30 }}>ご来店の前に。</h2>
            <dl className="dl">
              {info.map((c, i) => (<div className="dl__row" key={i}><dt>{c[0]}</dt><dd>{c[1]}</dd></div>))}
            </dl>
            <div style={{ marginTop: 28 }}><Button variant="primary" icon="arrow-right" onClick={() => go("contact")}>空き状況を問い合わせる</Button></div>
          </div>
          <div className="reveal">
            <div className="map-ph">名古屋市中川区 · 伏屋駅 徒歩3分</div>
            <p className="muted" style={{ fontSize: 13, marginTop: 14, lineHeight: 1.8 }}>プライバシー保護のため、詳しいご住所はご予約後にお伝えしています。駐車場はありませんので、近隣のパーキングをご利用ください。</p>
          </div>
        </div>
      </section>
    </div>
  );
}

/* 公式LINE URL — 開設後にここへ実際の友だち追加リンクを設定してください */
const LINE_URL = "https://lin.ee/z82bm7A";

function Contact() {
  const ref = useReveal();
  const steps = [
    { n: "1", h: "友だち追加", p: "下のボタン、またはQRコードから公式LINEを友だち追加します。" },
    { n: "2", h: "メッセージを送る", p: "お名前と、気になる不調・ご希望のメニューを気軽にお送りください。" },
    { n: "3", h: "日時を決めてご予約", p: "空き状況をご案内し、カウンセリング日を一緒に決めていきます。" },
  ];
  const openLine = () => { if (LINE_URL) window.open(LINE_URL, "_blank", "noopener"); };
  return (
    <div className="page" ref={ref}>
      <SubHero crumb="ご予約・お問い合わせ" eyebrow="Contact" title="ご予約は、公式LINEから。"
        lead="まずは、LINEで。ご予約・お問い合わせはすべて公式LINEで承っています。女性専用・完全予約制・一日4名まで。はじめての方のご相談も、お気軽にどうぞ。" />
      <section className="section">
        <div className="wrap">
          <div className="line-card reveal">
            <div className="line-card__qr">
              <div className="qr-slot"><img src={A("assets/line-qr.webp")} alt="Akasha 公式LINE QRコード" style={{ width: "100%", height: "100%", objectFit: "contain", padding: 14, boxSizing: "border-box" }} /></div>
              <p className="muted center" style={{ fontSize: 12.5, marginTop: 14 }}>スマートフォンでQRコードを読み取ってください</p>
            </div>
            <div className="line-card__body">
              <div className="line-badge"><Icon name="message-circle" />Akasha 公式LINE</div>
              <h2 className="serif" style={{ margin: "6px 0 14px", fontSize: 30 }}>まずは、LINEで。</h2>
              <p style={{ fontSize: 15, lineHeight: 1.9, color: "var(--fg1)", margin: "0 0 12px", fontWeight: 500 }}>友だち追加で「血流セルフチェック10」をプレゼント。ご予約もこちらから。</p>
              <p style={{ fontSize: 15, lineHeight: 1.9, color: "var(--fg2)", margin: "0 0 26px" }}>施術のご予約も、そのあとの身体の変化のご相談も、すべて公式LINEでやりとりしています。あなたのペースで、いつでもどうぞ。</p>
              <Button variant="primary" iconLeft="message-circle" onClick={openLine}>友だち追加する</Button>
              <p className="muted" style={{ fontSize: 12, marginTop: 12 }}>※ LINEアプリが開きます。開設準備中の場合はQRコードをご利用ください。</p>
            </div>
          </div>
          <div className="women-note reveal" style={{ marginTop: 28 }}><Icon name="flower-2" /><div><strong>女性専用サロンです</strong><span>男性の方は、ご夫婦でのご来店、またはご家族からのご紹介の場合に限りお受けしています。</span></div></div>
          <div className="steps" style={{ marginTop: 72 }}>
            {steps.map((s, i) => (
              <div className="step reveal" key={i}><div className="step__n">{s.n}</div><h4>{s.h}</h4><p>{s.p}</p></div>
            ))}
          </div>
          <p className="center muted reveal" style={{ marginTop: 44, fontSize: 13.5 }}>ご予約は完全予約制です。医療行為ではありません／効果には個人差があります。</p>
        </div>
      </section>
    </div>
  );
}

function Beauty() {
  const ref = useReveal();
  const forWhom = [
    { icon: "baby", h: "小さなお子さんと一緒に", p: "お世話で家を離れられなくても大丈夫。お子さんのそばで、ゆっくりどうぞ。" },
    { icon: "home", h: "預け先がなくても", p: "なかなか美容室へ行けない——そんな時は、こちらからお伺いします。" },
    { icon: "heart-handshake", h: "外出がむずかしい方へ", p: "足が不自由な方、遠出がつらい方も。住み慣れたお部屋で、髪を整えましょう。" },
  ];
  const menu = [
    { icon: "scissors", name: "カット", price: 5000, desc: "今の暮らしや髪のお悩みを伺いながら、扱いやすく心地よい髪へ。ゆっくり、丁寧に。" },
    { icon: "leaf", name: "ヘナカラー", price: 6000, desc: "デトックスをメインにしたヘナのカラー。髪と頭皮をいたわりながら、やさしく染めていきます。", feature: true },
    { icon: "sparkles", name: "カット ＋ ヘナカラー", price: 10000, desc: "カットとヘナカラーを、まとめてゆったりと。時間をかけて、髪も気持ちも整える時間に。" },
  ];
  return (
    <div className="page" ref={ref}>
      <SubHero crumb="出張美容" eyebrow="Mobile hair salon" title="髪を整える時間を、おうちまで。"
        lead="美容師歴15年。出かけるのがむずかしい方のもとへ、こちらからお伺いする出張美容の仕事もしています。名古屋市内、あなたのお部屋を小さな美容室に。" />
      <section className="section">
        <div className="wrap">
          <Head center eyebrow="For you" title="こんな時、そばへ伺います。" />
          <div className="scards">
            {forWhom.map((s, i) => (<div className="scard reveal" key={i}><Icon name={s.icon} /><h4>{s.h}</h4><p>{s.p}</p></div>))}
          </div>
        </div>
      </section>
      <section className="section" style={{ background: "var(--paper-alt)" }}>
        <div className="wrap">
          <Head center eyebrow="Menu" title="出張メニュー。" />
          <div className="menu">
            {menu.map((m, i) => (
              <article className={`mcard reveal ${m.feature ? "mcard--feature" : ""}`} key={i}>
                <div className="mcard__top"><div className="mcard__ico"><Icon name={m.icon} /></div>{m.feature && <span className="mcard__tag">デトックス</span>}</div>
                <h3>{m.name}</h3>
                <p>{m.desc}</p>
                <div className="mcard__foot">
                  <span className="price">¥{m.price.toLocaleString()}<small>／出張</small></span>
                  <span className="mcard__dur"><Icon name="home" />ご自宅で</span>
                </div>
              </article>
            ))}
          </div>
          <div className="pnote">
            <div className="pnote__card reveal"><h4><Icon name="map-pin" />出張エリア</h4><p>名古屋市内へお伺いします。市外の方はご相談ください。</p></div>
            <div className="pnote__card reveal"><h4><Icon name="car" />交通費</h4><p>場所により異なりますので、要相談とさせていただいています。お気軽にお尋ねください。</p></div>
            <div className="pnote__card reveal"><h4><Icon name="droplets" />シャンプーについて</h4><p>シャンプーはご自身でお願いしています。カットやカラーの前後に、洗面所をお借りできると助かります。</p></div>
            <div className="pnote__card reveal"><h4><Icon name="clock" />ご予約</h4><p>公式LINEより承ります。ご希望の日時と、お住まいのエリアをお知らせください。</p></div>
          </div>
        </div>
      </section>
      <section className="section cta">
        <div className="wrap">
          <p className="eyebrow">Mobile hair salon</p>
          <h2>出かけられない日も、<br />きれいでいられるように。</h2>
          <p>出張美容のご予約・ご相談も、公式LINEで承っています。まずはお気軽にメッセージをどうぞ。</p>
          <div className="cta__row"><Button variant="primary" iconLeft="message-circle" onClick={() => go("contact")}>公式LINEで相談する</Button></div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Services, Pricing, About, Access, Contact, Beauty });
