// Who We Serve — bold variant.
// Five distinct industries with unique icons (no more duplicate building glyphs),
// mono-tagged. Hover reveals a short problem/solution line.

const ServeIcon = ({ path }) => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
    {path}
  </svg>
);

const SERVE = [
  {
    tag: 'TELEHEALTH',
    name: 'Telehealth & Virtual Care',
    detail: 'Launch compliant from day one. Video-encryption checks, BAA tracking, remote-access controls.',
    tint: '#38bdf8',
    icon: <>
      <rect x="3" y="4" width="18" height="12" rx="2" />
      <line x1="8" y1="20" x2="16" y2="20" />
      <line x1="12" y1="16" x2="12" y2="20" />
      <circle cx="12" cy="10" r="2" />
    </>,
  },
  {
    tag: 'BEHAVIORAL',
    name: 'Behavioral Health',
    detail: '42 CFR Part 2 overlay. Stricter consent flows, minimum-necessary mapping, breach-risk scoring.',
    tint: '#a855f7',
    icon: <>
      <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
    </>,
  },
  {
    tag: 'DENTAL',
    name: 'Dental & DSOs',
    detail: 'Multi-location policy rollouts. Centralized training, per-practice risk registers, chain-level audits.',
    tint: '#14b8a6',
    icon: <>
      <path d="M12 5.5C9.5 3.5 6 3 4.5 5.5c-2 3.5 0 8 1.5 11 .5 1 1.5 3 3 3s2-2 3-5c1 3 1.5 5 3 5s2.5-2 3-3c1.5-3 3.5-7.5 1.5-11-1.5-2.5-5-2-7.5 0z" />
    </>,
  },
  {
    tag: 'BUSINESS_ASSOC',
    name: 'Business Associates',
    detail: 'Built for vendors serving covered entities. BAA lifecycle, subprocessor tracking, audit-response kits.',
    tint: '#eab308',
    icon: <>
      <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z" />
      <polyline points="14 2 14 8 20 8" />
      <path d="M9 15l2 2 4-4" />
    </>,
  },
  {
    tag: 'RURAL',
    name: 'Rural Hospitals & CAHs',
    detail: 'Flat-rate pricing for small IT teams. Flex-Program-aligned docs, OCR audit protocol mapping.',
    tint: '#f97316',
    icon: <>
      <path d="M3 21h18" />
      <path d="M5 21V10l7-5 7 5v11" />
      <path d="M10 21v-6h4v6" />
      <line x1="12" y1="7" x2="12" y2="5" />
      <line x1="11" y1="6" x2="13" y2="6" />
    </>,
  },
];

const ServeCard = ({ item, i }) => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  const [hover, setHover] = React.useState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        background: hover ? `linear-gradient(180deg, ${item.tint}14, #0b1220)` : '#0b1220',
        border: `1px solid ${hover ? item.tint + '66' : '#1e293b'}`,
        borderRadius: 10, padding: '24px 22px',
        minHeight: 220,
        transition: 'all 0.3s ease',
        cursor: 'pointer',
        display: 'flex', flexDirection: 'column',
      }}
    >
      {/* index label */}
      <div style={{
        ...mono, fontSize: 10, color: '#475569', letterSpacing: 1.5,
        marginBottom: 16, display: 'flex', justifyContent: 'space-between',
      }}>
        <span>0{i + 1} / 05</span>
        <span style={{ color: item.tint }}>{item.tag}</span>
      </div>

      <div style={{ color: item.tint, marginBottom: 16 }}>
        <ServeIcon path={item.icon} />
      </div>

      <div style={{ fontSize: 20, fontWeight: 700, color: '#f1f5f9', marginBottom: 10, letterSpacing: -0.3 }}>
        {item.name}
      </div>
      <div style={{ fontSize: 13, color: '#94a3b8', lineHeight: 1.6, flex: 1 }}>
        {item.detail}
      </div>

      <div style={{
        ...mono, fontSize: 11, color: hover ? item.tint : '#475569',
        marginTop: 18, letterSpacing: 1, display: 'flex', alignItems: 'center', gap: 8,
        transition: 'color 0.3s ease',
      }}>
        LEARN MORE <span style={{ transform: hover ? 'translateX(4px)' : 'translateX(0)', transition: 'transform 0.3s ease' }}>→</span>
      </div>
    </div>
  );
};

const WhoWeServe = () => {
  const mono = { fontFamily: "'JetBrains Mono', ui-monospace, monospace" };
  const { SectionLabel, SectionH, SectionSub } = window;
  return (
    <section id="serve" style={{
      position: 'relative', background: '#030712', color: '#fff',
      padding: '96px 48px', borderTop: '1px solid #1e293b',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <SectionLabel n="01" label="WHO WE SERVE" />
        <SectionH>Purpose-built for the organizations <span style={{ color: '#64748b' }}>other platforms ignore.</span></SectionH>
        <SectionSub>
          We focus on healthcare organizations that are serious about HIPAA but can't justify enterprise consulting. Our templates, workflows, and pricing assume you don't have a dedicated compliance team.
        </SectionSub>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))',
          gap: 16,
        }}>
          {SERVE.map((item, i) => <ServeCard key={item.tag} item={item} i={i} />)}
        </div>
      </div>
    </section>
  );
};

window.WhoWeServe = WhoWeServe;