// Sectors section — bilingual via window.useI18n.

const { useI18n: useI18nSec } = window;

function DeploymentDiagram({ kind, cfg }) {
  const Icon = ({ name }) => {
    const props = { fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinecap: 'round', strokeLinejoin: 'round' };
    switch (name) {
      case 'hospital': return (
        <svg viewBox="0 0 40 40" {...props}>
          <path d="M8 32V14l12-8 12 8v18"/>
          <path d="M14 32V22h12v10"/>
          <path d="M20 18v6M17 21h6"/>
        </svg>
      );
      case 'specialist': return (
        <svg viewBox="0 0 40 40" {...props}>
          <circle cx="20" cy="14" r="5"/>
          <path d="M10 32c0-6 4-10 10-10s10 4 10 10"/>
        </svg>
      );
      case 'classroom': return (
        <svg viewBox="0 0 40 40" {...props}>
          <rect x="6" y="8" width="28" height="18" rx="2"/>
          <path d="M11 32h18M16 26v6M24 26v6"/>
        </svg>
      );
      case 'students': return (
        <svg viewBox="0 0 40 40" {...props}>
          <circle cx="12" cy="14" r="3.5"/>
          <circle cx="28" cy="14" r="3.5"/>
          <circle cx="20" cy="26" r="3.5"/>
          <path d="M6 24c0-3 2.5-5 6-5M22 24c0-3 2.5-5 6-5M14 36c0-3 2.5-5 6-5s6 2 6 5"/>
        </svg>
      );
      case 'boardroom': return (
        <svg viewBox="0 0 40 40" {...props}>
          <ellipse cx="20" cy="22" rx="14" ry="5"/>
          <circle cx="20" cy="11" r="3"/>
          <path d="M20 14v3"/>
          <circle cx="8" cy="22" r="2"/>
          <circle cx="32" cy="22" r="2"/>
          <circle cx="14" cy="30" r="2"/>
          <circle cx="26" cy="30" r="2"/>
        </svg>
      );
      case 'sites': return (
        <svg viewBox="0 0 40 40" {...props}>
          <rect x="4" y="10" width="10" height="20" rx="1"/>
          <rect x="26" y="6" width="10" height="24" rx="1"/>
          <rect x="15" y="14" width="10" height="16" rx="1"/>
          <path d="M14 18h1M14 22h1M14 26h1M25 18h1M25 22h1M25 26h1M35 14h-1M35 18h-1M35 22h-1M35 26h-1"/>
        </svg>
      );
      default: return null;
    }
  };

  return (
    <div className="sec-diagram">
      <div className="dg-tag">{cfg.tag}</div>
      <div className="dg-stage-simple">
        <div className="dg-node">
          <div className="dg-node-ic"><Icon name={cfg.sourceIcon} /></div>
          <div className="dg-node-title">{cfg.sourceTitle}</div>
          <div className="dg-node-label">{cfg.sourceLabel}</div>
        </div>
        <div className="dg-pipe-simple">
          <div className="dg-pipe-badge">
            <span className="dg-pipe-mark">PL</span>
            <span className="dg-pipe-name">PeopleLink</span>
          </div>
          <svg className="dg-pipe-line" viewBox="0 0 300 12" preserveAspectRatio="none">
            <line x1="0" y1="6" x2="300" y2="6" stroke="var(--line-strong)" strokeWidth="1" strokeDasharray="3 4"/>
            <line x1="0" y1="6" x2="300" y2="6" stroke="var(--accent)" strokeWidth="1.6"
              className="dg-pipe-pulse"/>
            <circle cx="0" cy="6" r="3" fill="var(--accent)"/>
            <circle cx="300" cy="6" r="3" fill="var(--accent)"/>
          </svg>
          <div className="dg-pipe-meta">
            <span>{cfg.pipeLabel}</span>
          </div>
        </div>
        <div className="dg-node">
          <div className="dg-node-ic"><Icon name={cfg.destIcon} /></div>
          <div className="dg-node-title">{cfg.destTitle}</div>
          <div className="dg-node-label">{cfg.destLabel}</div>
        </div>
      </div>
    </div>
  );
}

function SectorsSection() {
  const { t } = useI18nSec();
  const [active, setActive] = React.useState(0);

  const sectors = [
    {
      ...t('sectors.medical'),
      id: 'health',
      visual: 'medical',
      diagram: {
        tag: t('sectors.dg.medical_tag'),
        sourceTitle: t('sectors.dg.medical_src'),
        sourceLabel: 'OR · 4K PTZ',
        sourceIcon: 'hospital',
        destTitle: t('sectors.dg.medical_dst'),
        destLabel: 'inClinic',
        destIcon: 'specialist',
        pipeLabel: t('sectors.dg.medical_pipe'),
      },
    },
    {
      ...t('sectors.edu'),
      id: 'edu',
      visual: 'edu',
      diagram: {
        tag: t('sectors.dg.edu_tag'),
        sourceTitle: t('sectors.dg.edu_src'),
        sourceLabel: 'Interactive Panel',
        sourceIcon: 'classroom',
        destTitle: t('sectors.dg.edu_dst'),
        destLabel: 'inClass',
        destIcon: 'students',
        pipeLabel: t('sectors.dg.edu_pipe'),
      },
    },
    {
      ...t('sectors.biz'),
      id: 'biz',
      visual: 'biz',
      diagram: {
        tag: t('sectors.dg.biz_tag'),
        sourceTitle: t('sectors.dg.biz_src'),
        sourceLabel: 'VC / Huddle',
        sourceIcon: 'boardroom',
        destTitle: t('sectors.dg.biz_dst'),
        destLabel: 'Multi-Site',
        destIcon: 'sites',
        pipeLabel: t('sectors.dg.biz_pipe'),
      },
    },
  ];
  const s = sectors[active];

  return (
    <section className="sectors shell" id="sectors">
      <div className="section-head">
        <div>
          <div className="eyebrow">{t('sectors.eyebrow')}</div>
          <h2 className="section-title">{t('sectors.title')}</h2>
        </div>
        <div className="section-sub">{t('sectors.sub')}</div>
      </div>

      <div className="sec-tabs">
        {sectors.map((sec, i) => (
          <button
            key={sec.id}
            className={`sec-tab ${i === active ? 'active' : ''}`}
            onClick={() => setActive(i)}
          >
            <span className="num">{sec.num} / {sec.en_sub}</span>
            <span className="nm">{sec.nm}</span>
          </button>
        ))}
      </div>

      <div className="sec-stage" key={s.id}>
        <div>
          <h3>{s.headline}</h3>
          <div className="sec-problem">
            <span className="kw">{s.kw}</span>
            {s.problem}
          </div>
          <p className="sec-solution">{s.solution}</p>
          <div className="sec-products">
            {s.products.map((p) => (
              <div className="pr" key={p[0]}>
                <span className="num">{p[0]}</span>
                <span className="nm">{p[1]}<small>{p[2]}</small></span>
                <span className="arrow">→</span>
              </div>
            ))}
          </div>
        </div>
        <div>
          <DeploymentDiagram kind={s.visual} cfg={s.diagram} />
        </div>
      </div>
    </section>
  );
}

window.SectorsSection = SectorsSection;