/* Industries, Developers, Pricing, CTA, Footer */

function Industries() {
  const items = [
    { label: "Telehealth & Rx", desc: "HIPAA-compliant tokenization, Rx consult flows." },
    { label: "Nutraceuticals", desc: "Supplements, vitamins, functional health." },
    { label: "Peptides & Research", desc: "Underwritten with the right acquiring banks." },
    { label: "CBD & Hemp", desc: "Compliant processing across all 50 states." },
    { label: "MedSpa & Aesthetics", desc: "Recurring packages, membership billing." },
    { label: "Coaching & Info", desc: "High-ticket courses, memberships, coaching." },
    { label: "Subscription & Continuity", desc: "Smart retry, account updater, dunning." },
    { label: "Adult & Dating", desc: "Tuned risk models, chargeback protection." },
    { label: "Crypto & Forex", desc: "On/off-ramp, KYC, velocity controls." },
    { label: "Firearms & Ammo", desc: "FFL verification, compliance-first." },
    { label: "Kratom & Nootropics", desc: "Vertical-specific MID strategy." },
    { label: "Travel & Timeshare", desc: "Delayed-delivery chargeback defense." },
  ];

  return (
    <section className="section" id="industries">
      <div className="container">
        <div className="section-head">
          <div className="tag"><span className="tag-dot"/> Industries we support</div>
          <h2 className="display-lg">Built for the verticals <span>other processors decline.</span></h2>
          <p className="lede" style={{ marginTop: "1rem" }}>
            Every vertical below is a specialty, not an exception. Underwritten with the right risk models, banks, and chargeback tooling from day one.
          </p>
        </div>

        <div style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: ".8rem",
        }} className="ind-grid stagger">
          {items.map((it) => (
            <div key={it.label} style={{
              background: "var(--surface)",
              border: "1px solid var(--border)",
              borderRadius: 12,
              padding: "1.1rem 1.2rem",
              transition: "border-color .2s, background .2s",
              cursor: "default",
            }}
              onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--accent-border)"; e.currentTarget.style.background = "linear-gradient(180deg, var(--surface) 0%, rgba(242,122,26,0.04) 100%)"; }}
              onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.background = "var(--surface)"; }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: ".6rem", marginBottom: ".45rem" }}>
                <span style={{
                  width: 8, height: 8, borderRadius: 2,
                  background: "var(--accent)", boxShadow: "0 0 8px var(--accent-glow)"
                }}/>
                <div style={{ color: "var(--white)", fontWeight: 700, fontSize: ".92rem" }}>{it.label}</div>
              </div>
              <div style={{ fontSize: ".8rem", color: "var(--muted)", lineHeight: 1.55 }}>{it.desc}</div>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: "1.8rem",
          padding: "1.1rem 1.3rem",
          background: "var(--surface)",
          border: "1px dashed var(--accent-border)",
          borderRadius: 12,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          flexWrap: "wrap", gap: "1rem",
        }}>
          <div>
            <div style={{ fontSize: ".88rem", color: "var(--white)", fontWeight: 700 }}>Don't see your vertical?</div>
            <div style={{ fontSize: ".8rem", color: "var(--muted)", marginTop: ".15rem" }}>
              If it's legal and domiciled properly, we probably board it. Apply and we'll tell you straight.
            </div>
          </div>
          <a href="https://payments.asherpay.com" className="btn btn-ghost">Talk to underwriting →</a>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) { .ind-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 600px) { .ind-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

/* ============ Developers section ============ */
function Developers() {
  const [tab, setTab] = React.useState("js");

  const snippets = {
    js: `// Charge a card in 6 lines.
const charge = await asherpay.charges.create({
  amount: 4995,
  currency: 'usd',
  source: token,
  description: 'Peptide Order #1024'
});`,
    py: `# Charge a card in 6 lines.
charge = asherpay.Charge.create(
    amount=4995,
    currency="usd",
    source=token,
    description="Peptide Order #1024",
)`,
    curl: `curl https://api.asherpay.com/v1/charges \\
  -u sk_live_••••: \\
  -d amount=4995 \\
  -d currency=usd \\
  -d source=tok_visa \\
  -d description='Peptide Order #1024'`,
  };

  const color = (s) => s
    .replace(/(\/\/.*|#.*)/g, '<span class="cm">$1</span>')
    .replace(/\b(const|await|curl)\b/g, '<span class="kw">$1</span>')
    .replace(/'([^']*)'/g, `<span class="str">'$1'</span>`)
    .replace(/\b(\d{2,})\b/g, '<span class="num">$1</span>');

  return (
    <section className="section" id="developers">
      <div className="container">
        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "3rem",
          alignItems: "center",
        }} className="dev-grid">
          <div>
            <div className="tag"><span className="tag-dot"/> Developers</div>
            <h2 className="display-lg">From application to <span>first charge in an afternoon.</span></h2>
            <p className="lede" style={{ marginTop: "1rem", marginBottom: "1.6rem" }}>
              RESTful API with idempotency. Webhooks for every event. SDKs in the languages you actually ship.
            </p>
            <ul className="bullets">
              <li><span className="check">✓</span><span><strong>REST API</strong> with PCI-compliant tokenization and sandbox keys.</span></li>
              <li><span className="check">✓</span><span><strong>Webhooks</strong> — auth, capture, refund, chargeback, subscription.</span></li>
              <li><span className="check">✓</span><span><strong>SDKs</strong> for Node, Python, PHP, Ruby, Go, iOS, Android.</span></li>
              <li><span className="check">✓</span><span><strong>Hosted checkout</strong> or drop-in Elements. Your call.</span></li>
            </ul>
            <div style={{ display: "flex", gap: ".6rem", marginTop: "1.8rem", flexWrap: "wrap" }}>
              <a href="#" className="btn btn-accent">View API reference →</a>
              <a href="#" className="btn btn-ghost">Browse SDKs</a>
            </div>
          </div>

          <div>
            <div style={{ display: "flex", gap: ".4rem", marginBottom: ".8rem" }}>
              {[["js", "Node.js"], ["py", "Python"], ["curl", "cURL"]].map(([k, l]) => (
                <button key={k} onClick={() => setTab(k)} style={{
                  padding: ".5rem .9rem", fontSize: ".75rem", fontWeight: 700,
                  borderRadius: 8, letterSpacing: ".02em",
                  border: "1px solid " + (tab === k ? "var(--accent-border)" : "var(--border)"),
                  color: tab === k ? "var(--accent-light)" : "var(--muted)",
                  background: tab === k ? "var(--accent-dim)" : "transparent",
                  fontFamily: "var(--font-mono)",
                }}>
                  {l}
                </button>
              ))}
            </div>
            <div className="code" style={{ minHeight: 220 }}
              dangerouslySetInnerHTML={{ __html: color(snippets[tab]) }}/>

            {/* Webhooks preview */}
            <div className="webhooks-panel" style={{
              marginTop: "1rem",
              background: "var(--surface)",
              border: "1px solid var(--border)",
              borderRadius: 12,
              padding: "1rem 1.1rem",
            }}>
              <div style={{ fontSize: ".68rem", color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".1em", fontWeight: 700, marginBottom: ".6rem" }}>
                Webhook events · last 60s
              </div>
              {[
                { ev: "charge.succeeded", id: "evt_8f2a91", ok: true },
                { ev: "charge.captured", id: "evt_8f2a92", ok: true },
                { ev: "subscription.renewed", id: "evt_8f2a93", ok: true },
                { ev: "charge.refunded", id: "evt_8f2a94", ok: true },
              ].map((e, i) => (
                <div key={i} className="webhook-row" style={{
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  padding: ".4rem 0",
                  borderBottom: i < 3 ? "1px solid var(--border)" : "none",
                  fontSize: ".75rem", fontFamily: "var(--font-mono)"
                }}>
                  <div style={{ display: "flex", alignItems: "center", gap: ".5rem" }}>
                    <span style={{ width: 6, height: 6, borderRadius: "50%", background: "#87d37c" }}/>
                    <span style={{ color: "var(--accent-light)" }}>{e.ev}</span>
                    <span style={{ color: "var(--muted)" }}>{e.id}</span>
                  </div>
                  <span style={{ color: "#87d37c" }}>200 OK</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .dev-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
}

/* ============ Pricing ============ */
function Pricing() {
  return (
    <section className="section" id="pricing">
      <div className="container">
        <div className="section-head center">
          <div className="tag" style={{ justifyContent: "center" }}><span className="tag-dot"/> Pricing</div>
          <h2 className="display-lg">Priced to your vertical. <span>Not a generic markup.</span></h2>
          <p className="lede">
            High-risk processing isn't one-size-fits-all. Quoted after underwriting, locked before you sign — no surprise PCI surcharges, no hidden interchange margin.
          </p>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "1fr 1fr", gap: "1.2rem",
        }} className="price-grid stagger">
          {[
            {
              title: "Standard",
              sub: "E-comm, SaaS, retail, professional services",
              big: "Quoted",
              numValue: "after review",
              compare: "Rates based on volume, ticket size, and vertical — no generic markup.",
              bullets: ["Next-day funding", "Hosted checkout + API", "24/7 support", "Standard reserve"],
              cta: "Request a quote",
              highlight: false,
            },
            {
              title: "High-Risk",
              sub: "Peptides, CBD, telehealth, nutra, coaching",
              big: "Custom",
              numValue: "by vertical",
              compare: "Priced to your MCC and banking profile — locked before you sign.",
              bullets: ["Vertical-specific underwriting", "Chargeback alert integration", "Dedicated merchant rep", "Volume tier step-downs"],
              cta: "Apply free →",
              highlight: true,
            },
          ].map((p) => (
            <div key={p.title} className="price-card" style={{
              position: "relative",
              background: p.highlight
                ? "linear-gradient(180deg, var(--surface) 0%, rgba(242,122,26,0.06) 100%)"
                : "var(--surface)",
              border: "1px solid " + (p.highlight ? "var(--accent-border)" : "var(--border)"),
              borderRadius: 16,
              padding: "2rem 1.8rem",
              overflow: "hidden",
            }}>
              {p.highlight && (
                <div className="badge-pulse" style={{
                  position: "absolute", top: 14, right: 14,
                  fontSize: ".62rem", color: "var(--accent-light)",
                  background: "var(--accent-dim)",
                  border: "1px solid var(--accent-border)",
                  padding: ".2rem .55rem", borderRadius: 999,
                  fontWeight: 700, letterSpacing: ".08em", textTransform: "uppercase"
                }}>Most merchants</div>
              )}
              <div style={{ color: "var(--white)", fontSize: "1.05rem", fontWeight: 700, marginBottom: ".25rem" }}>{p.title}</div>
              <div style={{ fontSize: ".8rem", color: "var(--muted)", marginBottom: "1.4rem" }}>{p.sub}</div>
              <div style={{
                fontWeight: 900, color: "var(--accent)", letterSpacing: "-0.02em", lineHeight: 1.05,
              }}>
                <div style={{ fontSize: "2.4rem", color: "var(--white)" }}>{p.big}</div>
                <div style={{ fontSize: "1rem", color: "var(--muted)", fontWeight: 700, marginTop: ".3rem" }}>{p.numValue}</div>
              </div>
              <div style={{ fontSize: ".78rem", color: "var(--muted)", marginTop: ".7rem", lineHeight: 1.55 }}>{p.compare}</div>
              <ul className="bullets" style={{ marginTop: "1.3rem" }}>
                {p.bullets.map(b => (
                  <li key={b} style={{ padding: ".55rem 0" }}>
                    <span className="check" style={{ width: 18, height: 18, fontSize: ".6rem" }}>✓</span>
                    <span style={{ fontSize: ".86rem" }}>{b}</span>
                  </li>
                ))}
              </ul>
              <a href="https://payments.asherpay.com" className={p.highlight ? "btn btn-accent" : "btn btn-primary"} style={{ marginTop: "1.4rem", width: "100%" }}>
                {p.cta}
              </a>
            </div>
          ))}
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: 0,
          marginTop: "2.5rem",
          border: "1px solid var(--border)",
          borderRadius: 12,
          background: "var(--surface)",
        }} className="price-bullets">
          {[
            ["$0", "Setup fees"],
            ["$0", "Monthly minimums"],
            ["$0", "PCI surcharges"],
            ["1:1", "Dedicated rep"],
          ].map((p, i) => (
            <div key={i} style={{
              padding: "1.3rem 1rem", textAlign: "center",
              borderLeft: i === 0 ? "none" : "1px solid var(--border)",
            }}>
              <div style={{ fontSize: "1.5rem", fontWeight: 900, color: "var(--white)", letterSpacing: "-0.02em" }}>{p[0]}</div>
              <div style={{ fontSize: ".66rem", color: "var(--muted)", textTransform: "uppercase", letterSpacing: ".08em", marginTop: ".3rem", fontWeight: 600 }}>{p[1]}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .price-grid { grid-template-columns: 1fr !important; } .price-bullets { grid-template-columns: 1fr 1fr !important; } }
      `}</style>
    </section>
  );
}

/* ============ How it works — 3-step flow ============ */
function HowItWorks() {
  return (
    <section className="section" id="how">
      <div className="container">
        <div className="section-head center">
          <div className="tag" style={{ justifyContent: "center" }}><span className="tag-dot"/> Get live in 5 days</div>
          <h2 className="display-lg">From application to <span>first transaction.</span></h2>
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: "1rem",
          position: "relative",
        }} className="how-grid stagger">
          {/* Connecting line */}
          <div style={{
            position: "absolute", top: 42, left: "16%", right: "16%", height: 1,
            background: "linear-gradient(90deg, transparent, var(--accent-border), transparent)",
            zIndex: 0,
          }} className="how-line"/>

          {[
            { n: "01", t: "Submit application", p: "7-step intake and docs in under 15 minutes. No commitment, no credit pull." },
            { n: "02", t: "Get matched", p: "We pair you with banks that specialize in your vertical. Approvals in 24–48h." },
            { n: "03", t: "Integrate & go live", p: "Drop in the checkout or API. Your rep walks you through every step." },
          ].map((s, i) => (
            <div key={s.n} className="how-card" style={{
              position: "relative", zIndex: 1,
              background: "var(--surface)",
              border: "1px solid var(--border)",
              borderRadius: 14,
              padding: "2rem 1.6rem",
            }}>
              <div style={{
                width: 52, height: 52, borderRadius: 14,
                background: "var(--accent-dim)",
                border: "1px solid var(--accent-border)",
                display: "grid", placeItems: "center",
                fontFamily: "var(--font-mono)", fontSize: "1.05rem", fontWeight: 700,
                color: "var(--accent-light)",
                marginBottom: "1.1rem",
                boxShadow: "0 0 20px var(--accent-glow)",
              }}>{s.n}</div>
              <h4 style={{ fontSize: "1.1rem", color: "var(--white)", marginBottom: ".5rem", fontWeight: 700 }}>{s.t}</h4>
              <p style={{ fontSize: ".88rem", color: "var(--muted)", lineHeight: 1.6 }}>{s.p}</p>
            </div>
          ))}
        </div>

        <div style={{
          display: "grid", gridTemplateColumns: "repeat(4,1fr)", gap: ".8rem", marginTop: "2rem"
        }} className="how-stats">
          {[
            ["15min", "Application time"],
            ["24–48h", "Underwriting"],
            ["5d", "First live charge"],
            ["1:1", "Dedicated rep"],
          ].map((s, i) => (
            <div key={i} className="stat">
              <div className="stat-val">{s[0]}</div>
              <div className="stat-lbl">{s[1]}</div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .how-grid { grid-template-columns: 1fr !important; }
          .how-line { display: none; }
          .how-stats { grid-template-columns: 1fr 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ============ CTA + Footer ============ */
function CTA() {
  return (
    <section className="section cta-section" id="apply" style={{ padding: "5rem 0" }}>
      <div className="container">
        <div className="cta-card" style={{
          position: "relative",
          background: "linear-gradient(180deg, var(--surface) 0%, #0a0a0c 100%)",
          border: "1px solid var(--accent-border)",
          borderRadius: 20,
          padding: "3.5rem 3rem",
          textAlign: "center",
          overflow: "hidden",
        }}>
          {/* Radial glow */}
          <div style={{
            position: "absolute", inset: 0,
            background: "radial-gradient(ellipse at 50% 0%, rgba(242,122,26,0.18), transparent 55%)",
            pointerEvents: "none",
          }}/>
          <div style={{ position: "relative", zIndex: 1 }}>
            <div style={{
              display: "inline-flex", alignItems: "center", gap: ".45rem",
              fontSize: ".72rem", fontWeight: 700, color: "var(--gold)",
              textShadow: "0 0 12px var(--gold-glow)",
              letterSpacing: ".06em", textTransform: "uppercase",
              padding: ".4rem .9rem",
              border: "1px solid rgba(255,215,0,.35)",
              background: "rgba(255,215,0,.04)",
              borderRadius: 999,
              marginBottom: "1.4rem",
            }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "var(--gold)", boxShadow: "0 0 8px var(--gold-glow)" }}/>
              Built for high-risk · approved for growth
            </div>
            <h2 className="display-lg" style={{ maxWidth: 740, margin: "0 auto .9rem" }}>
              Ready to <span>stop losing revenue</span> to bad processors?
            </h2>
            <p className="lede" style={{ margin: "0 auto 2rem", maxWidth: 560 }}>
              Apply free. Get matched in 48 hours. Start processing in 5 days. No setup fees, no lock-in contracts, and a rep who actually picks up the phone.
            </p>
            <div style={{ display: "flex", gap: ".7rem", justifyContent: "center", flexWrap: "wrap" }}>
              <a href="https://payments.asherpay.com" className="btn btn-primary">Get Processing →</a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const cols = [
    {
      h: "Product",
      links: [
        { label: "Capabilities", href: "#capabilities" },
        { label: "How it works", href: "#how" },
        { label: "Pricing", href: "#pricing" },
        { label: "Industries", href: "#industries" },
        { label: "Developers", href: "#developers" },
      ],
    },
    {
      h: "Resources",
      links: [
        { label: "Help center", href: "/help.html" },
        { label: "Privacy policy", href: "/privacy.html" },
        { label: "Terms of service", href: "/terms.html" },
        { label: "Compliance", href: "/compliance.html" },
      ],
    },
  ];
  return (
    <footer style={{
      borderTop: "1px solid var(--border)",
      padding: "4rem 0 2rem",
      position: "relative",
    }}>
      {/* Ember glow at bottom */}
      <div style={{
        position: "absolute", bottom: 0, left: "50%", transform: "translateX(-50%)",
        width: "80%", height: 240,
        background: "radial-gradient(ellipse at center bottom, rgba(242,122,26,0.14) 0%, rgba(242,122,26,0.04) 42%, transparent 70%)",
        filter: "blur(40px)", pointerEvents: "none",
      }}/>
      <div className="container" style={{ position: "relative" }}>
        <div style={{
          display: "grid",
          gridTemplateColumns: "1.6fr 1fr 1fr",
          gap: "2.6rem",
        }} className="footer-grid">
          <div>
            <a href="#top" className="logo" style={{ display: "inline-flex" }}>
              [<span>asher</span>pay]
            </a>
            <p style={{ color: "var(--muted)", fontSize: ".88rem", marginTop: ".9rem", lineHeight: 1.6, maxWidth: 320 }}>
              Modern payment infrastructure for growing and high-risk businesses.
            </p>
            <div style={{ display: "flex", gap: ".5rem", marginTop: "1.1rem" }}>
              <a href="https://instagram.com/asherpayments" target="_blank" rel="noopener noreferrer"
                aria-label="AsherPay on Instagram"
                style={{
                  width: 36, height: 36, borderRadius: "50%",
                  border: "1px solid var(--border)",
                  display: "grid", placeItems: "center",
                  color: "var(--muted)",
                  transition: "border-color .2s, color .2s, transform .2s",
                }}
                onMouseEnter={e => { e.currentTarget.style.borderColor = "var(--accent-border)"; e.currentTarget.style.color = "var(--accent-light)"; e.currentTarget.style.transform = "translateY(-1px)"; }}
                onMouseLeave={e => { e.currentTarget.style.borderColor = "var(--border)"; e.currentTarget.style.color = "var(--muted)"; e.currentTarget.style.transform = "translateY(0)"; }}
              >
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
                  <rect x="2" y="2" width="20" height="20" rx="5" ry="5"/>
                  <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"/>
                  <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"/>
                </svg>
              </a>
            </div>
          </div>
          {cols.map(c => (
            <div key={c.h}>
              <div style={{ fontSize: ".7rem", color: "var(--white)", textTransform: "uppercase", letterSpacing: ".1em", fontWeight: 700, marginBottom: ".9rem" }}>{c.h}</div>
              <div style={{ display: "grid", gap: ".5rem" }}>
                {c.links.map(l => (
                  <a key={l.label} href={l.href} style={{ fontSize: ".82rem", color: "var(--muted)", transition: "color .15s" }}
                    onMouseEnter={e => e.currentTarget.style.color = "var(--white)"}
                    onMouseLeave={e => e.currentTarget.style.color = "var(--muted)"}
                  >{l.label}</a>
                ))}
              </div>
            </div>
          ))}
        </div>
        <div className="footer-bottom" style={{
          marginTop: "2.8rem", paddingTop: "1.3rem",
          borderTop: "1px solid var(--border)",
          display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: ".8rem",
          fontSize: ".78rem", color: "var(--muted)",
        }}>
          <span>© 2026 AsherPay. All rights reserved.</span>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: ".72rem" }}>
            Built in the USA · PCI DSS Level 1 · SOC 2 Type II
          </span>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } }
        @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr !important; } }
      `}</style>
    </footer>
  );
}

window.Industries = Industries;
window.Developers = Developers;
window.Pricing = Pricing;
window.HowItWorks = HowItWorks;
window.CTA = CTA;
window.Footer = Footer;