/* global React */

const { useEffect, useState, useRef } = React;

// Sized for balanced OPTICAL MASS: each logo should feel like it occupies the
// same area on the strip. Wide wordmarks pulled down, compact marks pushed up.
// Logos are pre-baked white-on-transparent PNGs at 200px tall (see
// assets/partners-white/). This replaces the previous approach of taking
// huge full-color source PNGs (some 3000-4000px wide) and applying
// `filter: brightness(0) invert(1)` per frame. The combined per-frame
// decode + filter cost across 28 animating images was causing mobile
// GPUs to evict and re-rasterize the marquee layer intermittently,
// producing visible "blank then restart" flashes on real devices.
const PARTNERS = [
  { name: "IBM", src: "assets/partners-white/ibm.png", h: 34 },
  { name: "Securitize", src: "assets/partners-white/securitize.png", h: 32 },
  { name: "DFNS", src: "assets/partners-white/dfns.png", h: 50 },
  { name: "Contour", src: "assets/partners-white/contour-original.png", h: 24 },
  { name: "Circle", src: "assets/partners-white/circle-original.png", h: 40 },
  { name: "Archax", src: "assets/partners-white/archax.png", h: 54, cls: "logo-archax" },
  { name: "SBI Holdings", src: "assets/partners-white/sbi-holdings.png", h: 50, cls: "logo-sbi" },
  { name: "Bitso", src: "assets/partners-white/bitso.png", h: 38 },
  { name: "BitGo", src: "assets/partners-white/bitgo.png", h: 30 },
  { name: "Fireblocks", src: "assets/partners-white/fireblocks.png", h: 34 },
  { name: "Kiln", src: "assets/partners-white/kiln.png", h: 38 },
  { name: "Anchorage Digital", src: "assets/partners-white/anchorage.png", h: 40 },
  { name: "Republic", src: "assets/partners-white/republic.png", h: 38 },
  { name: "HashKey", src: "assets/partners-white/hashkey.png", h: 32 },
  { name: "UOB", src: "assets/partners-white/uob.png", h: 36 },
  { name: "Animoca Brands", src: "assets/partners-white/animoca.png", h: 52 },
  { name: "Ankr", src: "assets/partners-white/ankr.png", h: 32 },
  { name: "ArkStream Capital", src: "assets/partners-white/arkstream.png", h: 40 },
];

const SOLUTIONS = [
{
  id: "stablecoins",
  num: "01",
  name: "Stablecoins",
  image: "assets/sol-stablecoins.webp",
  mediaLabel: "Treasury operations desk — close-up of hands at a Bloomberg-style terminal mid-keystroke; trader's monitor glow on the keyboard. Editorial documentary, no face.",
  headline: "Stablecoin rails for institutions moving dollars on-chain.",
  purpose:
  "A regulated dollar settlement layer for banks, corporates, and asset managers. USDC on XDC, Contour Network, and the instrument-level controls institutional desks require.",
  reasons: [
  { t: "Native USDC on XDC", d: "Regulated dollar settlement without bridging, wrapping, or synthetic equivalents." },
  { t: "Contour Network for trade-tied settlement", d: "Stablecoin movement anchored to trade instruments and verifiable counterparties." },
  { t: "Identity and transfer controls", d: "Allow-lists, role-based permissions, and instrument-level rules at the protocol layer." },
  { t: "ISO 20022 message alignment", d: "Stablecoin payments that reconcile cleanly into the systems your bank already runs." }],

  uses: [
  { t: "Treasury mobility", d: "Move operating dollars between desks, entities, and jurisdictions on a single rail." },
  { t: "Settlement for tokenized assets", d: "The dollar leg for tokenized real-world assets issued or serviced on XDC." },
  { t: "Counterparty payouts", d: "Programmatic disbursement to vetted counterparties under policy." },
  { t: "Liquidity operations", d: "Intraday positioning across venues without multi-hop conversion friction." }]

},
{
  id: "payments",
  num: "02",
  name: "Payments",
  image: "assets/sol-payments.webp",
  mediaLabel: "Operations floor — single analyst foreground, large monitor wall in soft focus behind. Profile or three-quarter, mid-action. Reportage, not posed.",
  headline: "Cross-border settlement, on infrastructure built for the banking system.",
  purpose:
  "Cross-border payment rails for banks and enterprise treasuries. Stablecoin settlement, ISO 20022 messaging, and the institutional controls counsel needs to sign off.",
  reasons: [
  { t: "ISO 20022 native messaging", d: "The format your correspondent network, sanctions screening, and reconciliation already speak." },
  { t: "Institutional controls", d: "Identity, allow-lists, and policy enforcement enforced at the network layer itself." },
  { t: "Stablecoin settlement leg", d: "A dollar leg that finalizes on a regulated asset, not a volatile proxy." },
  { t: "Banking-aligned operations", d: "U.S.-based engineering and institutional onramps, not offshore relay." }],

  uses: [
  { t: "Corridor modernization", d: "Lift select corridors onto programmable rails without replacing the core." },
  { t: "Corporate disbursements", d: "Treasury-initiated payments to suppliers, counterparties, and subsidiaries." },
  { t: "Bank-to-bank settlement", d: "Institutional settlement between counterparty banks under bilateral policy." },
  { t: "FX and stablecoin conversion", d: "Fiat, FX, and stablecoin legs coordinated under a single instruction set." }]

},
{
  id: "tokenization",
  num: "03",
  name: "Tokenization",
  image: "assets/sol-tokenization.webp",
  mediaLabel: "Document review — fountain pen poised over a stack of legal-size paper on a dark wood desk. Hands and forearms only, no face. Quiet, considered.",
  headline: "Real-world asset infrastructure, with compliance built into the substrate.",
  purpose:
  "Issuance, transfer, and lifecycle management of tokenized real-world assets. Built for asset managers, banks, and issuers whose compliance obligations follow the asset onto the network.",
  reasons: [
  { t: "Compliance at the protocol layer", d: "Transfer restrictions, jurisdictional rules, and investor eligibility enforced at the substrate." },
  { t: "Lifecycle management", d: "Issuance, servicing, corporate actions, and redemption handled as first-class operations." },
  { t: "Interoperable with payment rails", d: "The asset leg and the dollar leg settle on the same network, under consistent controls." },
  { t: "Institutional onramps", d: "Regulated custody, identity verification, and secondary-market pathways integrated end to end." }],

  uses: [
  { t: "Money market fund shares", d: "Tokenized MMF programs with on-chain servicing and regulated redemption." },
  { t: "Private credit and debt", d: "Primary issuance and ongoing servicing of institutional private-credit positions." },
  { t: "Real estate and infrastructure", d: "Fractionalized institutional real-asset programs under eligibility rules." },
  { t: "Commodities and trade-linked assets", d: "Instruments tied to underlying trade activity with verifiable provenance." }]

},
{
  id: "trade",
  num: "04",
  name: "Trade Finance",
  image: "assets/sol-trade.webp",
  mediaLabel: "Port operations control room — single woman at a radar / manifest console, lit by screen glow. Three-quarter view, mid-action. Reportage.",
  headline: "Trade documents and settlement, on one verifiable network.",
  purpose:
  "Digital trade documents, letters of credit, and settlement-ready instruments. Institutional trade finance that reconciles its paper and its money on the same rail.",
  reasons: [
  { t: "Proven in institutional trade finance", d: "Deployed in production with regulated institutions operating real corridors." },
  { t: "Documents and payment together", d: "Electronic bills of lading, letters of credit, and the settlement leg coordinated on one network." },
  { t: "Verifiable counterparties", d: "Identity, sanctions posture, and entity attestations as part of the instrument." },
  { t: "ISO 20022 and banking alignment", d: "Instruments built to slot into the systems trade operations already runs on." }],

  uses: [
  { t: "Electronic bills of lading", d: "Machine-verifiable, transferable eBLs with institutional title certainty." },
  { t: "Letters of credit", d: "Digital LC issuance, amendment, and settlement across counterparty banks." },
  { t: "Receivables finance", d: "Tokenized receivables programs with transparent chain of assignment." },
  { t: "Supply-chain settlement", d: "Coordinated payment against verified delivery events and documentation." }]

},
{
  id: "network",
  num: "05",
  name: "Network",
  image: "assets/sol-network.webp",
  mediaLabel: "Executive lounge conversation — two senior financial executives mid-discussion, one walking past in the corridor beyond. Wide environmental, daylit. Documentary.",
  headline: "Participate in XDC as an institution.",
  purpose:
  "Institutional pathways into the network itself. Operate a masternode, stake at institutional scale, or participate as a validating party under regulated custody.",
  reasons: [
  { t: "Institutional operator pathways", d: "Masternode and validator participation structured for regulated entities." },
  { t: "Custody-compatible staking", d: "Programs designed to operate through institutional custodians and qualified agents." },
  { t: "Continuous production history", d: "Network operation with uninterrupted uptime supporting real institutional activity." },
  { t: "U.S.-based support", d: "Onboarding, operational, and compliance support from a U.S. team." }],

  uses: [
  { t: "Masternode operation", d: "Run network infrastructure under institutional controls and monitoring." },
  { t: "Staking programs", d: "Participate in network consensus through custody-aligned programs." },
  { t: "Validator participation", d: "Serve as a validating party under regulated pathways." },
  { t: "Network infrastructure", d: "Operate RPC, data, or indexing services for institutional consumers." }]

}];


const WHY = [
{ n: "01", t: "Purpose-built for institutional controls", d: "Identity, transfer restrictions, and policy enforcement are first-class at the protocol layer, not overlays bolted on after the fact." },
{ n: "02", t: "ISO 20022 native messaging", d: "The format correspondent banking, reconciliation, and sanctions screening already speak." },
{ n: "03", t: "Proven at institutional scale", d: "In production for trade finance, stablecoin settlement, and tokenization programs with regulated counterparties." },
{ n: "04", t: "U.S. team, regulated pathways", d: "Engineering, onboarding, and operational support in the United States. Custody relationships designed for institutional counsel." },
{ n: "05", t: "Continuous operation", d: "Seven-plus years of uninterrupted network operation supporting real institutional activity." }];


function Wordmark({ height = 32, light = false }) {
  return (
    <img
      src="assets/xdc-tech-wordmark.png"
      alt="XDC Tech"
      style={{
        height, width: "auto", display: "block",
        filter: light ? "invert(1)" : "none"
      }} />);


}

function ArrowRight({ size = 14 }) {
  return (
    <svg className="arr" width={size} height={size} viewBox="0 0 14 14" fill="none" aria-hidden="true">
      <path d="M1 7h11M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function Reveal({ children, delay = 0, as = "div", className = "", ...rest }) {
  const ref = useRef(null);
  const [on, setOn] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => {if (e.isIntersecting) {setTimeout(() => setOn(true), delay);io.disconnect();}},
      { rootMargin: "-40px 0px -80px 0px" }
    );
    io.observe(el);
    return () => io.disconnect();
  }, [delay]);
  const Tag = as;
  return <Tag ref={ref} className={`reveal ${on ? "in" : ""} ${className}`} {...rest}>{children}</Tag>;
}

function TopNav() {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [open]);
  const close = () => setOpen(false);
  return (
    <header className={`topnav ${scrolled ? "scrolled" : ""} ${open ? "menu-open" : ""}`}>
      <div className="wrap topnav-inner">
        <a href="#top" aria-label="XDC Tech" className="brand-mark" onClick={close}>
          <Wordmark height={48} />
        </a>
        <nav className="topnav-links" aria-label="Primary">
          <a className="topnav-link" href="#solutions">Solutions</a>
          <a className="topnav-link" href="#why">Why XDC</a>
          <a className="topnav-link" href="#about">About</a>
          <a className="btn btn-ghost btn-sm" href="#contact">Talk to our team <ArrowRight /></a>
        </nav>
        <button
          type="button"
          className="topnav-toggle"
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          aria-controls="mobile-drawer"
          onClick={() => setOpen((v) => !v)}>
          <span className={`topnav-toggle-bars ${open ? "is-x" : ""}`} aria-hidden="true">
            <span></span><span></span>
          </span>
        </button>
      </div>
      <div id="mobile-drawer" className={`mobile-drawer ${open ? "is-open" : ""}`} aria-hidden={!open}>
        <nav className="mobile-drawer-links" aria-label="Mobile">
          <a className="mobile-drawer-link" href="#solutions" onClick={close}>Solutions</a>
          <a className="mobile-drawer-link" href="#why" onClick={close}>Why XDC</a>
          <a className="mobile-drawer-link" href="#about" onClick={close}>About</a>
          <a className="btn btn-primary mobile-drawer-cta" href="#contact" onClick={close}>Talk to our team <ArrowRight /></a>
        </nav>
      </div>
    </header>);

}

function Hero({ tweaks }) {
  return (
    <section className="hero" id="top">
      <div className="wrap">
        <h1 className="h-display hero-headline">
          <span className="hero-line">Institutional</span>
          <span className="hero-line"><span className="accent-word">infrastructure</span> on XDC.</span>
        </h1>
        <p className="hero-sub">Settlement, payments, tokenization, and trade finance rails, built for banks and enterprises.

        </p>
        <div className="hero-cta">
          <a className="btn btn-primary" href="#solutions">Explore the solutions <ArrowRight /></a>
        </div>
        <a className="hero-continue" href="#partners" aria-label="Continue to partners">
          <span className="hero-continue-stem" aria-hidden="true"></span>
          <svg className="hero-continue-chevron" viewBox="0 0 14 8" aria-hidden="true">
            <path d="M1 1 L7 7 L13 1" fill="none" stroke="currentColor" strokeWidth="1.25" strokeLinecap="square" strokeLinejoin="miter" />
          </svg>
        </a>
      </div>
    </section>);

}

function Marquee() {
  // Render the logos array TWICE in the same track for a seamless loop.
  // The previous version also rendered a third copy inside a `display:none`
  // `.marquee-row` for a desktop static fallback — that was DOM/image
  // bookkeeping the browser still had to track, and contributed to mobile
  // memory pressure. The auto-scroller is used on all viewports now.
  const cell = (p, suffix) =>
    <div className="marquee-cell" key={p.name + suffix}>
      <img
        className={`partner-logo ${p.cls || ''}`}
        src={p.src}
        alt={suffix ? "" : p.name}
        loading="eager"
        decoding="async"
        style={{ height: `${p.h}px`, maxHeight: `${p.h}px` }}
      />
    </div>;
  return (
    <section className="marquee" id="partners" aria-label="Partners">
      <div className="wrap">
        <div className="marquee-head">Working alongside</div>
      </div>
      <div className="marquee-scroll" aria-hidden="true">
        <div className="marquee-track">
          {PARTNERS.map((p) => cell(p, ""))}
          {PARTNERS.map((p) => cell(p, "-dup"))}
        </div>
      </div>
    </section>);

}

function Solutions() {
  const [active, setActive] = useState(SOLUTIONS[0].id);
  const sol = SOLUTIONS.find((s) => s.id === active) || SOLUTIONS[0];
  const tabsRef = useRef(null);

  useEffect(() => {
    if (!tabsRef.current) return;
    const btn = tabsRef.current.querySelector(`[data-tab="${active}"]`);
    if (btn) {
      const rect = btn.getBoundingClientRect();
      const parent = tabsRef.current.getBoundingClientRect();
      if (rect.left < parent.left || rect.right > parent.right) {
        btn.scrollIntoView({ inline: "center", block: "nearest", behavior: "smooth" });
      }
    }
  }, [active]);

  useEffect(() => {
    const el = tabsRef.current;
    if (!el) return;
    const wrap = el.closest(".sol-tabs-wrap");
    if (!wrap) return;
    const update = () => {
      const max = el.scrollWidth - el.clientWidth;
      if (max <= 1) { wrap.removeAttribute("data-scroll"); return; }
      const left = el.scrollLeft;
      const atEnd = left >= max - 1;
      const atStart = left <= 1;
      wrap.setAttribute("data-scroll", atEnd ? "end" : atStart ? "start" : "middle");
    };
    update();
    el.addEventListener("scroll", update, { passive: true });
    window.addEventListener("resize", update);
    return () => {
      el.removeEventListener("scroll", update);
      window.removeEventListener("resize", update);
    };
  }, []);

  return (
    <section className="solutions anchor" id="solutions">
      <div className="wrap">
        <div className="section-head">
          <div className="label">Solutions</div>
          <div>
            <h2 className="h-xl">One institutional network. Distinct solutions.</h2>
            <p className="lede lede-wide" style={{ marginTop: 40 }}>
              Each built as a reference implementation for the operational use case it serves. Pick the one that matches your mandate.
            </p>
          </div>
        </div>
      </div>

      <div className="sol-tabs-wrap">
        <div className="wrap">
          <div className="sol-tabs" ref={tabsRef} role="tablist" aria-label="Solutions">
            {SOLUTIONS.map((s) =>
            <button
              key={s.id}
              data-tab={s.id}
              className={`sol-tab ${active === s.id ? "active" : ""}`}
              role="tab"
              aria-selected={active === s.id}
              onClick={() => setActive(s.id)}>
              
                <span>{s.name}</span>
              </button>
            )}
          </div>
        </div>
      </div>

      <div className="wrap">
        <Reveal key={sol.id}>
          <div className="sol-panel-v2">
            <div className="sol-intro">
              <h3 className="sol-headline">{sol.headline}</h3>
              <p className="sol-purpose">{sol.purpose}</p>
              <a
                className="btn-inline sol-intro-cta"
                href="#contact"
                onClick={(e) => {
                  e.preventDefault();
                  const el = document.querySelector(`#contact`);
                  const sel = document.querySelector(`#interest`);
                  if (sel) sel.value = sol.id;
                  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
                }}>
                Talk to our team about {sol.name.toLowerCase()} <ArrowRight />
              </a>
            </div>

            <div className="sol-media" aria-hidden="true">
              <div className={`media-card${sol.image ? "" : " is-empty"}`}>
                <div className="media-card-frame">
                  {sol.image ?
                  <React.Fragment>
                      <img className="media-card-img" src={sol.image} alt={`Editorial photograph illustrating ${sol.name.toLowerCase()} infrastructure.`} />
                      <div className="media-card-grain" aria-hidden="true"></div>
                    </React.Fragment> :

                  <div className="media-card-placeholder">
                      <strong>Image — {sol.name}</strong>
                      {sol.mediaLabel}
                    </div>
                  }
                </div>
              </div>
            </div>

            <div className="sol-cards">
              {sol.reasons.map((r, i) =>
                <div className="sol-reason" key={i}>
                  <div className="sol-reason-marker">
                    <span className="sol-reason-num">{String(i + 1).padStart(2, "0")}</span>
                  </div>
                  <h4 className="sol-reason-title">{r.t}</h4>
                  <p className="sol-reason-body">{r.d}</p>
                </div>
              )}
            </div>

            <div className="sol-uses">
              <h4 className="sol-uses-title">What it enables</h4>
              <div className="sol-uses-grid">
                {sol.uses.map((u) =>
                  <div className="sol-use" key={u.t}>
                    <div className="sol-use-title">{u.t}</div>
                    <div className="sol-use-desc">{u.d}</div>
                  </div>
                )}
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </section>);

}

function WhyXDC() {
  return (
    <section className="why anchor" id="why">
      <div className="wrap">
        <div className="section-head">
          <div className="label">Why XDC</div>
          <div>
            <h2 className="h-xl">Chosen for what institutions actually need.</h2>
            <p className="lede lede-wide" style={{ marginTop: 40 }}>
              Each one a real operating requirement.
            </p>
          </div>
        </div>

        <div className="why-grid">
          {WHY.map((w) =>
          <Reveal className="why-item" key={w.n}>
              <div className="n">{w.n}</div>
              <h3 className="t">{w.t}</h3>
              <div className="d">{w.d}</div>
            </Reveal>
          )}
        </div>
      </div>
    </section>);

}

function About() {
  return (
    <section className="about anchor" id="about">
      <div className="wrap">
        <div className="about-body">
          <div className="label">About</div>
          <div className="about-statement-col">
            <p className="lede lede-wide statement">
              XDC Tech is the U.S.-based institutional arm of the XDC Network. The mandate is twofold.
            </p>
            <p className="p-body" style={{ marginTop: 32, maxWidth: "56ch" }}>
              First, to make the institutional case for XDC by translating the network's enterprise architecture, regulatory posture, and operational fit for the bank operations leads, custody desks, asset managers, treasuries, and corporates evaluating it.
            </p>
            <p className="p-body" style={{ marginTop: 20, maxWidth: "56ch" }}>
              Second, to build the settlement, payments, tokenization, and trade-finance rails that put their flows onto the network, engineered against the controls and message formats those institutions already run.
            </p>
            <p className="p-body" style={{ marginTop: 28, maxWidth: "56ch", opacity: 0.65 }}>
              Both halves run on the same team, by design.
            </p>
          </div>
        </div>
      </div>
    </section>);

}

function Contact() {
  const [sent, setSent] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState("");
  const inFlight = useRef(false);
  const onSubmit = async (e) => {
    e.preventDefault();
    // Synchronous latch — guards against rapid double-clicks that fire before React re-renders.
    if (inFlight.current) return;
    inFlight.current = true;
    setError("");
    const form = e.currentTarget;
    const fd = new FormData(form);
    const payload = {
      name: (fd.get("name") || "").toString().trim(),
      email: (fd.get("email") || "").toString().trim(),
      company: (fd.get("company") || "").toString().trim(),
      role: (fd.get("role") || "").toString().trim(),
      interest: (fd.get("interest") || "general").toString(),
      message: (fd.get("message") || "").toString().trim(),
    };
    setSubmitting(true);
    const controller = new AbortController();
    const timeoutMs = 15000;
    const timer = setTimeout(() => controller.abort(), timeoutMs);
    try {
      const res = await fetch("/api/contact", {
        method: "POST",
        headers: { "Content-Type": "application/json", "Accept": "application/json" },
        body: JSON.stringify(payload),
        signal: controller.signal,
      });
      let data = null;
      try { data = await res.json(); } catch (_) { /* non-JSON */ }
      if (!res.ok || !data || data.ok !== true) {
        const msg = (data && data.error) || `Request failed (${res.status}). Please try again.`;
        setError(msg);
        return;
      }
      setSent(true);
    } catch (err) {
      if (err && err.name === "AbortError") {
        setError("The request took too long. Please try again.");
      } else {
        setError("Network error. Please check your connection and try again.");
      }
    } finally {
      clearTimeout(timer);
      setSubmitting(false);
      inFlight.current = false;
    }
  };
  return (
    <section className="contact anchor" id="contact">
      <div className="wrap">
        <div className="section-head" style={{ marginBottom: 0 }}>
          <div className="label">Contact</div>
          <div>
            <h2 className="h-xl">Talk to our team.</h2>
            <p className="lede lede-wide" style={{ marginTop: 40 }}>
              For banks, custody operations, asset managers, corporate treasuries, and fintech platforms evaluating the XDC Network for production workloads.
            </p>
          </div>
        </div>

        <div className="contact-grid">
          <div className="contact-intro">
            <ul className="contact-list">
              <li><span className="k">Scope</span><span>Banks, asset managers, fintech platforms, corporate treasuries</span></li>
              <li><span className="k">Response</span><span>One business day, from a named person</span></li>
              <li><span className="k">After contact</span><span>Scoped conversation, followed by a written scope of work</span></li>
            </ul>
          </div>

          {sent ?
          <div className="form" style={{ display: "flex", flexDirection: "column", gap: 24 }}>
              <div className="label">Received</div>
              <h3 className="h-md">Thank you. We will be in touch within one business day.</h3>
              <p className="p-body">A member of the U.S. team will reach out directly to schedule a scoped conversation.</p>
            </div> :

          <form className="form" onSubmit={onSubmit}>
              <label>Name<input name="name" required autoComplete="name" /></label>
              <label>Work email<input name="email" type="email" required autoComplete="email" /></label>
              <label>Company<input name="company" required autoComplete="organization" /></label>
              <label>Role<input name="role" required autoComplete="organization-title" /></label>
              <label className="full">Primary interest
                <select name="interest" id="interest" defaultValue="general">
                  <option value="stablecoins">Stablecoins</option>
                  <option value="payments">Payments</option>
                  <option value="tokenization">Tokenization</option>
                  <option value="trade">Trade Finance</option>
                  <option value="network">Network</option>
                  <option value="general">General</option>
                </select>
              </label>
              <label className="full">Message
                <textarea name="message" rows="4" placeholder="Briefly, the operational use case you are evaluating." />
              </label>
              {error ?
              <div className="full" role="alert" style={{ color: "#b00020", fontSize: 14 }}>{error}</div> :
              null
              }
              <div className="full form-actions">
                <p className="form-fine">By submitting, you agree to be contacted by the XDC Tech team about your inquiry.</p>
                <button type="submit" className="btn btn-primary" disabled={submitting} aria-busy={submitting}>
                  {submitting ? "Sending…" : <>Send <ArrowRight /></>}
                </button>
              </div>
            </form>
          }
        </div>
      </div>
    </section>);

}

function Foot() {
  return (
    <footer className="foot">
      <div className="wrap">
        <div className="foot-row">
          <div className="foot-brand">
            <Wordmark height={28} />
          </div>
          <div className="foot-social">
            <a href="https://x.com/XDC_USA" target="_blank" rel="noopener noreferrer" aria-label="X (formerly Twitter)">X</a>
            <a href="https://www.linkedin.com/company/xdc-network-usa/about/" target="_blank" rel="noopener noreferrer" aria-label="LinkedIn">LinkedIn</a>
          </div>
          <div className="foot-copy">© 2026 XDC Tech US, Inc. All rights reserved.</div>
        </div>
      </div>
    </footer>);

}

function App() {
  const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", t.accent);
    document.body.classList.toggle("hero-dark", !!t.heroDark);
  }, [t.accent, t.heroDark]);

  return (
    <>
      <TopNav />
      <Hero tweaks={t} />
      <Marquee />
      <Solutions />
      <WhyXDC />
      <About />
      <Contact />
      <Foot />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Accent" />
        <TweakColor label="XDC blue" value={t.accent} onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Hero" />
        <TweakToggle label="Dark hero" value={t.heroDark} onChange={(v) => setTweak("heroDark", v)} />
      </TweaksPanel>
    </>);

}

window.App = App;