/* global React */
const { Arrow } = window.RivalIcons;

// ============ Aggregator visual — one in, many out ============
function AggregatorDiagram() {
  return (
    <div style={{ position: "relative", width: "100%", maxWidth: 880, marginInline: "auto" }}>
      <svg viewBox="0 0 800 420" style={{ width: "100%", height: "auto" }}>
        <defs>
          <linearGradient id="line-grad" x1="0" y1="0" x2="1" y2="0">
            <stop offset="0" stopColor="var(--text-4)" stopOpacity="0.3"/>
            <stop offset="0.5" stopColor="var(--accent)" stopOpacity="0.9"/>
            <stop offset="1" stopColor="var(--text-4)" stopOpacity="0.3"/>
          </linearGradient>
          <radialGradient id="hub-glow">
            <stop offset="0" stopColor="var(--accent)" stopOpacity="0.3"/>
            <stop offset="1" stopColor="var(--accent)" stopOpacity="0"/>
          </radialGradient>
        </defs>

        {/* Left column: payment methods (inputs) */}
        {[
          { y: 40, label: "Visa / Mastercard" },
          { y: 100, label: "Apple Pay" },
          { y: 160, label: "Mada · Knet · Benefit" },
          { y: 220, label: "Tabby · Tamara" },
          { y: 280, label: "Bank transfer · IBAN" },
          { y: 340, label: "STC Pay · Careem Pay" },
        ].map((n, i) => (
          <g key={i}>
            <rect x="0" y={n.y} width="200" height="44" rx="10"
              fill="var(--ink-700)" stroke="var(--line-2)" strokeWidth="1"/>
            <text x="20" y={n.y + 27} fill="var(--text-2)" fontSize="13" fontFamily="var(--font-body)" fontWeight="500">{n.label}</text>
            <circle cx="200" cy={n.y + 22} r="3" fill="var(--accent)"/>
            <line x1="200" y1={n.y + 22} x2="360" y2="210"
              stroke="url(#line-grad)" strokeWidth="1" fill="none"/>
            <circle r="2.5" fill="var(--accent)">
              <animateMotion dur={`${3 + i * 0.3}s`} repeatCount="indefinite" begin={`${i * 0.5}s`}>
                <mpath xlinkHref={`#in-${i}`}/>
              </animateMotion>
            </circle>
            <path id={`in-${i}`} d={`M200 ${n.y + 22} L360 210`} fill="none" stroke="none"/>
          </g>
        ))}

        {/* Center hub */}
        <circle cx="400" cy="210" r="120" fill="url(#hub-glow)"/>
        <rect x="320" y="170" width="160" height="80" rx="14"
          fill="var(--ink-700)" stroke="var(--accent)" strokeWidth="1.5"/>
        <text x="400" y="205" textAnchor="middle" fill="white" fontSize="22"
          fontFamily="var(--font-display)" fontWeight="900" letterSpacing="-0.04em">Rival</text>
        <text x="400" y="227" textAnchor="middle" fill="var(--text-3)" fontSize="11" letterSpacing="0.1em" fontFamily="var(--font-body)">SMART ORCHESTRATION</text>

        {/* Right column: outputs */}
        {[
          { y: 70, label: "ENBD" },
          { y: 130, label: "Mashreq" },
          { y: 190, label: "ADCB" },
          { y: 250, label: "QNB" },
          { y: 310, label: "FAB" },
        ].map((n, i) => (
          <g key={i}>
            <rect x="600" y={n.y} width="200" height="44" rx="10"
              fill="var(--ink-700)" stroke="var(--line-2)" strokeWidth="1"/>
            <text x="618" y={n.y + 23} fill="var(--text-3)" fontSize="10" letterSpacing="0.06em" fontFamily="var(--font-body)">ACQUIRER</text>
            <text x="618" y={n.y + 36} fill="var(--text)" fontSize="13" fontFamily="var(--font-display)" fontWeight="700">{n.label}</text>
            <circle cx="600" cy={n.y + 22} r="3" fill="var(--accent)"/>
            <line x1="480" y1="210" x2="600" y2={n.y + 22}
              stroke="url(#line-grad)" strokeWidth="1" fill="none"/>
            <circle r="2.5" fill="var(--accent)">
              <animateMotion dur={`${2.5 + i * 0.3}s`} repeatCount="indefinite" begin={`${i * 0.4 + 0.8}s`}>
                <mpath xlinkHref={`#out-${i}`}/>
              </animateMotion>
            </circle>
            <path id={`out-${i}`} d={`M480 210 L600 ${n.y + 22}`} fill="none" stroke="none"/>
          </g>
        ))}
      </svg>
    </div>
  );
}

// ============ Methods grid ============
const METHODS = [
  { cat: "CARDS", name: "Visa", logo: "V" },
  { cat: "CARDS", name: "Mastercard", logo: "M" },
  { cat: "CARDS", name: "Amex", logo: "A" },
  { cat: "WALLET", name: "Apple Pay", logo: "" },
  { cat: "WALLET", name: "Google Pay", logo: "G" },
  { cat: "WALLET", name: "Samsung Pay", logo: "S" },
  { cat: "REGIONAL", name: "Mada", logo: "م" },
  { cat: "REGIONAL", name: "Knet", logo: "K" },
  { cat: "REGIONAL", name: "Benefit", logo: "B" },
  { cat: "REGIONAL", name: "Fawry", logo: "ف" },
  { cat: "BNPL", name: "Tabby", logo: "T" },
  { cat: "BNPL", name: "Tamara", logo: "ت" },
  { cat: "BANK", name: "Direct debit", logo: "↔" },
  { cat: "BANK", name: "IBAN transfer", logo: "≡" },
  { cat: "WALLET", name: "STC Pay", logo: "س" },
  { cat: "WALLET", name: "Careem Pay", logo: "C" },
];

function MethodsGrid() {
  return (
    <div className="methods-grid">
      {METHODS.map((m, i) => (
        <div className="method-tile" key={i}>
          <div className="method-logo" style={{ width: 36, height: 36, borderRadius: 8, background: "var(--ink-700)", border: "1px solid var(--line)", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 16 }}>
            {m.logo || (
              <svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
                <path d="M11.624 7.222c-.876-1.005-1.435-2.07-1.435-3.142 0-1.067.527-2.043 1.314-2.795-.795-.045-1.643.215-2.296.673-.633.443-1.184 1.158-1.184 2.099 0 1.058.529 2.183 1.272 3.135.717.917 1.586 1.61 2.401 1.6.79-.009 1.493-.49 1.928-1.07-.715-.094-1.387-.467-2-1.5z"/>
              </svg>
            )}
          </div>
          <div>
            <div className="method-type">{m.cat}</div>
            <div className="method-name">{m.name}</div>
          </div>
        </div>
      ))}
    </div>
  );
}

// ============ Feature grid ============
const { Bolt, Shield, Globe, Network, Chart, Code, Lock, Refresh } = window.RivalIcons;

function FeatureGrid() {
  const items = [
    { icon: <Network/>, title: "One integration, every method", body: "Cards, regional wallets, BNPL and bank rails behind a single API. One contract covers what used to take three." },
    { icon: <Globe/>, title: "Local where it matters", body: "Mada, Knet, Benefit, Tabby, Tamara and more — alongside Visa, Mastercard and Apple Pay. The full regional rail." },
    { icon: <Shield/>, title: "Banking-grade infrastructure", body: "PCI DSS Level 1, tokenisation, network tokens. Your card data stays out of your servers — and out of harm's way." },
  ];
  return (
    <div className="features">
      {items.map((f, i) => (
        <div className="feature" key={i}>
          <div className="feature-icon">{f.icon}</div>
          <h3 className="feature-title">{f.title}</h3>
          <p className="feature-body">{f.body}</p>
        </div>
      ))}
    </div>
  );
}

// ============ Developer block ============
function DeveloperBlock() {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center" }} className="dev-grid">
      <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
        <span className="eyebrow">For builders</span>
        <h2 className="h1">One <em>integration.</em><br/>Every rail in the region.</h2>
        <p className="lead">A single REST API and SDKs in seven languages. Webhooks that don't lie. Test mode with realistic acquirer behaviour. Go live in days, not quarters.</p>
        <div style={{ display: "flex", gap: 12 }}>
          <a href="#contact" className="btn btn-accent">Request access <Arrow/></a>
        </div>
        <ul style={{ listStyle: "none", padding: 0, margin: "16px 0 0", display: "flex", flexDirection: "column", gap: 12 }}>
          {[
            "Idempotency built in — replay safely",
            "Webhooks with cryptographic signing",
            "Sandbox mirrors every regional method",
            "OpenAPI 3.1 spec, generated SDKs",
          ].map((t, i) => (
            <li key={i} style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 14, color: "var(--text-2)" }}>
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                <path d="M3 8.5 6.5 12 13 4.5" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
              {t}
            </li>
          ))}
        </ul>
      </div>

      <CodeTabs/>
    </div>
  );
}

function CodeTabs() {
  const [tab, setTab] = React.useState("create");
  const codes = {
    create: (
      <>
        <span className="c">// Charge any payment method in the region</span>{"\n"}
        <span className="k">const</span> <span className="p">charge</span> = <span className="k">await</span> <span className="p">rival</span>.<span className="fn">charges</span>.<span className="fn">create</span>({"({"})<br/>
        {"  "}<span className="p">amount</span>: <span className="n">12480_00</span>,{"\n"}
        {"  "}<span className="p">currency</span>: <span className="s">"AED"</span>,{"\n"}
        {"  "}<span className="p">customer</span>: <span className="s">"cus_8f2a91"</span>,{"\n"}
        {"  "}<span className="p">method</span>: {"{"}{"\n"}
        {"    "}<span className="p">type</span>: <span className="s">"card"</span>,{"\n"}
        {"    "}<span className="p">token</span>: <span className="s">"tok_live_..."</span>,{"\n"}
        {"  "}{"}"},{"\n"}
        {"  "}<span className="p">routing</span>: <span className="s">"smart"</span>, <span className="c">// or specify an acquirer</span>{"\n"}
        {"  "}<span className="p">metadata</span>: {"{ "}<span className="p">order_id</span>: <span className="s">"ord_4421"</span> {"}"},{"\n"}
        {"});"}
      </>
    ),
    webhook: (
      <>
        <span className="c">// Receive settlement events</span>{"\n"}
        <span className="p">app</span>.<span className="fn">post</span>(<span className="s">"/rival/webhook"</span>, (<span className="p">req</span>, <span className="p">res</span>) =&gt; {"{"}{"\n"}
        {"  "}<span className="k">const</span> <span className="p">evt</span> = <span className="p">rival</span>.<span className="fn">webhooks</span>.<span className="fn">verify</span>(<span className="p">req</span>);{"\n"}
        {"  "}{"\n"}
        {"  "}<span className="k">if</span> (<span className="p">evt</span>.<span className="p">type</span> === <span className="s">"charge.settled"</span>) {"{"}{"\n"}
        {"    "}<span className="c">// AED 12,480.00 hit your account</span>{"\n"}
        {"    "}<span className="fn">creditOrder</span>(<span className="p">evt</span>.<span className="p">data</span>.<span className="p">metadata</span>.<span className="p">order_id</span>);{"\n"}
        {"  "}{"}"}{"\n"}
        {"  "}<span className="p">res</span>.<span className="fn">sendStatus</span>(<span className="n">200</span>);{"\n"}
        {"});"}
      </>
    ),
    payout: (
      <>
        <span className="c">// Pay out to a vendor in seconds</span>{"\n"}
        <span className="k">await</span> <span className="p">rival</span>.<span className="fn">payouts</span>.<span className="fn">create</span>({"({"})<br/>
        {"  "}<span className="p">amount</span>: <span className="n">8500_00</span>,{"\n"}
        {"  "}<span className="p">currency</span>: <span className="s">"SAR"</span>,{"\n"}
        {"  "}<span className="p">destination</span>: {"{"}{"\n"}
        {"    "}<span className="p">type</span>: <span className="s">"iban"</span>,{"\n"}
        {"    "}<span className="p">iban</span>: <span className="s">"SA03 8000 0000 6080 1016 7519"</span>,{"\n"}
        {"  "}{"}"},{"\n"}
        {"  "}<span className="p">rail</span>: <span className="s">"sarie_instant"</span>,{"\n"}
        {"});"}
      </>
    ),
  };
  return (
    <div className="code-block" style={{ alignSelf: "stretch" }}>
      <div className="code-head">
        <span className="code-dot" style={{ background: "#FF5F57" }}/>
        <span className="code-dot" style={{ background: "#FEBC2E" }}/>
        <span className="code-dot" style={{ background: "#28C840" }}/>
        <div style={{ display: "flex", gap: 4, marginLeft: 16 }}>
          {[["create","Create a charge"],["webhook","Handle webhook"],["payout","Send a payout"]].map(([k, l]) => (
            <button key={k} onClick={() => setTab(k)}
              style={{
                padding: "6px 12px",
                fontSize: 12,
                fontFamily: "var(--font-body)",
                borderRadius: 6,
                color: tab === k ? "var(--text)" : "var(--text-3)",
                background: tab === k ? "var(--ink-600)" : "transparent",
              }}>{l}</button>
          ))}
        </div>
      </div>
      <pre className="code-body" style={{ margin: 0, whiteSpace: "pre" }}>
        {codes[tab]}
      </pre>
    </div>
  );
}

// ============ Comparison row ============
function ComparisonTable() {
  const rows = [
    ["One integration for cards, wallets, BNPL, banks", true, "partial", false],
    ["Smart routing across multiple acquirers", true, false, false],
    ["Unified reconciliation across PSPs", true, false, false],
    ["Regional rails (Mada, Knet, Tabby) on day one", true, false, "partial"],
    ["Settlement in AED, SAR, USD, EUR", true, true, "partial"],
    ["Dedicated regional support", true, false, true],
  ];
  return (
    <div style={{
      background: "var(--ink-800)",
      border: "1px solid var(--line)",
      borderRadius: "var(--r-lg)",
      overflow: "hidden",
    }}>
      <div style={{
        display: "grid",
        gridTemplateColumns: "2fr 1fr 1fr 1fr",
        padding: "20px 28px",
        borderBottom: "1px solid var(--line)",
        background: "var(--ink-700)",
        fontSize: 12,
        color: "var(--text-3)",
        letterSpacing: "0.06em",
        textTransform: "uppercase",
        fontWeight: 500,
      }}>
        <div></div>
        <div style={{ textAlign: "center" }}>
          <span className="wordmark" style={{ fontSize: 16 }}>
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none">
              <path d="M4 20 L9 4 L14 4 L11 13 L20 13 L20 20 L4 20 Z" fill="var(--accent)"/>
              <path d="M9 13 L11 13 L11 20 L8 20 Z" fill="white"/>
            </svg>
            Rival
          </span>
        </div>
        <div style={{ textAlign: "center" }}>Global PSP</div>
        <div style={{ textAlign: "center" }}>Local acquirer</div>
      </div>
      {rows.map(([label, ...vals], i) => (
        <div key={i} style={{
          display: "grid",
          gridTemplateColumns: "2fr 1fr 1fr 1fr",
          padding: "18px 28px",
          borderBottom: i < rows.length - 1 ? "1px solid var(--line)" : "none",
          fontSize: 14,
          alignItems: "center",
        }}>
          <div style={{ color: "var(--text)" }}>{label}</div>
          {vals.map((v, j) => (
            <div key={j} style={{ textAlign: "center" }}>
              {v === true ? (
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" style={{ display: "inline-block" }}>
                  <circle cx="12" cy="12" r="10" fill={j === 0 ? "var(--accent)" : "var(--ink-600)"}/>
                  <path d="m7 12 3 3 7-7" stroke={j === 0 ? "white" : "var(--text-2)"} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              ) : v === false ? (
                <span style={{ color: "var(--text-4)", fontSize: 18 }}>—</span>
              ) : (
                <span style={{
                  fontSize: 11,
                  color: "var(--warn)",
                  letterSpacing: "0.06em",
                  textTransform: "uppercase",
                  padding: "3px 8px",
                  borderRadius: 4,
                  background: "rgba(245, 181, 68, 0.1)",
                  border: "1px solid rgba(245, 181, 68, 0.2)",
                }}>Partial</span>
              )}
            </div>
          ))}
        </div>
      ))}
    </div>
  );
}

window.RivalAggregatorDiagram = AggregatorDiagram;
window.RivalMethodsGrid = MethodsGrid;
window.RivalFeatureGrid = FeatureGrid;
window.RivalDeveloperBlock = DeveloperBlock;
window.RivalComparisonTable = ComparisonTable;