/* ═══════════════════════════════════════════════
   Integrations + Testimonials
   ═══════════════════════════════════════════════ */

function Integrations({ tweaks }) {
  const accent = tweaks.accentColor;
  const features = ['Two-way appointment sync', 'Patient record access', 'Clinical notes & history', 'Practitioner availability', 'Service configuration'];
  return (
    <Section id="integrations" bg="#fafbfc">
      <SectionHead accent={accent} eyebrow="Integrations" title="Deep integration with PracSuite" sub="Not just a surface-level connection. Arcline syncs appointments, patient records, and notes in real time." />
      <Reveal>
        <div style={{
          background: '#fff', borderRadius: 24, padding: '52px 46px',
          border: '1px solid #f0f0f5', maxWidth: 1040, margin: '0 auto',
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40,
        }} className="two-col">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 22 }}>
              <div style={{ width: 50, height: 50, borderRadius: 14, background: '#fafbfc', border: '1px solid #eaeaf0', display: 'flex', alignItems: 'center', justifyContent: 'center', fontWeight: 720, fontSize: 15, color: accent }}>PS</div>
              <div>
                <div style={{ fontSize: 18, fontWeight: 700, color: '#0a0a1a' }}>PracSuite</div>
                <span style={{ fontSize: 11.5, fontWeight: 640, color: '#22c55e', background: '#f0fdf4', padding: '3px 8px', borderRadius: 6 }}>Connected</span>
              </div>
            </div>
            {features.map((f, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
                <Check color={accent} />
                <span style={{ fontSize: 15.5, color: '#3a3a4a' }}>{f}</span>
              </div>
            ))}
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {[
              { label: 'Sync status', value: 'Real-time · Last synced 2s ago', big: false },
              { label: 'Today\'s bookings via Arcline', value: '34', big: true },
              { label: 'Calls handled', value: '127', big: true },
            ].map((d, i) => (
              <div key={i} style={{ background: '#fafbfc', borderRadius: 15, padding: '18px 22px', border: '1px solid #eaeaf0' }}>
                <div style={{ fontSize: 12.5, color: '#888', marginBottom: 4 }}>{d.label}</div>
                <div style={{ fontSize: d.big ? 32 : 16, fontWeight: d.big ? 740 : 620, color: d.big && i === 1 ? accent : '#0a0a1a' }}>{d.value}</div>
              </div>
            ))}
          </div>
        </div>
      </Reveal>
    </Section>
  );
}

function Testimonials({ tweaks }) {
  const accent = tweaks.accentColor;
  const items = [
    { quote: 'Arcline handles the calls our front desk simply can\'t get to. Our patient no-shows dropped significantly within the first month.', name: 'Sarah Mitchell', role: 'Practice Manager', clinic: 'Harbour Physiotherapy' },
    { quote: 'The PracSuite integration is seamless. Bookings appear instantly and our staff no longer waste time on manual data entry.', name: 'Dr. James Chen', role: 'Clinic Director', clinic: 'Evergreen Health' },
    { quote: 'We were losing after-hours enquiries every week. Now Arcline captures them all and books the right appointments automatically.', name: 'Lisa Fernandez', role: 'Operations Lead', clinic: 'Coastal Physio' },
  ];
  return (
    <Section id="testimonials" bg="#fff">
      <SectionHead accent={accent} eyebrow="Testimonials" title="Trusted by clinic teams across Australia" />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 26, maxWidth: 1160, margin: '0 auto' }} className="three-col">
        {items.map((t, i) => (
          <Reveal key={i} delay={stagger(i, 80)}>
            <div style={{
              background: '#fafbfc', borderRadius: 20, padding: '34px 30px',
              border: '1px solid #f0f0f5', height: '100%',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ color: accent, fontSize: 30, lineHeight: 1, marginBottom: 14 }}>"</div>
              <p style={{ fontSize: 15.5, lineHeight: 1.8, color: '#3a3a4a', flex: 1, marginBottom: 24 }}>{t.quote}</p>
              <div>
                <div style={{ fontSize: 15.5, fontWeight: 650, color: '#0a0a1a' }}>{t.name}</div>
                <div style={{ fontSize: 12, color: '#888' }}>{t.role} · {t.clinic}</div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

window.Integrations = Integrations;
window.Testimonials = Testimonials;