/* Pricing, Testimonials, CTA, Footer */

function Pricing() {
  const [annual, setAnnual] = React.useState(true);
  const tiers = [
    {
      name:'Starter',
      desc:'For solo founders and small teams getting started with AI sales.',
      monthly:100, annual:80,
      feats:[
        'Up to 3 users',
        '10,000 AI actions / month',
        'WhatsApp 1 number',
        'Pipeline + lead scoring',
        'Email + Slack alerts',
      ],
      cta:'Start free trial',
      featured:false,
    },
    {
      name:'Growth',
      desc:'For high-volume teams. Restaurants, travel, real estate and agencies running on Aspire Sage.',
      monthly:250, annual:200,
      feats:[
        'Up to 15 users',
        '25,000 AI actions / month',
        'WhatsApp · unlimited numbers',
        'Copilot for every rep',
        'Custom automations & API',
        'Forecasting + reports',
      ],
      cta:'Start free trial',
      featured:true,
      badge:'Most popular',
    },
    {
      name:'Enterprise',
      desc:'For organisations with security, compliance and scale needs.',
      monthly:'Custom', annual:'Custom',
      feats:[
        'Unlimited users',
        'Unlimited AI actions',
        'SSO, SCIM, audit log',
        'Dedicated region + KMS keys',
        'White-glove onboarding',
        '24/7 priority support',
      ],
      cta:'Talk to sales',
      featured:false,
    },
  ];  return (
    <section className="padded pricing" id="pricing">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Pricing</div>
          <h2>Simple pricing<br/>Outrageous <span className="serif">ROI</span></h2>
          <p>Every plan includes our AI Copilot, unlimited contacts, and a 14-day free trial. Cancel any time.</p>
        </div>

        <div className="price-center">
          <div className="toggle">
            <button className={!annual ? 'on' : ''} onClick={()=>setAnnual(false)}>Monthly</button>
            <button className={annual ? 'on' : ''} onClick={()=>setAnnual(true)}>Yearly <span className="save">−20%</span></button>
          </div>
        </div>

        <div className="price-grid">
          {tiers.map((t,i)=>(
            <div key={i} className={"price" + (t.featured ? " featured" : "")}>
              {t.featured && <span className="badge">{t.badge}</span>}
              <span className="price-name">{t.name}</span>
              <div className="price-amt">
                {typeof t.monthly === 'number' ? (
                  <>
                    <span className="cur">$</span>
                    {annual ? t.annual : t.monthly}
                    <span className="per">/mo</span>
                  </>
                ) : (
                  <span style={{fontSize:42}}>Custom</span>
                )}
              </div>
              <div className="price-desc">{t.desc}</div>
              <ul className="price-feats">
                {t.feats.map((f,j)=>(
                  <li key={j}><span className="ck"><Icon.check/></span> {f}</li>
                ))}
              </ul>
              <a href={t.cta === 'Talk to sales' ? 'pages/contact.html' : 'app/onboarding.html'} className={"btn " + (t.featured ? 'btn-primary' : 'btn-ghost')}>
                {t.cta} <Icon.arrow/>
              </a>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Testimonials() {
  return (
    <section className="padded testi" id="testimonials">
      <div className="container">
        <div className="section-head">
          <div className="section-eyebrow">Customers</div>
          <h2>Teams are closing more, <span className="serif">faster</span>.</h2>
          <p>Revenue leaders moved from a stack of 6 tools to one Aspire Sage workspace, here's what changed.</p>
        </div>

        <div className="testi-grid">
          <div className="testi-card tall">
            <div className="testi-stat">
              <div className="big">3.2×</div>
              <div className="label">more meetings booked per rep</div>
            </div>
            <div style={{display:'flex',gap:2,color:'var(--amber-deep)'}}>
              {[1,2,3,4,5].map(s=> <Icon.star key={s}/>)}
            </div>
            <div className="testi-quote">
              <span className="serif">"</span>We replaced three tools with Aspire Sage in a weekend. Our SDRs went from spending 4 hours a day on follow-ups to 40 minutes, without dropping any.<span className="serif">"</span>
            </div>
            <div className="testi-foot">
              <span className="av">PR</span>
              <div>
                <div className="nm">Priya Raman</div>
                <div className="ro">VP Sales · Vector Foundry</div>
              </div>
            </div>
          </div>

          <div className="testi-card">
            <div style={{display:'flex',gap:2,color:'var(--amber-deep)'}}>
              {[1,2,3,4,5].map(s=> <Icon.star key={s}/>)}
            </div>
            <div className="testi-quote">
              <span className="serif">"</span>The WhatsApp copilot answers in our voice. Customers don't realize it's AI, they just say we got way more responsive.<span className="serif">"</span>
            </div>
            <div className="testi-foot">
              <span className="av" style={{background:'linear-gradient(135deg, oklch(0.78 0.12 230), oklch(0.62 0.22 285))'}}>DP</span>
              <div>
                <div className="nm">Diego Pérez</div>
                <div className="ro">Head of Growth · Northwind</div>
              </div>
            </div>
          </div>

          <div className="testi-card">
            <div style={{display:'flex',gap:2,color:'var(--amber-deep)'}}>
              {[1,2,3,4,5].map(s=> <Icon.star key={s}/>)}
            </div>
            <div className="testi-quote">
              <span className="serif">"</span>Forecast accuracy went from "wishful thinking" to 92%. I finally trust my own dashboard.<span className="serif">"</span>
            </div>
            <div className="testi-foot">
              <span className="av" style={{background:'linear-gradient(135deg, oklch(0.82 0.1 165), oklch(0.78 0.16 65))'}}>JM</span>
              <div>
                <div className="nm">Jordan McKay</div>
                <div className="ro">CRO · Halycon AI</div>
              </div>
            </div>
          </div>

          <div className="testi-card">
            <div className="testi-stat">
              <div className="big">−68%</div>
              <div className="label">ticket volume to human agents</div>
            </div>
            <div className="testi-quote">
              <span className="serif">"</span>Aspire Sage handles billing and how-tos automatically. My team finally has time to do the hard work that actually moves CSAT.<span className="serif">"</span>
            </div>
            <div className="testi-foot">
              <span className="av" style={{background:'linear-gradient(135deg, oklch(0.78 0.13 25), oklch(0.62 0.22 285))'}}>LK</span>
              <div>
                <div className="nm">Lee Khan</div>
                <div className="ro">Director, Support · Acme</div>
              </div>
            </div>
          </div>

          <div className="testi-card">
            <div style={{display:'flex',gap:2,color:'var(--amber-deep)'}}>
              {[1,2,3,4,5].map(s=> <Icon.star key={s}/>)}
            </div>
            <div className="testi-quote">
              <span className="serif">"</span>Migration took 23 minutes. From HubSpot. With history. I didn't think that was physically possible.<span className="serif">"</span>
            </div>
            <div className="testi-foot">
              <span className="av" style={{background:'linear-gradient(135deg, oklch(0.78 0.16 65), oklch(0.82 0.1 165))'}}>AT</span>
              <div>
                <div className="nm">Ana Tan</div>
                <div className="ro">Founder · Indra Systems</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA() {
  return (
    <section className="cta">
      <div className="container">
        <div className="cta-inner">
          <h2>The CRM that pays for itself in <span className="serif">a week</span>.</h2>
          <p>Connect your inbox, import your contacts, and let Aspire Sage run your follow-ups tonight. Free for 14 days.</p>
          <div style={{display:'flex',gap:12,justifyContent:'center',flexWrap:'wrap'}}>
            <a className="btn btn-primary btn-lg" href="app/onboarding.html">Start free trial <Icon.arrow/></a>
            <a className="btn btn-ghost btn-lg" href="pages/contact.html">Book a demo</a>
          </div>
          <div style={{display:'flex',justifyContent:'center',gap:28,marginTop:32,flexWrap:'wrap',color:'oklch(0.75 0.02 270)',fontSize:13}}>
            <span style={{display:'inline-flex',gap:8,alignItems:'center'}}><Icon.check style={{color:'var(--amber)'}}/> No credit card</span>
            <span style={{display:'inline-flex',gap:8,alignItems:'center'}}><Icon.check style={{color:'var(--amber)'}}/> 5-minute setup</span>
            <span style={{display:'inline-flex',gap:8,alignItems:'center'}}><Icon.check style={{color:'var(--amber)'}}/> Cancel any time</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid">
          <div>
            <div className="logo">
              <span className="logo-mark"></span>
              <span>Aspire Sage</span>
            </div>
            <p className="foot-blurb">The AI-native CRM that runs your revenue motion on autopilot.</p>
            <div className="pill" style={{marginTop:4}}>
              <span className="pill-dot"></span>
              <span>All systems normal</span>
            </div>
          </div>
          <div>
            <div className="foot-tag">Product</div>
            <div className="foot-links">
              <a href="pages/lead-intelligence.html">Lead intelligence</a>
              <a href="pages/copilot.html">WhatsApp</a>
              <a href="pages/pipeline.html">Pipeline</a>
              <a href="pages/copilot.html">Copilot</a>
              <a href="#">Support inbox</a>
            </div>
          </div>
          <div>
            <div className="foot-tag">Company</div>
            <div className="foot-links">
              <a href="pages/about.html">About</a>
              <a href="pages/contact.html">Contact</a>
            </div>
          </div>
          <div>
            <div className="foot-tag">Resources</div>
            <div className="foot-links">
              <a href="pages/docs.html">Docs</a>
            </div>
          </div>
          <div>
            <div className="foot-tag">Legal</div>
            <div className="foot-links">
              <a href="pages/privacy.html">Privacy</a>
              <a href="pages/terms.html">Terms</a>
              <a href="pages/security.html">Security</a>
              <a href="pages/dpa.html">DPA</a>
              <a href="pages/soc2.html">SOC 2 report</a>
            </div>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Aspire Solutions Danismanlik ve Ticaret LLC · Made for revenue teams in 142 countries.</span>
          <div className="socs">
            <a href="#" className="soc"><Icon.twitter/></a>
            <a href="#" className="soc"><Icon.linkedin/></a>
            <a href="#" className="soc"><Icon.github/></a>
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Pricing = Pricing;
window.Testimonials = Testimonials;
window.CTA = CTA;
window.Footer = Footer;