// urlapi.me — Variant alternatives for priority sections.
// Loaded before landing.jsx so App can compose them.

const { useState: vUS, useEffect: vUE, useRef: vUR } = React;

// ─── HERO · B (Editorial — タイポ主役・余白多め) ────────────────────
function HeroEditorial() {
  return (
    <section className="hero-section" style={{ position: "relative", overflow: "hidden", padding: "40px 24px 72px" }}>
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(ellipse 900px 600px at 50% -10%, var(--accent-glow), transparent 60%)" }} />
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        {/* Top eyebrow row */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 64, flexWrap: "wrap", gap: 14 }}>
          <div className="mono" style={{ display: "flex", alignItems: "center", gap: 12, fontSize: 11, color: "var(--text-mute)", letterSpacing: 0.14 }}>
            <span style={{ width: 24, height: 1, background: "var(--border-strong)" }} />
            <span>ISSUE / 01</span>
            <span style={{ width: 24, height: 1, background: "var(--border-strong)" }} />
            <span style={{ color: "var(--accent-2)" }}>NOW LIVE</span>
          </div>
          <div className="mono" style={{ fontSize: 11, color: "var(--text-mute)", letterSpacing: 0.14 }}>
            <span style={{ color: "var(--text)" }}>無料で公開中</span>
          </div>
        </div>

        {/* Massive headline */}
        <div style={{ maxWidth: 1100 }}>
          <div className="mono" style={{ fontSize: 12, color: "var(--accent-2)", letterSpacing: 0.18, textTransform: "uppercase", marginBottom: 28 }}>
            Tracking Quality Optimization Platform
          </div>
          <h1 className="display" style={{
            fontSize: "clamp(56px, 11vw, 168px)", fontWeight: 800,
            margin: 0, letterSpacing: -0.045, lineHeight: 0.92,
          }}>
            クリックを、<br />
            <span style={{ fontStyle: "italic", color: "var(--text-mid)" }}>"</span>データ資産<span style={{ fontStyle: "italic", color: "var(--text-mid)" }}>"</span>に。<br />
            <span style={{ background: "linear-gradient(135deg, var(--accent-2), #5CC8FF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>
              変えるAI。
            </span>
          </h1>
        </div>

        {/* Two-col footer */}
        <div className="hero-ed-foot" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 48, marginTop: 56, alignItems: "end" }}>
          <div>
            <p style={{ fontSize: 17, color: "var(--text-mid)", lineHeight: 1.7, maxWidth: 540, margin: 0 }}>
              AI時代のクリック計測基盤。<br />
              クリック1つひとつを、広告AIが学習できるデータ資産に変える。
            </p>
            <p className="mono" style={{ marginTop: 18, fontSize: 11.5, color: "var(--text-mute)", letterSpacing: 0.04 }}>
              Powered by <a href="https://9lick.me" style={{ color: "var(--accent-2)" }}>9lick.me</a>
            </p>
          </div>
          <form id="signup" onSubmit={(e) => {
              e.preventDefault();
              const email = e.target.elements['your-email'].value.trim();
              window.location.href = email ? '/app/signup?email=' + encodeURIComponent(email) : '/app/signup';
            }}
            style={{ width: "100%" }}>
            <div className="mono" style={{ fontSize: 10.5, color: "var(--accent-2)", letterSpacing: 0.18, marginBottom: 10, textTransform: "uppercase" }}>
              ◆ いますぐ無料で
            </div>
            <div className="signup-input-row" style={{ display: "flex", gap: 8, borderBottom: "1px solid var(--border-strong)", paddingBottom: 12 }}>
              <input type="email" name="your-email" required placeholder="your@email.com"
                className="mono"
                style={{ flex: 1, minWidth: 0, padding: "12px 4px", background: "transparent", border: "none", color: "var(--text)", fontSize: 17, outline: "none" }}
                onFocus={e => e.target.parentElement.style.borderBottomColor = "var(--accent)"}
                onBlur={e => e.target.parentElement.style.borderBottomColor = "var(--border-strong)"} />
              <button type="submit" className="mono" style={{
                padding: "12px 18px", background: "transparent", border: "none",
                color: "var(--accent-2)", fontSize: 14, fontWeight: 600, cursor: "pointer", letterSpacing: 0.04,
                display: "inline-flex", alignItems: "center", gap: 6, whiteSpace: "nowrap",
              }}>
                無料ではじめる <span aria-hidden>→</span>
              </button>
            </div>
            <div className="mono" style={{ fontSize: 10, color: "var(--text-mute)", marginTop: 8 }}>
              ※ クレカ登録なし・すぐに使えます
            </div>
          </form>
        </div>
      </div>
      <style>{`
        @media (max-width: 768px) {
          .hero-ed-foot { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </section>
  );
}

// ─── HERO · C (Console — ターミナル / 開発者寄り) ─────────────────────
function HeroConsole() {
  const lines = [
    { type: "prompt", text: "urlapi init" },
    { type: "ok", text: "✓ MCP server connected to claude-sonnet-4.5" },
    { type: "ok", text: "✓ Domain go.acme.co — SSL ready" },
    { type: "ok", text: "✓ Meta CAPI · Google ECV · LINE · TikTok connected" },
    { type: "prompt", text: "urlapi ask \"今週のCV取りこぼし教えて\"" },
    { type: "out", text: "→ 23 件の CV が Meta に未送信。修正しますか? [Y/n]" },
  ];
  const [shown, setShown] = vUS(0);
  vUE(() => {
    const t = setInterval(() => setShown(s => (s + 1) % (lines.length + 8)), 600);
    return () => clearInterval(t);
  }, []);

  return (
    <section className="hero-section" style={{ position: "relative", overflow: "hidden", padding: "20px 24px 60px" }}>
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none",
        background: "radial-gradient(ellipse 700px 480px at 50% 30%, var(--accent-glow), transparent 60%)" }} />
      <div className="wrap" style={{ position: "relative", zIndex: 2 }}>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 28 }}>
          <span className="mono" style={{ padding: "6px 14px", background: "rgba(124,92,255,0.08)", border: "1px solid var(--accent-soft)", borderRadius: 999, fontSize: 11, color: "var(--accent-2)", letterSpacing: 0.14, display: "inline-flex", alignItems: "center", gap: 8 }}>
            <span style={{ width: 8, height: 8, borderRadius: 4, background: "var(--accent)", boxShadow: "0 0 12px var(--accent)", animation: "pulse-soft 1.5s infinite" }} />
            NOW LIVE · 無料で公開中
          </span>
        </div>

        <div className="hero-console-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 56, alignItems: "center" }}>
          {/* Left text */}
          <div>
            <h1 className="display" style={{ fontSize: "clamp(40px, 7vw, 84px)", fontWeight: 800, letterSpacing: -0.035, lineHeight: 1.0, margin: 0 }}>
              クリックを<br />
              <span style={{ background: "linear-gradient(135deg, var(--accent-2), #5CC8FF)", WebkitBackgroundClip: "text", WebkitTextFillColor: "transparent" }}>"データ資産"</span>に<br />
              変えるAI。
            </h1>
            <p style={{ fontSize: 15.5, color: "var(--text-mid)", lineHeight: 1.7, marginTop: 24, maxWidth: 520 }}>
              トラフィックの価値を最大化。<br />
              短縮URL × CV計測 × 広告API × AI をひとつのAPIに統合。
            </p>
            <form id="signup" onSubmit={(e) => {
                e.preventDefault();
                const email = e.target.elements['your-email'].value.trim();
                window.location.href = email ? '/app/signup?email=' + encodeURIComponent(email) : '/app/signup';
              }}
              className="signup-input-row" style={{ display: "flex", gap: 8, marginTop: 28, maxWidth: 480 }}>
              <input type="email" name="your-email" required placeholder="your@email.com" className="mono"
                style={{ flex: 1, padding: "14px 16px", background: "var(--bg-2)", border: "1px solid var(--border-strong)", borderRadius: 10, color: "var(--text)", fontSize: 14, outline: "none" }} />
              <button type="submit" style={{
                padding: "14px 22px", background: "linear-gradient(135deg, var(--accent), var(--accent-2))",
                border: "none", borderRadius: 10, color: "white", fontSize: 14, fontWeight: 600, cursor: "pointer", whiteSpace: "nowrap",
                boxShadow: "0 0 24px var(--accent-glow)",
              }}>無料ではじめる →</button>
            </form>
          </div>

          {/* Right terminal */}
          <div style={{ background: "#06060A", border: "1px solid var(--border-strong)", borderRadius: 14, overflow: "hidden", boxShadow: "0 30px 80px -30px rgba(0,0,0,0.7)" }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "10px 14px", background: "var(--bg-2)", borderBottom: "1px solid var(--border)" }}>
              <span style={{ width: 9, height: 9, borderRadius: 5, background: "#FF5F57" }} />
              <span style={{ width: 9, height: 9, borderRadius: 5, background: "#FEBC2E" }} />
              <span style={{ width: 9, height: 9, borderRadius: 5, background: "#28C840" }} />
              <span className="mono" style={{ flex: 1, textAlign: "center", fontSize: 11, color: "var(--text-mute)" }}>~ urlapi cli</span>
            </div>
            <div className="mono" style={{ padding: "18px 20px", fontSize: 13, lineHeight: 1.85, minHeight: 260, color: "var(--text-mid)" }}>
              {lines.slice(0, Math.min(shown, lines.length)).map((l, i) => (
                <div key={i}>
                  {l.type === "prompt" && <><span style={{ color: "var(--accent-2)" }}>$ </span><span style={{ color: "var(--text)" }}>{l.text}</span></>}
                  {l.type === "ok" && <span style={{ color: "var(--success)" }}>{l.text}</span>}
                  {l.type === "out" && <span style={{ color: "var(--warn)" }}>{l.text}</span>}
                </div>
              ))}
              <div><span style={{ color: "var(--accent-2)" }}>$ </span><span style={{ display: "inline-block", width: 8, height: 14, background: "var(--accent)", verticalAlign: "middle", animation: "blink 1s infinite" }} /></div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .hero-console-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
        }
      `}</style>
    </section>
  );
}


// ─── AI CONSOLE · C (Terminal — minimalな端末スタイル) ─────────────
function AIConsoleTerminal() {
  return (
    <section style={{ padding: "72px 0 40px", position: "relative", borderTop: "1px solid var(--border-soft)" }}>
      <div className="wrap">
        <div style={{ textAlign: "center", marginBottom: 36 }}>
          <span className="mono" style={{ fontSize: 11, color: "var(--accent-2)", letterSpacing: 0.18, textTransform: "uppercase" }}>AI Console · CLI mode</span>
          <h2 className="display" style={{ fontSize: "clamp(28px, 5vw, 52px)", fontWeight: 800, marginTop: 10, letterSpacing: -0.03, lineHeight: 1.1 }}>
            自然言語で、<br />計測の全部を動かす。
          </h2>
        </div>

        <div style={{
          maxWidth: 1000, marginInline: "auto",
          background: "#06060A", border: "1px solid var(--border-strong)",
          borderRadius: 12, padding: "32px 40px",
          fontFamily: "var(--font-mono)", fontSize: 13.5, lineHeight: 1.9, color: "var(--text-mid)",
          boxShadow: "0 30px 80px -30px rgba(0,0,0,0.7), 0 0 80px -30px var(--accent-glow)",
        }}>
          <div><span style={{ color: "var(--text-dim)" }}>// urlapi MCP · Tue 14 May 2026 · 09:42</span></div>
          <div style={{ marginTop: 8 }}>
            <span style={{ color: "var(--accent-2)" }}>9lick@console</span>
            <span style={{ color: "var(--text-mute)" }}>:</span>
            <span style={{ color: "var(--info)" }}>~</span>
            <span style={{ color: "var(--text-mute)" }}>$ </span>
            <span style={{ color: "var(--text)" }}>今週のCVを要約して、Metaに送信できてないやつあったら教えて</span>
          </div>
          <div style={{ marginTop: 6, color: "var(--text-dim)" }}>
            ↳ <span style={{ color: "var(--accent)" }}>get_metrics</span>(range=<span style={{ color: "var(--success)" }}>"7d"</span>) <span style={{ color: "var(--success)" }}>✓</span>
          </div>
          <div style={{ color: "var(--text-dim)" }}>
            ↳ <span style={{ color: "var(--accent)" }}>list_failed_cv</span>(platform=<span style={{ color: "var(--success)" }}>"meta"</span>) <span style={{ color: "var(--success)" }}>✓</span>
          </div>
          <div style={{ marginTop: 14, color: "var(--text)" }}>
            今週は <span style={{ color: "var(--success)" }}>1,369 CV (+38.4%)</span>。Instagram 由来 +41% が主因。
          </div>
          <div style={{ color: "var(--text)" }}>
            <span style={{ color: "var(--warn)" }}>⚠</span> 23件の CV が Meta に未送信 — <span style={{ color: "var(--accent)" }}>spring-promo</span> の Pixel ID 未設定が原因。
          </div>
          <div style={{ marginTop: 14 }}>
            <span style={{ color: "var(--text-dim)" }}>[Y/n]</span> 修正して送信:
            <span style={{ display: "inline-block", width: 8, height: 14, background: "var(--accent)", verticalAlign: "middle", marginLeft: 6, animation: "blink 1s infinite" }} />
          </div>
        </div>

        <div className="mono" style={{ textAlign: "center", fontSize: 11, color: "var(--text-mute)", marginTop: 22, letterSpacing: 0.1 }}>
          Claude / Cursor / ChatGPT から MCP 1 行で接続。GUI を開く必要はありません。
        </div>
      </div>
    </section>
  );
}

// ─── FINAL CTA · B (Manifest — 静謐な宣言型) ──────────────────────
function FinalCTAManifest() {
  return (
    <section style={{ padding: "120px 0 110px", position: "relative", overflow: "hidden", borderTop: "1px solid var(--border-soft)" }}>
      <div className="wrap" style={{ position: "relative", textAlign: "center", maxWidth: 980 }}>
        <div className="mono" style={{ fontSize: 11, color: "var(--accent-2)", letterSpacing: 0.2, textTransform: "uppercase", marginBottom: 24 }}>
          ◇ NOW LIVE
        </div>
        <h2 className="display" style={{ fontSize: "clamp(40px, 8vw, 96px)", fontWeight: 800, margin: 0, letterSpacing: -0.04, lineHeight: 1.0 }}>
          クリックは、<br />
          一度きりの偶然ではない。
        </h2>
        <p style={{ fontSize: 17, color: "var(--text-mid)", marginTop: 32, lineHeight: 1.7, maxWidth: 540, marginInline: "auto" }}>
          すべてのクリックを資産に。<br />
          urlapi は、その変換装置になる。
        </p>
        <div style={{ display: "flex", justifyContent: "center", marginTop: 44 }}>
          <a href="/app/signup" style={{
            padding: "16px 38px", background: "transparent", color: "var(--text)",
            border: "1px solid var(--text-mid)", borderRadius: 999,
            fontSize: 14, fontWeight: 500, letterSpacing: 0.08,
            display: "inline-flex", alignItems: "center", gap: 10, textDecoration: "none",
            transition: "all .2s",
          }}
          onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--accent)"; e.currentTarget.style.color = "var(--accent-2)"; e.currentTarget.style.background = "var(--accent-soft)"; }}
          onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--text-mid)"; e.currentTarget.style.color = "var(--text)"; e.currentTarget.style.background = "transparent"; }}>
            無料ではじめる <span aria-hidden>→</span>
          </a>
        </div>
        <div className="mono" style={{ marginTop: 64, fontSize: 11, color: "var(--text-dim)", letterSpacing: 0.14 }}>
          ────  urlapi<span style={{ color: "var(--accent-2)" }}>.</span>me  ────
        </div>
      </div>
    </section>
  );
}

// ─── FINAL CTA · C (Countdown — タイマー & form 強調) ────────────────
function FinalCTACountdown() {
  return (
    <section style={{ padding: "84px 0 90px", position: "relative", overflow: "hidden", borderTop: "1px solid var(--border-soft)" }}>
      <div style={{ position: "absolute", inset: 0, background: "radial-gradient(ellipse 800px 500px at 50% 50%, var(--accent-glow), transparent 70%)", pointerEvents: "none" }} />
      {/* grid */}
      <div style={{ position: "absolute", inset: 0, pointerEvents: "none",
        backgroundImage: "linear-gradient(to right, #FFFFFF08 1px, transparent 1px), linear-gradient(to bottom, #FFFFFF08 1px, transparent 1px)",
        backgroundSize: "48px 48px",
        maskImage: "radial-gradient(ellipse at 50% 50%, black 30%, transparent 75%)" }} />
      <div className="wrap" style={{ position: "relative", textAlign: "center" }}>
        <h2 className="display final-cta-h" style={{ fontSize: "clamp(40px, 8vw, 84px)", fontWeight: 800, margin: 0, letterSpacing: -0.035, lineHeight: 1.05, maxWidth: 900, marginInline: "auto" }}>
          いますぐ、はじめよう。
        </h2>

        <p className="final-cta-sub" style={{ fontSize: 16, color: "var(--text-mid)", marginTop: 36, lineHeight: 1.6 }}>
          クレカ登録なしで、いますぐ無料ではじめられます。
        </p>

        <form onSubmit={(e) => {
            e.preventDefault();
            const email = e.target.elements['your-email'].value.trim();
            window.location.href = email ? '/app/signup?email=' + encodeURIComponent(email) : '/app/signup';
          }}
          className="signup-input-row"
          style={{ display: "flex", gap: 10, maxWidth: 540, marginInline: "auto", marginTop: 22 }}>
          <input type="email" name="your-email" required placeholder="your@email.com" className="mono"
            style={{ flex: 1, padding: "16px 18px", background: "rgba(10,10,18,0.65)", border: "1px solid var(--border-strong)", borderRadius: 10, color: "var(--text)", fontSize: 14, outline: "none", backdropFilter: "blur(10px)" }} />
          <button type="submit" style={{
            padding: "16px 28px", background: "linear-gradient(135deg, var(--accent), var(--accent-2))",
            border: "none", borderRadius: 10, color: "white", fontSize: 14, fontWeight: 700, cursor: "pointer", whiteSpace: "nowrap",
            boxShadow: "0 0 36px var(--accent-glow), 0 6px 18px rgba(124,92,255,0.4)",
            display: "inline-flex", alignItems: "center", gap: 8,
          }}>
            <I.Sparkle size={14} /> 無料ではじめる
          </button>
        </form>
      </div>
    </section>
  );
}

window.HeroEditorial = HeroEditorial;
window.HeroConsole = HeroConsole;
window.AIConsoleTerminal = AIConsoleTerminal;
window.FinalCTAManifest = FinalCTAManifest;
window.FinalCTACountdown = FinalCTACountdown;