/* ═══════════════════════════════════════════════
   Sub-pages: Features, How It Works, Integrations,
   Pricing, Resources (condensed page content)
   ═══════════════════════════════════════════════ */

function PageHero({ eyebrow, title, sub, accent, children }) {
  return (
    <section style={{ paddingTop: 144, paddingBottom: 84, background: '#fff', textAlign: 'center' }}>
      <div style={{ maxWidth: 900, margin: '0 auto', padding: '0 36px' }}>
        <Reveal>
          {eyebrow && <p style={{ fontSize: 13, fontWeight: 700, letterSpacing: '0.12em', color: accent, marginBottom: 14, textTransform: 'uppercase' }}>{eyebrow}</p>}
          <h1 style={{ fontSize: 'clamp(36px, 4.6vw, 58px)', fontWeight: 760, color: '#0a0a1a', lineHeight: 1.1, letterSpacing: '-0.03em', marginBottom: 20 }}>{title}</h1>
          {sub && <p style={{ fontSize: 19, lineHeight: 1.72, color: '#5e5e70' }}>{sub}</p>}
          {children}
        </Reveal>
      </div>
    </section>
  );
}

function HowItWorksPage({ tweaks }) {
  const accent = tweaks.accentColor;
  return (
    <React.Fragment>
      <PageHero accent={accent} eyebrow="How it works" title="From patient call to booked appointment" sub="Arcline handles the full workflow — answering, understanding, matching, and booking — so your team doesn't have to." />
      <HowItWorks tweaks={tweaks} />
      <ComplexitySection tweaks={tweaks} />
      <FinalCTA tweaks={tweaks} />
    </React.Fragment>
  );
}

function FeaturesPage({ tweaks }) {
  const accent = tweaks.accentColor;
  return (
    <React.Fragment>
      <PageHero accent={accent} eyebrow="Features" title="Built for the complexity of health clinics" sub="Every feature is designed around the real workflows, rules, and claim pathways your front desk deals with daily." />
      <FeaturesSection tweaks={tweaks} />
      <Outcomes tweaks={tweaks} />
      <FinalCTA tweaks={tweaks} />
    </React.Fragment>
  );
}

function IntegrationsPage({ tweaks }) {
  const accent = tweaks.accentColor;
  return (
    <React.Fragment>
      <PageHero accent={accent} eyebrow="Integrations" title="Deeply integrated with PracSuite" sub="Real-time two-way sync for appointments, patient records, practitioner availability, and clinical notes." />
      <Integrations tweaks={tweaks} />
      <FinalCTA tweaks={tweaks} />
    </React.Fragment>
  );
}

function PricingPage({ tweaks }) {
  const accent = tweaks.accentColor;
  return (
    <React.Fragment>
      <PageHero accent={accent} eyebrow="Pricing" title="Simple, transparent pricing" sub="Start with a free trial. No credit card required. Scale as your clinic grows." />
      <Pricing tweaks={tweaks} />
      <FAQ tweaks={tweaks} />
      <FinalCTA tweaks={tweaks} />
    </React.Fragment>
  );
}

function ResourcesPage({ tweaks }) {
  const accent = tweaks.accentColor;
  const resources = [
    { cat: 'Guide', title: 'Getting started with AI reception for health clinics', desc: 'A practical guide for clinic owners exploring AI-assisted front-desk workflows.' },
    { cat: 'Case study', title: 'How Harbour Physiotherapy reduced missed calls by 67%', desc: 'A Perth-based physio clinic shares their experience with Arcline.' },
    { cat: 'Webinar', title: 'AI and the future of health clinic operations', desc: 'Join our panel on how AI is changing front-desk workflows in allied health.' },
    { cat: 'Guide', title: 'Understanding claim pathway automation', desc: 'How Arcline handles workers comp, CDM, DVA, and MVA pathways for health clinics.' },
  ];
  return (
    <React.Fragment>
      <PageHero accent={accent} eyebrow="Resources" title="Learn how AI is transforming clinic reception" sub="Guides, case studies, and insights for health clinic operators." />
      <Section bg="#fafbfc" pad="0 0 116px">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 26 }}>
          {resources.map((r, i) => (
            <Reveal key={i} delay={stagger(i)}>
              <a href="#" style={{ textDecoration: 'none', display: 'block', height: '100%' }}>
                <div style={{
                  background: '#fff', borderRadius: 20, padding: '30px 28px',
                  border: '1px solid #f0f0f5', height: '100%',
                  transition: 'all 0.25s ease',
                }}
                onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = '0 6px 20px rgba(0,0,0,0.05)'; }}
                onMouseLeave={e => { e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.boxShadow = 'none'; }}
                >
                  {/* Placeholder image */}
                  <div style={{ width: '100%', height: 170, borderRadius: 14, background: 'linear-gradient(135deg, #eef2f7, #f6f8fb)', marginBottom: 20, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <span style={{ fontSize: 10, color: '#a0a8b4', fontFamily: 'monospace' }}>cover image</span>
                  </div>
                  <span style={{ fontSize: 12, fontWeight: 660, color: accent, textTransform: 'uppercase', letterSpacing: '0.08em' }}>{r.cat}</span>
                  <h3 style={{ fontSize: 18, fontWeight: 680, color: '#0a0a1a', marginTop: 8, marginBottom: 8, lineHeight: 1.4 }}>{r.title}</h3>
                  <p style={{ fontSize: 15, color: '#6a6a7a', lineHeight: 1.7 }}>{r.desc}</p>
                </div>
              </a>
            </Reveal>
          ))}
        </div>
      </Section>
    </React.Fragment>
  );
}

window.PageHero = PageHero;
window.HowItWorksPage = HowItWorksPage;
window.FeaturesPage = FeaturesPage;
window.IntegrationsPage = IntegrationsPage;
window.PricingPage = PricingPage;
window.ResourcesPage = ResourcesPage;