/* Akasha — Home page (LP recreation, blood-flow theme) */
const { useState: hS, useEffect: hE, useRef: hR } = React;

function useReveal() {
  const ref = hR(null);
  hE(() => {
    if (!ref.current) return;
    const els = ref.current.querySelectorAll(".reveal");
    const io = new IntersectionObserver((es) => {
      es.forEach((e) => { if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  });
  return ref;
}

function FaqList({ items }) {
  const [open, setOpen] = hS(0);
  return (
    <div className="faq">
      {items.map((f, i) => (
        <div className={`faq__item ${open === i ? "open" : ""}`} key={i}>
          <button className="faq__q" onClick={() => setOpen(open === i ? -1 : i)}>
            {f.q}<Icon name="chevron-down" />
          </button>
          <div className="faq__a" style={{ maxHeight: open === i ? "400px" : "0" }}>
            <p>{f.a}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function VoiceCard({ v }) {
  return (
    <article className="vcard reveal">
      <p className="vcard__q">{v.q}</p>
      <div className="vcard__tags">{v.tags.map((t, i) => <span className="vtag" key={i}>{t}</span>)}</div>
      <div className="vcard__who">
        <div className="vcard__ava">{v.init}</div>
        <div className="vcard__meta"><div className="n">{v.who}</div><div className="m">{v.meta}</div></div>
      </div>
    </article>
  );
}

function ServiceCard({ s, onBook }) {
  return (
    <article className={`mcard reveal ${s.feature ? "mcard--feature" : ""}`}>
      <div className="mcard__top">
        <div className="mcard__ico"><Icon name={s.icon} /></div>
        {s.tag && <span className="mcard__tag">{s.tag}</span>}
      </div>
      <h3>{s.name}</h3>
      <p>{s.desc}</p>
      <div className="mcard__foot">
        <span className={`price ${s.free ? "price--free" : ""}`}>
          {s.free ? "初回無料" : <>¥{s.price.toLocaleString()}<small>{s.unit}</small></>}
        </span>
        <span className="mcard__dur"><Icon name="clock" />{s.dur}</span>
      </div>
      <div style={{ marginTop: 14, textAlign: "right" }}><Button variant="text" onClick={onBook}>予約する</Button></div>
    </article>
  );
}

function Home() {
  const ref = useReveal();
  return (
    <div className="page" ref={ref}>
      {/* HERO */}
      <header className="hero">
        <Botanical className="illus hero__petal" style={{ position: "absolute", right: "6%", top: "18%", width: "220px", opacity: .12 }} />
        <div className="wrap hero__grid">
          <div className="reveal">
            <p className="eyebrow">Akasha · 血流改善専門サロン</p>
            <h1>めぐりが変われば、<br /><span className="accent">毎日が軽くなる。</span></h1>
            <p className="lead">血のめぐりが整うと、冷えやむくみがやわらぎ、肩や腰の重さがほどけ、寝つきや朝の目覚めが変わっていきます。名古屋市中川区・<span style={{ whiteSpace: "nowrap" }}>伏屋駅徒歩3分</span>。お一人ずつの、静かな女性専用の自宅サロンです。</p>
            <div className="hero__cta">
              <Button variant="primary" icon="arrow-right" onClick={() => go("contact")}>ご予約・お問い合わせ</Button>
              <Button variant="ghost" onClick={() => go("services")}>施術メニューを見る</Button>
            </div>
            <div className="hero__note"><Icon name="flower-2" />女性専用サロン（男性はご夫婦・ご家族のご紹介に限りお受けします）</div>
            <div className="hero__note" style={{ marginTop: 8 }}><Icon name="info" />不調・妊活・後遺症のケアに寄り添うリラクゼーションです（医療行為ではありません）</div>
            <div className="hero__chips">
              {["全身血流改善コース", "気功オイルめぐりコース", "妊活サポートコース", "プチ運命鑑定", "セルフケア提案"].map((c) => <span className="chip" key={c}>{c}</span>)}
            </div>
          </div>
          <div className="hero__art hero__art--brand reveal">
            <img className="hero__logo" src={A("assets/akasha-logo.webp")} alt="Akasha" />
            <div className="hero__brand">Akasha<span>アカーシャ</span></div>
            <div className="hero__tag">血がめぐり、氣が通う。</div>
          </div>
        </div>
      </header>

      {/* SYMPTOMS */}
      <section className="section symptoms">
        <div className="wrap">
          <Head center eyebrow="Your unwellness" title="最後に、身体が軽いと<br />思ったのはいつですか？" />
          <div className="scards">
            {SYMPTOMS.map((s, i) => (
              <div className="scard reveal" key={i}><Icon name={s.icon} /><h4>{s.h}</h4><p>{s.p}</p></div>
            ))}
          </div>
          <p className="center muted reveal" style={{ marginTop: 34, fontSize: 14 }}>思い当たるものが多いほど、めぐりを整える時間をつくってあげてください。</p>
        </div>
      </section>

      {/* ABOUT SPLIT */}
      <section className="section about-split">
        <div className="wrap">
          <div className="photo reveal"><img src={A("assets/treat-1.webp")} alt="施術の様子" /></div>
          <div className="reveal">
            <div className="divider"></div>
            <p className="eyebrow">About Akasha</p>
            <h2 className="serif" style={{ margin: "0 0 22px" }}>からだと心、<br />両方を見つめる場所。</h2>
            <p className="lead" style={{ marginBottom: 22 }}>Akashaは、血流改善を主とした、自宅で営む小さなリラクゼーションサロン。手技と気功で身体の巡りを整えながら、その日の不調や気持ちにそっと寄り添います。お一人ずつの、静かな時間をお過ごしください。</p>
            <p style={{ fontSize: 15, lineHeight: 1.9, color: "var(--fg2)", margin: 0 }}>「なんとなく不調が続いている」「冷えやむくみが気になる」「妊活や、これからの身体のことを考えたい」——そんなふうに感じている女性へ。心を穏やかに整えたい方、感性を澄ませたい方にも。ひとりひとりの巡りに合わせて、丁寧に。</p>
            <div style={{ marginTop: 28 }}><Button variant="ghost" icon="arrow-right" onClick={() => go("about")}>サロンについて</Button></div>
          </div>
        </div>
      </section>

      {/* PHILOSOPHY (flow) */}
      <section className="section philo">
        <div className="wrap philo__grid">
          <div className="photo photo--arch reveal"><img src={A("assets/treat-2.webp")} alt="施術の様子" /></div>
          <div className="reveal">
            <p className="eyebrow">The philosophy</p>
            <h2 className="serif">巡りそのものから、<br />整える。</h2>
            <p className="lead">血のめぐりは、酸素と栄養を身体のすみずみへ届け、いらないものを運び出す流れ。この流れが滞ると、冷え・むくみ・こり、そして「なんとなくだるい」が生まれます。</p>
            <p style={{ fontSize: 15, lineHeight: 1.9, color: "var(--fg2)" }}>検査では何も出ないのに、朝から身体が重い。手足の先だけが冷たい。眠っても疲れが抜けない。そうした声を、これまで何人もの方から伺ってきました。</p>
            <p style={{ fontSize: 15, lineHeight: 1.9, color: "var(--fg2)" }}>Akashaが大切にするのは、対症ではなく巡りそのものを整えること。手技で物理的にほぐし、気功で気の流れを通す。二つの側面から、身体が本来もつ巡る力を呼び覚まします。</p>
            <p style={{ fontSize: 15, lineHeight: 1.9, color: "var(--fg2)" }}>一度の施術で終わらせず、日々の暮らしのなかに巡りを戻していくこと。それが、Akashaの考える血流改善です。</p>
          </div>
        </div>
      </section>

      {/* SERVICES PREVIEW */}
      <section className="section">
        <div className="wrap">
          <Head center eyebrow="Menu" title="巡りを整える、三つの時間。" />
          <div className="menu menu--3">
            {SERVICES.map((s) => <ServiceCard key={s.id} s={s} onBook={() => go("contact")} />)}
          </div>
          <div className="offer reveal">
            <div className="offer__item offer__item--dark"><span>はじめての方へ</span><strong>初回 1,000円OFF</strong></div>
            <div className="offer__item"><span>ご紹介特典（ご紹介した方・された方）</span><strong>どちらも 2,000円OFF</strong></div>
          </div>
          <p className="center muted reveal" style={{ marginTop: 14, fontSize: 12 }}>表示はすべて税込価格です／完全予約制　※初回割引と紹介特典の併用はできません</p>
          <p className="center reveal" style={{ marginTop: 24 }}><Button variant="text" onClick={() => go("pricing")}>料金の詳細を見る</Button></p>
        </div>
      </section>

      {/* FLOW */}
      <section className="section" style={{ background: "var(--paper-alt)" }}>
        <div className="wrap">
          <Head center eyebrow="The visit" title="初回の流れ・通い方。" />
          <div className="flow-steps">
            {FLOW.map((f, i) => (
              <div className="fstep reveal" key={i}><p className="fstep__n">{f.n}</p><h4>{f.h}</h4><p>{f.p}</p></div>
            ))}
          </div>
        </div>
      </section>

      {/* REASONS */}
      <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>

      {/* TESTIMONIALS PREVIEW */}
      <section className="section voices-band">
        <div className="wrap">
          <Head eyebrow="お客様の声" title="巡りが整った、その先の声。" action={<Button variant="text" onClick={() => go("voices")}>すべての声を見る</Button>} />
          <div className="vgrid">
            {VOICES.slice(0, 3).map((v, i) => <VoiceCard v={v} key={i} />)}
          </div>
        </div>
      </section>

      {/* FAQ */}
      <section className="section faq-band">
        <div className="wrap">
          <Head center eyebrow="Q & A" title="よくあるご質問。" />
          <FaqList items={FAQ} />
        </div>
      </section>

      {/* STEPS */}
      <section className="section" style={{ background: "var(--paper-alt)" }}>
        <div className="wrap">
          <Head center eyebrow="How to book" title="ご予約は、かんたん3ステップ。" />
          <div className="steps">
            {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 reveal" style={{ marginTop: 40 }}><Button variant="primary" icon="arrow-right" onClick={() => go("contact")}>ご予約・お問い合わせへ</Button></p>
        </div>
      </section>

      {/* CTA */}
      <section className="section cta">
        <div className="wrap">
          <img src={A("assets/akasha-logo.webp")} alt="" style={{ width: 64, height: 64, margin: "0 auto 22px", display: "block" }} />
          <p className="eyebrow">Begin the ritual</p>
          <h2>血がめぐり、<br />氣が通う。</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")} className="" >料金を見る</Button>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { Home, useReveal, FaqList, VoiceCard, ServiceCard });