// Difference / competitive section — directly challenges single-source vendors
// (SpaceIQ-style WMS, sensor-only, booking-app-only) who claim "insights" from one feed.

// Tiny sparkline components for the silos graphic
const SparkLine = ({ pattern = 'wave' }) => {
  const paths = {
    wave:    "M0,18 L10,12 L20,16 L30,8 L40,11 L50,6 L60,13 L70,9 L80,11",
    rising:  "M0,22 L12,20 L24,18 L36,16 L48,12 L60,9 L72,6 L80,4",
    flat:    "M0,14 L10,15 L20,13 L30,14 L40,13 L50,15 L60,14 L70,13 L80,14",
    spiky:   "M0,18 L10,4 L20,16 L30,8 L40,20 L50,6 L60,14 L70,4 L80,16",
  };
  return (
    <svg viewBox="0 0 80 26" preserveAspectRatio="none" style={{width:'100%', height: 26, color:'rgba(255,255,255,0.55)'}}>
      <path d={paths[pattern]} fill="none" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
    </svg>
  );
};
const SparkBars = ({ heights }) => (
  <svg viewBox="0 0 80 26" preserveAspectRatio="none" style={{width:'100%', height: 26, color:'rgba(255,255,255,0.55)'}}>
    {heights.map((h, i) => (
      <rect key={i} x={i * (80/heights.length) + 1} y={26 - h} width={(80/heights.length) - 2} height={h} fill="currentColor"/>
    ))}
  </svg>
);

function SilosGraphic() {
  const silos = [
    { vendor: 'Sensor co.',  kind: 'Occupancy sensors',   icon: <Icon.sensor/>,   metric: '67%',     m: 'occupancy',     chart: <SparkLine pattern="wave"/> },
    { vendor: 'WMS app',     kind: 'Workplace mgmt',      icon: <Icon.grid/>,     metric: '142',     m: 'desks booked',  chart: <SparkBars heights={[10,16,22,18,24,14,20,12]}/> },
    { vendor: 'Lease admin', kind: 'Lease management',    icon: <Icon.building/>, metric: '$38k',    m: 'monthly rent',  chart: <SparkLine pattern="flat"/> },
    { vendor: 'HR system',   kind: 'HRIS / people',       icon: <Icon.people/>,   metric: '880',     m: 'headcount',     chart: <SparkBars heights={[14,18,16,20,17,22,19,21]}/> },
    { vendor: 'Travel tool', kind: 'Travel & expense',    icon: <Icon.pin/>,      metric: '4.2×',    m: 'trips / FTE',   chart: <SparkLine pattern="spiky"/> },
    { vendor: 'Energy',      kind: 'Utilities meter',     icon: <Icon.zap/>,      metric: '24',      m: 'kWh / m²',      chart: <SparkLine pattern="rising"/> },
  ];

  return (
    <div className="silos">
      <div className="silos-caption">
        <span className="mono" style={{color:'rgba(255,255,255,0.42)', letterSpacing:'0.14em'}}>SIX VENDORS</span>
        <span className="silos-caption-line"/>
        <span className="mono" style={{color:'rgba(255,255,255,0.42)', letterSpacing:'0.14em'}}>NO SHARED LAYER</span>
      </div>

      <div className="silos-row">
        {silos.map((s, i) => (
          <React.Fragment key={i}>
            <div className="silo">
              <div className="silo-cap">
                <div className="silo-icon">{s.icon}</div>
                <div className="silo-vendor">{s.vendor}</div>
                <div className="silo-kind">{s.kind}</div>
              </div>
              <div className="silo-tower">
                <div className="silo-metric">{s.metric}</div>
                <div className="silo-metric-label">{s.m}</div>
                <div className="silo-chart">{s.chart}</div>
                <div className="silo-lock">
                  <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><rect x="5" y="11" width="14" height="10" rx="1"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg>
                  <span>walled</span>
                </div>
              </div>
            </div>
            {i < silos.length - 1 && (
              <div className="silo-break" aria-hidden="true">
                <span className="silo-break-x">×</span>
              </div>
            )}
          </React.Fragment>
        ))}
      </div>

      <div className="silos-foot">
        Each vendor sells you their slice. <em>None of it speaks to each other.</em>
      </div>
    </div>
  );
}

function Difference() {
  const them = [
    'A dashboard tied to their sensors. Or their app. Or their booking system.',
    '67% occupancy — but compared to what? At what lease cost? With what team?',
    'Reporting bounded by what they sell. Step outside and the data goes dark.',
    'Your data, locked inside their platform.',
  ];
  const us = [
    'Occupancy cross-referenced with HR, lease, travel, engagement — and anything else you can hand us.',
    '67% occupancy, paired with the cost it implies, the team behind it and the lease that funds it.',
    'Reporting that follows the question — not the vendor roadmap.',
    'Your data, yours. Delivered to Power BI you own.',
  ];

  return (
    <section className="difference" id="difference">
      <div className="wrap" style={{padding: 0}}>
        <div className="diff-foot diff-foot-top">
          <p>
            One number on its own is a metric.
            <em> Many numbers, connected with intent — that's intelligence.</em>
          </p>
        </div>

        <div className="diff-head">
          <div className="eyebrow on-dark"><span className="line"/><span>Why we built it this way</span></div>
          <h2 className="h-section" style={{marginTop: 18, color:'#fff', maxWidth: '18ch'}}>
            A sensor<br/>isn't an <em style={{color:'var(--orange-2)'}}>insight.</em>
          </h2>
          <p className="lead" style={{marginTop: 22, maxWidth: '52ch'}}>
            Single-source vendors — sensor companies, booking apps, workplace
            management platforms — will hand you a chart from one feed and call
            it intelligence. It isn't. Real intelligence connects that feed to
            every other part of how your business actually runs.
          </p>
        </div>

        <SilosGraphic/>

        <div className="diff-grid">
          <div className="diff-col diff-them">
            <div className="diff-col-label">
              <span className="diff-mark them">×</span>
              <div>
                <div className="diff-col-title">What the rest sell you</div>
                <div className="diff-col-sub">A single-source vendor — sensors, WMS, booking app</div>
              </div>
            </div>
            <ul>
              {them.map(t => <li key={t}>{t}</li>)}
            </ul>
          </div>

          <div className="diff-divider">
            <div className="diff-divider-line"/>
            <div className="diff-divider-vs">vs</div>
            <div className="diff-divider-line"/>
          </div>

          <div className="diff-col diff-us">
            <div className="diff-col-label">
              <span className="diff-mark us">✓</span>
              <div>
                <div className="diff-col-title">What real intelligence looks like</div>
                <div className="diff-col-sub">Simple Space — cross-referenced reporting</div>
              </div>
            </div>
            <ul>
              {us.map((t, i) => <li key={i}>{t}</li>)}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}
window.Difference = Difference;
window.SilosGraphic = SilosGraphic;