// Product visual + feature grid — Platform page.
// Modern re-interpretation of the legacy simple.space "inspired workspaces"
// device shot and "features" grid.

// Floorplan mock — architectural line-work "client floorplan" with the
// simple.space team-allocation blocks drawn over the top, as in the product.
function FloorplanMock() {
  // Desk cluster: pairs of desks along a spine
  const Desks = ({x, y, rows = 3, cols = 4}) => (
    <g>
      {Array.from({length: rows}).map((_, r) =>
        Array.from({length: cols}).map((_, c) => (
          <rect key={r + '-' + c} x={x + c * 34} y={y + r * 40} width="26" height="14" rx="1"/>
        ))
      )}
      {Array.from({length: rows}).map((_, r) =>
        Array.from({length: cols}).map((_, c) => (
          <rect key={'b' + r + '-' + c} x={x + c * 34} y={y + r * 40 + 17} width="26" height="14" rx="1"/>
        ))
      )}
    </g>
  );
  return (
    <div className="fp-mock" aria-hidden="true">
      <svg className="fp-plan" viewBox="0 0 800 380" preserveAspectRatio="xMidYMid meet">
        {/* ── base plan: clean designer plan — rounded shell, central atrium
               spine, focus pod. No walls cross a team zone. ── */}
        <g className="fp-lines">
          {/* outer shell */}
          <rect x="24" y="24" width="752" height="332" rx="24"/>
          {/* central atrium / stair core */}
          <rect x="350" y="140" width="110" height="100" rx="20"/>
          <line x1="368" y1="168" x2="442" y2="168"/>
          <line x1="368" y1="190" x2="442" y2="190"/>
          <line x1="368" y1="212" x2="442" y2="212"/>
          {/* circular focus room, below atrium */}
          <circle cx="405" cy="296" r="28"/>
        </g>
        <g className="fp-desks">
          <Desks x={74}  y={72}  rows={2} cols={5}/>
          <Desks x={70}  y={240} rows={2} cols={5}/>
          <Desks x={522} y={68}  rows={2} cols={5}/>
          <Desks x={522} y={220} rows={2} cols={5}/>
        </g>
        {/* ── overlay: team allocation zones — soft rounded shapes aligned
               to the architecture ── */}
        <g className="fp-overlay">
          <g>
            <path className="z-b" d="M60 44 L314 44 L314 144 Q314 184 274 184 L60 184 Q44 184 44 168 L44 60 Q44 44 60 44 Z"/>
            <text x="56" y="172">B2B SALES</text>
          </g>
          <g>
            <path className="z-d" d="M44 214 L314 214 L314 336 L104 336 Q44 336 44 276 Z"/>
            <text x="70" y="328">OPERATIONS</text>
          </g>
          <g>
            <path className="z-a" d="M496 44 L740 44 Q756 44 756 60 L756 164 L536 164 Q496 164 496 124 Z"/>
            <text x="508" y="152">ONLINE SALES</text>
          </g>
          <g>
            <path className="z-e" d="M496 194 L756 194 L756 276 Q756 336 696 336 L496 336 Z"/>
            <text x="508" y="326">MARKETING</text>
          </g>
          <g>
            <path className="z-c" d="M350 58 Q350 44 364 44 L446 44 Q460 44 460 58 L460 100 Q460 114 446 114 L364 114 Q350 114 350 100 Z"/>
            <text x="394" y="86">IT</text>
          </g>
        </g>
      </svg>
      <div className="fp-callout">
        <div className="fp-callout-name">Online Sales</div>
        <div className="fp-callout-rows">
          <div><b>1 : 1.12</b><span>ratio</span></div>
          <div><b>34</b><span>allocated</span></div>
          <div><b>38</b><span>capacity</span></div>
        </div>
      </div>
    </div>
  );
}

function ProductViz() {
  const navItems = ['Buildings', 'Floorplans', 'Spaces', 'Teams', 'Occupants'];
  return (
    <section id="product" className="product-viz">
      <div className="wrap" style={{padding: 0}}>
        <div className="section-head">
          <div>
            <div className="eyebrow"><span className="line"/><span>The App</span></div>
            <h2 className="h-section" style={{marginTop: 18}}>
              Your portfolio,<br/>on <em>one screen.</em>
            </h2>
          </div>
          <p className="lead">
            Every floor, zone, team and desk — mapped, allocated and measured in the
            simple.space app. Find, plan and relocate people without a spreadsheet in sight.
          </p>
        </div>

        <div className="pv-frame">
          <div className="pv-chrome">
            <span className="pv-dot"/><span className="pv-dot"/><span className="pv-dot"/>
            <span className="pv-url mono">app.simple.space — L17 · Floorplans</span>
          </div>
          <div className="pv-body">
            <aside className="pv-side">
              {navItems.map((n, i) => (
                <div key={n} className={`pv-nav ${i === 1 ? 'active' : ''}`}>
                  <span>{n}</span>
                </div>
              ))}
            </aside>
            <div className="pv-main">
              <FloorplanMock/>
            </div>
          </div>
        </div>

        <div className="pv-caption mono">FLOORPLANS · ALLOCATION · CAPACITY — LIVE FROM YOUR PORTFOLIO</div>
      </div>
    </section>
  );
}

// Modernised feature grid — legacy "simple.space features", re-written.
function FeatureGrid() {
  const feats = [
    { i: <Icon.grid/>,     t: 'Visual management',  d: 'See your spaces, not spreadsheets.' },
    { i: <Icon.people/>,   t: 'Collaboration',      d: 'Shared visibility across every team.' },
    { i: <Icon.chart/>,    t: 'Save money',         d: 'Spot the improvements hiding in your space.' },
    { i: <Icon.zap/>,      t: 'Quick setup',        d: 'Up and running in-house — no extra fees.' },
    { i: <Icon.layers/>,   t: 'Simple data',        d: 'Input once, make sense of it visually.' },
    { i: <Icon.shuffle/>,  t: 'Extremely flexible', d: 'Secure cloud, available wherever you are.' },
    { i: <Icon.doc/>,      t: 'Free updates',       d: 'New features land without a price tag.' },
    { i: <Icon.pin/>,      t: 'Clean design',       d: 'Modern, simple and built for daily use.' },
  ];
  return (
    <section id="features" className="feature-grid-sec">
      <div className="wrap" style={{padding: 0}}>
        <div className="fg-head">
          <div className="eyebrow"><span className="line"/><span>Features</span></div>
          <h2 className="h-section" style={{marginTop: 18}}>Everything you'd expect.<br/><em>Nothing you don't.</em></h2>
        </div>
        <div className="fg-grid">
          {feats.map(f => (
            <div key={f.t} className="fg-card">
              <div className="fg-icon">{f.i}</div>
              <h3>{f.t}</h3>
              <p>{f.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ProductViz, FeatureGrid });