// Pricing & Process sections

const Pricing = () => {
  const [billing, setBilling] = React.useState('monthly'); // monthly | annual
  const plans = [
    {
      key: 'starter',
      name: 'Starter',
      tagline: 'For sole traders & one-page sites',
      monthly: 12,
      annual: 10,
      features: [
        'Single page website',
        'UK hosting included',
        'Mobile responsive design',
        'Contact form + email forwarding',
        'SSL certificate & domain setup',
        'Small content edits each month',
      ],
      cta: 'Start your website',
      variant: 'plain',
    },
    {
      key: 'business',
      name: 'Business',
      tagline: 'Our most popular plan',
      monthly: 25,
      annual: 21,
      features: [
        'Up to 6 pages, fully designed',
        'SEO basics — meta, schema, sitemap',
        'WhatsApp & enquiry form integration',
        'UK hosting & domain included',
        'Google Business Profile setup',
        'Monthly content updates',
      ],
      cta: 'Choose Business',
      variant: 'feat',
      ribbon: 'Most popular',
    },
    {
      key: 'growth',
      name: 'Growth',
      tagline: 'For businesses ready to rank',
      monthly: 49,
      annual: 42,
      features: [
        'Everything in Business, plus:',
        'Blog setup & monthly article',
        'Ongoing local SEO optimisation',
        'Performance & speed tuning',
        'Priority support — same-day reply',
        'Quarterly growth review call',
      ],
      cta: 'Choose Growth',
      variant: 'plain',
    },
  ];

  return (
    <section className="pricing" id="pricing">
      <div className="container">
        <div className="section-head" style={{textAlign: 'center', margin: '0 auto 48px', maxWidth: 760}}>
          <span className="section-eyebrow" style={{justifyContent: 'center', display: 'inline-flex'}}>Pricing</span>
          <h2 style={{marginTop: 14}}>Professional business websites from just £12 a month.</h2>
          <p style={{margin: '14px auto 0', textAlign: 'center'}}>Pay monthly, cancel anytime. Hosting, support and small changes are always included — no surprise invoices, ever.</p>
          <div className="billing-toggle" role="tablist" aria-label="Billing period">
            <button role="tab" aria-selected={billing === 'monthly'} className={billing === 'monthly' ? 'on' : ''} onClick={() => setBilling('monthly')}>Monthly</button>
            <button role="tab" aria-selected={billing === 'annual'} className={billing === 'annual' ? 'on' : ''} onClick={() => setBilling('annual')}>
              Annual <span className="save">save 15%</span>
            </button>
          </div>
        </div>

        <div className="price-grid">
          {plans.map(p => {
            const price = billing === 'monthly' ? p.monthly : p.annual;
            return (
              <div key={p.key} className={`price-card ${p.variant === 'feat' ? 'feat' : ''}`}>
                {p.ribbon && <span className="ribbon">{p.ribbon}</span>}
                <div className="tag-line">{p.tagline}</div>
                <h3>{p.name}</h3>
                <div className="price">
                  <span className="cur">£</span>{price}
                </div>
                <div className="price-meta">per month · billed {billing === 'monthly' ? 'monthly' : 'annually'}</div>
                <ul className="feature-list">
                  {p.features.map((f, i) => (
                    <li key={i}>
                      <span className="check"><Icon name="check" size={11} strokeWidth={2.5} /></span>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
                <a href="#contact" className={`btn ${p.variant === 'feat' ? 'btn-primary' : 'btn-secondary'}`}>{p.cta} <Icon name="arrowRight" size={14} /></a>
              </div>
            );
          })}
        </div>

        <div className="pricing-note">
          One-time setup from £149 · No long contracts · 14-day money-back guarantee on setup
        </div>
      </div>
    </section>
  );
};

const Process = () => {
  const steps = [
    { n: '01', t: 'Consultation', d: 'A free 20-minute call to understand your business, customers and goals — no commitment.' },
    { n: '02', t: 'Planning', d: 'We map out pages, copy and design direction. You approve a clear plan before we build anything.' },
    { n: '03', t: 'Development', d: `We design and build your site in a private preview. You review, we refine until it's right.` },
    { n: '04', t: 'Launch & support', d: 'We go live, set up tracking, and stay on as your ongoing team for updates and growth.' },
  ];
  return (
    <section className="process" id="process">
      <div className="container">
        <div className="section-head reveal">
          <div className="sh-row">
            <div>
              <span className="section-eyebrow">Process</span>
              <h2 style={{marginTop: 14}}>A clear, calm 4-step process — most sites live in under 14 days.</h2>
            </div>
            <p style={{margin: 0}}>One named contact from first call through to launch. No account managers, no ticket queues.</p>
          </div>
        </div>
        <div className="process-grid">
          {steps.map((s, i) => (
            <div className="process-step reveal" key={s.n} style={{transitionDelay: `${i * 0.1}s`}}>
              <div className="num">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

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