/* Pricing + testimonial */
function Pricing({ onCTA }) {
  const plans = [
    { name: 'Starter', price: '$120', per: '/month', desc: 'Perfect for solo operators and small teams.', feats: ['24/7 AI answering', 'After-hours mode', 'Lead qualification', 'Call summaries', 'Urgent call routing'], pop: false },
    { name: 'Growth', price: '$170', per: '/month', desc: 'Everything you need to capture and follow up.', feats: ['Everything in Starter', 'Website quote form', 'Missed-call text-back', 'Monthly lead report', 'CRM & email workflow setup'], pop: true },
    { name: 'Done-for-you setup', price: '$250', per: 'one-time', desc: 'We set up the system for your business.', feats: ['Business script setup', 'Service area configuration', 'Routing rules', 'Notification setup', 'Test call flow'], pop: false },
  ];
  return (
    <section className="dark" id="pricing" style={{ background: 'var(--black)' }}>
      <div className="site sec-pad">
        <div className="sec-head">
          <h2 className="display">Simple pricing.<br /><span className="yl">Real response.</span></h2>
        </div>
        <div className="prices">
          {plans.map((p, i) => (
            <div className={'price' + (p.pop ? ' pop' : '')} key={i}>
              {p.pop && <span className="poptag">Most Popular</span>}
              <div className="pname">{p.name}</div>
              <div className="pdesc">{p.desc}</div>
              <div className="pamt">{p.price} <span>{p.per}</span></div>
              <ul>
                {p.feats.map((f, j) => <li key={j}><Icon name="check" /> {f}</li>)}
              </ul>
              <Button variant={p.pop ? 'primary' : 'secondary'} className="block" icon={p.pop ? 'phoneVolume' : null} onClick={onCTA}>
                {p.name === 'Done-for-you setup' ? 'Book setup call' : 'Start capturing calls'}
              </Button>
            </div>
          ))}
        </div>
        <div className="price-note"><Icon name="bolt" /> No long-term contracts. Cancel anytime.</div>
      </div>
    </section>
  );
}

function Testimonial() {
  return (
    <section className="dark" style={{ background: 'var(--black)', paddingBottom: 84 }}>
      <div className="site">
        <div className="quote-card" style={{ maxWidth: 560 }}>
          <span className="q-sample">Sample — replace with a real review</span>
          <div className="mark">“</div>
          <p>We used to miss calls every night. Now ReplyFirst catches them, qualifies the job, and routes the urgent ones to me instantly. It's already paid for itself.</p>
          <Stars n={5} />
          <div className="q-by">
            <span className="q-av" aria-hidden="true">MR</span>
            <div>
              <div className="who">Customer name <span className="q-note">(placeholder)</span></div>
              <div className="role">Trade · City — add a real customer here</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Pricing, Testimonial });