/* iONE marketing site — climate deployment showcase (interactive tabs) */
function DeploymentShowcase() {
  const { Tabs, Badge, Button, Stat } = window.IONEDesignSystem_ec7bc5;
  const Icons = window.IONEIcons;
  const data = {
    desert: {
      label: 'Desert', badge: 'Telecom · +55 °C', img: '../../assets/hero/hero-ess-desert.png',
      h: 'Powers towers where diesel can\'t reach.',
      p: 'Sealed, dust-rated enclosures and active thermal management keep communication sites online through extreme heat — no fuel runs, no operator on the ground.',
      stats: [['Surface temp', '+55', '°C'], ['Deployment', '2–4', 'hrs'], ['Service visits', '0', '/yr']],
    },
    arctic: {
      label: 'Arctic', badge: 'Security · −60 °C', img: '../../assets/hero/hero-solar-arctic.png',
      h: 'Self-heating storage down to −60 °C.',
      p: 'Battery pre-heat and de-icing run automatically off harvested power, keeping border-monitoring and surveillance assets alive through polar night and storms.',
      stats: [['Min temp', '−60', '°C'], ['Wind survival', '180', 'km/h'], ['Autonomy', '9', 'days']],
    },
    remote: {
      label: 'Remote site', badge: 'Construction · Alpine', img: '../../assets/hero/hero-lite-camp.png',
      h: 'Energy on site within hours of delivery.',
      p: 'Anchored on screw piles — no concrete, no heavy equipment. A station lands, self-commissions and joins the fleet the moment it sees the sky.',
      stats: [['Foundations', '0', 'm³'], ['Setup crew', '2', 'people'], ['Time to power', '2–4', 'hrs']],
    },
  };
  const [active, setActive] = React.useState('desert');
  const d = data[active];
  return (
    <section className="mk-section mk-section--tint" id="deployments">
      <div className="mk-wrap mk-wrap--wide">
        <div className="mk-section__head">
          <span className="mk-kicker">Built for the extremes</span>
          <h2>One platform, every climate zone.</h2>
          <p>The same station ships to a desert tower, an arctic border, or an alpine build site.
            Operates from −60 °C to +55 °C. Pick a site to see how it adapts.</p>
        </div>
        <div className="mk-deploy__panel">
          <div className="mk-deploy__media">
            <img src={d.img} alt={d.label + ' deployment'} key={d.img}/>
            <Badge live>{d.badge}</Badge>
          </div>
          <div className="mk-deploy__content">
            <div className="mk-deploy__tabs">
              <Tabs variant="segmented"
                items={Object.keys(data).map((k) => ({ value: k, label: data[k].label }))}
                value={active} onChange={setActive} />
            </div>
            <h3>{d.h}</h3>
            <p>{d.p}</p>
            <Button variant="ghost" size="sm" trailingIcon={<Icons.Arrow/>} style={{ alignSelf: 'flex-start' }}>
              Read the case study
            </Button>
            <div className="mk-deploy__stats">
              {d.stats.map((s) => <Stat key={s[0]} size="sm" label={s[0]} value={s[1]} unit={s[2]} />)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
window.DeploymentShowcase = DeploymentShowcase;