// sections.jsx — header, hero, pain, services, pricing, process, about, FAQ, limits, stats, voices, footer

const { useEffect, useState, useRef } = React;

// ───────────────────────────────────────────────── ICONS
const Icon = ({ name, size = 22, stroke = 1.6 }) => {
  const c = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: stroke, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "clock":return <svg {...c}><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></svg>;
    case "wallet":return <svg {...c}><rect x="3" y="6" width="18" height="14" rx="2" /><path d="M3 10h18" /><circle cx="16.5" cy="14.5" r="1.2" fill="currentColor" /></svg>;
    case "spark":return <svg {...c}><path d="M12 3v6M12 15v6M3 12h6M15 12h6" /><path d="M6.3 6.3l3.4 3.4M14.3 14.3l3.4 3.4M6.3 17.7l3.4-3.4M14.3 9.7l3.4-3.4" /></svg>;
    case "doc":return <svg {...c}><path d="M7 3h8l4 4v14H7z" /><path d="M15 3v4h4" /><path d="M9 13h8M9 17h6" /></svg>;
    case "arrow":return <svg {...c}><path d="M5 12h14M13 5l7 7-7 7" /></svg>;
    case "check":return <svg {...c}><path d="M5 12l4 4L19 6" /></svg>;
    case "x":return <svg {...c}><path d="M6 6l12 12M18 6L6 18" /></svg>;
    case "plus":return <svg {...c}><path d="M12 5v14M5 12h14" /></svg>;
    case "minus":return <svg {...c}><path d="M5 12h14" /></svg>;
    case "bolt":return <svg {...c}><path d="M13 3L5 14h6l-1 7 8-11h-6l1-7z" /></svg>;
    case "code":return <svg {...c}><path d="M9 7l-5 5 5 5M15 7l5 5-5 5" /></svg>;
    case "msg":return <svg {...c}><path d="M21 12a8 8 0 1 1-3.2-6.4L21 3v6h-6" /></svg>;
    case "stack":return <svg {...c}><path d="M12 3l9 5-9 5-9-5 9-5z" /><path d="M3 13l9 5 9-5M3 18l9 5 9-5" /></svg>;
    default:return null;
  }
};

// accent color util
const ACC = { purple: "var(--p-purple)", orange: "var(--p-orange)", cyan: "var(--p-cyan)", lime: "var(--p-lime)", pink: "var(--p-pink)" };

// ───────────────────────────────────────────────── HEADER
function Header() {
  return (
    <header className="hdr">
      <div className="container hdr-row">
        <a href="#top" className="brand">
          <span className="brand-mark"></span>
          <span>SaaS Lab<span style={{ color: "var(--primary)" }}>.</span></span>
        </a>
        <nav className="nav">
          <div className="nav-links">
            <a href="#services">サービス</a>
            <a href="#tools">制作実績</a>
            <a href="#process">流れ</a>
            <a href="#faq">FAQ</a>
          </div>
          <a href="#contact" className="btn btn-accent" style={{ padding: "9px 16px", fontSize: 13 }}>
            無料で相談する <span className="btn-arrow">→</span>
          </a>
        </nav>
      </div>
    </header>);

}

// ───────────────────────────────────────────────── HERO
function Hero() {
  return (
    <section id="top" style={{ paddingTop: 60, paddingBottom: 80, overflow: "hidden" }}>
      <div className="container" style={{ position: "relative" }}>
        <div className="reveal in" style={{ display: "inline-flex", alignItems: "center", gap: 10, padding: "7px 14px 7px 10px", border: "1px solid var(--line-2)", borderRadius: 999, fontSize: 13, fontFamily: "var(--mono)", letterSpacing: "0.04em", color: "var(--text-2)", marginBottom: 24, background: "var(--surface)" }}>
          <span style={{ width: 8, height: 8, borderRadius: "50%", background: "var(--p-lime)", boxShadow: "0 0 12px var(--p-lime)" }}></span>
          NOW ACCEPTING&nbsp;/&nbsp;相談受付中
        </div>

        <h1 className="reveal in" style={{ fontFamily: "var(--body)", fontWeight: 700, fontSize: "clamp(22px, 3.7vw, 48px)", lineHeight: 1.32, letterSpacing: "-0.02em", margin: "0 0 36px", textWrap: "balance" }}>
          業務の<span style={{ color: "var(--muted)" }}>「</span>ちょっと面倒<span style={{ color: "var(--muted)" }}>」</span><span className="mb-break">を、<span style={{ color: "var(--primary)" }}>オリジナルツール</span>で解決する。</span>
        </h1>
        <style>{`@media (max-width:640px){ .mb-break{ display:block } }`}</style>

        <div style={{ display: "grid", gridTemplateColumns: "1.2fr .8fr", gap: 48, alignItems: "center" }} className="hero-grid">
          <div>
            <p className="reveal in" data-d="1" style={{ fontSize: "clamp(16px, 1.4vw, 20px)", lineHeight: 2, color: "var(--text-2)", maxWidth: 600, margin: "0 0 36px", textWrap: "pretty" }}>
              中小企業ならではのどろくさい現場でオペレーションを統括してきた経験で、個人事業主・中小企業のための<strong style={{ color: "var(--text)", fontWeight: 600 }}>「ちょうど良い業務ツール」</strong>を、リーズナブルに、すばやく作ります。
            </p>

            <div className="reveal in" data-d="2" style={{ display: "flex", gap: 12, flexWrap: "wrap", marginBottom: 36 }}>
              <a href="#contact" className="btn btn-accent" style={{ padding: "14px 22px", fontSize: 15 }}>無料で相談する <span className="btn-arrow">→</span></a>
              <a href="#tools" className="btn btn-ghost" style={{ padding: "14px 22px", fontSize: 15 }}>制作実績を見る</a>
            </div>

            <div className="reveal in" data-d="3" style={{ display: "flex", gap: 24, flexWrap: "wrap", fontFamily: "var(--mono)", fontSize: 12, color: "var(--muted)", letterSpacing: "0.08em" }}>
              <span>OPERATIONS LEAD</span>
              <span>·</span>
              <span>50+ TOOLS SHIPPED</span>
              <span>·</span>
              <span>BASED IN JAPAN</span>
            </div>
          </div>

          <HeroArt />
        </div>
      </div>
    </section>);

}

// Decorative "tool stack" floating cards
function HeroArt() {
  return (
    <div className="reveal in" data-d="2" style={{ position: "relative", height: 300 }}>
      <style>{`
        @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
        @keyframes floatY2{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}
        @keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}
        .ha-card{position:absolute;background:var(--surface);
          border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;
          box-shadow:0 14px 36px rgba(11,14,19,.08), 0 0 0 1px rgba(11,14,19,0.02) inset;}
        .ha-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
        .ha-row{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;color:var(--text-2)}
        .ha-bar{height:5px;border-radius:3px;background:var(--line);margin-top:8px;overflow:hidden;position:relative}
        .ha-bar i{position:absolute;inset:0;background:var(--primary);transform-origin:left;animation:fill 3.4s ease-in-out infinite}
        @keyframes fill{0%{transform:scaleX(0)}55%,100%{transform:scaleX(.86)}}
      `}</style>

      {/* Center card */}
      <div className="ha-card" style={{ left: "10%", top: "24%", width: 215, animation: "floatY 6s ease-in-out infinite" }}>
        <div className="ha-row" style={{ justifyContent: "space-between" }}>
          <span style={{ display: "flex", gap: 5 }}>
            <span className="ha-dot" style={{ background: "var(--p-orange)" }} />
            <span className="ha-dot" style={{ background: "var(--p-lime)" }} />
            <span className="ha-dot" style={{ background: "var(--p-cyan)" }} />
          </span>
          <span style={{ color: "var(--muted)" }}>shipping.tool</span>
        </div>
        <div style={{ marginTop: 10, fontFamily: "var(--mono)", fontSize: 11, lineHeight: 1.7, color: "var(--text-2)" }}>
          <div>&gt; 142 / 142 件 ✓</div>
          <div style={{ color: "var(--muted)" }}>&gt; 所要 1.4s</div>
        </div>
        <div className="ha-bar"><i></i></div>
      </div>

      {/* Top right card */}
      <div className="ha-card" style={{ right: "4%", top: "6%", width: 170, animation: "floatY2 7s ease-in-out infinite" }}>
        <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--muted)", letterSpacing: "0.08em" }}>STREAK</div>
        <div style={{ fontFamily: "var(--display)", fontWeight: 700, fontSize: 28, lineHeight: 1.1, marginTop: 2 }}>27<span style={{ color: "var(--muted)", fontSize: 14, marginLeft: 4 }}>days</span></div>
        <div style={{ display: "flex", gap: 2.5, marginTop: 8 }}>
          {Array.from({ length: 14 }).map((_, i) =>
          <span key={i} style={{ width: 8, height: 8, borderRadius: 2, background: i < 11 ? "var(--p-lime)" : "var(--line-2)" }} />
          )}
        </div>
      </div>

      {/* Bottom right card */}
      <div className="ha-card" style={{ right: "2%", bottom: "8%", width: 200, animation: "floatY 5.5s ease-in-out infinite .8s" }}>
        <div className="ha-row" style={{ color: "var(--muted)", fontSize: 10, letterSpacing: "0.08em" }}>PDF.COMPRESS</div>
        <div style={{ display: "flex", alignItems: "baseline", gap: 8, marginTop: 6 }}>
          <span style={{ fontFamily: "var(--display)", fontSize: 21, fontWeight: 700, color: "var(--text)" }}>12.4MB</span>
          <span style={{ color: "var(--muted)" }}>→</span>
          <span style={{ fontFamily: "var(--display)", fontSize: 21, fontWeight: 700, color: "var(--primary)" }}>1.1MB</span>
        </div>
        <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--muted)", marginTop: 4 }}>RATIO 1/11</div>
      </div>

      {/* Bottom left chip */}
      <div className="ha-card" style={{ left: "-2%", bottom: "22%", width: 160, animation: "floatY2 8s ease-in-out infinite .4s", padding: "10px 12px" }}>
        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
          <span style={{ width: 28, height: 28, borderRadius: 8, background: "var(--primary)", display: "grid", placeItems: "center", color: "#FFFFFF" }}>
            <Icon name="bolt" size={16} stroke={2} />
          </span>
          <div>
            <div style={{ fontSize: 10.5, fontFamily: "var(--mono)", color: "var(--muted)" }}>SAVED</div>
            <div style={{ fontFamily: "var(--display)", fontSize: 16, fontWeight: 700 }}>+ 23h<span style={{ color: "var(--muted)", fontSize: 11, marginLeft: 4 }}>/月</span></div>
          </div>
        </div>
      </div>

      {/* Floating dots */}
      <span style={{ position: "absolute", top: "50%", left: "46%", width: 12, height: 12, borderRadius: "50%", background: "var(--p-pink)", animation: "pulse 2.4s ease-in-out infinite", boxShadow: "0 0 14px var(--p-pink)" }} />
      <span style={{ position: "absolute", top: "10%", left: "40%", width: 8, height: 8, borderRadius: "50%", background: "var(--p-cyan)", boxShadow: "0 0 10px var(--p-cyan)" }} />

      <style>{`@media (max-width:920px){.hero-grid{grid-template-columns:1fr !important;gap:40px !important}.hero-grid > div:last-child{height:240px}}@media (max-width:640px){.hero-grid > div:last-child{display:none}}`}</style>
    </div>);

}

// ───────────────────────────────────────────────── PAIN
function Pain() {
  return (
    <section id="pain" style={{ paddingTop: 100 }}>
      <div className="container">
        <div className="reveal"><div className="sec-label">01 / PAIN</div></div>
        <h2 className="sec-title reveal" data-d="1">こんな状況、もう何年も続いていませんか？</h2>
        <p className="reveal sec-lead" data-d="2" style={{ marginBottom: 56 }}>
          1つ1つは小さな不便。でも積み重ねは、年間で数百時間、数十万円規模の損失です。<br />
          そのまま放置している自覚すらない、というのが一番怖い。
        </p>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }} className="pain-grid">
          {PAINS.map((p, i) =>
          <div key={p.icon} className="reveal" data-d={i + 1} style={{
            background: "var(--surface)",
            border: "1px solid var(--line)",
            borderRadius: 22,
            padding: "40px 36px 38px",
            position: "relative",
            overflow: "hidden",
            transition: "transform .25s ease, border-color .25s ease"
          }}
          onMouseEnter={(e) => {e.currentTarget.style.transform = "translateY(-4px)";e.currentTarget.style.borderColor = "var(--line-2)";}}
          onMouseLeave={(e) => {e.currentTarget.style.transform = "";e.currentTarget.style.borderColor = "var(--line)";}}>
            
              <div style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 56, height: 56, borderRadius: 16, background: `color-mix(in oklab, ${ACC[p.accent]} 18%, transparent)`, color: ACC[p.accent], marginBottom: 24 }}>
                <Icon name={p.icon} size={28} />
              </div>
              <h3 style={{ fontSize: "clamp(20px, 1.9vw, 24px)", lineHeight: 1.5, margin: "0 0 14px", fontWeight: 700, letterSpacing: "-0.005em" }}>{p.title}</h3>
              <p style={{ color: "var(--text-2)", margin: 0, fontSize: "clamp(15px, 1.15vw, 16.5px)", lineHeight: 1.9 }}>{p.body}</p>
              <div style={{ position: "absolute", right: -40, bottom: -40, width: 160, height: 160, borderRadius: "50%", background: ACC[p.accent], opacity: .07, filter: "blur(28px)" }} />
            </div>
          )}
        </div>
        <style>{`@media (max-width:760px){.pain-grid{grid-template-columns:1fr !important;gap:16px !important}}`}</style>
      </div>
    </section>);

}

// ───────────────────────────────────────────────── SERVICES
function Services() {
  return (
    <section id="services">
      <div className="container">
        <div className="reveal"><div className="sec-label">02 / SERVICE</div></div>
        <h2 className="sec-title reveal" data-d="1"><span style={{ display: "block" }}>「現場に入って一緒に作る」のが、</span><span style={{ display: "block" }}>いちばん速い。</span></h2>
        <p className="reveal sec-lead" data-d="2" style={{ marginBottom: 56 }}>
          仕様書を投げ合うのではなく、業務の隣にいて、動くものを渡しながら磨きます。<br />
          以下の4つの動きで、業務の「ちょっと面倒」を畳んでいきます。
        </p>

        <div className="services-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 1, background: "var(--line)", border: "1px solid var(--line)", borderRadius: 20, overflow: "hidden" }}>
          <style>{`
            @media (max-width: 1100px){ .services-grid{ grid-template-columns: repeat(2, 1fr) !important } }
            @media (max-width: 520px){ .services-grid{ grid-template-columns: 1fr !important } }
          `}</style>
          {SERVICES.map((s, i) =>
          <div key={s.n} className="reveal" data-d={i + 1} style={{ background: "var(--bg)", padding: "36px 30px 38px", minHeight: 240, position: "relative" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 24 }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)", letterSpacing: "0.1em" }}>{s.en.toUpperCase()}</span>
                <span style={{ fontFamily: "var(--display)", fontSize: 28, fontWeight: 700, color: "var(--primary)", lineHeight: 1 }}>{s.n}</span>
              </div>
              <h3 style={{ margin: "0 0 14px", fontSize: "clamp(20px, 1.9vw, 24px)", fontWeight: 700, letterSpacing: "-0.005em", lineHeight: 1.45 }}>
                {s.title.split("、").map((part, k, arr) =>
              <span key={k} style={{ display: "block" }}>{part}{k < arr.length - 1 ? "、" : ""}</span>
              )}
              </h3>
              <p style={{ color: "var(--text-2)", margin: 0, fontSize: "clamp(15px, 1.15vw, 16.5px)", lineHeight: 1.9 }}>{s.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ───────────────────────────────────────────────── PRICING (hearing-based, no specific number)
function Pricing() {
  return (
    <section id="pricing">
      <div className="container">
        <div className="reveal"><div className="sec-label">03 / PRICING</div></div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "start" }} className="grid-2">
          <div>
            <h2 className="sec-title reveal" data-d="1" style={{ fontSize: "clamp(26px,3.8vw,46px)" }}><span style={{ display: "block" }}>なぜ、開発会社の</span><span style={{ display: "block", whiteSpace: "nowrap" }}><span style={{ color: "var(--primary)" }}>1/3〜1/5</span> で済むのか。</span></h2>
            <p className="reveal sec-lead" data-d="2">
              プロではなくセミプロ。<br />
              でも、現場の運用担当として年商4億円の業務を回しながら、<br />
              自分で使うために 50 以上のツールを作ってきました。<br /><br />
              豪華な営業工程・分厚い仕様書・大人数の開発体制は省く。<br />
              「動いて、使えて、改修できる」最小構成を、私が直接書く。<br />
              だから、価格は抑えられて、判断は速い。
            </p>
          </div>

          <div className="reveal" data-d="3" style={{
            background: "var(--surface)",
            border: "1px solid var(--line)",
            borderRadius: 22,
            padding: "32px 32px 28px",
            position: "relative", overflow: "hidden"
          }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 18 }}>
              <span style={{ padding: "4px 10px", borderRadius: 999, background: "var(--primary-soft)", color: "var(--primary)", fontFamily: "var(--mono)", fontSize: 11, letterSpacing: "0.08em" }}>PROCESS</span>
              <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--muted)" }}>HEARING → ESTIMATE</span>
            </div>
            <h3 style={{ margin: "0 0 18px", fontSize: "clamp(22px,2.4vw,30px)", fontWeight: 700, letterSpacing: "-0.01em", lineHeight: 1.4 }}><span style={{ display: "block" }}>ヒアリング後に、</span><span style={{ display: "block" }}>個別お見積もり。</span></h3>
            <p style={{ color: "var(--text-2)", margin: "0 0 28px", fontSize: "clamp(15px,1.2vw,17px)", lineHeight: 1.95 }}>
              業務によって工数は大きく変わるため、定額の料金表は出していません。<br />
              30〜60分のヒアリングで、対応範囲・概算費用・期間をその場で提示します。<br />
              <strong style={{ color: "var(--text)", fontWeight: 600 }}>相談自体は完全無料。</strong>気になる方は気軽に投げてください。
            </p>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {[
              "対応可否を最初に判断するので、無駄な見積もりが発生しない",
              "「これくらいの規模感ですね」を、その場でラフに共有",
              "本格依頼の前に、判断材料が全部そろう"].
              map((t, i) =>
              <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14 }}>
                  <span style={{ color: "var(--p-lime)", marginTop: 3, flex: "none" }}><Icon name="check" size={16} stroke={2.4} /></span>
                  <span style={{ color: "var(--text-2)" }}>{t}</span>
                </li>
              )}
            </ul>
            <div style={{ position: "absolute", right: -60, top: -60, width: 200, height: 200, borderRadius: "50%", background: "var(--primary)", opacity: .08, filter: "blur(40px)" }} />
          </div>
        </div>
        <style>{`@media (max-width:840px){.grid-2{grid-template-columns:1fr !important;gap:40px !important}}`}</style>
      </div>
    </section>);

}

// ───────────────────────────────────────────────── PROCESS
function Process() {
  return (
    <section id="process">
      <div className="container">
        <div className="reveal"><div className="sec-label">05 / PROCESS</div></div>
        <h2 className="sec-title reveal" data-d="1">相談から納品まで、最短当日。</h2>
        <p className="reveal sec-lead" data-d="2" style={{ marginBottom: 60 }}>
          仕様が固まっていなくて大丈夫。むしろ、固まる前のほうが速く進みます。<br />
          以下の5ステップで進めていきます。
        </p>

        <div style={{ display: "grid", gridTemplateColumns: `repeat(${STEPS.length}, 1fr)`, gap: 16, position: "relative" }} className="process-grid">
          <div style={{ position: "absolute", top: 36, left: "5%", right: "5%", height: 1, background: "var(--line-2)", zIndex: 0 }} />
          {STEPS.map((s, i) =>
          <div key={s.n} className="reveal" data-d={i + 1} style={{ position: "relative", zIndex: 1 }}>
              <div style={{
              width: 48, height: 48, borderRadius: 14,
              background: "var(--bg)", border: "1px solid var(--line-2)",
              display: "grid", placeItems: "center",
              fontFamily: "var(--mono)", fontWeight: 600, fontSize: 13,
              color: i === 0 ? "var(--primary)" : "var(--text)",
              marginBottom: 18,
              boxShadow: i === 0 ? `0 0 0 4px var(--primary-soft)` : "none"
            }}>{s.n}</div>
              <h3 style={{ margin: "0 0 10px", fontSize: "clamp(16px,1.3vw,18px)", fontWeight: 700 }}>{s.title}</h3>
              <p style={{ color: "var(--text-2)", margin: 0, fontSize: "clamp(14px,1.05vw,15.5px)", lineHeight: 1.85 }}>{s.body}</p>
            </div>
          )}
        </div>
        <style>{`@media (max-width:900px){.process-grid{grid-template-columns:1fr 1fr !important}.process-grid > div:nth-child(n) > div:first-child{margin-bottom:14px}.process-grid::before{display:none}}@media (max-width:560px){.process-grid{grid-template-columns:1fr !important}}`}</style>
      </div>
    </section>);

}

// ───────────────────────────────────────────────── ABOUT
function About() {
  return (
    <section id="about">
      <div className="container">
        <div className="reveal"><div className="sec-label">06 / ABOUT</div></div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 60, alignItems: "center" }} className="about-grid">
          <div className="reveal" data-d="1">
            <div style={{ aspectRatio: "1/1", borderRadius: 24, position: "relative", overflow: "hidden", background: "linear-gradient(135deg, var(--p-purple), var(--p-cyan) 60%, var(--p-orange))", padding: 1 }}>
              <div style={{ position: "absolute", inset: 1, borderRadius: 23, overflow: "hidden", background: "var(--bg-2)" }}>
                <img src="profile.jpg" alt="中本 達也 / Tatsuya Nakamoto" loading="lazy" decoding="async" style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "center 30%", display: "block" }} />
                <div style={{ position: "absolute", left: 16, bottom: 14, fontFamily: "var(--mono)", fontSize: 11, color: "var(--text)", background: "color-mix(in oklab, var(--surface) 86%, transparent)", padding: "5px 10px", borderRadius: 999, backdropFilter: "blur(4px)", WebkitBackdropFilter: "blur(4px)", letterSpacing: "0.06em" }}>中本 達也 / TATSUYA NAKAMOTO</div>
              </div>
            </div>
          </div>

          <div>
            <h2 className="sec-title reveal" data-d="1" style={{ fontSize: "clamp(22px,2.8vw,34px)", lineHeight: 1.4 }}><span style={{ display: "block" }}>泥臭い現場も、グローバルな仕事も。</span><span style={{ display: "block", color: "var(--muted)" }}>その両方を、行き来してきました。</span></h2>
            <p className="reveal" data-d="2" style={{ color: "var(--text-2)", fontSize: "clamp(15.5px,1.3vw,18px)", lineHeight: 1.95, maxWidth: 700 }}>
              中本 達也（なかもと たつや）。<br />
              年商4億円の企業でオペレーション統括を担当。業務フロー構築・改善、生産性向上を専門としています。<br /><br />
              中小企業や個人事業主向けの事業構築支援も並行して行ってきました。<br />
              泥臭い手作業の現場から、ハイレベルなグローバルビジネスまで、多様な現場を経験。<br />
              現場に入り込んでスクラムを組み、一気に突き進めるのが得意です。
            </p>

            <div className="reveal" data-d="3" style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 28 }}>
              {["業務フロー設計", "オペレーション統括", "小規模Webツール", "業務自動化", "事業構築支援", "現場ヒアリング"].map((t) =>
              <span key={t} style={{ padding: "7px 13px", borderRadius: 999, background: "var(--surface)", border: "1px solid var(--line-2)", fontSize: 12.5, color: "var(--text-2)", fontFamily: "var(--body)" }}>{t}</span>
              )}
            </div>
          </div>
        </div>
        <style>{`@media (max-width:900px){.about-grid{grid-template-columns:1fr !important;gap:40px !important}}`}</style>
      </div>
    </section>);

}

// ───────────────────────────────────────────────── FAQ
function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="reveal"><div className="sec-label">07 / FAQ</div></div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60 }} className="faq-grid">
          <div>
            <h2 className="reveal sec-title" data-d="1">よくある質問</h2>
            <p className="reveal sec-lead" data-d="2">よく聞かれる内容をまとめました。<br />ここに載っていないことも、フォームから気軽にどうぞ。</p>
          </div>

          <div className="reveal" data-d="2">
            {FAQS.map((f, i) => {
              const isOpen = open === i;
              return (
                <div key={i} style={{ borderTop: i === 0 ? "1px solid var(--line)" : "none", borderBottom: "1px solid var(--line)" }}>
                  <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                    width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20,
                    padding: "22px 4px", background: "transparent", border: "none", cursor: "pointer", textAlign: "left"
                  }}>
                    <span style={{ fontSize: "clamp(16px,1.4vw,18.5px)", fontWeight: 600, letterSpacing: "-0.005em" }}>{f.q}</span>
                    <span style={{ width: 32, height: 32, borderRadius: "50%", border: "1px solid var(--line-2)", display: "grid", placeItems: "center", color: "var(--text-2)", flex: "none", transition: "transform .2s", transform: isOpen ? "rotate(45deg)" : "none" }}>
                      <Icon name="plus" size={14} stroke={2} />
                    </span>
                  </button>
                  <div style={{ maxHeight: isOpen ? 400 : 0, overflow: "hidden", transition: "max-height .35s ease, opacity .25s", opacity: isOpen ? 1 : 0 }}>
                    <p style={{ margin: "0 0 22px", padding: "0 4px", color: "var(--text-2)", fontSize: "clamp(14.5px,1.15vw,16px)", lineHeight: 1.95, maxWidth: 680 }}>{f.a}</p>
                  </div>
                </div>);

            })}
          </div>
        </div>
        <style>{`@media (max-width:840px){.faq-grid{grid-template-columns:1fr !important;gap:30px !important}}`}</style>
      </div>
    </section>);

}

// ───────────────────────────────────────────────── CANNOT (limits)
function Cannot() {
  return (
    <section id="cannot" style={{ paddingTop: 60 }}>
      <div className="container">
        <div className="reveal"><div className="sec-label">08 / OUT OF SCOPE</div></div>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 60 }} className="faq-grid">
          <div>
            <h2 className="sec-title reveal" data-d="1" style={{ fontSize: "clamp(24px,3vw,38px)", whiteSpace: "nowrap" }}>対応できないこと</h2>
            <p className="reveal sec-lead" data-d="2">
              「迷うのは時間のムダ」なので、<br />
              先に対応外を明示しておきます。
            </p>
          </div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }} className="cannot-grid">
            {CANNOT.map((c, i) =>
            <div key={c.t} className="reveal" data-d={i + 1} style={{
              padding: "22px 22px 24px",
              background: "transparent",
              border: "1px solid var(--line)", borderRadius: 14
            }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 10 }}>
                  <span style={{ width: 28, height: 28, borderRadius: 7, background: "color-mix(in oklab, var(--p-orange) 22%, transparent)", color: "var(--p-orange)", display: "grid", placeItems: "center" }}>
                    <Icon name="x" size={16} stroke={2.5} />
                  </span>
                  <h3 style={{ margin: 0, fontSize: "clamp(16px,1.4vw,18.5px)", fontWeight: 700 }}>{c.t}</h3>
                </div>
                <p style={{ margin: 0, color: "var(--text-2)", fontSize: "clamp(14px,1.1vw,16px)", lineHeight: 1.85 }}>{c.b}</p>
              </div>
            )}
          </div>
        </div>
        <style>{`@media (max-width:760px){.cannot-grid{grid-template-columns:1fr !important}}`}</style>
      </div>
    </section>);

}

// ───────────────────────────────────────────────── STATS + VOICES
function CountUp({ to, suffix }) {
  const [n, setN] = useState(0);
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current;if (!el) return;
    const io = new IntersectionObserver((ents) => {
      ents.forEach((e) => {
        if (e.isIntersecting) {
          const dur = 1500;const start = performance.now();
          const tick = (t) => {
            const k = Math.min(1, (t - start) / dur);
            const eased = 1 - Math.pow(1 - k, 3);
            setN(Math.round(to * eased));
            if (k < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [to]);
  return <span ref={ref}>{n}{suffix}</span>;
}

function Stats() {
  return (
    <section id="stats" style={{ padding: "60px 0 80px" }}>
      <div className="container">
        <div className="reveal" style={{
          background: "linear-gradient(135deg, color-mix(in oklab, var(--p-purple) 12%, var(--surface)) 0%, var(--surface) 60%)",
          border: "1px solid var(--line)",
          borderRadius: 24,
          padding: "50px 40px",
          position: "relative", overflow: "hidden"
        }}>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))", gap: 24, position: "relative", zIndex: 1 }}>
            {STATS.map((s, i) =>
            <div key={i} className="reveal" data-d={i + 1} style={{ textAlign: "center" }}>
                <div style={{ fontFamily: "var(--display)", fontSize: "clamp(40px,5vw,60px)", fontWeight: 700, lineHeight: 1, letterSpacing: "-0.03em", color: "var(--text)" }}>
                  <CountUp to={s.v} suffix={s.suffix} />
                </div>
                <div style={{ marginTop: 8, color: "var(--text-2)", fontSize: 13.5, fontFamily: "var(--body)" }}>{s.k}</div>
              </div>
            )}
          </div>
          <div style={{ position: "absolute", right: -80, top: -80, width: 280, height: 280, borderRadius: "50%", background: "var(--p-cyan)", opacity: .12, filter: "blur(50px)" }} />
          <div style={{ position: "absolute", left: -60, bottom: -60, width: 240, height: 240, borderRadius: "50%", background: "var(--p-orange)", opacity: .10, filter: "blur(40px)" }} />
        </div>

        {/* Voices */}
        <div style={{ marginTop: 80 }}>
          <div className="reveal"><div className="sec-label">09 / VOICES</div></div>
          <h2 className="sec-title reveal" data-d="1" style={{ marginBottom: 40 }}>お客様の声</h2>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 20 }}>
            {VOICES.map((v, i) =>
            <div key={i} className="reveal" data-d={i + 1} style={{
              background: "var(--surface)",
              border: "1px solid var(--line)",
              borderRadius: 18,
              padding: "26px 26px 24px",
              position: "relative"
            }}>
                <div style={{ fontFamily: "var(--display)", fontSize: 54, lineHeight: .8, color: "var(--primary)", opacity: .5, marginBottom: 6 }}>"</div>
                <p style={{ margin: "0 0 22px", fontSize: 14.5, lineHeight: 1.85, color: "var(--text)" }}>{v.quote}</p>
                <div style={{ paddingTop: 16, borderTop: "1px solid var(--line)" }}>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{v.role}</div>
                  <div style={{ fontSize: 11.5, color: "var(--muted)", fontFamily: "var(--mono)", letterSpacing: "0.06em", marginTop: 2 }}>{v.company}</div>
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>);

}

// ───────────────────────────────────────────────── FOOTER
function Footer() {
  return (
    <footer>
      <div className="container ft-row">
        <div>
          <div className="brand" style={{ marginBottom: 6 }}>
            <span className="brand-mark"></span>
            <span>SaaS Lab<span style={{ color: "var(--primary)" }}>.</span></span>
          </div>
          <div style={{ fontSize: 12, color: "var(--muted)" }}>© 2026 SaaS Lab. / 中本 達也 — saas-lab.cloud</div>
        </div>
        <div className="ft-links">
          <a href="#services">SERVICE</a>
          <a href="#tools">WORK</a>
          <a href="#about">ABOUT</a>
          <a href="#contact">CONTACT</a>
        </div>
      </div>
    </footer>);

}

Object.assign(window, { Header, Hero, Pain, Services, Pricing, Process, About, FAQ, Cannot, Stats, Footer, Icon, ACC });