/* Final CTA band + Footer */
function FinalCTA({ onBook }) {
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <img src="assets/images/cta-band.png" alt="" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(10,48,47,0.88) 0%, rgba(10,48,47,0.62) 55%, rgba(10,48,47,0.3) 100%)' }}></div>
      <Container style={{ position: 'relative', padding: '108px 32px', textAlign: 'left' }}>
        <div style={{ maxWidth: 580 }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: 50, lineHeight: 1.06, letterSpacing: '-0.018em', color: '#fff', margin: 0, textWrap: 'pretty' }}>Feeling off today? You can be seen today.</h2>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 19, lineHeight: 1.5, color: 'rgba(255,255,255,0.92)', margin: '20px 0 32px' }}>Walk in, or book a same-day spot in under two minutes. Care that fits your life, right when you need it.</p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
            <Button size="lg" icon="calendar-check" onClick={onBook}>Book a same-day visit</Button>
            <Button size="lg" variant="white" icon="phone">Call (604) 555-0123</Button>
          </div>
        </div>
      </Container>
    </section>
  );
}

function Footer() {
  const cols = [
    { h: 'Care', links: ['Services', 'Same-day visits', 'Virtual care', 'New patients'] },
    { h: 'Clinic', links: ['Our team', 'How it works', 'Careers', 'Contact'] },
    { h: 'Help', links: ['FAQ', 'Hours', 'Accessibility', 'Privacy'] },
  ];
  return (
    <footer style={{ background: 'var(--teal-900)', color: 'rgba(255,255,255,0.78)' }}>
      <Container style={{ padding: '64px 32px 40px', display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 40 }}>
        <div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <img src="assets/logo-mark.png" alt="Tidewell" style={{ height: 40, filter: 'brightness(0) invert(1)', opacity: 0.95 }} />
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, color: '#fff' }}>Tidewell</div>
          </div>
          <p style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, lineHeight: 1.6, maxWidth: 300, margin: 0 }}>Tidewell Family Health. Care that fits your life.</p>
          <div style={{ marginTop: 18, fontFamily: 'var(--font-sans)', fontSize: 13.5, lineHeight: 1.6, color: 'rgba(255,255,255,0.62)' }}>
            Open 7 days · Mon to Fri 8 am to 8 pm · Sat and Sun 9 am to 5 pm
          </div>
          <div style={{ marginTop: 18 }}><Pill status="go">Open now · ~12 min wait</Pill></div>
        </div>
        {cols.map((c) => (
          <div key={c.h}>
            <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--teal-200)', marginBottom: 16 }}>{c.h}</div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 11 }}>
              {c.links.map((l) => (
                <a key={l} href="#" onClick={(e) => e.preventDefault()} style={{ fontFamily: 'var(--font-sans)', fontSize: 14.5, color: 'rgba(255,255,255,0.78)', textDecoration: 'none', cursor: 'pointer' }}
                   onMouseEnter={(e) => (e.target.style.color = '#fff')} onMouseLeave={(e) => (e.target.style.color = 'rgba(255,255,255,0.78)')}>{l}</a>
              ))}
            </div>
          </div>
        ))}
      </Container>

      {/* emergency line — always visible */}
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)', background: 'rgba(0,0,0,0.18)' }}>
        <Container style={{ padding: '16px 32px', display: 'flex', alignItems: 'center', gap: 12, fontFamily: 'var(--font-sans)', fontSize: 13.5, color: 'rgba(255,255,255,0.82)' }}>
          <Icon name="triangle-alert" size={18} color="var(--wait-500)" style={{ flex: 'none' }} />
          <span>This site is not for emergencies. If you have a medical emergency, call 911 or go to the nearest emergency department.</span>
        </Container>
      </div>

      <div style={{ borderTop: '1px solid rgba(255,255,255,0.12)' }}>
        <Container style={{ padding: '20px 32px', display: 'flex', flexDirection: 'column', gap: 8, fontFamily: 'var(--font-sans)', fontSize: 12.5, color: 'rgba(255,255,255,0.58)' }}>
          <span>© 2026 Tidewell Family Health. Most services covered by MSP for eligible BC residents. Information on this site is general and is not a substitute for personalised medical advice.</span>
          <span style={{ color: 'rgba(255,255,255,0.42)' }}>This website is a demonstration project. Tidewell Family Health is a fictional clinic. All content is illustrative.</span>
        </Container>
      </div>
    </footer>
  );
}
window.FinalCTA = FinalCTA;
window.Footer = Footer;