const { useState: useStateS } = React;

/* ============ Trusted-by payment marks strip ============ */
function TrustedBy() {
  // Recreated payment-brand marks — done in pure CSS/HTML, not their real logos
  const marks = [
    { key: "visa", render: () => (
      <span style={{
        fontWeight: 900, fontStyle: "italic", fontSize: "1.25rem",
        color: "#1A1F71", background: "#fff", padding: ".15rem .55rem",
        borderRadius: 3, letterSpacing: "-0.02em",
      }}>VISA</span>
    )},
    { key: "mc", render: () => (
      <span style={{ display: "inline-flex", alignItems: "center" }}>
        <span style={{ width: 22, height: 22, borderRadius: "50%", background: "#EB001B" }}/>
        <span style={{ width: 22, height: 22, borderRadius: "50%", background: "#F79E1B", marginLeft: -9, mixBlendMode: "screen" }}/>
        <span style={{ marginLeft: ".5rem", color: "var(--text-dim)", fontWeight: 600, fontSize: ".82rem" }}>Mastercard</span>
      </span>
    )},
    { key: "amex", render: () => (
      <span style={{
        background: "linear-gradient(135deg,#006FCF,#002E5D)",
        color: "#fff", padding: ".3rem .7rem", borderRadius: 4,
        fontWeight: 900, fontSize: ".78rem", letterSpacing: ".05em",
      }}>AMEX</span>
    )},
    { key: "disc", render: () => (
      <span style={{
        background: "#FF6000", color: "#fff", fontWeight: 900,
        padding: ".2rem .6rem", borderRadius: 999, fontSize: ".78rem",
      }}>DISCOVER</span>
    )},
    { key: "apple", render: () => (
      <span style={{ color: "var(--white)", fontWeight: 700, fontSize: "1rem", display: "inline-flex", alignItems: "center", gap: ".35rem" }}>
        <svg width="14" height="16" viewBox="0 0 14 16" fill="currentColor" aria-hidden="true"><path d="M11.2 8.5c0-2 1.6-3 1.7-3-.9-1.3-2.3-1.5-2.8-1.5-1.2-.1-2.3.7-2.9.7-.6 0-1.5-.7-2.5-.6-1.3 0-2.5.7-3.2 1.9-1.4 2.3-.3 5.8 1 7.7.6.9 1.4 2 2.4 2 .9 0 1.3-.6 2.5-.6s1.5.6 2.5.6 1.7-.9 2.3-1.9c.7-1.1 1-2.2 1-2.2s-2-.8-2-3.1zm-2-5.7c.5-.6.8-1.5.8-2.3-.8.1-1.7.5-2.2 1.1-.5.5-.9 1.4-.8 2.2.8.1 1.7-.4 2.2-1z"/></svg>
        Pay
      </span>
    )},
    { key: "google", render: () => (
      <span style={{ color: "var(--text-dim)", fontWeight: 600, fontSize: ".9rem", letterSpacing: ".02em" }}>
        <span style={{ color: "#4285F4" }}>G</span>
        <span style={{ color: "#EA4335" }}>o</span>
        <span style={{ color: "#FBBC05" }}>o</span>
        <span style={{ color: "#4285F4" }}>g</span>
        <span style={{ color: "#34A853" }}>l</span>
        <span style={{ color: "#EA4335" }}>e</span>
        <span style={{ color: "var(--white)", marginLeft: ".3rem" }}>Pay</span>
      </span>
    )},
    { key: "ach", render: () => (
      <span style={{ color: "var(--text-dim)", fontWeight: 700, fontSize: ".82rem", letterSpacing: ".1em", border: "1px solid var(--border-strong)", padding: ".28rem .55rem", borderRadius: 5 }}>
        ACH
      </span>
    )},
  ];

  return (
    <section className="trusted-by" style={{
      padding: "1.8rem 0",
      borderTop: "1px solid var(--border)",
      borderBottom: "1px solid var(--border)",
      background: "rgba(0,0,0,0.2)",
    }}>
      <div className="container trusted-by-inner" style={{
        display: "flex", flexWrap: "wrap", gap: "2.5rem",
        alignItems: "center", justifyContent: "space-between",
      }}>
        <div className="trusted-by-label" style={{
          fontSize: ".68rem", color: "var(--muted)",
          textTransform: "uppercase", letterSpacing: ".14em",
          fontWeight: 700, flexShrink: 0,
        }}>
          Networks & rails
        </div>
        <div className="trusted-by-marks" style={{
          display: "flex", alignItems: "center", gap: "2.2rem",
          flexWrap: "wrap", flex: 1, justifyContent: "flex-end", opacity: .85
        }}>
          {marks.map(m => <div key={m.key}>{m.render()}</div>)}
        </div>
      </div>
    </section>
  );
}

/* ============ Capabilities tabs ============ */
function Capabilities() {
  const [tab, setTab] = useStateS("reliable");

  const panels = {
    reliable: {
      label: "Reliable",
      title: "Processing you can count on.",
      body: "Direct banking relationships designed to keep your revenue moving. No sudden holds, no surprise account shutdowns, no processor ghosting you at your busiest week.",
      points: [
        ["99.99%", "Platform uptime SLA"],
        ["<400ms", "Median auth latency"],
        ["Multi-bank", "Failover routing"],
      ],
    },
    transparent: {
      label: "Transparent",
      title: "Clear pricing. No surprises.",
      body: "See exactly what you pay and where your money goes. No hidden markups on interchange, no junk PCI surcharges, no confusing rate tiers stapled onto your statement.",
      points: [
        ["Custom", "Priced to your vertical"],
        ["$0", "Setup & monthly fees"],
        ["24mo", "Historical statements"],
      ],
    },
    control: {
      label: "Full control",
      title: "Your payments, your rules.",
      body: "Configure settlement schedules, set velocity and country rules, manage disputes, and tune your risk engine — all from one dashboard built for operators, not accountants.",
      points: [
        ["Live", "Ledger & approvals"],
        ["Rules", "Velocity, BIN, geo"],
        ["1-click", "Refund & void"],
      ],
    },
  };

  const p = panels[tab];

  return (
    <section className="section" id="capabilities">
      <div className="container">
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: "2.5rem",
          marginBottom: "2rem", alignItems: "end",
        }} className="cap-head">
          <div>
            <div className="tag"><span className="tag-dot"/> Capabilities</div>
            <h2 className="display-lg">One platform for <span>every transaction.</span></h2>
          </div>
          <p className="lede">
            Everything you need to take control of your payment operations. Designed for operators who care about approval rates, not pitch decks.
          </p>
        </div>

        <div style={{
          display: "flex", gap: ".5rem", flexWrap: "wrap",
          marginBottom: "1.8rem",
        }}>
          {Object.entries(panels).map(([k, v]) => (
            <button key={k} onClick={() => setTab(k)}
              className="cap-tab"
              style={{
                padding: ".65rem 1.1rem",
                borderRadius: 999,
                fontSize: ".8rem",
                fontWeight: 700,
                letterSpacing: ".02em",
                border: "1px solid " + (tab === k ? "var(--accent)" : "var(--border)"),
                background: tab === k ? "var(--accent-dim)" : "var(--surface)",
                color: tab === k ? "var(--accent-light)" : "var(--text-dim)",
                transition: "all .2s",
              }}>
              {v.label}
            </button>
          ))}
        </div>

        {/* Panel */}
        <div style={{
          background: "var(--surface)",
          border: "1px solid var(--border)",
          borderRadius: 16,
          padding: "2rem",
          display: "grid",
          gridTemplateColumns: "1.05fr .95fr",
          gap: "2.5rem",
          alignItems: "center",
        }} className="cap-panel-grid cap-panel" key={tab}>
          <div style={{ animation: "fadeSlide .45s ease" }}>
            <h3 style={{ fontSize: "1.75rem", color: "var(--white)", marginBottom: ".8rem", letterSpacing: "-0.02em", fontWeight: 800, lineHeight: 1.12 }}>
              {p.title}
            </h3>
            <p style={{ color: "var(--text-dim)", lineHeight: 1.7, fontSize: "1rem", marginBottom: "1.4rem" }}>
              {p.body}
            </p>
            <div style={{
              display: "grid", gridTemplateColumns: "repeat(3,1fr)",
              borderTop: "1px solid var(--border)",
              paddingTop: "1.3rem",
            }}>
              {p.points.map((pt, idx) => (
                <div key={idx} style={{
                  paddingLeft: idx === 0 ? 0 : "1rem",
                  borderLeft: idx === 0 ? "none" : "1px solid var(--border)",
                }}>
                  <div style={{ fontSize: "1.35rem", fontWeight: 900, color: "var(--accent)", letterSpacing: "-0.02em" }}>{pt[0]}</div>
                  <div style={{ fontSize: ".66rem", color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".08em", marginTop: ".2rem", fontWeight: 600 }}>{pt[1]}</div>
                </div>
              ))}
            </div>
          </div>

          {/* Visual placeholder — schematic dashboard */}
          <div style={{ position: "relative", minHeight: 320, animation: "fadeSlide .45s ease" }}>
            <SchematicViz kind={tab}/>
          </div>
        </div>

        {/* Feature grid below */}
        <div className="grid-3 stagger" style={{ marginTop: "2rem" }}>
          {[
            { h: "Multi-channel acceptance", p: "Credit, debit, ACH, and digital wallets — online, in-store, or recurring." },
            { h: "Fast settlement", p: "Same-day and next-day funding so your cash flow never stalls." },
            { h: "Fraud protection", p: "Built-in risk scoring, velocity rules, and chargeback management." },
            { h: "Real-time analytics", p: "Live approval rates, settlement status, and revenue trends." },
            { h: "Recurring billing", p: "Smart dunning and account updater save failed renewals automatically." },
            { h: "API & integrations", p: "Clean REST API, webhooks, and pre-built plugins for popular platforms." },
          ].map((f, i) => (
            <div key={i} className="card">
              <div className="icon">{String(i + 1).padStart(2, "0")}</div>
              <h4>{f.h}</h4>
              <p>{f.p}</p>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes fadeSlide {
          from { opacity: 0; transform: translateY(8px); }
          to { opacity: 1; transform: none; }
        }
        @media (max-width: 900px) {
          .cap-head, .cap-panel-grid { grid-template-columns: 1fr !important; gap: 1.6rem !important; }
        }
      `}</style>
    </section>
  );
}

/* ============ Schematic viz per tab ============ */
function SchematicViz({ kind }) {
  if (kind === "reliable") {
    return (
      <div style={{
        background: "#0a0a0c",
        border: "1px solid var(--border)",
        borderRadius: 12,
        padding: "1.2rem",
        height: "100%",
        minHeight: 340,
        position: "relative",
        overflow: "hidden",
      }}>
        <div style={{ fontSize: ".68rem", color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".1em", fontWeight: 700, marginBottom: ".8rem" }}>
          Last 24 hours · auth latency
        </div>
        <svg viewBox="0 0 400 200" style={{ width: "100%", height: 180 }}>
          <defs>
            <linearGradient id="grad1" x1="0" x2="0" y1="0" y2="1">
              <stop offset="0%" stopColor="var(--accent)" stopOpacity=".45"/>
              <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
            </linearGradient>
          </defs>
          {/* grid lines */}
          {[0, 1, 2, 3].map(i => (
            <line key={i} x1="0" x2="400" y1={40 + i * 40} y2={40 + i * 40} stroke="var(--border)" strokeDasharray="2 4"/>
          ))}
          {/* area */}
          <path d="M0 140 L40 128 L80 132 L120 110 L160 118 L200 92 L240 102 L280 82 L320 88 L360 74 L400 82 L400 200 L0 200 Z"
                fill="url(#grad1)"/>
          <path d="M0 140 L40 128 L80 132 L120 110 L160 118 L200 92 L240 102 L280 82 L320 88 L360 74 L400 82"
                fill="none" stroke="var(--accent)" strokeWidth="2"/>
          {/* pulse point */}
          <circle cx="400" cy="82" r="4" fill="var(--accent)">
            <animate attributeName="r" values="4;8;4" dur="1.8s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="1;0.3;1" dur="1.8s" repeatCount="indefinite"/>
          </circle>
        </svg>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: ".7rem", marginTop: "1rem" }}>
          {["Bank A", "Bank B", "Bank C", "Bank D"].map((b, i) => (
            <div key={b} style={{
              border: "1px solid var(--border)", borderRadius: 8,
              padding: ".55rem .7rem", fontSize: ".7rem",
              color: "var(--text-dim)", display: "flex", alignItems: "center", gap: ".4rem"
            }}>
              <span style={{
                width: 6, height: 6, borderRadius: "50%",
                background: i === 1 ? "var(--gold)" : "#87d37c"
              }}/>
              {b}
            </div>
          ))}
        </div>
      </div>
    );
  }

  if (kind === "transparent") {
    return (
      <div style={{
        background: "#0a0a0c",
        border: "1px solid var(--border)",
        borderRadius: 12,
        padding: "1.2rem",
        minHeight: 340,
      }}>
        <div style={{ fontSize: ".68rem", color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".1em", fontWeight: 700, marginBottom: ".8rem" }}>
          Statement breakdown · Mar 2026
        </div>
        <div style={{ display: "grid", gap: ".5rem" }}>
          {[
            ["Interchange (at cost)", "$18,420.12", 72, "var(--accent)"],
            ["Network fees (at cost)", "$2,840.50", 11, "var(--accent-light)"],
            ["AsherPay margin", "$4,262.00", 17, "#87d37c"],
            ["Hidden / junk fees", "$0.00", 0, "var(--muted)"],
          ].map(([lbl, v, pct, c], i) => (
            <div key={i}>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: ".78rem", marginBottom: ".3rem" }}>
                <span style={{ color: "var(--text-dim)" }}>{lbl}</span>
                <span style={{ color: "var(--white)", fontFamily: "var(--font-mono)", fontWeight: 600 }}>{v}</span>
              </div>
              <div style={{ height: 6, background: "rgba(255,255,255,0.05)", borderRadius: 3, overflow: "hidden" }}>
                <div style={{ width: pct + "%", height: "100%", background: c, transition: "width .8s" }}/>
              </div>
            </div>
          ))}
        </div>
        <div style={{
          marginTop: "1.2rem",
          padding: ".85rem 1rem",
          background: "var(--accent-dim)",
          border: "1px solid var(--accent-border)",
          borderRadius: 10,
          fontSize: ".78rem",
          color: "var(--text-dim)",
        }}>
          <strong style={{ color: "var(--accent-light)" }}>True effective rate:</strong> 2.61% — itemized down to the basis point.
        </div>
      </div>
    );
  }

  // control
  return (
    <div style={{
      background: "#0a0a0c",
      border: "1px solid var(--border)",
      borderRadius: 12,
      padding: "1.2rem",
      minHeight: 340,
    }}>
      <div style={{ fontSize: ".68rem", color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".1em", fontWeight: 700, marginBottom: ".8rem" }}>
        Risk rules · engine
      </div>
      <div style={{ display: "grid", gap: ".55rem" }}>
        {[
          { rule: "max_velocity_per_card", val: "3 / 24h", on: true },
          { rule: "block_bin", val: "ranges", on: true },
          { rule: "geo_allowlist", val: "US, CA, UK, EU", on: true },
          { rule: "require_cvv", val: "always", on: true },
          { rule: "amount_threshold", val: "> $1,500 → manual", on: false },
          { rule: "sanction_screening", val: "OFAC + PEP", on: true },
        ].map((r, i) => (
          <div key={i} style={{
            display: "flex", alignItems: "center", justifyContent: "space-between",
            padding: ".65rem .8rem",
            border: "1px solid var(--border)",
            borderRadius: 8,
            background: r.on ? "rgba(242,122,26,0.04)" : "transparent",
          }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: ".76rem", color: "var(--text-dim)" }}>{r.rule}</span>
            <div style={{ display: "flex", alignItems: "center", gap: ".7rem" }}>
              <span style={{ fontSize: ".74rem", color: "var(--white)" }}>{r.val}</span>
              <span style={{
                width: 28, height: 16, borderRadius: 999,
                background: r.on ? "var(--accent)" : "rgba(255,255,255,0.1)",
                position: "relative", transition: "background .2s"
              }}>
                <span style={{
                  position: "absolute", top: 2, left: r.on ? 14 : 2,
                  width: 12, height: 12, borderRadius: "50%",
                  background: "#fff", transition: "left .2s",
                }}/>
              </span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

window.TrustedBy = TrustedBy;
window.Capabilities = Capabilities;