/* Pricing (Max = most popular, single CTA), Footer (no Trust, Coimbatore, founders), Sticky bar */

const PRICING_CTA = "Start hiring · prevent mishires";

function Pricing() {
  const tiers = [
    {
      name: 'Basic',
      tag: 'For a single, focused hire.',
      price: '₹30,000',
      strike: '₹60,000',
      per: 'per role · ₹3,000 / invite',
      features: [
        '10 candidate invites included',
      ],
      recommended: false,
    },
    {
      name: 'Pro',
      tag: 'For teams hiring steadily.',
      price: '₹1,25,000',
      strike: '₹2,50,000',
      per: 'per role · ₹2,500 / invite',
      features: [
        '50 candidate invites included',
      ],
      recommended: false,
    },
    {
      name: 'Max',
      tag: 'For serious hiring at scale.',
      price: '₹1,75,000',
      strike: '₹3,50,000',
      per: 'per role · ₹1,750 / invite',
      features: [
        '100 candidate invites included',
      ],
      recommended: true,
    },
  ];

  return (
    <section className="pricing-section" id="pricing">
      <div className="nh-container">
        <Reveal className="section__head" style={{ marginBottom: 48 }}>
          <span className="pricing-banner">
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--ember-600)' }}></span>
            Founding-customer offer · 50% off · auto-applied
          </span>
          <h2 className="display-xl">Per role. Pay once.<br />Hire at your own pace.</h2>
          <p className="body-l" style={{ maxWidth: '54ch', marginTop: 16 }}>
            Public pricing. One role, one payment. No sales call required to see the number.
          </p>
        </Reveal>

        <Reveal className="pricing" stagger>
          {tiers.map((t) => (
            <div key={t.name} className={`price-card ${t.recommended ? 'recommended' : ''}`}>
              {t.recommended && <span className="nh-pill nh-pill--recommended">Most popular</span>}
              <h3 className="tier">{t.name}</h3>
              <p className="tag">{t.tag}</p>
              <div className="price-row">
                <span className="price">{t.price}</span>
                <span className="price-strike">{t.strike}</span>
              </div>
              <p className="per">{t.per}</p>
              <p className="save">{t.save}</p>
              <ul>
                {t.features.map((f) => <li key={f}>{f}</li>)}
              </ul>
            </div>
          ))}
        </Reveal>

      </div>
    </section>
  );
}

/* Footer ─────────────────────────────────────────────────── */
function Footer() {
  return (
    <footer className="footer">
      <div className="nh-container">
        <div className="footer-grid footer-grid--3">
          <div>
            <div className="footer__lockup">
              <MarkSVG size={28} />
              <span className="nh-wordmark" style={{ color: 'var(--bone-50)', fontSize: 22 }}>NextHire</span>
            </div>
            <p className="footer__tag">
              Auditable evidence of how candidates reason with AI in real codebases. Before you hire, not after.
            </p>
          </div>
          <div>
            <h4>Product</h4>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#decision">What you get</a></li>
              <li><a href="#compare">Compare</a></li>
              <li><a href="#pricing">Pricing</a></li>
            </ul>
          </div>
          <div>
            <h4>Company</h4>
            <ul>
              <li><a href={`mailto:${CONTACT_EMAIL}`}>{CONTACT_EMAIL}</a></li>
              <li><a href={DEMO_URL} target="_blank" rel="noopener">Book a 30-min demo</a></li>
              <li><a href={CTA_URL} target="_blank" rel="noopener">Hire with confidence →</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <span>© 2026 NextHire · Built in Coimbatore by Ajayaditya &amp; Nithisha</span>
          <span>Hiring managers decide. We surface evidence.</span>
        </div>
      </div>
    </footer>
  );
}

/* Top banner — slim sticky strip at the very top of the page.
   CTAs already live in the nav, so the banner is just the offer copy + dismiss. */
function TopBanner() {
  const [dismissed, setDismissed] = React.useState(false);

  React.useEffect(() => {
    document.body.classList.toggle('banner-dismissed', dismissed);
    return () => document.body.classList.remove('banner-dismissed');
  }, [dismissed]);

  if (dismissed) return null;
  return (
    <div className="top-banner" role="region" aria-label="Founding customer offer">
      <p className="top-banner__copy">
        <span className="top-banner__scarcity">FOUNDING CUSTOMER OFFER</span>
        <span className="top-banner__sep">·</span>
        <strong>50% off every plan.</strong>
      </p>
    </div>
  );
}

Object.assign(window, { Pricing, Footer, TopBanner });