// urlapi.me — SP HERO
// Animated AI-chat demo as the centerpiece, with terminal-flavored signup.

const { useState: spUS, useEffect: spUE, useRef: spUR } = React;

// ── Glitch logo (SP-sized) ─────────────────────────────────
function SPGlitchLogo() {
  const logoStyle = {
    fontSize: "clamp(42px, 13vw, 64px)",
    fontWeight: 800,
    letterSpacing: -0.04,
    lineHeight: 1,
    display: "inline-block",
  };
  return (
    <div style={{ textAlign: "center", margin: "4px 0 14px" }}>
      <div style={{ position: "relative", display: "inline-block" }}>
        {/* RGB-split glitch layers */}
        <span aria-hidden className="display" style={{
          ...logoStyle,
          position: "absolute", left: 0, top: 0,
          color: "#FF5C7A", opacity: 0.55,
          mixBlendMode: "screen",
          animation: "glitch1 4s infinite",
          pointerEvents: "none",
        }}>urlapi.me</span>
        <span aria-hidden className="display" style={{
          ...logoStyle,
          position: "absolute", left: 0, top: 0,
          color: "#5CC8FF", opacity: 0.55,
          mixBlendMode: "screen",
          animation: "glitch2 4s infinite",
          pointerEvents: "none",
        }}>urlapi.me</span>
        {/* main visible layer */}
        <span className="display" style={{
          ...logoStyle,
          position: "relative",
          color: "#FAFAFA",
          textShadow: "0 0 40px rgba(124,92,255,0.55)",
        }}>
          urlapi<span style={{ color: "var(--accent-2)" }}>.</span>me
        </span>
      </div>
    </div>
  );
}

// ── countdown (SP-styled, compact) ─────────────────────────
function SPCountdown() {
  const TARGET = new Date('2026-07-01T00:00:00+09:00').getTime();
  const [now, setNow] = spUS(Date.now());
  spUE(() => {
    const t = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(t);
  }, []);
  const diff = Math.max(0, TARGET - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  const items = [["DAYS", d], ["HRS", h], ["MIN", m], ["SEC", s]];
  return (
    <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 6, marginTop: 16 }}>
      {items.map(([l, v]) => (
        <div key={l} style={{
          padding: "10px 4px",
          background: "rgba(10,10,18,0.72)",
          border: "1px solid var(--border-strong)",
          borderRadius: 10,
          textAlign: "center", position: "relative", overflow: "hidden",
        }}>
          <div style={{ position: "absolute", top: 0, left: 8, right: 8, height: 1, background: "linear-gradient(to right, transparent, var(--accent), transparent)" }} />
          <div className="display" style={{
            fontSize: 22, fontWeight: 700,
            fontVariantNumeric: "tabular-nums",
            background: "linear-gradient(180deg, #FFFFFF 0%, #A88BFF 100%)",
            WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent",
            lineHeight: 1,
          }}>{String(v).padStart(2, "0")}</div>
          <div className="mono" style={{ fontSize: 8.5, color: "var(--text-mute)", letterSpacing: 0.18, marginTop: 5 }}>{l}</div>
        </div>
      ))}
    </div>
  );
}

// ── animated AI chat — looping showcase ────────────────────
function SPAIChatDemo() {
  // Scenes cycle through three different prompts/responses.
  const SCENES = [
    {
      prompt: "InstagramのLTV、高い?",
      tools: [
        ["query_clicks", '{ src:"ig" }'],
        ["join_orders",  '{ window:"180d" }'],
        ["compute_ltv",  '{ groupby:"src" }'],
      ],
      reply: [
        ["", "Instagram は LTV "],
        ["highlight", "¥18,420"],
        ["", " 全体平均より "],
        ["highlight", "+42%"],
        ["", "。リピート率も "],
        ["highlight", "+31%"],
        ["", " です。広告予算 "],
        ["chip", "+20%"],
        ["", " 振替を提案しますか?"],
      ],
      cta: ["予算配分を提案", "詳細を見る"],
    },
    {
      prompt: "春キャンペーン作って、Metaに送って、結果週次でSlackに",
      tools: [
        ["create_campaign", '{ name:"spring-2026" }'],
        ["connect_meta",    '{ pixel:"auto" }'],
        ["schedule_report", '{ to:"#growth" }'],
      ],
      reply: [
        ["", "準備できました。"],
        ["highlight", "spring-2026"],
        ["", " を発行、Meta CAPI 接続済み、毎週月曜9時に "],
        ["chip", "#growth"],
        ["", " へ送信します。"],
      ],
      cta: ["URL一覧を見る", "編集"],
    },
    {
      prompt: "今日やばいやつあった?",
      tools: [
        ["scan_anomaly", '{ window:"24h" }'],
        ["check_capi",   '{ all:true }'],
      ],
      reply: [
        ["", "Meta CAPI に未送信の CV が "],
        ["highlight", "23件"],
        ["", " 検出。原因は Pixel ID の不一致。"],
        ["chip", "auto-fix"],
        ["", " で修復しますか?"],
      ],
      cta: ["自動修復", "原因を見る"],
    },
  ];

  const [sceneIdx, setSceneIdx] = spUS(0);
  const [promptChars, setPromptChars] = spUS(0);
  const [toolStage, setToolStage] = spUS(0);
  const [replyChars, setReplyChars] = spUS(0);
  const [showCTA, setShowCTA] = spUS(false);

  // User interactive mode
  const [userInput, setUserInput] = spUS("");
  const [userQ, setUserQ] = spUS(null);          // null = demo mode; string = user asked
  const [userPhase, setUserPhase] = spUS("idle"); // idle|thinking|gated
  const [askCount, setAskCount] = spUS(0);

  const scene = SCENES[sceneIdx];
  const replyTotal = scene.reply.reduce((sum, [, txt]) => sum + (txt || "").length, 0);
  const promptTotal = scene.prompt.length;

  // user-mode advance machine
  spUE(() => {
    if (userPhase === "thinking") {
      const t = setTimeout(() => setUserPhase("gated"), 1800);
      return () => clearTimeout(t);
    }
  }, [userPhase]);

  spUE(() => {
    // PAUSE auto-cycle while user is in user-mode
    if (userQ) return;

    // Phase 1: type user prompt char-by-char
    if (promptChars < promptTotal) {
      const t = setTimeout(() => setPromptChars(c => Math.min(promptTotal, c + 2)), 32);
      return () => clearTimeout(t);
    }
    // Phase 2: stream tool calls
    if (toolStage < scene.tools.length) {
      const t = setTimeout(() => setToolStage(s => s + 1), 420);
      return () => clearTimeout(t);
    }
    // Phase 3: type reply char-by-char
    if (replyChars < replyTotal) {
      const t = setTimeout(() => setReplyChars(c => Math.min(replyTotal, c + 2)), 26);
      return () => clearTimeout(t);
    }
    // Phase 4: show CTA + STAY (no cycling)
    if (!showCTA) {
      const t = setTimeout(() => setShowCTA(true), 180);
      return () => clearTimeout(t);
    }
    // After CTA: hold static. User can submit via input to interact.
    return;
    // (legacy cycle disabled per KEN 2026-05-17)
    // eslint-disable-next-line no-unreachable
    const t = setTimeout(() => {
      setPromptChars(0); setToolStage(0); setReplyChars(0); setShowCTA(false);
      setSceneIdx(i => (i + 1) % SCENES.length);
    }, 3000);
    return () => clearTimeout(t);
  }, [promptChars, toolStage, replyChars, showCTA, sceneIdx, promptTotal, replyTotal, scene.tools.length, userQ]);

  const submitUserQuestion = () => {
    const q = userInput.trim();
    if (!q) return;
    setUserQ(q);
    setUserInput("");
    setUserPhase("thinking");
    setAskCount(c => c + 1);
  };

  const closeUserMode = () => {
    setUserQ(null);
    setUserPhase("idle");
  };

  const scrollToSignup = () => {
    const el = document.getElementById("signup");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

  const visiblePrompt = scene.prompt.slice(0, promptChars);
  const promptTyping = promptChars < promptTotal;
  const showTools = (i) => toolStage > i;
  const replyTyping = promptChars >= promptTotal && toolStage >= scene.tools.length && replyChars < replyTotal;
  // Slice reply array to first replyChars characters across segments
  let cursor = 0;
  const visibleReply = scene.reply.map(([kind, txt], i) => {
    const segLen = (txt || "").length;
    const start = cursor;
    const segVisible = Math.max(0, Math.min(segLen, replyChars - start));
    cursor += segLen;
    return [kind, (txt || "").slice(0, segVisible), i];
  }).filter(([, t]) => t.length > 0);

  return (
    <div style={{
      position: "relative",
      background: "var(--bg-1)",
      border: "1px solid var(--border-strong)",
      borderRadius: 16,
      overflow: "hidden",
      boxShadow: "0 24px 60px -20px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.03)",
    }}>
      {/* terminal-style header */}
      <div style={{
        display: "flex", alignItems: "center", gap: 6,
        padding: "9px 12px",
        background: "var(--bg-2)",
        borderBottom: "1px solid var(--border)",
      }}>
        <span style={{ width: 8, height: 8, borderRadius: 4, background: "#FF5F57" }} />
        <span style={{ width: 8, height: 8, borderRadius: 4, background: "#FEBC2E" }} />
        <span style={{ width: 8, height: 8, borderRadius: 4, background: "#28C840" }} />
        <div className="mono" style={{ flex: 1, textAlign: "center", fontSize: 10, color: "var(--text-mute)" }}>
          <span style={{ color: "var(--success)", marginRight: 4 }}>●</span>
          urlapi · AI Console
        </div>
        <div className="mono" style={{ fontSize: 9, color: "var(--text-mute)", letterSpacing: 0.1 }}>
          {sceneIdx + 1}/{SCENES.length}
        </div>
      </div>

      {/* chat body */}
      <div style={{
        padding: "10px 10px",
        display: "flex", flexDirection: "column", gap: 8,
        minHeight: 200,
        position: "relative",
      }}>
        {userQ && (
          <>
            {/* User's question */}
            <div style={{ display: "flex", gap: 7 }}>
              <div style={{
                width: 20, height: 20, borderRadius: 6,
                background: "var(--bg-3)",
                display: "grid", placeItems: "center",
                fontSize: 10, fontWeight: 700, flexShrink: 0,
              }}>9</div>
              <div style={{
                flex: 1, fontSize: 11.5, lineHeight: 1.5, color: "var(--text)",
                padding: "7px 10px",
                background: "var(--bg-2)",
                border: "1px solid var(--accent-soft)",
                borderRadius: 8,
              }}>{userQ}</div>
            </div>

            {/* AI side */}
            <div style={{ display: "flex", gap: 7, flex: 1 }}>
              <div style={{
                width: 20, height: 20, borderRadius: 6,
                background: "linear-gradient(135deg, var(--accent), var(--accent-2))",
                display: "grid", placeItems: "center", flexShrink: 0,
              }}>
                <I.Logo size={10} color="#0A0A0A" />
              </div>
              <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 5, minWidth: 0 }}>
                {userPhase === "thinking" && (
                  <div className="mono" style={{
                    display: "inline-flex", alignItems: "center", gap: 6,
                    padding: "4px 8px",
                    background: "rgba(124,92,255,0.06)",
                    border: "1px solid var(--accent-soft)",
                    borderRadius: 5, fontSize: 10,
                    width: "fit-content",
                  }}>
                    <span style={{
                      width: 10, height: 10, borderRadius: 5,
                      border: "1.5px solid var(--accent)", borderTopColor: "transparent",
                      animation: "sp-spin 0.7s linear infinite",
                    }} />
                    <span style={{ color: "var(--text-mid)" }}>解析中…</span>
                  </div>
                )}
                {userPhase === "gated" && (
                  <>
                    {[
                      ["search_pattern", '{ q:"…" }'],
                      ["extract_insights", '{ depth:"deep" }'],
                    ].map(([t, a], i) => (
                      <div key={i} className="mono" style={{
                        display: "inline-flex", alignItems: "center", gap: 6,
                        padding: "3px 8px",
                        background: "rgba(124,92,255,0.06)",
                        border: "1px solid var(--accent-soft)",
                        borderRadius: 5, fontSize: 10,
                        width: "fit-content", maxWidth: "100%",
                      }}>
                        <I.Check size={8} style={{ color: "var(--success)" }} />
                        <span style={{ color: "var(--accent)" }}>{t}</span>
                        <span style={{ color: "var(--text-mute)" }}>{a}</span>
                      </div>
                    ))}
                    {/* Blurred answer + gate */}
                    <div style={{ position: "relative", marginTop: 4 }}>
                      <div style={{
                        fontSize: 11.5, lineHeight: 1.55, color: "var(--text)",
                        filter: "blur(5px)", userSelect: "none",
                        opacity: 0.7,
                      }}>
                        分析の結果、あなたのクリックは LTV ¥XX,XXX / CV +XX% の改善余地があります。詳細レポートと最適化提案は…
                      </div>
                      <div style={{
                        position: "absolute", inset: 0,
                        display: "grid", placeItems: "center",
                        background: "linear-gradient(180deg, transparent 0%, rgba(6,6,10,0.85) 60%)",
                      }}>
                        <button onClick={scrollToSignup} style={{
                          padding: "8px 14px",
                          background: "linear-gradient(135deg, var(--accent), var(--accent-2))",
                          color: "white", border: "none", borderRadius: 7,
                          fontSize: 11.5, fontWeight: 700, cursor: "pointer",
                          display: "inline-flex", alignItems: "center", gap: 5,
                          boxShadow: "0 4px 16px var(--accent-glow)",
                        }}>
                          🔒 回答を見るには 無料ではじめる <I.Right size={9} />
                        </button>
                      </div>
                    </div>
                    <button onClick={closeUserMode} className="mono" style={{
                      marginTop: 4, padding: "3px 6px",
                      background: "transparent", border: "1px solid var(--border)",
                      borderRadius: 4, color: "var(--text-mute)", fontSize: 9,
                      cursor: "pointer", alignSelf: "flex-start",
                    }}>← デモに戻る</button>
                  </>
                )}
              </div>
            </div>
          </>
        )}

        {!userQ && (<>
        {/* user prompt — typewriter */}
        <div style={{ display: "flex", gap: 8 }}>
          <div style={{
            width: 22, height: 22, borderRadius: 6,
            background: "var(--bg-3)",
            display: "grid", placeItems: "center",
            fontSize: 10, fontWeight: 700, flexShrink: 0,
          }}>9</div>
          <div style={{
            flex: 1, fontSize: 12.5, lineHeight: 1.5, color: "var(--text)",
            padding: "8px 11px",
            background: "var(--bg-2)",
            border: "1px solid var(--border)",
            borderRadius: 9,
            minHeight: 18,
          }}>
            {visiblePrompt}
            {promptTyping && (
              <span style={{
                display: "inline-block", width: 7, height: 13, marginLeft: 2,
                verticalAlign: "-2px",
                background: "var(--accent)",
                animation: "sp-caret 1s steps(2) infinite",
              }} />
            )}
          </div>
        </div>

        {/* AI side — appears once prompt finished */}
        {promptChars >= promptTotal && (
          <div style={{ display: "flex", gap: 8 }}>
            <div style={{
              width: 22, height: 22, borderRadius: 6,
              background: "linear-gradient(135deg, var(--accent), var(--accent-2))",
              display: "grid", placeItems: "center", flexShrink: 0,
            }}>
              <I.Logo size={11} color="#0A0A0A" />
            </div>
            <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 5, minWidth: 0 }}>
              {scene.tools.map(([t, a], i) => (
                <div key={`${sceneIdx}-${i}`} className="mono" style={{
                  display: "inline-flex", alignItems: "center", gap: 6,
                  padding: "4px 8px",
                  background: "rgba(124,92,255,0.06)",
                  border: "1px solid var(--accent-soft)",
                  borderRadius: 5, fontSize: 10.5,
                  width: "fit-content", maxWidth: "100%",
                  opacity: showTools(i) ? 1 : 0,
                  transform: showTools(i) ? "translateX(0)" : "translateX(-8px)",
                  transition: "opacity .3s, transform .3s",
                }}>
                  <I.Check size={9} style={{ color: "var(--success)", flexShrink: 0 }} />
                  <span style={{ color: "var(--accent)" }}>{t}</span>
                  <span style={{ color: "var(--text-mute)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{a}</span>
                </div>
              ))}

              {/* reply — typewriter */}
              {toolStage >= scene.tools.length && (
                <div style={{
                  fontSize: 12.5, lineHeight: 1.65, color: "var(--text)",
                  marginTop: 4, minHeight: 20,
                }}>
                  {visibleReply.map(([kind, txt, origIdx]) => {
                    if (kind === "highlight") return <strong key={origIdx} style={{ color: "var(--success)", fontWeight: 600 }}>{txt}</strong>;
                    if (kind === "chip") return <span key={origIdx} className="mono" style={{
                      padding: "1px 5px", background: "var(--accent-soft)",
                      color: "var(--accent)", borderRadius: 3, fontSize: 11,
                    }}>{txt}</span>;
                    return <span key={origIdx}>{txt}</span>;
                  })}
                  {replyTyping && (
                    <span style={{
                      display: "inline-block", width: 6, height: 12, marginLeft: 2,
                      verticalAlign: "-1px",
                      background: "var(--accent-2)",
                      animation: "sp-caret 1s steps(2) infinite",
                    }} />
                  )}
                </div>
              )}

              {/* cta buttons */}
              <div style={{
                display: "flex", gap: 6, marginTop: 6, flexWrap: "wrap",
                opacity: showCTA ? 1 : 0,
                transform: showCTA ? "translateY(0)" : "translateY(4px)",
                transition: "opacity .3s, transform .3s",
                visibility: showCTA ? "visible" : "hidden",
              }}>
                <button style={{
                  padding: "6px 10px",
                  background: "var(--accent)", color: "white",
                  border: "none", borderRadius: 5,
                  fontSize: 11.5, fontWeight: 600, cursor: "pointer",
                }}>{scene.cta[0]}</button>
                <button style={{
                  padding: "6px 10px",
                  background: "transparent", color: "var(--text-mid)",
                  border: "1px solid var(--border)", borderRadius: 5,
                  fontSize: 11.5, cursor: "pointer",
                }}>{scene.cta[1]}</button>
              </div>
            </div>
          </div>
        )}
        </>)}
      </div>

      {/* input row — interactive */}
      <form
        onSubmit={(e) => { e.preventDefault(); submitUserQuestion(); }}
        style={{
          padding: "8px 10px 10px",
          borderTop: "1px solid var(--border)",
          background: "var(--bg-2)",
        }}
      >
        <div style={{
          display: "flex", alignItems: "center", gap: 6,
          padding: "6px 8px",
          background: "var(--bg-1)",
          border: "1px solid var(--border-strong)",
          borderRadius: 9,
          boxShadow: "0 0 0 2px var(--accent-soft)",
        }}>
          <input
            value={userInput}
            onChange={(e) => setUserInput(e.target.value)}
            placeholder="どんなことができるの？  と聞いてみる"
            maxLength={80}
            disabled={userPhase === "thinking"}
            style={{
              flex: 1, fontSize: 11.5, color: "var(--text)",
              background: "transparent", border: "none", outline: "none",
              minWidth: 0,
            }}
          />
          <button type="submit" disabled={userPhase === "thinking" || !userInput.trim()} style={{
            width: 24, height: 24,
            background: userInput.trim() && userPhase !== "thinking" ? "var(--accent)" : "var(--bg-3)",
            border: "none", borderRadius: 5,
            color: userInput.trim() && userPhase !== "thinking" ? "white" : "var(--text-mute)",
            display: "grid", placeItems: "center", flexShrink: 0,
            cursor: userInput.trim() && userPhase !== "thinking" ? "pointer" : "not-allowed",
            transition: "background .15s",
          }}>
            <I.ArrowUp size={11} />
          </button>
        </div>
        <div className="mono" style={{
          fontSize: 9, color: "var(--text-mute)", marginTop: 4, letterSpacing: 0.04,
          textAlign: "center",
        }}>
          {askCount > 0
            ? `${askCount} 回試したよ · 続きは登録後`
            : "実際に質問してみる → 回答は登録後に届く"}
        </div>
      </form>
    </div>
  );
}

// ── HERO copy variants (for Tweaks) ─────────────────────
const SP_HERO_COPY = {
  asset: {
    line1: "クリックを",
    line2: <span style={{ background: "linear-gradient(135deg, var(--accent-2), #5CC8FF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>"データ資産"</span>,
    line3: "に変えるAI",
  },
  ai: {
    line1: "計測の全部を、",
    line2: <span style={{ background: "linear-gradient(135deg, var(--accent-2), #5CC8FF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>AIに</span>,
    line3: "任せろ。",
  },
  api: {
    line1: "API・MCP・AIで、",
    line2: <span style={{ background: "linear-gradient(135deg, var(--accent-2), #5CC8FF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>広告運用を</span>,
    line3: "取り戻す。",
  },
};

// ── SP Hero composition ────────────────────────────────
function SPHero({ copy = "asset" }) {
  const c = SP_HERO_COPY[copy] || SP_HERO_COPY.asset;
  return (
    <section className="sp-hero" style={{
      position: "relative", overflow: "hidden",
      padding: "14px 16px 24px",
    }}>
      <style>{`
        @keyframes sp-caret { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
        @keyframes pulse-soft { 0%, 100% { opacity: 1 } 50% { opacity: 0.5 } }
        @keyframes sp-spin { to { transform: rotate(360deg) } }
      `}</style>
      {/* aurora */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(ellipse 500px 360px at 50% -10%, var(--accent-glow), transparent 60%), radial-gradient(ellipse 400px 300px at 100% 20%, #5CC8FF22, transparent 60%)",
      }} />
      {/* grid */}
      <div style={{
        position: "absolute", inset: 0, pointerEvents: "none",
        backgroundImage: "linear-gradient(to right, #FFFFFF06 1px, transparent 1px), linear-gradient(to bottom, #FFFFFF06 1px, transparent 1px)",
        backgroundSize: "40px 40px",
        maskImage: "radial-gradient(ellipse at 50% 25%, black 30%, transparent 75%)",
      }} />

      <div style={{ position: "relative", zIndex: 2 }}>
        {/* Glitch logo — TOP visual hook */}
        <SPGlitchLogo />

        {/* COMING pill */}
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 10 }}>
          <span className="mono" style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "4px 10px",
            background: "rgba(124,92,255,0.10)",
            border: "1px solid var(--accent-soft)",
            borderRadius: 999, fontSize: 9.5, color: "var(--accent-2)", letterSpacing: 0.14,
          }}>
            <span style={{ width: 5, height: 5, borderRadius: 3, background: "var(--accent)", boxShadow: "0 0 10px var(--accent)", animation: "pulse-soft 1.5s infinite" }} />
            NOW LIVE · 無料で公開中
          </span>
        </div>

        {/* Headline — compact for SP */}
        <h1 className="display" style={{
          fontSize: "clamp(28px, 8.8vw, 42px)",
          fontWeight: 800, margin: 0,
          letterSpacing: -0.03, lineHeight: 1.08,
          textAlign: "center",
        }}>
          {c.line1}<br />{c.line2}<br />{c.line3}
        </h1>

        <p className="mono" style={{
          fontSize: 10.5, color: "var(--text-mute)",
          textAlign: "center", marginTop: 10,
          letterSpacing: 0.04, lineHeight: 1.6,
        }}>
          短縮URL × CV計測 × AI<br />
          Powered by <a href="https://9lick.me" target="_blank" rel="noopener noreferrer"
            style={{ color: "var(--accent-2)", textDecoration: "none", borderBottom: "1px solid var(--accent-soft)" }}>9lick.me</a>
        </p>

        {/* Countdown — ABOVE the console for urgency */}
        <SPCountdown />

        {/* CHAT DEMO — the centerpiece */}
        <div style={{ position: "relative", marginTop: 16 }}>
          <div style={{
            position: "absolute", inset: -20,
            background: "radial-gradient(ellipse at 50% 50%, var(--accent-glow), transparent 70%)",
            filter: "blur(24px)", pointerEvents: "none",
          }} />
          <div style={{ position: "relative" }}>
            <SPAIChatDemo />
          </div>
        </div>

        {/* signup form */}
        <div id="signup" style={{ marginTop: 18 }}>
          <SPSignupCard />
        </div>

        {/* secondary link */}
        <div style={{ textAlign: "center", marginTop: 14 }}>
          <a href="/tqo" style={{
            display: "inline-flex", alignItems: "center", gap: 6,
            padding: "8px 14px",
            fontSize: 12, color: "var(--accent-2)",
            border: "1px solid var(--accent-soft)", borderRadius: 7,
            background: "rgba(124,92,255,0.06)", textDecoration: "none",
          }}>
            TQO 白書を読む <I.Right size={10} />
          </a>
        </div>
      </div>
    </section>
  );
}

// ── signup card (SP) ────────────────────────────────────
function SPSignupCard() {
  return (
    <div style={{
      background: "rgba(10,10,18,0.78)",
      border: "1px solid var(--border-strong)",
      borderRadius: 14, padding: "16px 14px",
      backdropFilter: "blur(20px)", WebkitBackdropFilter: "blur(20px)",
      boxShadow: "0 0 40px rgba(124,92,255,0.18)",
    }}>
      <div className="mono" style={{
        fontSize: 10, color: "var(--accent-2)", letterSpacing: 0.18,
        display: "flex", alignItems: "center", gap: 6, textTransform: "uppercase",
        marginBottom: 10,
      }}>
        <span style={{ width: 5, height: 5, borderRadius: 3, background: "var(--accent)", boxShadow: "0 0 8px var(--accent)" }} />
        いますぐ無料で
      </div>
      <div className="display" style={{ fontSize: 16, fontWeight: 700, lineHeight: 1.4, marginBottom: 4 }}>
        クレカ登録なしで<br />すぐに使えます。
      </div>
      <div style={{ fontSize: 11.5, color: "var(--text-mute)", marginBottom: 12 }}>
        ※クレカ登録不要・無料ではじめられます
      </div>
      <form onSubmit={(e) => {
        e.preventDefault();
        const email = e.target.elements['sp-email'].value.trim();
        window.location.href = '/app/signup' + (email ? ('?email=' + encodeURIComponent(email)) : '');
      }} style={{ display: "flex", flexDirection: "column", gap: 8 }}>
        <input
          type="email" name="sp-email" required
          placeholder="your@email.com"
          className="mono"
          style={{
            padding: "14px 14px",
            background: "var(--bg-2)",
            border: "1px solid var(--border-strong)",
            borderRadius: 9, color: "var(--text)", fontSize: 14,
            outline: "none", fontFamily: "var(--font-mono)",
            WebkitAppearance: "none",
          }}
          onFocus={e => { e.target.style.borderColor = "var(--accent)"; e.target.style.boxShadow = "0 0 0 3px var(--accent-soft)"; }}
          onBlur={e => { e.target.style.borderColor = "var(--border-strong)"; e.target.style.boxShadow = "none"; }}
        />
        <button type="submit" style={{
          padding: "14px 18px",
          background: "linear-gradient(135deg, var(--accent), var(--accent-2))",
          border: "none", borderRadius: 9,
          fontSize: 14.5, fontWeight: 700, color: "white",
          display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
          boxShadow: "0 0 28px var(--accent-glow), 0 6px 18px rgba(124,92,255,0.4)",
          cursor: "pointer", letterSpacing: 0.04,
        }}>
          無料ではじめる
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none"><path d="M5 12h14m-6-6l6 6-6 6" stroke="white" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <div className="mono" style={{ fontSize: 9, color: "var(--text-mute)", letterSpacing: 0.06, marginTop: 2 }}>
          ※クレカ登録は不要です。
        </div>
      </form>
    </div>
  );
}

window.SPHero = SPHero;
window.SPSignupCard = SPSignupCard;
window.SP_HERO_COPY = SP_HERO_COPY;