/* global React, SiteIcon, Reveal */

function Pricing({ showHead = true }) {
  const Check = () => <SiteIcon name="check" size={15} stroke={2.25}/>;
  const plans = [
    { name: "Starter", price: "$49", per: " /mo", desc: "Small stores testing private offers.", feats: ["Cart widget on storefront", "Basic deal rules", "500 offer checks / mo", "1 deal policy", "Email support"], cta: "Start free trial", btn: "btn-secondary", foot: "14 day free trial" },
    { name: "Growth", price: "$199", per: " /mo", desc: "Real DTC stores running real campaigns.", feats: ["Everything in Starter", "AI Deal Copilot", "AI Shopper Negotiation", "Bundle offers + free shipping levers", "Margin guardrails", "5,000 offer checks / mo", "Unlimited deal policies"], cta: "Start free trial", btn: "btn-primary", foot: "Most chosen", featured: true },
    { name: "Pro", price: "$499", per: " /mo", desc: "Serious brands running margin aware automation.", feats: ["Everything in Growth", "Contribution margin rules", "Inventory aware offers", "AI Shoppers Negotiations, API access (sandbox + prod)", "A/B testing", "Abandoned cart offers", "25,000 offer checks / mo", "Priority support"], cta: "Start 14 day trial", btn: "btn-secondary", foot: "+ 0.75% on accepted offer revenue over plan" },
  ];

  return (
    <section id="pricing" className="pricing wrap">
      <div className="container">
        {showHead && (
        <div className="pricing-head">
          <Reveal><div className="eyebrow" style={{ justifyContent: "center" }}>Pricing</div></Reveal>
          <Reveal delay={60}><h2 className="h2">Platform fee. <span className="agent">Performance only on accepted offers.</span></h2></Reveal>
          <Reveal delay={120}>
            <p className="lead">
              DealAgent charges a monthly platform fee. Higher plans include more private offer volume,
              advanced margin rules, and AI agent negotiation capacity. Usage based billing applies only to
              <b style={{ color: "var(--fg-1)" }}> accepted DealAgent offer revenue</b>, never your total store revenue.
            </p>
          </Reveal>
        </div>
        )}

        <Reveal delay={80}>
          <div className="founders">
            <div className="founders-inner">
              <div className="founders-tag">Limited</div>
              <div className="founders-copy">
                <div className="founders-title">Founding Merchant Plan, <b>$99/mo for life</b></div>
                <div className="founders-sub">First 100 merchants only · Growth tier features · Locked rate forever</div>
              </div>
              <a className="btn btn-secondary" href="https://apps.shopify.com/dealagent-ai" target="_blank" rel="noopener">Claim a slot</a>
            </div>
          </div>
        </Reveal>

        <div className="price-grid">
          {plans.map((p, i) => (
            <Reveal delay={i * 80} key={p.name}>
              <div className={`plan ${p.featured ? "featured" : ""}`}>
                {p.featured && <div className="plan-ribbon">Recommended</div>}
                <h3>{p.name}</h3>
                <div className="price">{p.price}<small>{p.per}</small></div>
                <p className="desc">{p.desc}</p>
                <ul>{p.feats.map((f) => <li key={f}><Check/>{f.startsWith("AI Shopper") ? <b style={{ fontWeight: 700 }}>{f}</b> : f}</li>)}</ul>
                <a className={`btn ${p.btn} btn-lg`} href="https://apps.shopify.com/dealagent-ai" target="_blank" rel="noopener">{p.cta}</a>
                <div className="plan-foot">{p.foot}</div>
              </div>
            </Reveal>
          ))}
        </div>

        <Reveal>
          <div className="enterprise-card">
            <div>
              <div className="ent-eyebrow">Enterprise</div>
              <div className="ent-title">Custom commerce platforms &amp; large brands.</div>
              <div className="ent-desc">Custom API, agentic commerce integrations, custom margin models, SSO, audit logs, SOC 2, and a dedicated deal strategist. Pricing tailored to your volume and contract terms.</div>
            </div>
            <a className="btn btn-primary btn-lg" href="#">Talk to sales</a>
          </div>
        </Reveal>

        <div className="pricing-notes">
          <Reveal delay={0}><div className="note"><div className="note-k">Performance fee</div><div className="note-v">Charged only on <b>accepted</b> DealAgent offer revenue beyond your plan's included volume. Never on total store revenue.</div></div></Reveal>
          <Reveal delay={80}><div className="note"><div className="note-k">AI shopper negotiations</div><div className="note-v">Extra AI agent negotiations billed at <b>$0.01–$0.05</b> per request, plus <b>0.5–1.5%</b> on accepted AI agent offer revenue. Available on Growth and up.</div></div></Reveal>
          <Reveal delay={160}><div className="note"><div className="note-k">Billing</div><div className="note-v">Charged through your <b>Shopify bill</b> on a 30 day cycle. No separate invoicing.</div></div></Reveal>
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const mark = (window.__resources && window.__resources.logoMark) || "assets/logo-mark.png";
  const Ck = () => <SiteIcon name="check" size={13} stroke={3}/>;
  return (
    <section className="final wrap grain">
      <div className="container">
        <div className="final-card">
          <div className="final-lead">
            <Reveal><div className="final-glyph"><img src={mark} alt="DealAgent"/></div></Reveal>
            <div>
              <Reveal delay={60}><div className="eyebrow">Get started</div></Reveal>
              <Reveal delay={100}><h2>Give your store an <span className="agent">AI deal desk</span>.</h2></Reveal>
              <Reveal delay={150}><p>Set your margin rules in under 10 minutes. DealAgent negotiates from day one.</p></Reveal>
            </div>
          </div>
          <div className="final-actions">
            <Reveal delay={200}>
              <div className="cta">
                <Magnetic strength={0.3}><a className="btn btn-primary btn-lg" href="https://apps.shopify.com/dealagent-ai" target="_blank" rel="noopener">Install on Shopify</a></Magnetic>
                <a className="btn btn-ghost-light btn-lg" href="#">Book a demo</a>
              </div>
            </Reveal>
            <Reveal delay={250}>
              <div className="final-trust">
                <span className="it"><Ck/>14 day free trial</span>
                <span className="sep"></span>
                <span className="it"><Ck/>No credit card</span>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  const logoDark = (window.__resources && window.__resources.logoHorizontalDark) || "assets/logo-horizontal-dark.png";
  const base = window.__SITE_HOME__ || "index.html";
  const cols = [
    { h: "Product", links: [
      { t: "How it works", href: "how-it-works.html" },
      { t: "Why DealAgent", href: "why-dealagent.html" },
      { t: "Agentic API", href: "agentic-api.html" },
      { t: "Integrations", href: "integrations.html" },
      { t: "Pricing", href: "pricing.html" },
    ] },
    { h: "Solutions", links: [
      { t: "Cart recovery", href: "cart-recovery.html" },
      { t: "Inventory aging", href: "inventory-aging.html" },
      { t: "Launch protection", href: "launch-protection.html" },
      { t: "Agentic commerce", href: "agentic-commerce.html" },
    ] },
    { h: "Developers", links: [
      { t: "Docs", href: "docs.html" },
      { t: "API reference", href: "api-reference.html" },
      { t: "Status", href: "status.html" },
      { t: "Changelog", href: "changelog.html" },
    ] },
    { h: "Company", links: [
      { t: "About", href: "about.html" },
      { t: "Customers", href: "customers.html" },
      { t: "Careers", href: "careers.html" },
      { t: "Contact", href: "contact.html" },
    ] },
  ];
  return (
    <footer>
      <div className="container">
        <div className="grid">
          <div className="brand col">
            <img src={logoDark} alt="DealAgent"/>
            <p>The AI deal desk for ecommerce. Private offers. Protected margins. Higher conversions.</p>
          </div>
          {cols.map((c) => (
            <div className="col" key={c.h}>
              <h4>{c.h}</h4>
              {c.links.map((l) => <a href={l.href} key={l.t}>{l.t}</a>)}
            </div>
          ))}
        </div>
        <div className="legal">
          <div>© 2026 DealAgent AI, Inc. All rights reserved.</div>
          <div style={{ display: "flex", gap: 24 }}>
            <a href="privacy.html">Privacy</a><a href="terms.html">Terms</a><a href="security.html">Security</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Pricing = Pricing;
window.FinalCTA = FinalCTA;
window.Footer = Footer;