// urlapi.me Landing Page — Logo strip (infinite marquee, 8 sample brand SVGs)

const SAMPLE_LOGOS = [
  // 1. NORTHBEAM — arrow / beam
  {
    name: "NORTHBEAM",
    svg: (
      <svg viewBox="0 0 160 36" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
        <g fill="none" stroke="#FAFAFA" strokeWidth="2" strokeLinecap="round">
          <path d="M10 18 L26 18" />
          <path d="M20 12 L26 18 L20 24" />
        </g>
        <text x="34" y="23" fontFamily="Inter Tight, sans-serif" fontWeight="700" fontSize="14.5" fill="#FAFAFA" letterSpacing="0.04em">NORTHBEAM</text>
      </svg>
    ),
  },
  // 2. KAIROS — sun / horizon
  {
    name: "KAIROS",
    svg: (
      <svg viewBox="0 0 130 36" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
        <g fill="none" stroke="#FAFAFA" strokeWidth="2">
          <circle cx="18" cy="18" r="7" />
          <line x1="6" y1="18" x2="11" y2="18" strokeLinecap="round" />
          <line x1="25" y1="18" x2="30" y2="18" strokeLinecap="round" />
        </g>
        <text x="40" y="23" fontFamily="Inter Tight, sans-serif" fontWeight="600" fontSize="15" fill="#FAFAFA" letterSpacing="0.05em">KAIROS</text>
      </svg>
    ),
  },
  // 3. stride. — chevron-stack
  {
    name: "stride.",
    svg: (
      <svg viewBox="0 0 130 36" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
        <g fill="none" stroke="#FAFAFA" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="8,24 16,12 24,24" />
          <polyline points="14,28 22,16 30,28" opacity="0.5" />
        </g>
        <text x="40" y="24" fontFamily="Inter, sans-serif" fontWeight="800" fontSize="17" fill="#FAFAFA" letterSpacing="-0.02em">stride<tspan fill="#A88BFF">.</tspan></text>
      </svg>
    ),
  },
  // 4. LUMEN — sparkle
  {
    name: "LUMEN",
    svg: (
      <svg viewBox="0 0 130 36" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
        <g fill="#FAFAFA">
          <path d="M18 6 L20 16 L30 18 L20 20 L18 30 L16 20 L6 18 L16 16 Z" />
        </g>
        <text x="38" y="23" fontFamily="Inter Tight, sans-serif" fontWeight="500" fontSize="15" fill="#FAFAFA" letterSpacing="0.18em">LUMEN</text>
      </svg>
    ),
  },
  // 5. ARC.LAB
  {
    name: "ARC.LAB",
    svg: (
      <svg viewBox="0 0 140 36" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
        <g fill="none" stroke="#FAFAFA" strokeWidth="2" strokeLinecap="round">
          <path d="M8 26 A 10 10 0 0 1 28 26" />
          <line x1="8" y1="26" x2="28" y2="26" />
          <circle cx="18" cy="20" r="1.5" fill="#A88BFF" stroke="none" />
        </g>
        <text x="36" y="23" fontFamily="JetBrains Mono, monospace" fontWeight="600" fontSize="14" fill="#FAFAFA" letterSpacing="0.06em">ARC<tspan fill="#A88BFF">.</tspan>LAB</text>
      </svg>
    ),
  },
  // 6. helix — double curve
  {
    name: "helix",
    svg: (
      <svg viewBox="0 0 130 36" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
        <g fill="none" stroke="#FAFAFA" strokeWidth="2" strokeLinecap="round">
          <path d="M8 8 C 16 8, 18 28, 26 28" />
          <path d="M8 28 C 16 28, 18 8, 26 8" />
        </g>
        <text x="36" y="23" fontFamily="Inter Tight, sans-serif" fontWeight="700" fontSize="17" fill="#FAFAFA" letterSpacing="-0.01em" fontStyle="italic">helix</text>
      </svg>
    ),
  },
  // 7. PULSE/CO — waveform
  {
    name: "PULSE/CO",
    svg: (
      <svg viewBox="0 0 150 36" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
        <g fill="none" stroke="#FAFAFA" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="6,18 12,18 14,10 18,26 22,14 26,22 30,18 36,18" />
        </g>
        <text x="44" y="23" fontFamily="Inter Tight, sans-serif" fontWeight="700" fontSize="14.5" fill="#FAFAFA" letterSpacing="0.04em">PULSE<tspan fill="#7C5CFF">/</tspan>CO</text>
      </svg>
    ),
  },
  // 8. ATLAS° — grid globe
  {
    name: "ATLAS°",
    svg: (
      <svg viewBox="0 0 130 36" width="100%" height="100%" preserveAspectRatio="xMidYMid meet">
        <g fill="none" stroke="#FAFAFA" strokeWidth="1.6">
          <circle cx="18" cy="18" r="10" />
          <ellipse cx="18" cy="18" rx="4" ry="10" />
          <line x1="8" y1="18" x2="28" y2="18" />
        </g>
        <text x="36" y="23" fontFamily="Inter Tight, sans-serif" fontWeight="600" fontSize="15" fill="#FAFAFA" letterSpacing="0.16em">ATLAS<tspan fill="#A88BFF" fontSize="13" baselineShift="super">°</tspan></text>
      </svg>
    ),
  },
];

function LogoStrip() {
  const track = [...SAMPLE_LOGOS, ...SAMPLE_LOGOS];

  return (
    <section style={{ padding: "48px 0 64px", position: "relative", borderTop: "1px solid var(--border-soft)" }}>
      <div className="wrap">
        <div className="mono" style={{
          textAlign: "center",
          fontSize: 11,
          color: "var(--text-mute)",
          letterSpacing: 0.22,
          textTransform: "uppercase",
          marginBottom: 28,
        }}>
          ◇ Trusted by — 先進企業が、すでに動き始めてる
        </div>

        <div className="logo-marquee">
          <div className="logo-marquee-fade logo-marquee-fade-l" aria-hidden="true" />
          <div className="logo-marquee-fade logo-marquee-fade-r" aria-hidden="true" />
          <div className="logo-track">
            {track.map((logo, i) => (
              <div key={i} className="logo-cell" aria-label={logo.name}>
                <div className="logo-inner">{logo.svg}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        .logo-marquee {
          position: relative;
          max-width: 1120px;
          margin-inline: auto;
          overflow: hidden;
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
        }
        .logo-track {
          display: flex;
          gap: 16px;
          width: max-content;
          animation: scroll-x 50s linear infinite;
        }
        .logo-marquee:hover .logo-track { animation-play-state: paused; }
        .logo-cell {
          flex: 0 0 auto;
          width: 200px;
          height: 88px;
          background: var(--bg-1);
          border: 1px solid var(--border);
          border-radius: 12px;
          overflow: hidden;
          transition: border-color .2s, background .2s, transform .2s;
          display: grid;
          place-items: center;
        }
        .logo-cell:hover {
          border-color: var(--border-strong);
          background: var(--bg-2);
          transform: translateY(-2px);
        }
        .logo-inner {
          width: 78%;
          height: 56%;
          display: grid;
          place-items: center;
          opacity: 0.88;
          transition: opacity .2s;
        }
        .logo-cell:hover .logo-inner { opacity: 1; }
        .logo-marquee-fade {
          position: absolute; top: 0; bottom: 0; width: 80px;
          pointer-events: none; z-index: 2;
        }
        .logo-marquee-fade-l { left: 0; background: linear-gradient(90deg, var(--bg-0), transparent); }
        .logo-marquee-fade-r { right: 0; background: linear-gradient(270deg, var(--bg-0), transparent); }
        @media (max-width: 880px) {
          .logo-cell { width: 160px; height: 76px; }
          .logo-track { gap: 12px; animation-duration: 38s; }
        }
        @media (max-width: 480px) {
          .logo-cell { width: 140px; height: 68px; }
          .logo-track { gap: 10px; animation-duration: 30s; }
        }
      `}</style>
    </section>
  );
}

window.LogoStrip = LogoStrip;
