/* ═══════════════════════════════════════════════
   Pricing + FAQ + Final CTA + Footer
   ═══════════════════════════════════════════════ */

function Pricing({ tweaks }) {
  const accent = tweaks.accentColor;
  const plans = [
    { name: 'Starter', price: '$249', period: '/mo', desc: 'For single-location clinics getting started.', features: ['Up to 200 calls/month', 'PracSuite integration', 'Standard booking logic', 'After-hours capture', 'Email support'], primary: false },
    { name: 'Professional', price: '$499', period: '/mo', desc: 'For busy clinics that need full AI reception.', features: ['Unlimited calls', 'PracSuite deep sync', 'Complex claim pathways', 'Practitioner matching', 'Custom booking rules', 'Priority support'], primary: true, badge: 'Most popular' },
    { name: 'Enterprise', price: 'Custom', period: '', desc: 'For multi-location clinics and health groups.', features: ['Everything in Professional', 'Multi-location support', 'Custom integrations', 'Dedicated account manager', 'SLA guarantee'], primary: false },
  ];
  return (
    <Section id="pricing" bg="#fafbfc">
      <SectionHead accent={accent} eyebrow="Pricing" title="Simple, transparent pricing" sub="Start with a free trial. No credit card required." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 26, maxWidth: 1160, margin: '0 auto' }} className="three-col">
        {plans.map((p, i) => (
          <Reveal key={i} delay={stagger(i, 80)}>
            <div style={{
              background: '#fff', borderRadius: 22, padding: '38px 28px',
              border: p.primary ? `2px solid ${accent}` : '1px solid #f0f0f5',
              position: 'relative', height: '100%', display: 'flex', flexDirection: 'column',
              boxShadow: p.primary ? `0 6px 24px ${accent}0c` : 'none',
            }}>
              {p.badge && <div style={{ position: 'absolute', top: -11, left: '50%', transform: 'translateX(-50%)', background: accent, color: '#fff', fontSize: 11, fontWeight: 700, padding: '4px 13px', borderRadius: 100 }}>{p.badge}</div>}
              <h3 style={{ fontSize: 20, fontWeight: 700, color: '#0a0a1a', marginBottom: 8 }}>{p.name}</h3>
              <div style={{ marginBottom: 10 }}>
                <span style={{ fontSize: 38, fontWeight: 760, color: '#0a0a1a', letterSpacing: '-0.025em' }}>{p.price}</span>
                <span style={{ fontSize: 14, color: '#888' }}>{p.period}</span>
              </div>
              <p style={{ fontSize: 14.5, color: '#6a6a7a', lineHeight: 1.65, marginBottom: 24 }}>{p.desc}</p>
              <div style={{ flex: 1, marginBottom: 24 }}>
                {p.features.map((f, j) => (
                  <div key={j} style={{ display: 'flex', alignItems: 'center', gap: 7, marginBottom: 9 }}>
                    <Check color={accent} size={13} />
                    <span style={{ fontSize: 14, color: '#3a3a4a' }}>{f}</span>
                  </div>
                ))}
              </div>
              <Btn href="#" primary={p.primary} accent={accent} size="md" style={{ width: '100%', justifyContent: 'center' }}>
                {p.name === 'Enterprise' ? 'Contact sales' : 'Start free trial'}
              </Btn>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function FAQ({ tweaks }) {
  const accent = tweaks.accentColor;
  const items = [
    { q: 'What is Arcline?', a: 'Arcline is an AI receptionist built specifically for health clinics. It answers patient calls, books appointments directly in PracSuite, handles complex claim pathways, and captures after-hours demand.' },
    { q: 'How does the PracSuite integration work?', a: 'Arcline connects via API to PracSuite, reading live practitioner availability, appointment types, and booking rules. It syncs appointments, patient records, and notes in real time.' },
    { q: 'Can Arcline handle workers comp and CDM pathways?', a: 'Yes. Arcline is trained on real clinic workflows including workers compensation, chronic disease management, DVA, and motor vehicle accident claim pathways.' },
    { q: 'How much does Arcline cost?', a: 'Arcline starts at $249/month for single-location clinics. We offer a free trial with no credit card required. See our pricing page for details.' },
    { q: 'Does Arcline replace my reception team?', a: 'No. Arcline works alongside your team, handling repetitive phone workflows so they can focus on higher-value patient-facing work.' },
  ];
  const [open, setOpen] = React.useState(null);
  return (
    <Section id="faq" bg="#fff">
      <SectionHead accent={accent} eyebrow="FAQ" title="Common questions" />
      <div style={{ maxWidth: 860, margin: '0 auto' }}>
        {items.map((item, i) => (
          <Reveal key={i} delay={stagger(i, 40)}>
            <div style={{ borderBottom: '1px solid #f0f0f5' }}>
              <button onClick={() => setOpen(open === i ? null : i)} style={{
                width: '100%', background: 'none', border: 'none', cursor: 'pointer',
                padding: '18px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                fontSize: 16, fontWeight: 620, color: '#0a0a1a', textAlign: 'left',
              }}>
                {item.q}
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none" style={{ transform: open === i ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform 0.3s ease', flexShrink: 0, marginLeft: 12 }}>
                  <path d="M5 7l4 4 4-4" stroke="#888" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                </svg>
              </button>
              <div style={{
                maxHeight: open === i ? 200 : 0, overflow: 'hidden',
                transition: 'max-height 0.35s cubic-bezier(0.16,1,0.3,1)',
              }}>
                <p style={{ fontSize: 15, lineHeight: 1.75, color: '#5e5e70', paddingBottom: 20 }}>{item.a}</p>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

function FinalCTA({ tweaks }) {
  const accent = tweaks.accentColor;
  return (
    <Section id="cta" bg="#fafbfc" pad="96px 0 120px">
      <Reveal>
        <div style={{
          background: `linear-gradient(135deg, ${accent}05 0%, ${accent}02 100%)`,
          borderRadius: 28, padding: '68px 52px', textAlign: 'center',
          border: `1px solid ${accent}0c`, maxWidth: 920, margin: '0 auto',
        }}>
          <h2 style={{ fontSize: 'clamp(30px, 3.6vw, 42px)', fontWeight: 740, color: '#0a0a1a', marginBottom: 16, letterSpacing: '-0.025em' }}>
            Ready to give your reception team more time?
          </h2>
          <p style={{ fontSize: 17, color: '#5e5e70', marginBottom: 32, maxWidth: 560, margin: '0 auto 32px', lineHeight: 1.7 }}>
            Start your free trial today. No credit card required. See results within your first week.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
            <Btn href="#" accent={accent} size="lg">Start free trial <ArrowRight /></Btn>
            <Btn href="#" primary={false} size="lg">Book a demo</Btn>
          </div>
          <div style={{ display: 'flex', gap: 20, justifyContent: 'center', marginTop: 20 }}>
            {['Free setup', 'No lock-in contracts', 'Cancel anytime'].map((t, i) => (
              <span key={i} style={{ fontSize: 11.5, color: '#888', fontWeight: 500, display: 'flex', alignItems: 'center', gap: 4 }}>
                <Check color="#22c55e" size={12} /> {t}
              </span>
            ))}
          </div>
        </div>
      </Reveal>
    </Section>
  );
}

function Footer({ tweaks }) {
  const accent = tweaks.accentColor;
  const cols = [
    { title: 'Product', links: ['How it works', 'Features', 'Integrations', 'Pricing'] },
    { title: 'Resources', links: ['Blog', 'Case studies', 'Help centre', 'API docs'] },
    { title: 'Company', links: ['About', 'Careers', 'Contact', 'Partners'] },
    { title: 'Legal', links: ['Privacy', 'Terms', 'Security'] },
  ];
  return (
    <footer style={{ background: '#fff', borderTop: '1px solid #f0f0f5', padding: '56px 28px 36px' }}>
      <div style={{ maxWidth: 1320, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr repeat(4, 1fr)', gap: 36, marginBottom: 44 }} className="footer-grid">
          <div>
            <div style={{ marginBottom: 14 }}><ArclineLogo height={20} /></div>
            <p style={{ fontSize: 13, color: '#6a6a7a', lineHeight: 1.6, maxWidth: 220 }}>AI reception built specifically for busy health clinics across Australia.</p>
            <p style={{ fontSize: 11.5, color: '#9a9aaa', marginTop: 10 }}>Perth, Western Australia</p>
          </div>
          {cols.map((col, i) => (
            <div key={i}>
              <h4 style={{ fontSize: 12, fontWeight: 700, color: '#0a0a1a', marginBottom: 14, letterSpacing: '0.02em' }}>{col.title}</h4>
              {col.links.map((link, j) => (
                <a key={j} href="#" style={{ display: 'block', fontSize: 13, color: '#6a6a7a', textDecoration: 'none', marginBottom: 9, transition: 'color 0.2s' }}
                  onMouseEnter={e => e.target.style.color = accent}
                  onMouseLeave={e => e.target.style.color = '#6a6a7a'}
                >{link}</a>
              ))}
            </div>
          ))}
        </div>
        <div style={{ borderTop: '1px solid #eaeaf0', paddingTop: 20, display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 10 }}>
          <p style={{ fontSize: 12, color: '#9a9aaa' }}>© 2026 Arcline. All rights reserved.</p>
          <div style={{ display: 'flex', gap: 18 }}>
            {['Privacy', 'Terms', 'Cookies'].map((l, i) => (
              <a key={i} href="#" style={{ fontSize: 12, color: '#9a9aaa', textDecoration: 'none' }}>{l}</a>
            ))}
          </div>
        </div>
      </div>
    </footer>
  );
}

window.Pricing = Pricing;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.Footer = Footer;