/* global React, ReactDOM */
const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#3B6BFF",
  "hero": "receipt",
  "headline": "aggregator"
}/*EDITMODE-END*/;

const HEADLINES = {
  aggregator: {
    eyebrow: "Payments aggregator",
    title: <>Every payment <em>method</em>.<br/>Every acquirer.<br/><span className="accent">One stack.</span></>,
    lead: "Rival aggregates the region's card schemes, wallets, BNPL providers and bank rails into a single API — and routes every transaction to the acquirer most likely to approve it."
  },
  stack: {
    eyebrow: "Modern payments",
    title: <>Stop stitching <em>PSPs</em><br/>together.<br/><span className="accent">Start with Rival.</span></>,
    lead: "One contract, one integration, one reconciliation. Rival consolidates the fragmented payments stack into infrastructure your finance team can actually trust."
  },
  region: {
    eyebrow: "Built for the GCC",
    title: <>The payments rail <em>between</em><br/>the region<br/><span className="accent">and the world.</span></>,
    lead: "Local where it matters — Mada, Knet, Benefit, Fawry, Tabby. Global where it counts — Visa, Mastercard, Apple Pay. One Rival contract covers them all."
  },
};

function App() {
  const { useTweaks } = window;
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply accent live
  useEffect(() => {
    const root = document.documentElement;
    const hex = tweaks.accent;
    root.style.setProperty("--accent", hex);
    // Derived softer + glow versions
    const rgb = hexToRgb(hex);
    root.style.setProperty("--accent-glow", `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.18)`);
    root.style.setProperty("--accent-soft", `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.08)`);
    // lighter for accent-2
    root.style.setProperty("--accent-2", lighten(hex, 0.18));
  }, [tweaks.accent]);

  const HL = HEADLINES[tweaks.headline] || HEADLINES.aggregator;

  return (
    <>
      <window.RivalNav/>

      {/* HERO */}
      <section id="top" className="hero grain">
        <div className="hero-glow"/>
        <div className="container">
          <div className="hero-grid">
            <div className="hero-copy">
              <span className="eyebrow">{HL.eyebrow}</span>
              <h1 className="display">{HL.title}</h1>
              <p className="lead">{HL.lead}</p>
              <div className="hero-actions">
                <a href="#contact" className="btn btn-primary btn-lg">
                  Talk to sales <window.RivalIcons.Arrow/>
                </a>
                <a href="#developers" className="btn btn-ghost btn-lg">
                  See how it works
                </a>
              </div>
              <div style={{ display: "flex", alignItems: "center", gap: 18, marginTop: 8, color: "var(--text-3)", fontSize: 13 }}>
                <span>Available across</span>
                <div style={{ display: "flex", gap: 12, color: "var(--text-2)" }}>
                  <span>UAE</span>
                  <span style={{ color: "var(--text-4)" }}>·</span>
                  <span>KSA</span>
                  <span style={{ color: "var(--text-4)" }}>·</span>
                  <span>KWT</span>
                  <span style={{ color: "var(--text-4)" }}>·</span>
                  <span>BHR</span>
                  <span style={{ color: "var(--text-4)" }}>·</span>
                  <span>QAT</span>
                </div>
              </div>
            </div>
            <div>
              {tweaks.hero === "receipt"
                ? <window.RivalHeroReceipt/>
                : <window.RivalHeroDashboard/>}
            </div>
          </div>
        </div>
      </section>

      {/* LOGO WALL + METRICS STRIP removed for launch — no fake names / numbers */}

      {/* AGGREGATOR — what it is */}
      <section id="solutions" data-screen-label="01 Aggregator">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">The aggregator</span>
            <h2 className="h1">Many payment methods in. <em>One settlement</em> out.</h2>
            <p className="lead">
              Rival sits between your checkout and the region's banks. We hold the licences, the integrations and the relationships — you ship one integration and get every method, every acquirer, every bank.
            </p>
          </div>
          <window.RivalAggregatorDiagram/>
        </div>
      </section>

      {/* METHODS GRID */}
      <section id="methods" style={{ background: "var(--ink-800)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }} data-screen-label="02 Methods">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">Payment methods</span>
            <h2 className="h1">If your customer can pay with it, <em>we accept it.</em></h2>
            <p className="lead">Cards, wallets, BNPL, regional rails and bank transfers — every method your customers expect, behind a single API. Sixteen live today; new methods ship every quarter.</p>
          </div>
          <window.RivalMethodsGrid/>
        </div>
      </section>

      {/* PLATFORM / FEATURES */}
      <section id="platform" data-screen-label="03 Platform">
        <div className="container">
          <div className="section-head">
            <span className="eyebrow">The platform</span>
            <h2 className="h1">Built like a bank. <em>Felt like a startup.</em></h2>
            <p className="lead">
              The fundamentals you'd expect from infrastructure that moves real money — wrapped in an experience that's a pleasure to integrate against.
            </p>
          </div>
          <window.RivalFeatureGrid/>
        </div>
      </section>

      {/* DEVELOPERS */}
      <section id="developers" style={{ background: "var(--ink-800)", borderTop: "1px solid var(--line)", borderBottom: "1px solid var(--line)" }} data-screen-label="04 Developers">
        <div className="container">
          <window.RivalDeveloperBlock/>
        </div>
      </section>

      {/* COMPARISON + QUOTE removed for launch — no naming competitors, no fake customers */}

      {/* CTA / CONTACT */}
      <section id="contact" className="cta-section" data-screen-label="07 Contact">
        <div className="container">
          <window.RivalContactSection/>
        </div>
      </section>

      <div id="company">
        <window.RivalFooter/>
      </div>

      <window.RivalTweaksUI tweaks={tweaks} setTweak={setTweak}/>
    </>
  );
}

// ============ Helpers ============
function hexToRgb(hex) {
  const h = hex.replace("#", "");
  const n = parseInt(h.length === 3 ? h.split("").map(c => c + c).join("") : h, 16);
  return { r: (n >> 16) & 255, g: (n >> 8) & 255, b: n & 255 };
}
function lighten(hex, amt) {
  const { r, g, b } = hexToRgb(hex);
  const mix = (c) => Math.round(c + (255 - c) * amt);
  return `#${[mix(r), mix(g), mix(b)].map(c => c.toString(16).padStart(2, "0")).join("")}`;
}

ReactDOM.createRoot(document.getElementById("root")).render(<App/>);