/* ═══════════════════════════════════════════════
   Why Section + Complexity Section
   ═══════════════════════════════════════════════ */

function WhySection({ tweaks }) {
  const accent = tweaks.accentColor;
  const items = [
    { icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7.5" stroke={accent} strokeWidth="1.3"/><path d="M9 5v4l2.5 2" stroke={accent} strokeWidth="1.3" strokeLinecap="round"/></svg>, title: 'Free up your reception team', desc: 'Give your front desk more time for the patient-facing work that improves clinic performance and revenue.' },
    { icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="3" width="14" height="12" rx="2.5" stroke={accent} strokeWidth="1.3"/><path d="M2 6.5h14" stroke={accent} strokeWidth="1.3"/><circle cx="6.5" cy="10.5" r="1.2" fill={accent}/></svg>, title: 'Book the right appointment', desc: 'Matches patients to the right practitioner, service, and time — based on your clinic\'s actual rules.' },
    { icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M4 9l3 3 7-7" stroke={accent} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>, title: 'Handle complex pathways', desc: 'Workers comp, CDM plans, DVA, motor vehicle claims — handled correctly, every time.' },
    { icon: <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7.5" stroke={accent} strokeWidth="1.3"/><path d="M9 4v5M12 13.5a5.5 5.5 0 01-6 0" stroke={accent} strokeWidth="1.3" strokeLinecap="round"/></svg>, title: 'Capture after-hours demand', desc: 'Never lose a booking to voicemail again. Arcline captures enquiries 24/7 and books when you\'re ready.' },
  ];
  return (
    <Section id="why" bg="#fff">
      <SectionHead accent={accent} eyebrow="Why Arcline" title="Your reception team deserves better tools" sub="Arcline handles the repetitive, rules-based phone workflows so your team can focus on the work that actually grows your clinic." />
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 24 }}>
        {items.map((item, i) => (
          <FeatureCard key={i} icon={item.icon} title={item.title} desc={item.desc} accent={accent} delay={stagger(i)} />
        ))}
      </div>
    </Section>
  );
}

/* ═══════════════════════════════════════════════
   Operational Complexity
   ═══════════════════════════════════════════════ */
function ComplexitySection({ tweaks }) {
  const accent = tweaks.accentColor;
  const workflows = [
    'Workers compensation', 'Chronic disease management', 'Motor vehicle claims',
    'DVA pathways', 'Practitioner matching', 'Specialist allocation',
    'Certification-aware booking', 'Rescheduling & cancellations', 'Service-specific logic', 'After-hours capture',
  ];
  return (
    <Section id="complexity" bg="#fafbfc">
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center' }} className="two-col">
        <Reveal>
          <SectionHead accent={accent} align="left" eyebrow="Built for real clinics" title="Not another generic AI assistant" sub="Arcline understands the operational complexity that makes health clinic reception uniquely demanding." maxW={600} />
          <p style={{ fontSize: 16.5, lineHeight: 1.82, color: '#5e5e70', marginTop: -22, maxWidth: 620 }}>
            Generic AI tools break down when faced with claim pathways, practitioner rules, and service-specific booking logic. Arcline was built from the ground up for exactly these workflows.
          </p>
        </Reveal>
        <Reveal delay={120}>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 12 }}>
            {workflows.map((w, i) => {
              const [hov, setHov] = React.useState(false);
              return (
                <span key={i}
                  onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
                  style={{
                    padding: '10px 16px', borderRadius: 11, fontSize: 14, fontWeight: 540,
                    background: hov ? `${accent}06` : '#fff',
                    border: `1px solid ${hov ? accent + '30' : '#eaeaf0'}`,
                    color: hov ? accent : '#3a3a4a',
                    transition: 'all 0.25s ease', cursor: 'default',
                  }}
                >{w}</span>
              );
            })}
          </div>
        </Reveal>
      </div>
    </Section>
  );
}

window.WhySection = WhySection;
window.ComplexitySection = ComplexitySection;