// ─────────────────────────────────────────────────────────────
// PROBLEM — Why off-the-shelf tools fail
// ─────────────────────────────────────────────────────────────
const Problem = () => {
  const failureModes = [
    { tag:'Symptom 01', title:'The spreadsheet that runs the company.',
      body:'A 14-tab workbook that three people can edit, two understand, and nobody owns. One bad paste away from a Monday from hell.' },
    { tag:'Symptom 02', title:'Fourteen SaaS tools, none of them talking.',
      body:'Zapier between everything. CSV exports at 11pm. Reconciliation by eyeball. Your stack costs $34K/mo and still loses orders.' },
    { tag:'Symptom 03', title:'Workflows held together by a single ops hire.',
      body:'Three days of training, one resignation, and the whole machine grinds. Tribal knowledge is not infrastructure.' },
    { tag:'Symptom 04', title:'Dashboards that nobody trusts.',
      body:'Three sources of truth. Four definitions of "active customer." Leadership decisions made on the prettiest chart available.' },
  ];

  return (
    <section className="section-pad" data-screen-label="02 Problem">
      <div className="container">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1.4fr',gap:80,alignItems:'start'}} className="problem-grid">
          <div style={{position:'sticky',top:120}}>
            <div className="eyebrow">The problem</div>
            <h2 className="h-section" style={{marginTop:20}}>
              Off-the-shelf<br/>
              hits a ceiling.<br/>
              <span className="serif" style={{color:'var(--text-dim)'}}>Yours.</span>
            </h2>
            <p className="lede" style={{marginTop:28}}>
              Generic tools work fine — until the business gets specific.
              At a certain scale, the cost of bending your operation to fit
              a SaaS product exceeds the cost of building software that fits you.
            </p>
            <div style={{marginTop:32,paddingTop:24,borderTop:'1px solid var(--border)'}}>
              <span className="mono" style={{fontSize:12,color:'var(--text-faint)'}}>
                If you recognize any of these, you've outgrown the template.
              </span>
            </div>
          </div>

          <div style={{display:'flex',flexDirection:'column'}}>
            {failureModes.map((f,i) => (
              <div key={i} className="failure-row" style={{
                padding:'32px 0',
                borderTop:i===0?'1px solid var(--border)':'none',
                borderBottom:'1px solid var(--border)',
                display:'grid',gridTemplateColumns:'auto 1fr',gap:32,
                position:'relative',
              }}>
                <div style={{display:'flex',flexDirection:'column',alignItems:'flex-start',gap:8,minWidth:90}}>
                  <span style={{
                    fontFamily:'Geist Mono,monospace',
                    fontSize:11,letterSpacing:'.12em',
                    color:'var(--text-faint)',textTransform:'uppercase'
                  }}>{f.tag}</span>
                  <FailureMark idx={i} />
                </div>
                <div>
                  <h3 className="h-card">{f.title}</h3>
                  <p style={{margin:'10px 0 0',color:'var(--text-dim)',lineHeight:1.55,fontSize:15}}>{f.body}</p>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media(max-width:900px){
          .problem-grid{grid-template-columns:1fr !important; gap:48px !important;}
          .problem-grid > div:first-child{position:static !important;}
        }
      `}</style>
    </section>
  );
};

// Tiny abstract marks for each failure mode
const FailureMark = ({idx}) => {
  const common = {width:48,height:48,style:{color:'var(--text-faint)'}};
  if (idx === 0) return (
    <svg {...common} viewBox="0 0 48 48" fill="none">
      <rect x="4" y="8" width="40" height="32" stroke="currentColor" strokeWidth="1"/>
      <line x1="4" y1="16" x2="44" y2="16" stroke="currentColor" strokeWidth="1"/>
      <line x1="16" y1="8" x2="16" y2="40" stroke="currentColor" strokeWidth="1"/>
      <line x1="28" y1="8" x2="28" y2="40" stroke="currentColor" strokeWidth="1"/>
      <rect x="28" y="24" width="12" height="8" fill="var(--accent)" opacity=".5"/>
    </svg>
  );
  if (idx === 1) return (
    <svg {...common} viewBox="0 0 48 48" fill="none">
      <circle cx="10" cy="10" r="4" stroke="currentColor"/>
      <circle cx="38" cy="10" r="4" stroke="currentColor"/>
      <circle cx="24" cy="24" r="4" stroke="currentColor"/>
      <circle cx="10" cy="38" r="4" stroke="currentColor"/>
      <circle cx="38" cy="38" r="4" stroke="currentColor"/>
      <path d="M14 12 L20 22 M28 22 L34 12 M14 36 L20 26 M28 26 L34 36" stroke="currentColor" strokeDasharray="2 3"/>
    </svg>
  );
  if (idx === 2) return (
    <svg {...common} viewBox="0 0 48 48" fill="none">
      <circle cx="24" cy="16" r="6" stroke="currentColor"/>
      <path d="M12 40 C12 30, 36 30, 36 40" stroke="currentColor"/>
      <line x1="6" y1="8" x2="42" y2="44" stroke="var(--accent)" strokeWidth="1.5"/>
    </svg>
  );
  return (
    <svg {...common} viewBox="0 0 48 48" fill="none">
      <path d="M6 36 L18 24 L26 32 L42 12" stroke="currentColor"/>
      <path d="M6 38 L18 30 L28 34 L42 20" stroke="var(--text-faint)" opacity=".5" strokeDasharray="2 2"/>
      <path d="M6 32 L18 18 L28 28 L42 8" stroke="var(--accent)" opacity=".7" strokeDasharray="2 2"/>
    </svg>
  );
};


// ─────────────────────────────────────────────────────────────
// SERVICES
// ─────────────────────────────────────────────────────────────
const Services = () => {
  const [active, setActive] = React.useState(0);
  const services = [
    {
      name:'Commerce infrastructure',
      one:'Headless storefronts, OMS, custom checkout, post-purchase logic.',
      detail:'When Shopify stops bending. Custom order management, multi-warehouse routing, subscription engines, and post-purchase logic that survives Black Friday at 12,000 orders/hour.',
      stack:['Next.js','Node','Postgres','Stripe','Temporal'],
    },
    {
      name:'Internal business platforms',
      one:'Operator dashboards, admin tools, role-based workflows.',
      detail:'The system your ops team actually opens at 7am. Built for the specific verbs of your business — approve, route, exception, override — not generic CRUD.',
      stack:['React','Hasura','RBAC','Retool replace'],
    },
    {
      name:'Workflow automation systems',
      one:'Durable, observable orchestration. Beyond Zapier and cron.',
      detail:'Long-running workflows that handle retries, human-in-the-loop steps, compensations, and audit trails — without becoming a graveyard of broken Zaps.',
      stack:['Temporal','BullMQ','Kafka','Webhooks'],
    },
    {
      name:'AI-powered tools',
      one:'LLMs embedded in real workflows, not chatbot demos.',
      detail:'Document extraction, classification, summarization, agentic ops — wired into your existing systems with evals, fallbacks, and cost ceilings. We ship the boring parts that make AI actually production-grade.',
      stack:['Anthropic','OpenAI','RAG','Evals'],
    },
    {
      name:'Custom dashboards & analytics',
      one:'A single source of truth your leadership team trusts.',
      detail:'Warehouse-backed, model-driven dashboards with real definitions and drill-down to the row. No more "which Looker is right?"',
      stack:['dbt','Snowflake','Metabase','Postgres'],
    },
    {
      name:'Backend integrations',
      one:'Connect legacy ERPs, payment rails, carriers, and partners.',
      detail:'EDI, SAP, NetSuite, Acumatica, Shippo, Plaid, FedEx — the unsexy plumbing that decides whether the new system actually replaces the old one.',
      stack:['EDI','REST','SOAP','SFTP','Webhooks'],
    },
    {
      name:'Fintech & blockchain infrastructure',
      one:'Ledger systems, settlement engines, on-chain integrations.',
      detail:'Double-entry ledgers that survive audit. Settlement engines that reconcile to the cent. On-chain integrations when the use case actually needs them (and a candid conversation when it does not).',
      stack:['Ledger','EVM','Stripe Treasury','SOC2'],
    },
  ];

  return (
    <section className="section-pad" id="services" data-screen-label="03 Services" style={{borderTop:'1px solid var(--border)',background:'var(--surface)'}}>
      <div className="container">
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:32,flexWrap:'wrap',marginBottom:64}}>
          <div>
            <div className="eyebrow">What we build</div>
            <h2 className="h-section" style={{marginTop:20,maxWidth:'14ch'}}>
              Systems, not screens.
            </h2>
          </div>
          <p className="lede" style={{maxWidth:'42ch'}}>
            Seven practice areas. Every engagement combines two or three —
            because operational problems rarely sit in just one.
          </p>
        </div>

        <div className="services-list" style={{borderTop:'1px solid var(--border)'}}>
          {services.map((s, i) => (
            <ServiceRow
              key={i}
              i={i}
              service={s}
              active={active===i}
              onClick={() => setActive(active===i ? -1 : i)}
            />
          ))}
        </div>
      </div>
    </section>
  );
};

const ServiceRow = ({i, service, active, onClick}) => {
  return (
    <div
      onClick={onClick}
      style={{
        borderBottom:'1px solid var(--border)',
        cursor:'pointer',
        transition:'background .2s ease',
        background: active ? 'var(--elevated)' : 'transparent',
      }}
      onMouseEnter={e=>{if(!active) e.currentTarget.style.background='color-mix(in srgb, var(--elevated) 60%, transparent)'}}
      onMouseLeave={e=>{if(!active) e.currentTarget.style.background='transparent'}}
    >
      <div style={{
        display:'grid',gridTemplateColumns:'80px 1.4fr 1fr 80px',
        gap:24,alignItems:'center',padding:'28px 24px',
      }} className="service-row-grid">
        <span style={{fontFamily:'Geist Mono,monospace',fontSize:13,color:'var(--text-faint)'}}>
          {String(i+1).padStart(2,'0')}
        </span>
        <h3 style={{
          margin:0,fontSize:26,fontWeight:500,letterSpacing:'-0.02em',
          color: active ? 'var(--text)' : 'var(--text)',
        }}>{service.name}</h3>
        <p style={{margin:0,color:'var(--text-dim)',fontSize:15,lineHeight:1.4}} className="service-one">
          {service.one}
        </p>
        <span style={{
          justifySelf:'end',
          fontSize:20,color:'var(--text-faint)',
          transition:'transform .3s ease, color .2s',
          transform: active?'rotate(45deg)':'rotate(0)',
          color: active ? 'var(--accent)' : 'var(--text-faint)',
        }}>+</span>
      </div>
      <div style={{
        maxHeight: active ? 280 : 0,
        overflow:'hidden',
        transition:'max-height .4s ease',
      }}>
        <div style={{
          display:'grid',gridTemplateColumns:'80px 1.4fr 1fr 80px',
          gap:24,padding:'0 24px 32px 24px',
        }} className="service-row-grid">
          <div></div>
          <p style={{margin:0,fontSize:16,lineHeight:1.55,color:'var(--text)',maxWidth:'52ch'}}>
            {service.detail}
          </p>
          <div style={{display:'flex',flexWrap:'wrap',gap:6,alignContent:'flex-start'}}>
            {service.stack.map(t=>(
              <span key={t} style={{
                fontFamily:'Geist Mono,monospace',fontSize:11,
                padding:'4px 9px',border:'1px solid var(--border-strong)',
                borderRadius:4,color:'var(--text-dim)',
                letterSpacing:'.02em',
              }}>{t}</span>
            ))}
          </div>
          <div></div>
        </div>
      </div>
      <style>{`
        @media(max-width:760px){
          .service-row-grid{grid-template-columns:40px 1fr 40px !important;}
          .service-one{display:none;}
        }
      `}</style>
    </div>
  );
};


// ─────────────────────────────────────────────────────────────
// CASE STUDIES
// ─────────────────────────────────────────────────────────────
const CaseStudies = () => {
  const studies = [
    {
      id:'case-helios',
      industry:'Logistics',
      client:'Helios Logistics',
      problem:'Replaced 4 routing tools and a 2,000-row spreadsheet with one dispatch system.',
      results:[
        { metric:'41%', label:'reduction in dispatch cost / shipment' },
        { metric:'2.3×', label:'driver utilization' },
        { metric:'18mo', label:'engagement, ongoing' },
      ],
      featured:true,
    },
    {
      industry:'E-commerce',
      client:'Northbeam Commerce',
      problem:'Custom OMS replaced 8 SaaS tools across order, inventory and returns.',
      results:[
        { metric:'$2.1M', label:'annual SaaS spend retired' },
        { metric:'4.8×', label:'peak throughput, Black Friday' },
      ],
    },
    {
      industry:'Fintech',
      client:'Calder Capital',
      problem:'Settlement engine and double-entry ledger for cross-border treasury.',
      results:[
        { metric:'$180M', label:'settled weekly, zero variance' },
        { metric:'SOC 2 II', label:'shipped in audit on first pass' },
      ],
    },
    {
      industry:'Workforce',
      client:'Foundry HR',
      problem:'Contractor onboarding and compliance platform spanning 31 countries.',
      results:[
        { metric:'12,000', label:'contractors onboarded' },
        { metric:'31', label:'jurisdictions, one workflow' },
      ],
    },
  ];

  return (
    <section className="section-pad" id="work" data-screen-label="04 Case Studies">
      <div className="container">
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:32,flexWrap:'wrap',marginBottom:64}}>
          <div>
            <div className="eyebrow">Selected work</div>
            <h2 className="h-section" style={{marginTop:20,maxWidth:'16ch'}}>
              Systems running in production.
            </h2>
          </div>
          <a href="#" className="btn btn-ghost">All case studies <span className="btn-arrow">→</span></a>
        </div>

        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}} className="case-grid">
          {studies.map((s,i) => (
            <CaseCard key={i} study={s} featured={s.featured} />
          ))}
        </div>
      </div>
      <style>{`
        @media(max-width:900px){
          .case-grid{grid-template-columns:1fr !important;}
          .case-featured{grid-column:auto !important;}
        }
      `}</style>
    </section>
  );
};

const CaseCard = ({study, featured}) => {
  return (
    <a href="#" id={study.id} className={featured?'card case-featured':'card'} style={{
      gridColumn: featured ? 'span 2' : 'span 1',
      padding:32,
      display:'flex',flexDirection:'column',gap:24,
      minHeight: featured ? 360 : 280,
      position:'relative',overflow:'hidden',
    }}>
      {featured && <CaseDiagram />}
      <div style={{display:'flex',alignItems:'center',gap:10,position:'relative',zIndex:2}}>
        <span style={{
          fontFamily:'Geist Mono,monospace',fontSize:11,letterSpacing:'.12em',
          textTransform:'uppercase',color:'var(--accent)',
        }}>{study.industry}</span>
        <span style={{color:'var(--text-faint)'}}>·</span>
        <span style={{fontSize:13,color:'var(--text-dim)'}}>{study.client}</span>
      </div>
      <h3 style={{
        margin:0,fontWeight:500,
        fontSize: featured ? 34 : 22,
        lineHeight:1.18,letterSpacing:'-0.02em',
        maxWidth: featured ? '24ch' : '32ch',
        position:'relative',zIndex:2,
      }}>{study.problem}</h3>

      <div style={{flex:1}}></div>

      <div style={{
        display:'grid',
        gridTemplateColumns:`repeat(${study.results.length}, 1fr)`,
        gap:24,paddingTop:24,borderTop:'1px solid var(--border)',
        position:'relative',zIndex:2,
      }}>
        {study.results.map((r,i)=>(
          <div key={i}>
            <div style={{fontSize: featured?36:26,fontWeight:500,letterSpacing:'-0.03em'}}>{r.metric}</div>
            <div style={{
              fontSize:12,color:'var(--text-dim)',marginTop:4,lineHeight:1.4,
              fontFamily:'Geist Mono,monospace',letterSpacing:'.02em',
            }}>{r.label}</div>
          </div>
        ))}
      </div>
    </a>
  );
};

// Decorative diagram for the featured case card
const CaseDiagram = () => (
  <svg
    style={{position:'absolute',right:-30,top:-20,opacity:.65,pointerEvents:'none'}}
    width="420" height="320" viewBox="0 0 420 320" fill="none"
  >
    <defs>
      <linearGradient id="cgrad" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0%" stopColor="var(--accent)" stopOpacity=".6"/>
        <stop offset="100%" stopColor="var(--accent)" stopOpacity="0"/>
      </linearGradient>
    </defs>
    {/* grid */}
    {[...Array(8)].map((_,i)=>(
      <line key={i} x1={i*52} y1="0" x2={i*52} y2="320" stroke="var(--border)" strokeWidth=".5"/>
    ))}
    {[...Array(6)].map((_,i)=>(
      <line key={i} x1="0" y1={i*52} x2="420" y2={i*52} stroke="var(--border)" strokeWidth=".5"/>
    ))}
    {/* route nodes */}
    <circle cx="60" cy="240" r="4" fill="var(--accent)"/>
    <circle cx="160" cy="180" r="3" fill="var(--text-dim)"/>
    <circle cx="260" cy="200" r="3" fill="var(--text-dim)"/>
    <circle cx="340" cy="120" r="3" fill="var(--text-dim)"/>
    <circle cx="200" cy="80" r="4" fill="var(--accent)"/>
    <path d="M60 240 Q120 200 160 180 T260 200 T340 120" stroke="var(--accent)" strokeWidth="1.5" strokeDasharray="3 3" fill="none"/>
    <path d="M60 240 L200 80" stroke="url(#cgrad)" strokeWidth="1" fill="none"/>
    {/* bars */}
    <g transform="translate(20 30)">
      <rect width="6" height="40" fill="var(--accent)" opacity=".8"/>
      <rect x="12" width="6" height="60" fill="var(--accent)" opacity=".6"/>
      <rect x="24" width="6" height="30" fill="var(--accent)" opacity=".4"/>
      <rect x="36" width="6" height="50" fill="var(--accent)" opacity=".5"/>
    </g>
    <text x="20" y="20" fill="var(--text-faint)" fontFamily="Geist Mono,monospace" fontSize="9" letterSpacing=".1em">DISPATCH/HR</text>
  </svg>
);


// ─────────────────────────────────────────────────────────────
// HOW WE WORK
// ─────────────────────────────────────────────────────────────
const HowWeWork = () => {
  const phases = [
    {
      n:'01', name:'Map',
      duration:'2 weeks',
      body:'Operations audit, stack inventory, joint architecture review. We leave the engagement here if custom isn\'t the right answer — and tell you so.',
      artifacts:['Systems map','Cost-to-build estimate','Recommendation memo'],
    },
    {
      n:'02', name:'Architect',
      duration:'3–4 weeks',
      body:'RFCs, data models, contract designs, and a clickable prototype of the critical path before we write the real version.',
      artifacts:['Architecture RFC','API contracts','Clickable prototype'],
    },
    {
      n:'03', name:'Build',
      duration:'8–24 weeks',
      body:'Two-week iteration cycles. Demo every Friday with your team. Code, infrastructure, and runbooks shipped together — never separately.',
      artifacts:['Weekly demos','Production system','Runbooks & docs'],
    },
    {
      n:'04', name:'Operate',
      duration:'Ongoing',
      body:'On-call partnership, evolution roadmap, and quarterly architecture reviews. We stay until you have the team to take it over — or longer, if you want.',
      artifacts:['24/7 on-call','Quarterly review','Roadmap'],
    },
  ];

  return (
    <section className="section-pad" id="how" data-screen-label="05 How We Work" style={{borderTop:'1px solid var(--border)',background:'var(--surface)'}}>
      <div className="container">
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'flex-end',gap:32,flexWrap:'wrap',marginBottom:64}}>
          <div>
            <div className="eyebrow">How we work</div>
            <h2 className="h-section" style={{marginTop:20,maxWidth:'14ch'}}>
              Four phases.<br/>One team.
            </h2>
          </div>
          <p className="lede" style={{maxWidth:'42ch'}}>
            A single senior team — staff engineers, a principal architect, a
            PM — from discovery to operate. No handoffs to a delivery pod.
          </p>
        </div>

        <div className="phases-row" style={{
          display:'grid',gridTemplateColumns:'repeat(4, 1fr)',gap:0,
          border:'1px solid var(--border)',borderRadius:12,overflow:'hidden',
        }}>
          {phases.map((p,i)=>(
            <div key={i} style={{
              padding:32,
              borderRight: i<3 ? '1px solid var(--border)' : 'none',
              display:'flex',flexDirection:'column',gap:20,
              background:'var(--bg)',
              position:'relative',
            }}>
              <div style={{display:'flex',justifyContent:'space-between',alignItems:'baseline'}}>
                <span style={{
                  fontFamily:'Geist Mono,monospace',fontSize:13,color:'var(--text-faint)'
                }}>{p.n}</span>
                <span style={{
                  fontFamily:'Geist Mono,monospace',fontSize:11,
                  color:'var(--text-faint)',letterSpacing:'.1em',textTransform:'uppercase',
                }}>{p.duration}</span>
              </div>
              <h3 style={{margin:0,fontSize:36,fontWeight:500,letterSpacing:'-0.03em'}}>{p.name}</h3>
              <p style={{margin:0,color:'var(--text-dim)',fontSize:14,lineHeight:1.55,flex:1}}>{p.body}</p>
              <ul style={{margin:0,padding:0,listStyle:'none',display:'flex',flexDirection:'column',gap:6}}>
                {p.artifacts.map((a,j)=>(
                  <li key={j} style={{
                    fontSize:12,fontFamily:'Geist Mono,monospace',
                    color:'var(--text-dim)',display:'flex',alignItems:'center',gap:8,
                  }}>
                    <span style={{width:4,height:4,background:'var(--accent)',borderRadius:1}}></span>
                    {a}
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        @media(max-width:900px){
          .phases-row{grid-template-columns:1fr 1fr !important;}
          .phases-row > div:nth-child(odd){border-right:1px solid var(--border) !important;}
          .phases-row > div:nth-child(2){border-right:none !important;}
          .phases-row > div:nth-child(1),
          .phases-row > div:nth-child(2){border-bottom:1px solid var(--border);}
        }
        @media(max-width:600px){
          .phases-row{grid-template-columns:1fr !important;}
          .phases-row > div{border-right:none !important;border-bottom:1px solid var(--border) !important;}
          .phases-row > div:last-child{border-bottom:none !important;}
        }
      `}</style>
    </section>
  );
};


// ─────────────────────────────────────────────────────────────
// INDUSTRIES
// ─────────────────────────────────────────────────────────────
const Industries = () => {
  const industries = [
    { name:'E-commerce & Retail', note:'OMS, headless commerce, post-purchase' },
    { name:'Logistics & Supply Chain', note:'Dispatch, routing, EDI, carriers' },
    { name:'Fintech', note:'Ledgers, settlement, treasury, KYC' },
    { name:'Healthcare & Compliance', note:'HIPAA, audit trails, integrations' },
    { name:'Marketplaces', note:'Multi-sided platforms, payouts, trust' },
    { name:'Manufacturing & ERP', note:'NetSuite/SAP integrations, MES' },
    { name:'B2B SaaS', note:'Platform extensions, AI features, scale' },
    { name:'Energy & Utilities', note:'Metering, billing, field operations' },
  ];

  return (
    <section className="section-pad" data-screen-label="06 Industries">
      <div className="container">
        <div style={{display:'grid',gridTemplateColumns:'1fr 1.6fr',gap:80}} className="industries-grid">
          <div>
            <div className="eyebrow">Industries</div>
            <h2 className="h-section" style={{marginTop:20,maxWidth:'14ch'}}>
              Where complexity lives.
            </h2>
            <p className="lede" style={{marginTop:24,maxWidth:'36ch'}}>
              Domains where we have deep production experience —
              the kind that compounds across engagements.
            </p>
          </div>

          <div style={{
            display:'grid',gridTemplateColumns:'1fr 1fr',
            border:'1px solid var(--border)',
          }} className="industries-list">
            {industries.map((ind,i)=>(
              <div key={i} className="industry-tile" style={{
                padding:'28px 28px',
                borderRight: i%2===0 ? '1px solid var(--border)' : 'none',
                borderBottom: i < industries.length-2 ? '1px solid var(--border)' : 'none',
                display:'flex',flexDirection:'column',gap:8,
                transition:'background .2s ease',
                cursor:'pointer',
              }}
              onMouseEnter={e=>{e.currentTarget.style.background='var(--surface)';e.currentTarget.querySelector('.ind-mark').style.background='var(--accent)';}}
              onMouseLeave={e=>{e.currentTarget.style.background='transparent';e.currentTarget.querySelector('.ind-mark').style.background='var(--text-faint)';}}
              >
                <div style={{display:'flex',alignItems:'center',gap:10}}>
                  <span className="ind-mark" style={{
                    width:6,height:6,background:'var(--text-faint)',
                    borderRadius:1,transition:'background .2s ease',
                  }}></span>
                  <span style={{fontSize:18,fontWeight:500,letterSpacing:'-0.015em'}}>{ind.name}</span>
                </div>
                <span style={{
                  fontFamily:'Geist Mono,monospace',fontSize:12,color:'var(--text-faint)',
                  letterSpacing:'.01em',paddingLeft:16,
                }}>{ind.note}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
      <style>{`
        @media(max-width:900px){
          .industries-grid{grid-template-columns:1fr !important; gap:40px !important;}
        }
        @media(max-width:600px){
          .industries-list{grid-template-columns:1fr !important;}
          .industries-list .industry-tile{border-right:none !important;border-bottom:1px solid var(--border) !important;}
          .industries-list .industry-tile:last-child{border-bottom:none !important;}
        }
      `}</style>
    </section>
  );
};


window.Problem = Problem;
window.Services = Services;
window.CaseStudies = CaseStudies;
window.HowWeWork = HowWeWork;
window.Industries = Industries;