// Common page sections (hero, numbers, problems, reasons, voices, flow, FAQ, CTA)

const { useState, useEffect, useRef } = React;

// ---------- Reveal-on-scroll ----------
function Reveal({ children, as: Tag = "div", className = "", style = {} }) {
  return <Tag className={className} style={style}>{children}</Tag>;
}

// ---------- Header (パーチェ公式 TOP のヘッダーに合わせた構成) ----------
function SiteHeader() {
  const SITE_BASE = "https://pace.co.jp";
  const QUOTE_URL = SITE_BASE + "/#contact";
  const { isMobile, isTablet } = (window.useViewport || (() => ({ isMobile: false, isTablet: false })))();
  const compact = isMobile || isTablet;
  const [menuOpen, setMenuOpen] = useState(false);

  const navItems = [
    { label: "サービス一覧",   href: SITE_BASE + "/#services" },
    { label: "社会貢献活動",   href: SITE_BASE + "/#csr" },
    { label: "トピックス",     href: SITE_BASE + "/#topics" },
    { label: "会社概要",       href: SITE_BASE + "/about.html" },
  ];

  const linkStyle = {
    fontFamily: "'Noto Serif JP', serif",
    fontSize: 13, color: "rgba(26,26,26,0.7)",
    textDecoration: "none", letterSpacing: "0.15em", fontWeight: 500,
    paddingBottom: 4, whiteSpace: "nowrap",
    transition: "color .3s ease",
  };

  return (
    <header
      style={{
        position: "fixed", top: 0, left: 0, right: 0, zIndex: 50,
        background: "rgba(247,244,239,0.97)",
        backdropFilter: "saturate(140%) blur(20px)",
        WebkitBackdropFilter: "saturate(140%) blur(20px)",
        borderBottom: "1px solid rgba(26,26,26,0.07)",
        transition: "all .4s ease",
      }}
    >
      <div style={{
        maxWidth: 1280, margin: "0 auto",
        padding: isMobile ? "0 20px" : "0 56px",
        height: isMobile ? 60 : 76, display: "flex", alignItems: "center", justifyContent: "space-between",
      }}>
        {/* ロゴ */}
        <a href={SITE_BASE + "/"} style={{ display: "flex", alignItems: "center", textDecoration: "none", flexShrink: 0 }}>
          <img
            src={SITE_BASE + "/images/pace-logo.png"}
            alt="パーチェ株式会社"
            style={{ height: isMobile ? 32 : 38, width: "auto", display: "block" }}
          />
        </a>

        {/* PC: ナビ表示 / モバイル: ハンバーガー */}
        {!compact ? (
          <nav style={{ display: "flex", gap: 36, alignItems: "center" }}>
            {navItems.map((it) => (
              <a key={it.label} href={it.href} style={linkStyle}>{it.label}</a>
            ))}
            <a href={QUOTE_URL} target="_blank" rel="noopener noreferrer" style={{
              border: "1px solid rgba(184,148,31,0.5)",
              padding: "9px 22px", borderRadius: 2,
              fontFamily: "'Noto Serif JP', serif",
              fontSize: 12, letterSpacing: "0.15em",
              color: "rgba(26,26,26,0.75)", fontWeight: 500, textDecoration: "none",
            }}>お見積りフォーム</a>
          </nav>
        ) : (
          <button
            onClick={() => setMenuOpen((v) => !v)}
            aria-label="メニュー"
            style={{
              display: "flex", flexDirection: "column", gap: 6,
              background: "none", border: "none", cursor: "pointer", padding: 10,
            }}
          >
            <span style={{ display: "block", width: 22, height: 2, background: "rgba(26,26,26,0.7)",
              transform: menuOpen ? "translateY(8px) rotate(45deg)" : "none",
              transition: "transform .25s ease" }} />
            <span style={{ display: "block", width: 22, height: 2, background: "rgba(26,26,26,0.7)",
              opacity: menuOpen ? 0 : 1, transition: "opacity .25s ease" }} />
            <span style={{ display: "block", width: 22, height: 2, background: "rgba(26,26,26,0.7)",
              transform: menuOpen ? "translateY(-8px) rotate(-45deg)" : "none",
              transition: "transform .25s ease" }} />
          </button>
        )}
      </div>

      {/* モバイル: 全画面メニュー */}
      {compact && menuOpen && (
        <div style={{
          position: "fixed", top: isMobile ? 60 : 76, left: 0, right: 0, bottom: 0,
          background: "rgba(15, 28, 41, 0.97)",
          backdropFilter: "blur(20px)",
          display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "center",
          gap: 32, zIndex: 49,
        }}>
          {navItems.map((it) => (
            <a key={it.label} href={it.href} onClick={() => setMenuOpen(false)} style={{
              fontFamily: "'Shippori Mincho', serif",
              fontSize: 20, color: "rgba(255,255,255,0.85)",
              textDecoration: "none", letterSpacing: "0.3em",
            }}>{it.label}</a>
          ))}
          <a href={QUOTE_URL} target="_blank" rel="noopener noreferrer" onClick={() => setMenuOpen(false)} style={{
            marginTop: 8,
            border: "1px solid rgba(184,148,31,0.6)",
            padding: "12px 32px", borderRadius: 2,
            fontFamily: "'Noto Serif JP', serif",
            fontSize: 14, letterSpacing: "0.2em",
            color: "#B8941F", fontWeight: 500, textDecoration: "none",
          }}>お見積りフォーム</a>
        </div>
      )}
    </header>
  );
}

// ---------- Hero ----------
function Hero() {
  return (
    <section style={{
      minHeight: "100vh", position: "relative",
      background: "linear-gradient(135deg, #2d2a24 0%, #151310 100%)",
      color: "#f8f6f1", overflow: "hidden",
    }}>
      {/* subtle grain */}
      <div style={{
        position: "absolute", inset: 0,
        backgroundImage: "radial-gradient(circle at 20% 30%, rgba(184,148,31,.07), transparent 50%), radial-gradient(circle at 80% 70%, rgba(184,148,31,.05), transparent 50%)",
        pointerEvents: "none",
      }} />
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "180px 40px 120px", display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center", position: "relative" }}>
        <div>
          <Reveal>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#B8941F", fontSize: 20, letterSpacing: "0.1em", marginBottom: 32 }}>
              Strategic Novelty Service
            </div>
          </Reveal>
          <Reveal delay={0.1}>
            <h1 style={{
              fontFamily: "'Shippori Mincho', serif", fontWeight: 500, fontSize: 60, lineHeight: 1.4, margin: 0, letterSpacing: "0.02em",
            }}>
              ノベルティ戦略の本質は、<br />
              <span style={{ color: "#B8941F" }}>経営戦略</span>である。
            </h1>
          </Reveal>
          <Reveal delay={0.2}>
            <div style={{
              fontFamily: "'Noto Sans JP', sans-serif", fontWeight: 300, fontSize: 17, lineHeight: 2,
              marginTop: 40, color: "rgba(248,246,241,.95)", maxWidth: 560,
            }}>
              <p style={{ margin: 0 }}>
                企業戦略やイベントの本質に沿った、オリジナルノベルティを製作いたします。御社の目指す将来像へ近づくために、戦略的にノベルティをご活用ください。
              </p>
              <p style={{ margin: "14px 0 0" }}>
                ECO素材・バイオマス素材など、環境に配慮した仕様もすべてご相談いただけます。
              </p>
              <p style={{ margin: "14px 0 0" }}>
                世界陸上・デフリンピック・ホノルルマラソンといった大型イベントから、大企業のノベルティ戦略まで——陰で支えてきた弊社が、「配って終わり」ではないオリジナルノベルティを、圧倒的なコスト感と精度でお届けします。
              </p>
            </div>
          </Reveal>
          <Reveal delay={0.3}>
            <div style={{ display: "flex", gap: 16, marginTop: 56 }}>
              <a href="#catalog" style={{
                background: "#B8941F", color: "#151310", padding: "20px 36px", textDecoration: "none",
                fontFamily: "'Noto Sans JP', sans-serif", fontSize: 16, letterSpacing: "0.18em", fontWeight: 500, borderRadius: 3,
                display: "inline-flex", alignItems: "center", gap: 12,
              }}>
                商品ラインナップを見る <span style={{ fontSize: 20 }}>→</span>
              </a>
              <a href="#contact" style={{
                background: "transparent", color: "#f8f6f1", padding: "20px 36px", textDecoration: "none",
                border: "1px solid rgba(248,246,241,.3)",
                fontFamily: "'Noto Sans JP', sans-serif", fontSize: 16, letterSpacing: "0.18em", fontWeight: 400, borderRadius: 3,
              }}>
                無料お見積り
              </a>
            </div>
          </Reveal>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
          {[
            { tag: "国際スポーツイベント", title: "世界陸上 関連ノベルティ", year: "2020 — 2025", n: "01" },
            { tag: "市民マラソン", title: "ホノルルマラソン参加賞", year: "2018 — 2024", n: "02" },
            { tag: "企業周年事業", title: "大手企業 創業100周年記念品", year: "2023", n: "03" },
          ].map((c, i) => (
            <Reveal key={c.title} delay={0.15 + i * 0.1}>
              <div style={{
                background: "rgba(248,246,241,.04)", border: "1px solid rgba(248,246,241,.1)",
                padding: "28px 32px", borderRadius: 4, display: "flex", justifyContent: "space-between", alignItems: "center",
              }}>
                <div>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#B8941F", fontSize: 14, letterSpacing: "0.15em", marginBottom: 8 }}>{c.tag}</div>
                  <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 20, fontWeight: 500 }}>{c.title}</div>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 16, color: "rgba(248,246,241,.85)", marginTop: 6 }}>{c.year}</div>
                </div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 56, fontWeight: 300, color: "rgba(184,148,31,.6)", fontStyle: "italic" }}>{c.n}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
      <div style={{
        position: "absolute", bottom: 40, left: "50%", transform: "translateX(-50%)",
        fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "rgba(248,246,241,.78)",
        fontSize: 14, letterSpacing: "0.3em", display: "flex", flexDirection: "column", alignItems: "center", gap: 12,
      }}>
        SCROLL
        <div style={{ width: 1, height: 48, background: "linear-gradient(to bottom, rgba(248,246,241,.78), transparent)" }} />
      </div>
    </section>
  );
}

// ---------- Problems ----------
function Problems() {
  const items = [
    { n: "01", title: "配って終わるノベルティ", body: "「もらった瞬間に忘れられる」「翌週には捨てられている」——配ること自体が目的化し、施策として何を持ち帰ってもらうのかが曖昧なまま予算だけが消えていく。" },
    { n: "02", title: "課題と切り離された企画", body: "営業課題・採用課題・広報課題——本来ノベルティで解きたいはずの課題が、商品カタログから選ぶ瞬間に置き去りになる。記念品でも宣伝品でもない一手が欲しい。" },
    { n: "03", title: "少ロットだと選択肢が画一的", body: "少量のロットでは、既製品への名入れに収まりがち。ブランドにふさわしい質感や、差別化された設計を、規模を理由に諦めることになる。" },
  ];
  return (
    <section style={{ padding: "140px 40px", background: "#f8f6f1" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <Reveal>
          <SectionLabel en="Concerns" jp="こんなお悩み、ありませんか" />
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "#eae7e2", marginTop: 80, border: "1px solid #eae7e2" }}>
          {items.map((it, i) => (
            <Reveal key={it.n} delay={i * 0.1}>
              <div style={{ background: "#f8f6f1", padding: "56px 48px", height: "100%" }}>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 64, fontStyle: "italic", color: "#B8941F", fontWeight: 300, lineHeight: 1, marginBottom: 32 }}>
                  {it.n}
                </div>
                <h3 style={{ fontFamily: "'Shippori Mincho', serif", fontWeight: 500, fontSize: 22, lineHeight: 1.6, color: "#2d2520", margin: 0 }}>
                  {it.title}
                </h3>
                <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontWeight: 300, fontSize: 16, lineHeight: 2, color: "#3d3530", marginTop: 24 }}>
                  {it.body}
                </p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Reasons ----------
function Reasons() {
  const items = [
    { n: "01", t: "課題から逆算して設計", b: "商品カタログから選ぶのではなく、御社の経営・営業・広報課題から逆算してノベルティを設計します。" },
    { n: "02", t: "国際水準の製造管理", b: "世界陸上・ホノルルマラソンなど、海外メディアの目に触れる現場で選ばれ続けてきた品質基準で製作します。" },
    { n: "03", t: "少ロットでもフルカスタム", b: "金型・素材・印刷・パッケージまで、少量でも差別化を前提に組み上げます。" },
    { n: "04", t: "企画〜納品まで一貫対応", b: "社内デザイナー・OEM工場・物流網を自社で抱え、複数業者を束ねる手間を引き受けます。" },
  ];
  return (
    <section style={{ background: "#2d2a24", color: "#f8f6f1", padding: "140px 40px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <Reveal>
          <SectionLabel en="Why PACE" jp="パーチェが選ばれる理由" dark />
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 0, marginTop: 80 }}>
          {items.map((it, i) => (
            <Reveal key={it.n} delay={i * 0.08}>
              <div style={{
                padding: "0 36px", borderLeft: i === 0 ? "none" : "1px solid rgba(248,246,241,.12)", height: "100%",
              }}>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#B8941F", fontSize: 16, letterSpacing: "0.2em", marginBottom: 28 }}>
                  REASON {it.n}
                </div>
                <h3 style={{ fontFamily: "'Shippori Mincho', serif", fontWeight: 500, fontSize: 22, lineHeight: 1.7, margin: 0 }}>
                  {it.t}
                </h3>
                <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontWeight: 300, fontSize: 16, lineHeight: 2.1, marginTop: 28, color: "rgba(248,246,241,.92)" }}>
                  {it.b}
                </p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Voices (testimonials) ----------
function Voices() {
  const items = [
    { initial: "A", company: "A社 — 国際スポーツイベント主催", role: "事業推進部 / マネージャー", body: "海外メディアの目にも触れる現場で、品質に妥協はできなかった。短納期にもかかわらず、想定を上回る仕上がりで届いた。", tags: ["世界陸上", "1,200個"] },
    { initial: "B", company: "B社 — IT企業マーケティング部", role: "プロダクトマーケティング / 部長", body: "展示会のブースで配布物が埋もれない、というのが選定の決め手。商談数の伸びという施策側のKPIにも数字で返ってきた。", tags: ["展示会", "300個"] },
    { initial: "C", company: "C市 — 地方自治体広報課", role: "シティプロモーション / 主査", body: "50個という少ロットでも、課題ヒアリングから入って設計いただけた。市民への配布後、関連事業への問い合わせが増えた。", tags: ["周年記念", "50個"] },
  ];
  return (
    <section style={{ padding: "140px 40px", background: "#f8f6f1" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <Reveal>
          <SectionLabel en="Voices" jp="お客様の声" />
        </Reveal>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 32, marginTop: 80 }}>
          {items.map((v, i) => (
            <Reveal key={v.initial} delay={i * 0.1}>
              <div style={{ background: "#fff", border: "1px solid #eae7e2", padding: "48px 40px", borderRadius: 4, height: "100%", display: "flex", flexDirection: "column" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 20, marginBottom: 32 }}>
                  <div style={{
                    width: 64, height: 64, borderRadius: "50%", border: "1px solid #B8941F",
                    display: "flex", alignItems: "center", justifyContent: "center",
                    fontFamily: "'Cormorant Garamond', serif", fontSize: 32, fontStyle: "italic", color: "#B8941F", fontWeight: 400,
                  }}>{v.initial}</div>
                  <div>
                    <div style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 16, fontWeight: 500, color: "#2d2520" }}>{v.company}</div>
                    <div style={{ fontFamily: "'Noto Sans JP', sans-serif", fontSize: 14, color: "#3d3530", marginTop: 6 }}>{v.role}</div>
                  </div>
                </div>
                <p style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 18, lineHeight: 2.1, color: "#2d2520", margin: 0, flex: 1 }}>
                  「{v.body}」
                </p>
                <div style={{ display: "flex", gap: 8, marginTop: 32, paddingTop: 24, borderTop: "1px solid #eae7e2" }}>
                  {v.tags.map((t) => (
                    <span key={t} style={{
                      fontFamily: "'Noto Sans JP', sans-serif", fontSize: 13, color: "#3d3530",
                      border: "1px solid #d8d3cc", padding: "6px 12px", borderRadius: 999, letterSpacing: "0.1em",
                    }}>{t}</span>
                  ))}
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Flow ----------
function Flow() {
  const steps = [
    { n: "01", t: "お問い合わせ", b: "用途・予算・ロット数をお知らせください。" },
    { n: "02", t: "ヒアリング・ご提案", b: "経営課題・施策目的を伺った上で、方向性をご提案します。" },
    { n: "03", t: "デザイン・校正", b: "デザインデータの確認・校正を進めます。" },
    { n: "04", t: "製造・納品", b: "検品の上、ご指定の場所へお届けします。" },
  ];
  const notes = [
    { t: "サンプル制作について", b: "サンプル制作をご希望の方は別途承ります。版代が別途かかります。" },
    { t: "作業期間について", b: "作業工程は約3ヶ月かかります。ロットによります。" },
  ];
  const { isMobile, isTablet } = (window.useViewport || (() => ({ isMobile: false, isTablet: false })))();
  return (
    <section style={{ padding: isMobile ? "72px 20px" : "140px 40px", background: "#f4f0e8" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        <Reveal>
          <SectionLabel en="Flow" jp="ご利用の流れ" />
        </Reveal>
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : (isTablet ? "repeat(2, 1fr)" : "repeat(4, 1fr)"),
          gap: isMobile ? 28 : 0,
          marginTop: isMobile ? 48 : 80, position: "relative",
        }}>
          {/* connector(PCのみ) */}
          {!isMobile && !isTablet && (
            <div style={{ position: "absolute", top: 40, left: "12.5%", right: "12.5%", height: 1, background: "#d8d3cc" }} />
          )}
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 0.08}>
              <div style={{
                padding: isMobile ? "0 8px" : "0 28px",
                textAlign: "center", position: "relative",
                display: isMobile ? "flex" : "block",
                alignItems: isMobile ? "center" : undefined,
                gap: isMobile ? 18 : 0,
              }}>
                <div style={{
                  width: isMobile ? 52 : 80,
                  height: isMobile ? 52 : 80,
                  flexShrink: 0,
                  borderRadius: "50%", background: "#B8941F", border: "1px solid #B8941F",
                  display: "flex", alignItems: "center", justifyContent: "center",
                  margin: isMobile ? 0 : "0 auto",
                  fontFamily: "'Shippori Mincho', 'Noto Serif JP', serif",
                  fontSize: isMobile ? 18 : 26, color: "#fff", fontWeight: 600,
                  letterSpacing: "0.04em",
                  position: "relative", zIndex: 2,
                }}>{s.n}</div>
                <div style={{ flex: 1, textAlign: isMobile ? "left" : "center" }}>
                  <h3 style={{
                    fontFamily: "'Shippori Mincho', serif",
                    fontSize: isMobile ? 16 : 20, fontWeight: 500, color: "#2d2520",
                    marginTop: isMobile ? 0 : 28, marginBottom: isMobile ? 4 : 12,
                  }}>{s.t}</h3>
                  <p style={{
                    fontFamily: "'Noto Sans JP', sans-serif", fontWeight: 300,
                    fontSize: isMobile ? 13 : 15, lineHeight: 1.85, color: "#3d3530", margin: 0,
                  }}>{s.b}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>

        {/* Notes — サンプル制作 / 作業期間(モバイルは縦に2つスタック) */}
        <div style={{
          marginTop: isMobile ? 48 : 80,
          paddingTop: isMobile ? 28 : 40,
          borderTop: "1px solid #d8d3cc",
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : "1fr 1fr",
          gap: isMobile ? 24 : 56,
        }}>
          {notes.map((n) => (
            <Reveal key={n.t}>
              <div style={{
                display: "grid",
                gridTemplateColumns: "auto 1fr",
                gap: isMobile ? 14 : 20, alignItems: "start",
              }}>
                <span style={{
                  fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic",
                  fontSize: isMobile ? 12 : 15,
                  color: "#B8941F", letterSpacing: "0.25em",
                  paddingTop: 4, whiteSpace: "nowrap",
                }}>note</span>
                <div>
                  <h4 style={{
                    fontFamily: "'Shippori Mincho', serif",
                    fontSize: isMobile ? 15 : 18, fontWeight: 500, color: "#2d2520", margin: 0,
                  }}>
                    {n.t}
                  </h4>
                  <p style={{
                    fontFamily: "'Noto Sans JP', sans-serif", fontWeight: 400,
                    fontSize: isMobile ? 13 : 15, lineHeight: 1.9, color: "#3d3530",
                    margin: isMobile ? "6px 0 0" : "8px 0 0",
                  }}>
                    {n.b}
                  </p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- FAQ ----------
function FAQ() {
  const qs = [
    { q: "最少ロットはどれくらいから対応可能ですか？", a: "ご要望のロット数に応じて柔軟に承ります。少量でも金型・印刷ともにフルカスタム対応が可能です。デザインのみでも、OEMでも、まずはご相談ください。" },
    { q: "納期はどれくらいかかりますか？", a: "ご注文内容により異なります。既製品への名入れと、フルオリジナル製作では必要日数が大きく異なりますので、まずはお気軽にご相談ください。スケジュールに合わせて最短ルートをご提案します。" },
    { q: "見積もりは無料ですか？", a: "もちろん無料です。用途・予算・ロット数の概要をお知らせいただければ、3営業日以内に概算をお戻しします。" },
  ];
  const [open, setOpen] = useState(0);
  const { isMobile } = (window.useViewport || (() => ({ isMobile: false })))();
  return (
    <section style={{
      padding: isMobile ? "72px 20px" : "140px 40px",
      background: "#f8f6f1",
    }}>
      <div style={{ maxWidth: 960, margin: "0 auto" }}>
        <Reveal>
          <SectionLabel en="FAQ" jp="よくあるご質問" />
        </Reveal>
        <div style={{ marginTop: 64, borderTop: "1px solid #eae7e2" }}>
          {qs.map((it, i) => (
            <Reveal key={i} delay={i * 0.05}>
              <div style={{ borderBottom: "1px solid #eae7e2" }}>
                <button
                  onClick={() => setOpen(open === i ? -1 : i)}
                  style={{
                    width: "100%", textAlign: "left", padding: "32px 0", background: "none", border: "none", cursor: "pointer",
                    display: "flex", alignItems: "center", justifyContent: "space-between", gap: 32,
                  }}
                >
                  <div style={{ display: "flex", alignItems: "baseline", gap: 24 }}>
                    <span style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#B8941F", fontSize: 22, fontWeight: 400 }}>
                      {String(i + 1).padStart(2, "0")}
                    </span>
                    <span style={{ fontFamily: "'Shippori Mincho', serif", fontSize: 20, color: "#2d2520", fontWeight: 500 }}>{it.q}</span>
                  </div>
                  <span style={{
                    fontFamily: "'Cormorant Garamond', serif", fontSize: 28, color: "#B8941F", fontWeight: 300,
                    transform: open === i ? "rotate(45deg)" : "rotate(0)", transition: "transform .3s ease",
                  }}>+</span>
                </button>
                <div style={{
                  maxHeight: open === i ? 200 : 0, overflow: "hidden", transition: "max-height .4s cubic-bezier(.16,1,.3,1)",
                }}>
                  <p style={{
                    fontFamily: "'Noto Sans JP', sans-serif", fontWeight: 300, fontSize: 16, lineHeight: 2.1, color: "#3d3530",
                    margin: 0, paddingBottom: 32, paddingLeft: 56, maxWidth: 720,
                  }}>{it.a}</p>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Final CTA ----------
function FinalCTA() {
  const { isMobile } = (window.useViewport || (() => ({ isMobile: false })))();
  return (
    <section id="contact" style={{
      background: "#151310", color: "#f8f6f1",
      padding: isMobile ? "72px 20px" : "140px 40px",
    }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", textAlign: "center" }}>
        <Reveal>
          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", color: "#B8941F", fontSize: 18, letterSpacing: "0.3em", marginBottom: 32 }}>
            Get in Touch
          </div>
        </Reveal>
        <Reveal delay={0.2}>
          <p style={{ fontFamily: "'Noto Sans JP', sans-serif", fontWeight: 300, fontSize: 18, lineHeight: 2.1, marginTop: 0, color: "rgba(248,246,241,.92)", maxWidth: 640, marginLeft: "auto", marginRight: "auto" }}>
            お見積もり・ご相談は無料です。<br />
            3営業日以内に最初のご提案をお戻しします。
          </p>
        </Reveal>
        <Reveal delay={0.3}>
          <div style={{ display: "flex", gap: 16, justifyContent: "center", marginTop: 56 }}>
            <a href="https://pace.co.jp/#contact" target="_blank" rel="noopener noreferrer" style={{
              background: "#B8941F", color: "#151310", padding: "22px 56px", textDecoration: "none",
              fontFamily: "'Noto Sans JP', sans-serif", fontSize: 16, letterSpacing: "0.2em", fontWeight: 500, borderRadius: 3,
            }}>無料お見積りフォーム</a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Section label helper ----------
function SectionLabel({ en, jp, dark = false, align = "left" }) {
  const { isMobile } = (window.useViewport || (() => ({ isMobile: false })))();
  return (
    <div style={{ textAlign: align }}>
      <div style={{
        fontFamily: "'Cormorant Garamond', serif", fontStyle: "italic", fontWeight: 400,
        fontSize: isMobile ? 13 : 18,
        color: "#B8941F", letterSpacing: "0.25em", marginBottom: isMobile ? 12 : 20,
      }}>{en}</div>
      <h2 style={{
        fontFamily: "'Shippori Mincho', serif", fontWeight: 500,
        fontSize: isMobile ? 22 : 42, lineHeight: 1.4,
        color: dark ? "#f8f6f1" : "#2d2520", margin: 0, letterSpacing: "0.04em",
      }}>{jp}</h2>
      <div style={{
        width: 40, height: 1, background: "#B8941F",
        marginTop: isMobile ? 20 : 32,
        marginLeft: align === "center" ? "auto" : 0,
        marginRight: align === "center" ? "auto" : 0,
      }} />
    </div>
  );
}

// ---------- Footer (パーチェ公式 TOP のフッターに合わせた構成) ----------
function SiteFooter() {
  const SITE_BASE = "https://pace.co.jp";
  const QUOTE_URL = SITE_BASE + "/#contact";
  const { isMobile, isTablet } = (window.useViewport || (() => ({ isMobile: false, isTablet: false })))();

  const services = [
    { label: "戦略ノベルティ", href: SITE_BASE + "/novelty/" },
    { label: "Immun' Âge",   href: SITE_BASE + "/immunage.html" },
    { label: "A.E.Köchert",  href: SITE_BASE + "/koechert/" },
  ];
  const company = [
    { label: "会社概要",       href: SITE_BASE + "/about.html" },
    { label: "社会貢献活動",   href: SITE_BASE + "/#csr" },
    { label: "トピックス",     href: SITE_BASE + "/#topics" },
    { label: "お見積りフォーム", href: QUOTE_URL, external: true },
  ];
  const legal = [
    { label: "プライバシーポリシー", href: SITE_BASE + "/#" },
    { label: "利用規約",            href: SITE_BASE + "/#" },
    { label: "特定商取引法",        href: SITE_BASE + "/#" },
  ];

  const linkStyle = {
    fontFamily: "'Noto Serif JP', serif",
    fontSize: 13, color: "rgba(255,255,255,0.45)",
    textDecoration: "none", letterSpacing: "0.12em",
    transition: "color .25s ease", display: "block",
  };
  const navTitleStyle = {
    fontFamily: "'Cormorant Garamond', serif",
    fontSize: 13, color: "#B8941F", letterSpacing: "0.25em",
    textTransform: "uppercase", marginBottom: 22, display: "block",
    fontWeight: 600,
  };

  return (
    <footer style={{
      background: "#0F1C29",
      color: "#ffffff",
      padding: isMobile ? "48px 24px 24px" : (isTablet ? "60px 32px 32px" : "80px 56px 40px"),
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        {/* 上段: PC 4カラム / タブレット 2カラム / モバイル 1カラム */}
        <div style={{
          display: "grid",
          gridTemplateColumns: isMobile ? "1fr" : (isTablet ? "1fr 1fr" : "2fr 1fr 1fr 1fr"),
          gap: isMobile ? 32 : (isTablet ? 40 : 60), alignItems: "flex-start",
        }}>
          {/* Col 1: ロゴ + タグライン + 住所 */}
          <div>
            <div style={{ marginBottom: 24 }}>
              <img
                src={SITE_BASE + "/images/pace-logo-white.png"}
                alt="パーチェ株式会社"
                onError={(e) => { e.currentTarget.style.display = "none"; }}
                style={{ height: 42, width: "auto", display: "block" }}
              />
            </div>
            <p style={{
              fontFamily: "'Shippori Mincho', serif",
              fontSize: 15, color: "rgba(255,255,255,0.4)", margin: 0,
              letterSpacing: "0.1em",
            }}>
              テーマの本質を追求する。
            </p>
            <p style={{
              fontFamily: "'Noto Serif JP', serif",
              fontSize: 13, color: "rgba(255,255,255,0.35)",
              lineHeight: 1.9, marginTop: 18, letterSpacing: "0.06em",
            }}>
              〒150-0042<br />
              東京都渋谷区宇田川町1-12 414
            </p>
          </div>

          {/* Col 2: Services */}
          <div>
            <span style={navTitleStyle}>Services</span>
            <nav style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {services.map((it) => (
                <a key={it.label} href={it.href} style={linkStyle}
                  onMouseEnter={(e) => { e.currentTarget.style.color = "#B8941F"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(255,255,255,0.45)"; }}
                >{it.label}</a>
              ))}
            </nav>
          </div>

          {/* Col 3: Company */}
          <div>
            <span style={navTitleStyle}>Company</span>
            <nav style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {company.map((it) => (
                <a key={it.label} href={it.href}
                  target={it.external ? "_blank" : undefined}
                  rel={it.external ? "noopener noreferrer" : undefined}
                  style={linkStyle}
                  onMouseEnter={(e) => { e.currentTarget.style.color = "#B8941F"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(255,255,255,0.45)"; }}
                >{it.label}</a>
              ))}
            </nav>
          </div>

          {/* Col 4: Legal */}
          <div>
            <span style={navTitleStyle}>Legal</span>
            <nav style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              {legal.map((it) => (
                <a key={it.label} href={it.href} style={linkStyle}
                  onMouseEnter={(e) => { e.currentTarget.style.color = "#B8941F"; }}
                  onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(255,255,255,0.45)"; }}
                >{it.label}</a>
              ))}
            </nav>
          </div>
        </div>

        {/* 下段: コピーライト + ポリシー */}
        <div style={{
          borderTop: "1px solid rgba(255,255,255,0.06)",
          paddingTop: 32, marginTop: 60,
          display: "flex",
          flexDirection: isMobile ? "column" : "row",
          justifyContent: "space-between",
          alignItems: isMobile ? "flex-start" : "center",
          flexWrap: "wrap", gap: 16,
        }}>
          <p style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontSize: 12, color: "rgba(255,255,255,0.25)", letterSpacing: "0.15em",
            margin: 0,
          }}>
            © {new Date().getFullYear()} パーチェ株式会社 PACE Inc. All Rights Reserved.
          </p>
          <div style={{ display: "flex", gap: 24, flexWrap: "wrap" }}>
            {legal.map((it) => (
              <a key={it.label} href={it.href} style={{
                fontFamily: "'Noto Serif JP', serif",
                fontSize: 12, color: "rgba(255,255,255,0.3)",
                textDecoration: "none", letterSpacing: "0.12em",
                transition: "color .25s ease",
              }}
                onMouseEnter={(e) => { e.currentTarget.style.color = "#B8941F"; }}
                onMouseLeave={(e) => { e.currentTarget.style.color = "rgba(255,255,255,0.3)"; }}
              >{it.label}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Reveal, SiteHeader, SiteFooter, Hero, Problems, Reasons, Voices, Flow, FAQ, FinalCTA, SectionLabel,
});
