// ============================================================
// DEMIURGE — TRUST + INDUSTRY SELECTOR
// ============================================================

const TrustSection = () => {
  const cells = [
    { v: '4,217', u: '+', lbl: 'Businesses operating', sub: 'on Demiurge today' },
    { v: '487', u: '$M', lbl: 'Processed monthly', sub: 'across the network' },
    { v: '99.97', u: '%', lbl: 'Network uptime', sub: 'rolling 90-day window' },
    { v: '14.2', u: 'x', lbl: 'Avg ROI / deployment', sub: 'measured at 90 days' }
  ];
  return (
    <section className="lp-section tight">
      <div className="lp">
        <div className="lp-trust">
          {cells.map((c, i) => (
            <div className="cell" key={i}>
              <div className="lbl">{c.lbl}</div>
              <div className="val">
                {c.u === '$M' ? <span className="u">$</span> : null}
                {c.v}
                {c.u && c.u !== '$M' ? <span className="u">{c.u}</span> : c.u === '$M' ? <span className="u">M</span> : null}
              </div>
              <div className="sub">{c.sub}</div>
            </div>
          ))}
        </div>
        <div className="lp-press">
          <div className="lbl">As featured in</div>
          <div className="logos">
            <span className="logo">Forbes</span>
            <span className="logo">The Economist</span>
            <span className="logo mono">WIRED</span>
            <span className="logo mono">TECHCRUNCH</span>
            <span className="logo">a16z</span>
            <span className="logo mono">BLOOMBERG</span>
          </div>
        </div>
      </div>
    </section>
  );
};

// ============================================================
// INDUSTRY SELECTOR
// ============================================================

const INDUSTRIES = [
  {
    key: 'hvac',
    name: 'HVAC & Trades',
    headline: 'Every call answered. Every truck routed. Every invoice closed.',
    body: 'Mercury fields after-hours calls in 22 seconds. Vulcan dispatches techs to optimal jobs. Midas re-prices service contracts in real time. Atlas closes the upsell on the call. One unified operator behind every truck on the road.',
    stats: [
      { lbl: 'Avg booking rate', v: '78', u: '%' },
      { lbl: 'Tech utilization', v: '94', u: '%' },
      { lbl: 'Ticket size', v: '+41', u: '%' }
    ],
    deploy: 'Deploys in 7 days · live data from ServiceTitan, Housecall Pro, Jobber'
  },
  {
    key: 'dental',
    name: 'Dental & Medical',
    headline: 'Fill the chair. Reactivate the lapsed. Bill the same week.',
    body: 'Hermes works the recall list in batched sessions. Artemis targets in-network adults within a 3-mile radius. Iris models the schedule for maximum chair utilization. Patients book themselves. The front desk runs lean.',
    stats: [
      { lbl: 'Chair utilization', v: '92', u: '%' },
      { lbl: 'Reactivations', v: '320', u: '/mo' },
      { lbl: 'No-show rate', v: '-67', u: '%' }
    ],
    deploy: 'HIPAA-compliant · syncs with Dentrix, Open Dental, Eaglesoft'
  },
  {
    key: 'law',
    name: 'Law Firms',
    headline: 'Intake at 2:47 AM. Conflict-checked. Calendared. Signed by morning.',
    body: 'Hermes handles intake calls with the bedside manner of senior counsel. Iris matches matter type to the right associate. Vulcan generates engagement letters from precedent. Atlas closes the retainer before the prospect rings a competitor.',
    stats: [
      { lbl: 'Intake → retainer', v: '54', u: '%' },
      { lbl: 'Response time', v: '38', u: 's' },
      { lbl: 'Billable hours', v: '+22', u: '%' }
    ],
    deploy: 'Encrypted · integrates with Clio, MyCase, PracticePanther'
  },
  {
    key: 'estate',
    name: 'Real Estate',
    headline: 'Every lead, nurtured for 547 days, until they transact.',
    body: 'Atlas runs an outbound cadence that adapts to market velocity. Artemis identifies pre-listing intent from public records and search behavior. Hermes responds to every Zillow lead in under 30 seconds. Iris forecasts which agent on the team to route to.',
    stats: [
      { lbl: 'Lead → appointment', v: '34', u: '%' },
      { lbl: 'Pipeline value', v: '$8.4', u: 'M' },
      { lbl: 'Speed to lead', v: '24', u: 's' }
    ],
    deploy: 'Connects to MLS, Follow Up Boss, kvCORE, Sierra'
  },
  {
    key: 'ecom',
    name: 'E-commerce',
    headline: 'A senior CRO, a buyer, and a CFO. On the same dashboard.',
    body: 'Midas re-prices SKUs against demand and competitor moves. Orpheus writes the campaign, generates the asset, ships to Meta and TikTok. Hermes turns DMs into orders. Iris attributes everything back to the unit-economics line that matters.',
    stats: [
      { lbl: 'AOV', v: '+28', u: '%' },
      { lbl: 'Repeat rate', v: '+19', u: '%' },
      { lbl: 'ROAS', v: '6.2', u: 'x' }
    ],
    deploy: 'Shopify · Klaviyo · Meta · TikTok · Amazon Seller'
  },
  {
    key: 'agency',
    name: 'Agencies',
    headline: 'Run 40 client accounts. With the staffing of a boutique.',
    body: 'Deploy a private team per client, white-labeled. Orpheus produces the work. Iris reports on it. Atlas handles upsells. Your senior strategists oversee 10× more accounts without the strain. Margin expands. Headcount stays flat.',
    stats: [
      { lbl: 'Accounts / strategist', v: '12', u: 'x' },
      { lbl: 'Gross margin', v: '74', u: '%' },
      { lbl: 'Client NRR', v: '142', u: '%' }
    ],
    deploy: 'White-label · multi-tenant · SAML/SSO available'
  }
];

const IndustrySection = () => {
  const [active, setActive] = React.useState(0);
  const ind = INDUSTRIES[active];
  return (
    <section className="lp-section" id="industries">
      <div className="lp">
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 48, flexWrap: 'wrap'}}>
          <div style={{maxWidth: 720}}>
            <div className="lp-eyebrow">/ 06 · Industry deployments</div>
            <h2 className="lp-h2" style={{marginTop: 18}}>
              Tuned for the industries<br/>
              that <em className="lp-brass">refuse to settle</em>.
            </h2>
          </div>
          <p className="lp-lede" style={{maxWidth: 380, fontSize: 15.5}}>
            Every Demiurge deployment is calibrated to the workflows, regulations, and unit economics
            of a single industry. No generic chatbots. No prompt-engineering homework.
          </p>
        </div>

        <div className="lp-ind-grid">
          <div className="lp-ind-list">
            {INDUSTRIES.map((it, i) => (
              <div
                key={it.key}
                className={`lp-ind-item ${i === active ? 'active' : ''}`}
                onClick={() => setActive(i)}
              >
                <span className="num">{String(i + 1).padStart(2, '0')}</span>
                <span>{it.name}</span>
              </div>
            ))}
          </div>
          <div className="lp-ind-panel">
            <div className="corner tl"></div>
            <div className="corner tr"></div>
            <div className="corner bl"></div>
            <div className="corner br"></div>
            <div className="lp-ind-tag">VERTICAL · {ind.key.toUpperCase()} · DEPLOYMENT GUIDE</div>
            <div className="lp-ind-h">{ind.headline}</div>
            <div className="lp-ind-body">{ind.body}</div>
            <div className="lp-ind-stats">
              {ind.stats.map((s, i) => (
                <div className="s" key={i}>
                  <div className="lbl">{s.lbl}</div>
                  <div className="v">{s.v}<span className="u">{s.u}</span></div>
                </div>
              ))}
            </div>
            <div className="lp-ind-deploy">
              <span style={{width: 6, height: 6, borderRadius: '50%', background: '#4be8ff', boxShadow: '0 0 6px #4be8ff', display: 'inline-block'}}></span>
              <strong>Ready to deploy.</strong>
              <span>{ind.deploy}</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.TrustSection = TrustSection;
window.IndustrySection = IndustrySection;