// ============================================================
// TRIO — 3 modular feature boxes, each editable independently
// ============================================================

// --- Illustrations (edit / swap each independently) ---
const CG_ILLUSTRATIONS = {
  portability: () => (
    <svg viewBox="0 0 220 80" style={{ width: '100%', height: 80 }}>
      <defs>
        <marker id="arrP" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto">
          <path d="M0,0 L10,5 L0,10 Z" fill="#3E5340" />
        </marker>
      </defs>
      {/* Card */}
      <rect x="14" y="24" width="44" height="32" rx="3" fill="#F2ECD4" stroke="#3E5340" strokeWidth="1.3"/>
      <line x1="22" y1="34" x2="50" y2="34" stroke="#3E5340" strokeWidth="1"/>
      <line x1="22" y1="40" x2="44" y2="40" stroke="#6B7560" strokeWidth="0.8"/>
      <line x1="22" y1="46" x2="48" y2="46" stroke="#6B7560" strokeWidth="0.8"/>
      {/* Arrow */}
      <line x1="66" y1="40" x2="92" y2="40" stroke="#3E5340" strokeWidth="1.2" markerEnd="url(#arrP)"/>
      {/* Upload/File */}
      <rect x="100" y="24" width="38" height="32" rx="3" fill="#F2ECD4" stroke="#3E5340" strokeWidth="1.3"/>
      <path d="M119 32 L119 46 M113 38 L119 32 L125 38" stroke="#3E5340" strokeWidth="1.3" fill="none"/>
      {/* Arrow */}
      <line x1="146" y1="40" x2="170" y2="40" stroke="#3E5340" strokeWidth="1.2" markerEnd="url(#arrP)"/>
      {/* Export chart */}
      <rect x="178" y="24" width="34" height="32" rx="3" fill="#F2ECD4" stroke="#3E5340" strokeWidth="1.3"/>
      <path d="M184 48 L190 42 L196 46 L206 36" stroke="#B5A04E" strokeWidth="1.4" fill="none"/>
      <circle cx="206" cy="36" r="1.8" fill="#B5A04E"/>
    </svg>
  ),
  followup: () => (
    <svg viewBox="0 0 220 80" style={{ width: '100%', height: 80 }}>
      <defs>
        <marker id="arrF" viewBox="0 0 10 10" refX="8" refY="5" markerWidth="7" markerHeight="7" orient="auto">
          <path d="M0,0 L10,5 L0,10 Z" fill="#3E5340" />
        </marker>
      </defs>
      {/* Calendar with today highlighted */}
      <rect x="14" y="20" width="54" height="44" rx="3" fill="#F2ECD4" stroke="#3E5340" strokeWidth="1.3"/>
      <line x1="14" y1="30" x2="68" y2="30" stroke="#3E5340" strokeWidth="1"/>
      <line x1="26" y1="16" x2="26" y2="24" stroke="#3E5340" strokeWidth="1.3"/>
      <line x1="56" y1="16" x2="56" y2="24" stroke="#3E5340" strokeWidth="1.3"/>
      <g fill="#6B7560">
        <circle cx="24" cy="40" r="1.4"/>
        <circle cx="34" cy="40" r="1.4"/>
        <circle cx="44" cy="40" r="1.4"/>
        <circle cx="56" cy="40" r="1.4"/>
        <circle cx="24" cy="50" r="1.4"/>
        <circle cx="34" cy="50" r="1.4"/>
        <circle cx="56" cy="50" r="1.4"/>
      </g>
      {/* Today / overdue marker */}
      <circle cx="44" cy="50" r="3.6" fill="#7C2A2E"/>
      {/* Arrow */}
      <line x1="76" y1="42" x2="100" y2="42" stroke="#3E5340" strokeWidth="1.2" markerEnd="url(#arrF)"/>
      {/* Mail action */}
      <rect x="108" y="28" width="30" height="28" rx="3" fill="#F2ECD4" stroke="#3E5340" strokeWidth="1.3"/>
      <rect x="114" y="35" width="18" height="13" rx="1" fill="none" stroke="#3E5340" strokeWidth="1.1"/>
      <path d="M114 36 L123 43 L132 36" stroke="#3E5340" strokeWidth="1.1" fill="none"/>
      {/* Phone action */}
      <rect x="144" y="28" width="30" height="28" rx="3" fill="#F2ECD4" stroke="#3E5340" strokeWidth="1.3"/>
      <path d="M152 35 c-0.6 0 -1.6 0.6 -1.6 2.6 c0 4.4 4 8.4 8.4 8.4 c2 0 2.6 -1 2.6 -1.6 l-2.4 -2.4 l-2.4 0.8 c-1.4 -0.8 -2.6 -2 -3.4 -3.4 l0.8 -2.4 z" fill="none" stroke="#3E5340" strokeWidth="1.1"/>
      {/* Message action */}
      <rect x="180" y="28" width="30" height="28" rx="3" fill="#F2ECD4" stroke="#3E5340" strokeWidth="1.3"/>
      <path d="M186 35 h18 v10 h-11 l-4 4 v-4 h-3 z" fill="none" stroke="#3E5340" strokeWidth="1.1"/>
      {/* Brass accent under the chosen action */}
      <line x1="114" y1="58" x2="132" y2="58" stroke="#B5A04E" strokeWidth="1.4"/>
    </svg>
  ),
  precision: () => (
    <svg viewBox="0 0 220 80" style={{ width: '100%', height: 80 }}>
      {/* Two-column tag table */}
      <g fontFamily="Inter, sans-serif" fontSize="7.5">
        {/* Col 1 */}
        <rect x="14"  y="10" width="90" height="60" rx="2" fill="#F2ECD4" stroke="#3E5340" strokeWidth="0.8"/>
        <text x="20" y="22" fill="#3E5340" fontWeight="600">Specialized Fields</text>
        <line x1="20" y1="26" x2="98" y2="26" stroke="#B5A04E" strokeWidth="0.8"/>
        <text x="20" y="38" fill="#2B2A1E">Acquisition</text>
        <text x="20" y="50" fill="#2B2A1E">NAICS</text>
        <text x="20" y="62" fill="#2B2A1E">SBA Status</text>
        {/* Col 2 */}
        <rect x="116" y="10" width="90" height="60" rx="2" fill="#F2ECD4" stroke="#3E5340" strokeWidth="0.8"/>
        <text x="122" y="22" fill="#3E5340" fontWeight="600">Common Role / Office</text>
        <line x1="122" y1="26" x2="200" y2="26" stroke="#B5A04E" strokeWidth="0.8"/>
        <text x="122" y="38" fill="#2B2A1E">Director</text>
        <text x="122" y="50" fill="#2B2A1E">Program Lead</text>
        <text x="122" y="62" fill="#2B2A1E">Sustainment</text>
      </g>
    </svg>
  ),
};

function TrioCell({ item, idx }) {
  const Illo = CG_ILLUSTRATIONS[item.illustration];
  return (
    <div style={{
      padding: '26px 24px 28px',
      borderRight: idx < 2 ? '1px solid #D6D0B3' : 'none',
      background: '#FBF7EA',
      display: 'flex', flexDirection: 'column',
    }}>
      <div style={{ fontFamily: "'Fraunces', serif", fontSize: 20, fontWeight: 500, color: '#1F2418', letterSpacing: -0.2 }}>
        {item.title}
      </div>
      <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: 1.6, textTransform: 'uppercase', color: '#7A6E3E', marginTop: 4, marginBottom: 14 }}>
        {item.sub}
      </div>
      <div style={{ marginBottom: 14 }}>{Illo ? <Illo /> : null}</div>
      <p style={{ fontSize: 13, color: '#55584B', lineHeight: 1.55, margin: 0 }}>{item.body}</p>
    </div>
  );
}

function Trio() {
  return (
    <section style={{
      margin: '-30px 44px 0',  // overlap hero slightly
      position: 'relative', zIndex: 4,
    }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        background: '#FBF7EA',
        border: '1px solid #D6D0B3',
        borderRadius: 6,
        boxShadow: '0 12px 30px rgba(0,0,0,0.12)',
        overflow: 'hidden',
      }}>
        {CG.trio.map((t, i) => <TrioCell key={t.title} item={t} idx={i} />)}
      </div>
    </section>
  );
}

window.Trio = Trio;
