// Azlani — Pricing / Pilot page

const PricingHero = () => (
  <section style={{ minHeight: '70vh', display: 'flex', flexDirection: 'column', justifyContent: 'center', paddingTop: 140, paddingBottom: 80, borderBottom: '1px solid var(--line)' }}>
    <div className="container">
      <FadeUp><div className="eyebrow"><span className="dot"></span> Pilot pricing</div></FadeUp>
      <h1 className="serif" style={{ fontSize: 'clamp(56px, 9vw, 144px)', lineHeight: 0.92, letterSpacing: '-0.035em', margin: '24px 0 0', fontWeight: 400 }}>
        <RevealLines lines={['Built with']} />
        <RevealLines lines={[<span key="l">commercial roofers, <span className="ital" style={{ color: 'var(--ember)' }}>not</span> for them.</span>]} baseDelay={0.08} />
      </h1>
      <FadeUp delay={0.4} style={{ maxWidth: 640, marginTop: 40 }}>
        <p style={{ fontSize: 19, lineHeight: 1.5, color: 'var(--ink-2)', margin: 0 }}>
          We're onboarding a small number of pilot companies. Pricing reflects that — early, hands-on, with weekly tuning. Best for shops that already get inbound leads and want to convert more of them into booked inspections.
        </p>
      </FadeUp>
    </div>
  </section>
);

const PricingCards = () => {
  const tiers = [
    {
      name: 'Pilot setup',
      price: '$500',
      unit: 'starting at',
      desc: 'One-time configuration. We learn your intake, build your call flow, and stress-test it before going live.',
      includes: [
        'Discovery on your services & service area',
        'Custom intake script for your shop',
        'Qualification & escalation rules',
        'Calendar / booking workflow',
        'Sample-call testing before launch',
      ],
    },
    {
      name: 'Monthly pilot',
      price: '$500',
      unit: 'starting at / month',
      desc: 'Ongoing operations once you\u2019re live, including weekly tuning while we\u2019re in pilot mode.',
      includes: [
        'AI call answering',
        'Website form follow-up',
        'SMS photo collection',
        'Lead summary delivery',
        'Basic lead dashboard',
        'Weekly tuning during pilot',
        'Human fallback rules',
      ],
      featured: true,
    },
    {
      name: 'Per booked inspection',
      price: 'optional',
      unit: 'add-on',
      desc: 'Some pilots run a per-qualified-booked-inspection fee on top of monthly. We\u2019ll model whichever shape fits your volume.',
      includes: [
        'Per-qualified-booking fee',
        'Volume bands available',
        'Custom pricing for higher call volume',
        'Custom pricing for deeper integrations',
      ],
    },
  ];
  return (
    <section className="section-pad" style={{ borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, borderTop: '1px solid var(--line)', borderLeft: '1px solid var(--line)' }}>
          {tiers.map((t, i) => (
            <FadeUp key={t.name} delay={i * 0.08}>
              <div style={{
                padding: '48px 36px 56px',
                borderRight: '1px solid var(--line)',
                borderBottom: '1px solid var(--line)',
                background: t.featured ? 'var(--ink)' : 'transparent',
                color: t.featured ? 'var(--bg)' : 'inherit',
                minHeight: 600,
                display: 'flex',
                flexDirection: 'column',
                gap: 20,
                position: 'relative',
              }}>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: t.featured ? 'var(--ember-soft)' : 'var(--muted)' }}>
                  {(i + 1).toString().padStart(2, '0')} · {t.name}
                </div>
                <div>
                  <div className="serif" style={{ fontSize: 80, lineHeight: 1, letterSpacing: '-0.03em' }}>{t.price}</div>
                  <div className="mono" style={{ fontSize: 12, color: t.featured ? 'rgba(244,239,230,0.7)' : 'var(--muted)', marginTop: 6 }}>{t.unit}</div>
                </div>
                <p style={{ fontSize: 15, lineHeight: 1.55, opacity: t.featured ? 0.85 : 1, color: t.featured ? 'var(--bg)' : 'var(--ink-2)', margin: 0 }}>{t.desc}</p>
                <div style={{ flex: 1 }}></div>
                <div style={{ borderTop: t.featured ? '1px solid rgba(244,239,230,0.18)' : '1px solid var(--line)', paddingTop: 20 }}>
                  <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', textTransform: 'uppercase', opacity: 0.7, marginBottom: 12 }}>Includes</div>
                  {t.includes.map(line => (
                    <div key={line} style={{ display: 'flex', gap: 12, padding: '6px 0', fontSize: 14, lineHeight: 1.4 }}>
                      <span style={{ color: t.featured ? 'var(--ember-soft)' : 'var(--ember)' }}>—</span>
                      <span>{line}</span>
                    </div>
                  ))}
                </div>
                {t.featured && (
                  <a href="contact.html" className="btn btn-primary" style={{ marginTop: 16 }}>Apply for pilot <span className="arrow">↗</span></a>
                )}
              </div>
            </FadeUp>
          ))}
        </div>
        <div className="mono" style={{ fontSize: 11, color: 'var(--muted)', marginTop: 24, letterSpacing: '0.04em' }}>
          * "Starting at" reflects pilot pricing. Permanent pricing will be set after the pilot phase based on what works for the kinds of shops we serve.
        </div>
      </div>
    </section>
  );
};

const BestFor = () => (
  <section className="section-pad" style={{ background: 'var(--bg-2)', borderBottom: '1px solid var(--line)' }}>
    <div className="container">
      <FadeUp><div className="eyebrow"><span className="dot"></span> Best fit</div></FadeUp>
      <h2 className="serif" style={{ fontSize: 'clamp(40px, 6vw, 88px)', lineHeight: 0.95, letterSpacing: '-0.03em', margin: '24px 0 0', fontWeight: 400, maxWidth: 1100 }}>
        <RevealLines lines={['For shops that already']} />
        <RevealLines lines={[<span key="l">get leads — and want to <span className="ital" style={{ color: 'var(--ember)' }}>keep more of them.</span></span>]} baseDelay={0.08} />
      </h2>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, marginTop: 80 }}>
        <FadeUp>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)' }}>You're a fit if you</div>
          <div style={{ marginTop: 24 }}>
            {['Run a commercial roofing company (5–100 employees)','Already get inbound calls and form fills','Lose leads to voicemail or slow form follow-up','Want estimators to stop chasing missing details','Are open to a 1–2 month pilot before scaling'].map(t => (
              <div key={t} style={{ borderTop: '1px solid var(--line)', padding: '18px 0', display: 'flex', gap: 16, fontSize: 17 }}>
                <span className="mono" style={{ color: 'var(--ember)' }}>+</span>{t}
              </div>
            ))}
            <div style={{ borderTop: '1px solid var(--line)' }}></div>
          </div>
        </FadeUp>
        <FadeUp delay={0.1}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'var(--muted)' }}>Probably not yet if you</div>
          <div style={{ marginTop: 24 }}>
            {['Don\u2019t have inbound lead volume to test against','Need outbound cold calling — that\u2019s not what this is','Want a fully autonomous receptionist with no oversight','Need pricing & proposals automated — your team handles those'].map(t => (
              <div key={t} style={{ borderTop: '1px solid var(--line)', padding: '18px 0', display: 'flex', gap: 16, fontSize: 17, color: 'var(--ink-2)' }}>
                <span className="mono" style={{ color: 'var(--muted)' }}>—</span>{t}
              </div>
            ))}
            <div style={{ borderTop: '1px solid var(--line)' }}></div>
          </div>
        </FadeUp>
      </div>
    </div>
  </section>
);

const PricingCTA = () => (
  <section className="dark section-pad">
    <div className="container">
      <h2 className="serif" style={{ fontSize: 'clamp(48px, 8vw, 128px)', lineHeight: 0.92, letterSpacing: '-0.03em', margin: 0, fontWeight: 400 }}>
        <RevealLines lines={[<span key="l">Apply for the <span className="ital" style={{ color: 'var(--ember-soft)' }}>pilot.</span></span>]} />
      </h2>
      <FadeUp delay={0.2} style={{ marginTop: 32, maxWidth: 560 }}>
        <p style={{ fontSize: 19, lineHeight: 1.5, opacity: 0.85 }}>
          Tell us a bit about your shop. If we're a fit, we'll set up a 10-minute demo and walk through what a pilot would look like for your intake.
        </p>
      </FadeUp>
      <FadeUp delay={0.3} style={{ display: 'flex', gap: 12, marginTop: 32, flexWrap: 'wrap' }}>
        <a href="contact.html" className="btn btn-primary">Book demo <span className="arrow">↗</span></a>
      </FadeUp>
    </div>
  </section>
);

function App() {
  return (
    <div className="page-fade">
      <Nav current="pricing" />
      <PricingHero />
      <PricingCards />
      <BestFor />
      <PricingCTA />
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);