/* Friendly Civic — section components for P・SPO LP v3 */

const { useState: useStateS, useEffect: useEffectS, useRef: useRefS } = React;

/* ============================================================
   §01 ENTRANCE (FV)
   ============================================================ */
function Entrance() {
  return (
    <section id="entrance" className="section" style={{
      background: "linear-gradient(180deg, #E8F2EE 0%, #FEF3E2 60%, #FAD9CD 100%)",
      paddingTop: 80, paddingBottom: 120, overflow: "hidden", position: "relative"
    }}>
      <Watermark text="知多半田" top={40} left={-40} size={300} tone="mint" />
      <Watermark text="高校生" top={520} right={-20} size={220} tone="coral" rotate={-4} />

      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "center" }}
          className="fv-grid">
          <div>
            <div style={{ display: "inline-flex", gap: 10, alignItems: "center", marginBottom: 20 }}>
              <span className="chip chip--mint">月額会員制スタディスペース</span>
              <span className="chip chip--coral-soft">愛知・知多半田駅前</span>
            </div>
            <h1 style={{
              fontFamily: "var(--font-heading)", fontWeight: 900,
              fontSize: "clamp(36px, 5.4vw, 64px)", lineHeight: 1.45, letterSpacing: "0.005em",
              color: "var(--brand-navy)", margin: "0 0 22px",
              textWrap: "pretty"
            }}>
              <ruby>改札<rt>かいさつ</rt></ruby>から、<br/>
              <span style={{ color: "var(--brand-coral)" }}>
                <ruby>徒歩<rt>とほ</rt></ruby>60<ruby>秒<rt>びょう</rt></ruby>。
              </span><br/>
              <ruby>帰<rt>かえ</rt></ruby>る<ruby>前<rt>まえ</rt></ruby>に、<br/>
              もうひと<ruby>頑張<rt>がんば</rt></ruby>り<br/>
              <ruby>出来<rt>でき</rt></ruby>る<ruby>場所<rt>ばしょ</rt></ruby>。
            </h1>
            <p style={{ fontSize: 17, color: "var(--text)", margin: "0 0 32px", maxWidth: 460, lineHeight: 2 }}>
              <ruby>家<rt>いえ</rt></ruby>では、ゆっくりしたいから。<br/>
              <span style={{ color: "var(--text-muted)", fontSize: 15 }}>
                EVERYDAY MATCHING FOR YOUR LIFE — P・SPO CHITACOH
              </span>
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn--primary" href="#contact">
                <ruby>見学<rt>けんがく</rt></ruby>を<ruby>予約<rt>よやく</rt></ruby>する
                <span className="arrow">→</span>
              </a>
              <a className="btn btn--ghost" href="#contact">LINEで質問</a>
            </div>
            {/* mini reassurance */}
            <div style={{ display: "flex", gap: 22, marginTop: 36, flexWrap: "wrap" }}>
              {[
                ["徒歩", "60秒"],
                ["営業", "24時間"],
                ["月額", "¥4,980"],
              ].map(([k, v]) => (
                <div key={k} style={{ display: "flex", flexDirection: "column", gap: 2 }}>
                  <span style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--brand-coral)", fontFamily: "var(--font-tag)", fontWeight: 700 }}>{k}</span>
                  <span style={{ fontFamily: "var(--font-heading)", fontWeight: 900, fontSize: 22, color: "var(--brand-navy)" }}>{v}</span>
                </div>
              ))}
            </div>
          </div>

          <div style={{ position: "relative" }}>
            <img src="assets/fv-hero.png" alt="知多半田駅前のスタディカフェ" className="photo photo--hero" />
            {/* small floating badges around scene */}
            <div className="card" style={{
              position: "absolute", bottom: 24, left: -16,
              padding: "12px 16px", display: "flex", alignItems: "center", gap: 10,
              borderRadius: 16
            }}>
              <span style={{
                width: 32, height: 32, borderRadius: "50%",
                background: "var(--brand-mint-pale)", display: "grid", placeItems: "center"
              }}>
                <span style={{ fontFamily: "var(--font-heading)", fontWeight: 900, color: "var(--brand-navy)" }}>★</span>
              </span>
              <div>
                <div style={{ fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: 13, color: "var(--brand-navy)" }}>
                  毎日通っている<ruby>高校生<rt>こうこうせい</rt></ruby>
                </div>
                <div style={{ fontSize: 11, color: "var(--text-muted)" }}>知多半島から名古屋まで</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <style>{`
        .hero-scene { width: 100%; max-width: 600px; }
        @media (max-width: 880px) { .fv-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

/* ============================================================
   §02 PLACES
   ============================================================ */
function Places() {
  return (
    <section id="places" className="section" style={{ background: "var(--bg)", position: "relative" }}>
      <Watermark text="Two Places" top={40} right={-10} size={140} tone="mint" />
      <div className="wrap">
        <SectionHead
          en="Two Places"
          jp={<span><ruby>集中<rt>しゅうちゅう</rt></ruby>する<ruby>場所<rt>ばしょ</rt></ruby>と、<br/>ゆっくりする<ruby>場所<rt>ばしょ</rt></ruby>。</span>}
          sub="ふたつの場所を持つだけで、どちらももっと自分のものになる。"
        />
        <div className="grid-2" style={{ gap: 56, alignItems: "center" }}>
          <div>
            <span className="chip chip--mint" style={{ marginBottom: 14 }}>AT P・SPO</span>
            <h3 className="h-jp-900" style={{ fontSize: 30, margin: "10px 0 14px" }}>
              <ruby>集中<rt>しゅうちゅう</rt></ruby>は、<ruby>駅前<rt>えきまえ</rt></ruby>で。
            </h3>
            <p style={{ color: "var(--text)", lineHeight: 2, margin: 0 }}>
              改札を出て60秒、机にむかえる距離。<br/>
              余白のある空間と、ちょうどいい静けさ。<wbr/>1時間で今日の課題を片づけて、家に帰る。
            </p>
            <div style={{ marginTop: 22 }}>
              <img src="assets/desk-focus.png" alt="駅前で集中する机のシーン" className="photo photo--places" />
            </div>
          </div>
          <div>
            <span className="chip chip--sand" style={{ marginBottom: 14 }}>AT HOME</span>
            <h3 className="h-jp-900" style={{ fontSize: 30, margin: "10px 0 14px" }}>
              <ruby>家<rt>いえ</rt></ruby>では、ゆっくりしたい。
            </h3>
            <p style={{ color: "var(--text)", lineHeight: 2, margin: 0 }}>
              帰宅したら、お風呂に入って、夕食を家族と囲んで、好きな音楽を聴いて寝る。<br/>
              家は、リラックスするための場所。<wbr/>勉強は、別のところで終わらせておく。
            </p>
            <div style={{ marginTop: 22 }}>
              <img src="assets/home-cozy.png" alt="家でゆっくり過ごすシーン" className="photo photo--places" />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   §03 REFRAME
   ============================================================ */
function Reframe() {
  return (
    <section id="reframe" className="section" style={{
      background: "var(--brand-mint-soft)", position: "relative", overflow: "hidden"
    }}>
      <ReframeBackdrop />
      <div className="wrap" style={{ position: "relative", zIndex: 2, textAlign: "center" }}>
        <div style={{ fontFamily: "var(--font-tag)", fontWeight: 700, letterSpacing: "0.22em", color: "var(--brand-coral)", fontSize: 12, marginBottom: 14 }}>REFRAME</div>
        <h2 style={{
          fontFamily: "var(--font-heading)", fontWeight: 900,
          fontSize: "clamp(26px, 3.6vw, 38px)",
          color: "var(--brand-navy)", lineHeight: 1.7, margin: "0 auto", maxWidth: 820
        }}>
          <ruby>家<rt>いえ</rt></ruby>に<ruby>帰<rt>かえ</rt></ruby>る<ruby>前<rt>まえ</rt></ruby>の<span style={{ color: "var(--brand-coral)" }}>1<ruby>時間<rt>じかん</rt></ruby></span>を、<ruby>駅前<rt>えきまえ</rt></ruby>で。<br/>
          <ruby>電車<rt>でんしゃ</rt></ruby>を<ruby>降<rt>お</rt></ruby>りて、<ruby>改札<rt>かいさつ</rt></ruby>から1<ruby>分<rt>ぷん</rt></ruby>。<br/>
          1<ruby>時間<rt>じかん</rt></ruby><ruby>集中<rt>しゅうちゅう</rt></ruby>して、それから<ruby>帰<rt>かえ</rt></ruby>る。
        </h2>
        <p style={{ color: "var(--text-muted)", marginTop: 22, fontSize: 16, lineHeight: 2 }}>
          <ruby>家<rt>いえ</rt></ruby>は、ゆっくりするだけの<ruby>場所<rt>ばしょ</rt></ruby>に。
        </p>
      </div>
    </section>
  );
}

/* ============================================================
   §04 ROUTES — 4 tabs
   ============================================================ */
const ROUTES = [
  {
    key: "A", label: "名古屋・東海方面",
    sub: "通学に時間がかかる日も、ムダにしない。",
    steps: [
      ["07:30", "自宅を出発", "🏠"],
      ["08:30", "名古屋・東海の高校で1日を過ごす", "🏫"],
      ["17:00", "下校、電車で帰路", "🚃"],
      ["17:55", "知多半田駅 着 → 改札から60秒", "📍"],
      ["18:00", "P・SPOで1時間集中", "📒"],
      ["19:30", "帰宅、夕食、ゆっくり", "🍚"],
    ]
  },
  {
    key: "C", label: "河和線・JR武豊線",
    sub: "下車駅が知多半田なら、寄り道できる距離。",
    steps: [
      ["17:30", "電車を降りる", "🚃"],
      ["17:31", "改札から徒歩60秒", "📍"],
      ["17:35", "1時間〜90分集中", "📒"],
      ["19:00", "また電車に乗って帰る", "🚉"],
    ]
  },
];

function Routes() {
  const [active, setActive] = useStateS("A");
  const route = ROUTES.find(r => r.key === active);
  return (
    <section id="routes" className="section" style={{ background: "var(--bg)", position: "relative" }}>
      <Watermark text="ROUTES" top={20} left={-20} size={180} tone="sand" />
      <div className="wrap">
        <SectionHead
          en="Daily Routes"
          jp={<span>あなたの1<ruby>日<rt>にち</rt></ruby>に、ベストマッチ。</span>}
          sub="高校・通学経路・部活のリズムごとに、ちょうどいい寄り方があります。"
        />
        <div style={{ display: "flex", gap: 10, flexWrap: "wrap", marginBottom: 36 }}>
          {ROUTES.map(r => (
            <button key={r.key}
              onClick={() => setActive(r.key)}
              style={{
                padding: "12px 20px",
                borderRadius: "var(--radius-pill)",
                border: "2px solid " + (active === r.key ? "var(--brand-coral)" : "var(--hairline)"),
                background: active === r.key ? "var(--brand-coral)" : "#fff",
                color: active === r.key ? "#fff" : "var(--brand-navy)",
                fontFamily: "var(--font-heading)",
                fontWeight: 700,
                fontSize: 14,
                cursor: "pointer",
                transition: "all .18s ease"
              }}>
              <span style={{ marginRight: 8, opacity: 0.7 }}>{r.key}</span>{r.label}
            </button>
          ))}
        </div>
        <div className="card card--lg" style={{ background: "var(--surface)" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 24, flexWrap: "wrap", gap: 12 }}>
            <h3 className="h-jp-900" style={{ fontSize: 24, margin: 0 }}>{route.sub}</h3>
            <span className="chip chip--mint">PATTERN {route.key}</span>
          </div>
          <ol style={{ listStyle: "none", padding: 0, margin: 0, position: "relative" }}>
            <span style={{
              position: "absolute", left: 32, top: 16, bottom: 16,
              width: 2, background: "var(--brand-mint-pale)"
            }} />
            {route.steps.map(([time, label, ic], i) => (
              <li key={i} style={{ display: "flex", alignItems: "center", gap: 22, padding: "14px 0", position: "relative" }}>
                <span style={{
                  width: 64,
                  fontFamily: "var(--font-heading)",
                  fontWeight: 700,
                  color: "var(--brand-coral)",
                  fontSize: 14
                }}>{time}</span>
                <span style={{
                  width: 36, height: 36, borderRadius: "50%",
                  background: "var(--brand-coral)",
                  color: "#fff",
                  display: "grid", placeItems: "center",
                  fontSize: 18,
                  flexShrink: 0,
                  zIndex: 1,
                  boxShadow: "0 4px 12px rgba(229,101,74,0.32)"
                }}>{ic}</span>
                <span style={{ fontFamily: "var(--font-heading)", fontWeight: 700, color: "var(--brand-navy)", fontSize: 16 }}>{label}</span>
              </li>
            ))}
          </ol>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   §05 STRENGTHS
   ============================================================ */
function Strengths() {
  const items = [
    {
      no: "01",
      title: <span><ruby>改札<rt>かいさつ</rt></ruby>から<ruby>徒歩<rt>とほ</rt></ruby>60<ruby>秒<rt>びょう</rt></ruby></span>,
      lead: "自習室は、遠いと続かない。",
      body: "電車を降りて、信号も、坂もない。改札を出てまっすぐ60秒。「家に帰る前に寄るだけ」が、毎日続くいちばん大事な条件。",
      Icon: IconStation,
      bg: "var(--brand-mint-soft)"
    },
    {
      no: "02",
      title: <span>24<ruby>時間<rt>じかん</rt></ruby><ruby>営業<rt>えいぎょう</rt></ruby></span>,
      lead: "朝6時も、夜遅くも、リズムに合わせて。",
      body: "テスト前の追い込みも、朝の静かな1時間も、自分のリズムで。深夜は受付スタッフ常駐ではないけれど、顔認証で安心して入れる。",
      Icon: IconClock,
      bg: "var(--brand-sand-soft)"
    },
    {
      no: "03",
      title: <span><ruby>顔認証<rt>かおにんしょう</rt></ruby>セキュリティ</span>,
      lead: "会員以外は入れません。",
      body: "登録した会員しか入室できないから、夜遅くも安心。荷物を席に置いて飲み物を取りに行ける、そんな空気感を仕組みでつくっています。",
      Icon: IconShield,
      bg: "var(--brand-coral-soft)"
    },
  ];
  return (
    <section id="strengths" className="section" style={{ background: "var(--bg)", position: "relative" }}>
      <Watermark text="3 STRENGTHS" top={30} right={-10} size={150} tone="mint" />
      <div className="wrap">
        <SectionHead
          en="Three Strengths"
          jp={<span><ruby>続<rt>つづ</rt></ruby>けられる<ruby>理由<rt>りゆう</rt></ruby>が、3つあります。</span>}
        />
        <div className="grid-3">
          {items.map(it => (
            <div key={it.no} className="card" style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div style={{ background: it.bg, borderRadius: 14, padding: 24, display: "grid", placeItems: "center", height: 140 }}>
                <it.Icon />
              </div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                <span style={{ fontFamily: "var(--font-tag)", fontWeight: 700, color: "var(--brand-coral)", fontSize: 12, letterSpacing: "0.18em" }}>NO.{it.no}</span>
              </div>
              <h3 className="h-jp-900" style={{ fontSize: 22, margin: 0 }}>{it.title}</h3>
              <p style={{ fontFamily: "var(--font-heading)", fontWeight: 700, color: "var(--brand-coral)", margin: 0, fontSize: 14 }}>{it.lead}</p>
              <p style={{ color: "var(--text-muted)", margin: 0, lineHeight: 1.95, fontSize: 14 }}>{it.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   §06 NETWORK
   ============================================================ */
function Network() {
  const stores = [
    { name: "知多半田駅前店", sub: "weekday focus", body: "知多半田駅で乗り降りする方の、平日の自習拠点。改札から徒歩60秒、寄り道感覚で。", color: "var(--brand-mint-pale)", chip: "MAIN" },
    { name: "住吉店", sub: "family time @ Sumiyoshi", body: "家族で使える、週末向けの新店舗。広々したラウンジと個別ブース。", color: "var(--brand-coral-soft)", chip: "NEW" },
    { name: "清城店", sub: "weekend & holidays", body: "JR半田駅エリア。駐車場9台あり、長期休暇に車で長時間こもれる拠点。", color: "var(--brand-sand-soft)", chip: "OPEN" },
  ];
  return (
    <section id="network" className="section" style={{ background: "var(--bg)", position: "relative" }}>
      <Watermark text="3 BASES" top={30} left={-10} size={160} tone="coral" />
      <div className="wrap">
        <SectionHead
          en="One Card, Three Bases"
          jp={<span>3<ruby>拠点<rt>きょてん</rt></ruby>、ひとつの<ruby>会員証<rt>かいいんしょう</rt></ruby>。</span>}
          sub="平日は駅前で本人ひとり。週末は住吉店で家族と一緒に。"
        />
        <div className="grid-3">
          {stores.map(s => (
            <div key={s.name} className="card" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <div style={{ background: s.color, borderRadius: 14, height: 130, position: "relative", overflow: "hidden" }}>
                <div style={{
                  position: "absolute", top: 12, left: 14,
                  background: s.chip === "NEW" ? "var(--brand-coral)" : "#fff",
                  color: s.chip === "NEW" ? "#fff" : "var(--brand-navy)",
                  padding: "4px 10px", borderRadius: 6,
                  fontFamily: "var(--font-tag)", fontWeight: 700, fontSize: 11, letterSpacing: "0.16em"
                }}>{s.chip}</div>
                <div style={{ position: "absolute", bottom: 14, right: 14 }}>
                  {s.chip === "NEW" ? <IconLounge /> : s.chip === "MAIN" ? <IconBooth /> : <IconCoffee />}
                </div>
              </div>
              <h3 className="h-jp-900" style={{ fontSize: 20, margin: 0 }}>{s.name}</h3>
              <div style={{ fontFamily: "var(--font-tag)", fontStyle: "italic", color: "var(--brand-coral)", fontSize: 13 }}>{s.sub}</div>
              <p style={{ color: "var(--text-muted)", margin: 0, lineHeight: 1.95, fontSize: 14 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   §07 CATCHMENT MAP
   ============================================================ */
function Catchment() {
  const schools = [
    "半田高校", "半田東高校", "半田工業", "半田農業", "半田商業",
    "東海高校", "名古屋高校", "中部大春日丘", "東邦高校", "桜花学園",
    "名城大附属", "南山", "聖霊", "愛知淑徳", "椙山女学園",
  ];
  const [hovered, setHovered] = useStateS(null);
  return (
    <section id="catchment" className="section" style={{ background: "var(--brand-mint-soft)", position: "relative" }}>
      <Watermark text="知多半島" top={30} right={-10} size={180} tone="sand" />
      <div className="wrap">
        <SectionHead
          en="Catchment"
          jp={<span><ruby>知多半島<rt>ちたはんとう</rt></ruby>から、<ruby>名古屋<rt>なごや</rt></ruby>まで。</span>}
          sub="知多半田駅に降りる高校生、みんな対象です。"
        />
        <div className="grid-2" style={{ alignItems: "center", gap: 56 }}>
          <div>
            <CatchmentMap />
          </div>
          <div>
            <h3 className="h-jp-900" style={{ fontSize: 22, margin: "0 0 18px" }}>
              <ruby>対応<rt>たいおう</rt></ruby><ruby>高校<rt>こうこう</rt></ruby>（<ruby>例<rt>れい</rt></ruby>）
            </h3>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              {schools.map(s => (
                <span key={s}
                  onMouseEnter={() => setHovered(s)}
                  onMouseLeave={() => setHovered(null)}
                  style={{
                    padding: "8px 14px",
                    borderRadius: 8,
                    background: hovered === s ? "var(--brand-coral)" : "#fff",
                    color: hovered === s ? "#fff" : "var(--brand-navy)",
                    fontFamily: "var(--font-heading)",
                    fontWeight: 700,
                    fontSize: 13,
                    cursor: "default",
                    boxShadow: hovered === s ? "0 4px 12px rgba(229,101,74,0.25)" : "0 2px 6px rgba(15,23,38,0.04)",
                    transition: "all .15s ease"
                  }}>
                  {s}
                </span>
              ))}
              <span style={{ padding: "8px 14px", borderRadius: 8, background: "transparent", color: "var(--text-muted)", fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: 13 }}>… and more</span>
            </div>
            <p style={{ color: "var(--text-muted)", marginTop: 24, lineHeight: 2 }}>
              <ruby>知多半田駅<rt>ちたはんだえき</rt></ruby>に<ruby>停<rt>と</rt></ruby>まる<ruby>路線<rt>ろせん</rt></ruby>： <strong style={{ color: "var(--brand-navy)" }}>名鉄河和線・JR武豊線</strong>。
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   §08 FACILITIES
   ============================================================ */
function Facilities() {
  const items = [
    { img: "assets/facility-booth.png", title: "個別ブース", body: "仕切りに囲まれた、自分だけの席。集中したいときに。", specs: ["全12席", "電源・USB", "デスクライト"] },
    { img: "assets/facility-cafe.png", title: "ラウンジ", body: "友達と一緒に、教え合いながら使える広めのテーブル。", specs: ["6名×4卓", "ホワイトボード", "ドリンク無料"] },
    { img: "assets/facility-study.png", title: "ワーク環境", body: "高速Wi-Fi、有線LAN、印刷もOK。", specs: ["1Gbps", "白黒5円", "カラー20円"] },
  ];
  return (
    <section id="facilities" className="section" style={{ background: "var(--bg)", position: "relative" }}>
      <Watermark text="FACILITIES" top={30} right={-10} size={150} tone="mint" />
      <div className="wrap">
        <SectionHead
          en="Facilities"
          jp={<span><ruby>設備<rt>せつび</rt></ruby>のご<ruby>案内<rt>あんない</rt></ruby>。</span>}
        />
        <div className="grid-3">
          {items.map(it => (
            <div key={it.title} className="card" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <img src={it.img} alt={it.title} className="photo photo--facility" />
              <h3 className="h-jp-900" style={{ fontSize: 20, margin: 0 }}>{it.title}</h3>
              <p style={{ color: "var(--text-muted)", margin: 0, lineHeight: 1.95, fontSize: 14 }}>{it.body}</p>
              <ul style={{ listStyle: "none", padding: 0, margin: "8px 0 0", display: "flex", flexDirection: "column", gap: 6 }}>
                {it.specs.map(s => (
                  <li key={s} style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: "var(--brand-navy)", fontFamily: "var(--font-heading)", fontWeight: 700 }}>
                    <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--brand-coral)" }} />
                    {s}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   §09 PRICING
   ============================================================ */
function Pricing() {
  return (
    <section id="pricing" className="section" style={{ background: "var(--bg)", position: "relative" }}>
      <Watermark text="PRICE" top={30} left={-10} size={180} tone="coral" />
      <div className="wrap">
        <SectionHead
          en="Pricing"
          jp={<span><ruby>毎日<rt>まいにち</rt></ruby><ruby>通<rt>かよ</rt></ruby>うほど、お<ruby>得<rt>とく</rt></ruby>になる。</span>}
        />
        <div className="card card--lg" style={{
          maxWidth: 720, margin: "0 auto",
          borderRadius: "var(--radius-lg)",
          padding: 48,
          background: "linear-gradient(160deg, #fff 60%, var(--brand-mint-soft))",
          textAlign: "center",
          position: "relative"
        }}>
          <span className="chip chip--coral-soft" style={{ fontSize: 13, padding: "6px 14px", letterSpacing: "0.18em", fontFamily: "var(--font-tag)" }}>HIGH SCHOOL PLAN</span>
          <h3 className="h-jp-900" style={{ fontSize: 28, margin: "20px 0 10px" }}>
            <ruby>高校生<rt>こうこうせい</rt></ruby>プラン
          </h3>
          <div style={{ display: "flex", justifyContent: "center", alignItems: "baseline", gap: 32, margin: "32px 0 12px", flexWrap: "wrap" }}>
            <div>
              <div className="pricing-amount" style={{ fontFamily: "var(--font-heading)", fontWeight: 900, fontSize: 64, color: "var(--brand-navy)", lineHeight: 1 }}>
                ¥4,980
              </div>
              <div style={{ color: "var(--text-muted)", fontFamily: "var(--font-heading)", fontWeight: 700, marginTop: 6 }}>/ 月（税抜）</div>
            </div>
            <div style={{ width: 1, height: 60, background: "var(--hairline)" }} />
            <div>
              <div className="pricing-perday" style={{ fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: 28, color: "var(--brand-coral)", lineHeight: 1 }}>
                ¥166
              </div>
              <div style={{ color: "var(--text-muted)", fontFamily: "var(--font-heading)", fontWeight: 700, marginTop: 6 }}>/ 日（30日換算）</div>
            </div>
          </div>
          <p style={{ color: "var(--text)", lineHeight: 2, margin: "0 0 14px", maxWidth: 460, marginLeft: "auto", marginRight: "auto" }}>
            24時間いつでも入退室可能・3拠点共通会員証・Wi-Fi/電源・ドリンク無料・印刷別途。
          </p>
          <p style={{ color: "var(--brand-navy)", fontFamily: "var(--font-heading)", fontWeight: 700, fontSize: 14, lineHeight: 1.8, margin: "0 0 24px", maxWidth: 460, marginLeft: "auto", marginRight: "auto" }}>
            <span style={{ background: "var(--brand-sand-soft)", padding: "4px 10px", borderRadius: 6, marginRight: 8 }}>POINT</span>
            一般的な学習塾の月謝（2〜4万円）と比べて、毎日通っても圧倒的に安い。
          </p>
          <a className="btn btn--primary" href="#contact">
            <ruby>見学<rt>けんがく</rt></ruby>を<ruby>予約<rt>よやく</rt></ruby>する <span className="arrow">→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   §10 PARENTS
   ============================================================ */
function Parents() {
  const checks = [
    "顔認証で会員以外は入室不可",
    "防犯カメラ録画(24h)",
    "深夜帯の入室通知（保護者LINE連携可）",
    "個人情報は厳重管理",
  ];
  return (
    <section id="parents" className="section" style={{ background: "var(--brand-sand-soft)", position: "relative" }}>
      <Watermark text="保護者" top={30} right={-10} size={180} tone="coral" />
      <div className="wrap">
        <div className="grid-2" style={{ alignItems: "center", gap: 56 }}>
          <div>
            <SectionHead
              en="For Parents"
              jp={<span><ruby>家<rt>いえ</rt></ruby>では、ゆっくりさせて<br/>あげたい。</span>}
              sub="夕食の時間は、ちゃんと家族で囲みたい。"
            />
            <p style={{ color: "var(--text)", lineHeight: 2, margin: "0 0 28px" }}>
              受験勉強は、家でも続けようとすれば続けられます。けれど、家族と過ごす時間や、ゆっくり休める夜は、後から取り戻せません。<br/>
              駅前の「もう1時間」で勉強を効率よく終わらせるから、家で過ごす時間に勉強を持ち込まずに済む。家族と一緒の時間が、ぐっと増えます。
            </p>
            <div style={{ background: "#fff", borderRadius: 16, padding: 24, boxShadow: "var(--shadow-soft)" }}>
              <h4 style={{ fontFamily: "var(--font-heading)", fontWeight: 900, fontSize: 16, margin: "0 0 14px", color: "var(--brand-navy)", display: "flex", alignItems: "center", gap: 10 }}>
                <span style={{ width: 28, height: 28, borderRadius: "50%", background: "var(--brand-coral-soft)", display: "grid", placeItems: "center" }}>
                  <IconLockKey />
                </span>
                セキュリティ・<ruby>運営<rt>うんえい</rt></ruby>
              </h4>
              <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
                {checks.map(c => (
                  <li key={c} style={{ display: "flex", alignItems: "center", gap: 10, color: "var(--text)", fontSize: 14 }}>
                    <span style={{ width: 18, height: 18, borderRadius: "50%", background: "var(--brand-mint)", color: "#fff", display: "grid", placeItems: "center", fontSize: 12, fontWeight: 700, flexShrink: 0 }}>✓</span>
                    {c}
                  </li>
                ))}
              </ul>
            </div>
            <div style={{ marginTop: 24, display: "flex", gap: 12, flexWrap: "wrap" }}>
              <a className="btn btn--navy" href="#contact"><ruby>保護者<rt>ほごしゃ</rt></ruby><ruby>説明会<rt>せつめいかい</rt></ruby>を<ruby>予約<rt>よやく</rt></ruby> <span className="arrow">→</span></a>
            </div>
          </div>
          <div>
            <img src="assets/parents-family.png" alt="家族の食卓" className="photo photo--parents" />
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   §11 FAQ
   ============================================================ */
const FAQ = [
  ["契約は何ヶ月から？", "1ヶ月単位で、いつでも開始・休会・解約できます。受験のタイミングに合わせて利用する方が多いです。"],
  ["深夜は本当に大丈夫？", "顔認証で会員以外は入れません。防犯カメラも24時間録画しているため、深夜利用も安心です。"],
  ["友達と一緒に使える？", "ラウンジ席なら教え合いもOK。集中したいときは個別ブース、というように席を選べます。"],
  ["まずは見学できる？", "もちろん歓迎です。フォームから見学を予約してください。"],
  ["他店舗との行き来は？", "同じ会員証で3拠点（知多半田・住吉・清城）すべて利用できます。"],
];
function FAQs() {
  const [open, setOpen] = useStateS(0);
  return (
    <section id="faq" className="section" style={{ background: "var(--bg)", position: "relative" }}>
      <Watermark text="Q & A" top={30} right={-10} size={180} tone="mint" />
      <div className="wrap">
        <SectionHead
          en="Frequently Asked"
          jp={<span>よくある<ruby>質問<rt>しつもん</rt></ruby>。</span>}
        />
        <div style={{ display: "flex", flexDirection: "column", gap: 12, maxWidth: 800, margin: "0 auto" }}>
          {FAQ.map(([q, a], i) => (
            <button key={i}
              onClick={() => setOpen(open === i ? -1 : i)}
              style={{
                background: "#fff",
                border: "none",
                borderRadius: 12,
                padding: "20px 24px",
                boxShadow: "var(--shadow-soft)",
                textAlign: "left",
                cursor: "pointer",
                display: "flex",
                flexDirection: "column",
                gap: open === i ? 14 : 0,
                fontFamily: "inherit"
              }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16 }}>
                <span style={{ display: "flex", alignItems: "baseline", gap: 14 }}>
                  <span style={{ fontFamily: "var(--font-heading)", fontWeight: 900, color: "var(--brand-coral)", fontSize: 14 }}>Q.0{i+1}</span>
                  <span style={{ fontFamily: "var(--font-heading)", fontWeight: 700, color: "var(--brand-navy)", fontSize: 16 }}>{q}</span>
                </span>
                <span style={{
                  width: 28, height: 28, borderRadius: "50%",
                  background: open === i ? "var(--brand-coral)" : "var(--brand-coral-soft)",
                  color: open === i ? "#fff" : "var(--brand-coral)",
                  display: "grid", placeItems: "center",
                  fontSize: 18, fontWeight: 700,
                  transition: "all .18s ease",
                  transform: open === i ? "rotate(45deg)" : "rotate(0)",
                  flexShrink: 0
                }}>+</span>
              </div>
              {open === i && (
                <p style={{ margin: 0, color: "var(--text)", lineHeight: 2, paddingLeft: 56 }}>{a}</p>
              )}
            </button>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   §12 STEPS
   ============================================================ */
function Steps() {
  const steps = [
    { Ill: StepLineUp, no: "01", title: "オンラインで予約", body: "見学希望日を選んで送信。当日中に返信します。", chip: "5分" },
    { Ill: StepTour, no: "02", title: "店内を見学", body: "実際にブースとラウンジを体験。設備・営業時間など気になることを質問。", chip: "30分" },
    { Ill: StepCardKey, no: "03", title: "その日から利用開始", body: "顔認証を登録すれば、その日から24時間使えます。", chip: "即日" },
  ];
  return (
    <section id="steps" className="section" style={{ background: "var(--bg)", position: "relative" }}>
      <Watermark text="STEPS" top={30} left={-10} size={170} tone="sand" />
      <div className="wrap">
        <SectionHead
          en="How to Join"
          jp={<span><ruby>入会<rt>にゅうかい</rt></ruby>の<ruby>流<rt>なが</rt></ruby>れ。</span>}
        />
        <div className="grid-3">
          {steps.map(s => (
            <div key={s.no} className="card" style={{ display: "flex", flexDirection: "column", gap: 14 }}>
              <s.Ill />
              <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
                <span style={{ fontFamily: "var(--font-heading)", fontWeight: 900, color: "var(--brand-coral)", fontSize: 32, lineHeight: 1 }}>{s.no}</span>
                <span className="chip chip--mint">{s.chip}</span>
              </div>
              <h3 className="h-jp-900" style={{ fontSize: 20, margin: 0 }}>{s.title}</h3>
              <p style={{ color: "var(--text-muted)", margin: 0, lineHeight: 1.95, fontSize: 14 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   §13 CONTACT + FOOTER
   ============================================================ */
function Contact() {
  return (
    <section id="contact" className="section" style={{ background: "var(--gradient-soft)", position: "relative", overflow: "hidden" }}>
      <Watermark text="P・SPO" top={30} right={-10} size={220} tone="mint" />
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <div className="h-en" style={{ marginBottom: 10 }}>VISIT US</div>
          <h2 style={{
            fontFamily: "var(--font-heading)", fontWeight: 900,
            fontSize: "clamp(28px, 4vw, 42px)",
            color: "var(--brand-navy)", lineHeight: 1.5, margin: 0
          }}>
            <ruby>帰宅前<rt>きたくまえ</rt></ruby>の1<ruby>時間<rt>じかん</rt></ruby>が、<br/>
            <span style={{ color: "var(--brand-coral)" }}><ruby>今日<rt>きょう</rt></ruby>のすべて</span>を<ruby>変<rt>か</rt></ruby>える。
          </h2>
        </div>
        <div style={{ display: "flex", justifyContent: "center", gap: 12, flexWrap: "wrap", marginBottom: 64 }}>
          <a className="btn btn--primary" href="#">
            <ruby>見学<rt>けんがく</rt></ruby>を<ruby>予約<rt>よやく</rt></ruby>する <span className="arrow">→</span>
          </a>
          <a className="btn btn--ghost" href="#">LINEで質問</a>
          <a className="btn btn--navy" href="#">
            <ruby>資料<rt>しりょう</rt></ruby>を<ruby>請求<rt>せいきゅう</rt></ruby> <span className="arrow">→</span>
          </a>
        </div>

        <div className="grid-3">
          {[
            { name: "知多半田駅前店", addr: "愛知県半田市雁宿町1-34", tel: "0569-XX-XXXX", hour: "24時間営業", color: "var(--brand-mint-pale)" },
            { name: "住吉店", addr: "愛知県半田市住吉町5-107-2", tel: "0569-XX-XXXX", hour: "24時間営業", color: "var(--brand-coral-soft)" },
            { name: "清城店", addr: "愛知県半田市清城町1-2-4", tel: "0569-XX-XXXX", hour: "06:00–23:00", color: "var(--brand-sand-soft)" },
          ].map(s => (
            <div key={s.name} className="card" style={{ background: "rgba(255,255,255,0.92)" }}>
              <div style={{ width: 36, height: 36, borderRadius: "50%", background: s.color, marginBottom: 14 }} />
              <h3 className="h-jp-900" style={{ fontSize: 18, margin: "0 0 10px" }}>{s.name}</h3>
              <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 13, color: "var(--text-muted)" }}>
                <div><strong style={{ color: "var(--brand-navy)" }}>住所：</strong>{s.addr}</div>
                <div><strong style={{ color: "var(--brand-navy)" }}>TEL：</strong>{s.tel}</div>
                <div><strong style={{ color: "var(--brand-navy)" }}>営業：</strong>{s.hour}</div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* footer */}
      <div style={{ marginTop: 80, paddingTop: 28, position: "relative" }}>
        <div style={{ height: 3, background: "var(--gradient-brand)", marginBottom: 28 }} />
        <div className="wrap" style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 20, color: "var(--text-muted)", fontSize: 12 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
            <span style={{
              width: 28, height: 28, borderRadius: "50%",
              background: "conic-gradient(from 220deg, #7BC4B5, #FCC890, #E5654A, #7BC4B5)"
            }} />
            <span style={{ fontFamily: "var(--font-tag)", fontWeight: 700, color: "var(--brand-navy)" }}>P・SPO CHITACOH</span>
            <span style={{ fontFamily: "var(--font-tag)", fontStyle: "italic" }}>EVERYDAY MATCHING FOR YOUR LIFE</span>
          </div>
          <div>© 2026 P・SPO CHITACOH. All rights reserved.</div>
        </div>
      </div>
    </section>
  );
}

/* expose */
Object.assign(window, { Entrance, Places, Reframe, Routes, Strengths, Network, Catchment, Facilities, Pricing, Parents, FAQs, Steps, Contact });