// urlapi.me Landing Page — About tabs
// 3 sections (AI Console / Tracking Health / Capabilities) as a single
// horizontally-sliding tabbed surface placed under the hero.

const { useState: atUS, useRef: atUR, useEffect: atUE } = React;

function AboutTabs() {
  const TABS = [
    { k: "console", num: "01", label: "AI Console",      tag: "自然言語で計測を動かす" },
    { k: "health",  num: "02", label: "Tracking Health", tag: "計測の健全性を一画面に" },
    { k: "caps",    num: "03", label: "Capabilities",    tag: "AI が支援する6つの領域" },
  ];
  const [active, setActive] = atUS(0);
  const trackRef = atUR(null);
  const [h, setH] = atUS("auto");

  // Recompute container height to match active panel (so the carousel
  // doesn't waste vertical space on the tallest panel).
  atUE(() => {
    const track = trackRef.current;
    if (!track) return;
    const panels = track.querySelectorAll("[data-about-panel]");
    const measure = () => {
      const p = panels[active];
      if (p) setH(p.offsetHeight + "px");
    };
    measure();
    const ro = new ResizeObserver(measure);
    panels.forEach(p => ro.observe(p));
    window.addEventListener("resize", measure);
    return () => { ro.disconnect(); window.removeEventListener("resize", measure); };
  }, [active]);

  return (
    <section id="about" style={{ padding: "120px 0 60px", position: "relative", borderTop: "1px solid var(--border-soft)" }}>
      {/* Ambient glow to anchor section importance */}
      <div aria-hidden style={{
        position: "absolute", inset: 0, pointerEvents: "none", overflow: "hidden",
      }}>
        <div style={{
          position: "absolute", top: -80, left: "50%", transform: "translateX(-50%)",
          width: 1100, height: 320,
          background: "radial-gradient(ellipse at 50% 0%, var(--accent-glow), transparent 65%)",
          filter: "blur(60px)", opacity: 0.85,
        }} />
      </div>
      <div className="wrap" style={{ position: "relative" }}>
        {/* Eyebrow + section heading — section is the spine of the page */}
        <div style={{ textAlign: "center", marginBottom: 40 }}>
          <div className="mono" style={{ fontSize: 11, color: "var(--accent-2)", letterSpacing: 0.24, textTransform: "uppercase", marginBottom: 16 }}>
            ◇ About urlapi
          </div>
          <h2 className="display" style={{ fontSize: "clamp(28px, 4.4vw, 44px)", fontWeight: 700, margin: 0, letterSpacing: -0.025, lineHeight: 1.2, color: "var(--text)" }}>
            AI に任せる前に、<br />AI が学べるデータへ。
          </h2>
          <p style={{ fontSize: 16, color: "var(--text-mid)", marginTop: 18, lineHeight: 1.7, maxWidth: 560, marginInline: "auto" }}>
            ダッシュボードを開かない、計測の運用。<br />
            3 つの体験で、未来の現場をプレビュー。
          </p>
        </div>

        {/* Tab nav */}
        {/* Click hint above tabs */}
        <div className="mono" style={{
          textAlign: "center",
          fontSize: 10.5,
          color: "var(--accent-2)",
          letterSpacing: 0.18,
          textTransform: "uppercase",
          marginBottom: 28,
          opacity: 0.85,
        }}>
          ↓ クリックで切替 ·  3つの体験
        </div>

        <div className="about-tabs" role="tablist" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 12,
          maxWidth: 940,
          marginInline: "auto",
          marginBottom: 8,
        }}>
          {TABS.map((t, i) => {
            const on = i === active;
            const isNext = !on && i === (active + 1) % TABS.length;
            return (
              <button
                key={t.k}
                role="tab"
                aria-selected={on}
                onClick={() => setActive(i)}
                className={`about-tab ${on ? "about-tab-on" : ""} ${isNext ? "about-tab-next" : ""}`}
                style={{
                  position: "relative",
                  display: "flex",
                  flexDirection: "column",
                  alignItems: "flex-start",
                  gap: 6,
                  padding: "18px 22px",
                  background: on
                    ? "linear-gradient(180deg, var(--accent-soft), rgba(124,92,255,0.04))"
                    : "var(--bg-1)",
                  border: on ? "1px solid var(--accent)" : isNext ? "1px solid var(--accent-soft)" : "1px solid var(--border-strong)",
                  borderRadius: 14,
                  color: "var(--text)",
                  cursor: "pointer",
                  textAlign: "left",
                  transition: "transform .2s ease, background .2s, border-color .2s, box-shadow .2s",
                  boxShadow: on
                    ? "0 14px 40px -10px var(--accent-glow), 0 0 0 4px rgba(124,92,255,0.10)"
                    : "0 1px 0 rgba(255,255,255,0.02) inset",
                  overflow: "hidden",
                }}
              >
                {/* Next-up floating hint pill */}
                {isNext && (
                  <span aria-hidden className="about-tab-next-hint mono" style={{
                    position: "absolute",
                    top: -10, left: 14,
                    padding: "3px 8px",
                    background: "linear-gradient(135deg, var(--accent), var(--accent-2))",
                    color: "white",
                    fontSize: 9.5,
                    fontWeight: 700,
                    letterSpacing: 0.14,
                    textTransform: "uppercase",
                    borderRadius: 4,
                    boxShadow: "0 4px 12px var(--accent-glow)",
                    zIndex: 2,
                    display: "inline-flex", alignItems: "center", gap: 4,
                  }}>
                    次へ <span style={{ display: "inline-block", animation: "tab-bounce 1.2s ease-in-out infinite" }}>→</span>
                  </span>
                )}

                {/* Top-right click affordance */}
                <span
                  aria-hidden
                  className="about-tab-arrow"
                  style={{
                    position: "absolute",
                    top: 14,
                    right: 16,
                    width: 26,
                    height: 26,
                    display: "grid",
                    placeItems: "center",
                    borderRadius: 999,
                    background: on ? "var(--accent)" : isNext ? "var(--accent-soft)" : "var(--bg-3)",
                    color: on ? "white" : isNext ? "var(--accent-2)" : "var(--text-mid)",
                    fontSize: 12,
                    fontWeight: 700,
                    transition: "all .2s ease",
                    boxShadow: on ? "0 0 16px var(--accent-glow)" : "none",
                  }}
                >→</span>

                <div style={{ display: "flex", alignItems: "center", gap: 10, width: "100%", paddingRight: 32 }}>
                  <span className="mono" style={{
                    fontSize: 10,
                    color: on ? "var(--accent-2)" : "var(--text-mute)",
                    letterSpacing: 0.16,
                    fontVariantNumeric: "tabular-nums",
                    padding: "2px 6px",
                    background: on ? "rgba(124,92,255,0.15)" : "var(--bg-2)",
                    borderRadius: 4,
                  }}>{t.num}</span>
                  <span className="display" style={{
                    fontSize: 16,
                    fontWeight: 700,
                    letterSpacing: -0.01,
                    color: "var(--text)",
                  }}>{t.label}</span>
                </div>
                <span className="about-tab-tag" style={{ fontSize: 12, color: "var(--text-mid)", lineHeight: 1.45, paddingRight: 32 }}>{t.tag}</span>

                {/* Glow ring on active tab */}
                {on && (
                  <>
                    <span aria-hidden style={{
                      position: "absolute",
                      inset: -1,
                      borderRadius: 14,
                      pointerEvents: "none",
                      background: "linear-gradient(180deg, rgba(124,92,255,0.18), transparent 40%)",
                    }} />
                    {/* shimmer sweep */}
                    <span aria-hidden className="about-tab-shimmer" style={{
                      position: "absolute",
                      inset: 0,
                      borderRadius: 14,
                      pointerEvents: "none",
                      background: "linear-gradient(90deg, transparent 0%, rgba(168,139,255,0.18) 50%, transparent 100%)",
                    }} />
                  </>
                )}
              </button>
            );
          })}
        </div>

        {/* Slide track */}
        <div style={{
          position: "relative",
          overflow: "hidden",
          height: h,
          transition: "height .35s cubic-bezier(.22,.61,.36,1)",
        }}>
          <div
            ref={trackRef}
            style={{
              display: "flex",
              width: "300%",
              transform: `translateX(-${active * (100 / 3)}%)`,
              transition: "transform .45s cubic-bezier(.22,.61,.36,1)",
            }}
          >
            {TABS.map((t, i) => (
              <div
                key={t.k}
                data-about-panel
                aria-hidden={i !== active}
                style={{
                  width: `${100 / 3}%`,
                  flexShrink: 0,
                  opacity: i === active ? 1 : 0.0,
                  transition: "opacity .35s ease",
                  pointerEvents: i === active ? "auto" : "none",
                }}
              >
                {t.k === "console" && <AIConsoleSection />}
                {t.k === "health"  && <TrackingHealth />}
                {t.k === "caps"    && <Capabilities />}
              </div>
            ))}
          </div>
        </div>

        {/* Dot indicators (mobile-friendly affordance) */}
        <div style={{ display: "flex", justifyContent: "center", gap: 8, marginTop: 24 }}>
          {TABS.map((t, i) => (
            <button
              key={t.k}
              aria-label={`${t.label} に切替`}
              onClick={() => setActive(i)}
              style={{
                width: i === active ? 28 : 8,
                height: 8,
                borderRadius: 999,
                border: "none",
                background: i === active ? "var(--accent)" : "var(--border-strong)",
                cursor: "pointer",
                transition: "all .25s ease",
                padding: 0,
              }}
            />
          ))}
        </div>
      </div>

      <style>{`
        .about-tab:hover:not(.about-tab-on) {
          transform: translateY(-2px);
          background: var(--bg-2) !important;
          border-color: var(--accent-2) !important;
          box-shadow: 0 8px 24px -8px rgba(0,0,0,0.4) !important;
        }
        .about-tab:hover:not(.about-tab-on) .about-tab-arrow {
          background: var(--accent) !important;
          color: white !important;
          transform: translateX(2px);
        }
        .about-tab-on .about-tab-arrow {
          animation: about-tab-pulse 1.6s ease-out infinite;
        }
        /* The "Next" tab pulses to invite the click */
        .about-tab-next {
          animation: about-tab-next-pulse 2.2s ease-out infinite;
        }
        .about-tab-next .about-tab-arrow {
          animation: about-tab-arrow-bob 1.4s ease-in-out infinite;
        }
        .about-tab-next .about-tab-next-hint {
          animation: about-tab-hint-float 1.6s ease-in-out infinite;
        }
        .about-tab-shimmer {
          background-size: 200% 100% !important;
          animation: about-tab-shimmer-sweep 2.4s ease-in-out infinite;
        }
        @keyframes about-tab-pulse {
          0%   { box-shadow: 0 0 0 0 rgba(124,92,255,0.55), 0 0 16px var(--accent-glow); }
          70%  { box-shadow: 0 0 0 12px rgba(124,92,255,0), 0 0 16px var(--accent-glow); }
          100% { box-shadow: 0 0 0 0 rgba(124,92,255,0), 0 0 16px var(--accent-glow); }
        }
        @keyframes about-tab-next-pulse {
          0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 0 0 0 rgba(124,92,255,0); }
          50%      { box-shadow: 0 1px 0 rgba(255,255,255,0.02) inset, 0 0 0 5px rgba(124,92,255,0.18); border-color: var(--accent-2) !important; }
        }
        @keyframes about-tab-arrow-bob {
          0%, 100% { transform: translateX(0); }
          50%      { transform: translateX(3px); }
        }
        @keyframes about-tab-hint-float {
          0%, 100% { transform: translateY(0); }
          50%      { transform: translateY(-3px); }
        }
        @keyframes about-tab-shimmer-sweep {
          0%   { background-position: -100% 0; }
          100% { background-position: 200% 0; }
        }
        @keyframes tab-bounce {
          0%, 100% { transform: translateX(0); }
          50%      { transform: translateX(3px); }
        }
        @media (max-width: 720px) {
          .about-tabs { grid-template-columns: 1fr !important; }
          .about-tab-tag { display: none !important; }
        }
      `}</style>
    </section>
  );
}

window.AboutTabs = AboutTabs;