/* Atlas overview — industry cards grid */
function AtlasOverview() {
  const industries = [
    { id: 'automotive', t: 'Automotive Aftersales', b: 'Drivers behind churn and repeat purchase across premium service networks.', icon: <Icon.Car className="w-5 h-5"/>, status: 'live', meta: '3.0M reviews · 47 dealers · 14 markets' },
    { id: 'hotels',     t: 'Hospitality',           b: 'Causal pathways from guest experience to rebook and recommendation.',     icon: <Icon.Bed className="w-5 h-5"/>, status: 'soon' },
    { id: 'ecommerce',  t: 'E-Commerce',            b: 'Repeat purchase, return friction, and lifetime value drivers.',          icon: <Icon.Cart className="w-5 h-5"/>, status: 'soon' },
    { id: 'banking',    t: 'Banking',               b: 'Conduct risk and complaint causality from advisor-client transcripts.',  icon: <Icon.Bank className="w-5 h-5"/>, status: 'soon' },
    { id: 'healthcare', t: 'Healthcare',            b: 'Treatment adherence and return-visit causality from patient narratives.',icon: <Icon.Heart className="w-5 h-5"/>, status: 'soon' },
    { id: 'hr',         t: 'HR & Engagement',       b: 'Retention drivers from exit interviews and engagement surveys.',         icon: <Icon.People className="w-5 h-5"/>, status: 'soon' },
  ];
  return (
    <div className="min-h-screen flex flex-col bg-paper">
      <AppNav/>
      <main className="flex-1">
        <div className="mx-auto max-w-[1200px] px-8 lg:px-16 pt-16 pb-12">
          <div className="mono text-[10px] text-mute">ATLAS · CAUSAL VERBATIM INTELLIGENCE</div>
          <h1 className="mt-4 text-[44px] sm:text-[56px] leading-[1.04] font-semibold tracking-[-0.025em]">
            Pre-analyzed <span className="grad-word">industries</span>.
          </h1>
          <p className="mt-5 max-w-2xl text-[16px] text-mute leading-relaxed">
            Causal maps curated by GenData. Open any live industry to explore quantified drivers, confidence intervals, and intervention recommendations.
          </p>
        </div>

        <div className="mx-auto max-w-[1200px] px-8 lg:px-16 pb-28">
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {industries.map(ind => {
              const live = ind.status === 'live';
              const Card = (
                <div className={`relative rounded-2xl bg-paper border border-line p-7 min-h-[260px] flex flex-col transition-colors ${live ? 'hover:border-ink/30' : 'opacity-40'}`}>
                  <div className="flex items-center justify-between">
                    <div className="grid place-items-center h-10 w-10 rounded-xl border border-line text-ink">
                      {ind.icon}
                    </div>
                    {live ? (
                      <span className="mono text-[9.5px] text-cyan inline-flex items-center gap-1.5">
                        <span className="h-1.5 w-1.5 rounded-full bg-cyan pulse"></span>LIVE
                      </span>
                    ) : (
                      <span className="mono text-[9.5px] text-mute">COMING SOON</span>
                    )}
                  </div>
                  <h3 className="mt-7 text-[20px] font-semibold tracking-[-0.012em]">{ind.t}</h3>
                  <p className="mt-2.5 text-[13.5px] text-mute leading-relaxed flex-1">{ind.b}</p>
                  {live && ind.meta && <div className="mt-6 pt-5 border-t border-line mono text-[10px] text-mute">{ind.meta}</div>}
                  {live && (
                    <div className="mt-4 inline-flex items-center gap-1.5 text-[13px] text-ink">
                      Open industry <Icon.Arrow className="w-3.5 h-3.5"/>
                    </div>
                  )}
                </div>
              );
              return live
                ? <a key={ind.id} href={`#/atlas/${ind.id}`} className="group">{Card}</a>
                : <div key={ind.id}>{Card}</div>;
            })}
          </div>
        </div>
      </main>
      <Footer/>
    </div>
  );
}

window.AtlasOverview = AtlasOverview;