// scene_features.jsx — surface key platform features beyond the core flow
// Window: slots between commissioning and report, using existing time budget.
// Designed to fit 10s at 60s-70s if caller reallocates.

function SceneFeatures({ start = 56, end = 66 }) {
  return (
    <Sprite start={start} end={end}>
      {({ localTime, duration }) => {
        const entryP = clamp(localTime / 0.6, 0, 1);
        const exitP = clamp((localTime - 9.0) / 1.0, 0, 1);

        const features = [
          { t: 0.4, tag: '01', title: 'Excel Import',      body: 'Drop a spreadsheet — folders, modules, devices, IPs, connections auto-wire.', meta: 'project scaffolds in seconds' },
          { t: 0.9, tag: '02', title: 'Smart Checklists',  body: 'Per-device-type lists. Rollup: item → device → module → project.',           meta: 'real-time progress' },
          { t: 1.4, tag: '03', title: 'Connection Viz',    body: 'Map every data link, downstream, and power feed. Drag, filter, trace.',      meta: 'data · power · downstream' },
          { t: 1.9, tag: '04', title: 'Device Builder',    body: 'Custom device types — icon, SVG, checklist, network fields, rules.',          meta: 'unlimited custom types' },
          { t: 2.4, tag: '05', title: 'Dashboard',         body: 'Project management tools and oversight in one place.',                        meta: 'project management' },
          { t: 2.9, tag: '06', title: 'Mobile Field Access', body: 'Update status, check items, add notes from any device in the field.',       meta: 'offline-first · auto-sync' },
        ];

        return (
          <>
            <HeaderStrip step="—" title="PLATFORM FEATURES" op={1 - exitP}/>

            <div style={{
              position: 'absolute', left: 120, top: 180,
              opacity: entryP * (1 - exitP),
              maxWidth: 800,
            }}>
              <div style={{ fontFamily: FONT_MONO, fontSize: 11, letterSpacing: '0.18em', color: PALETTE.ink60, marginBottom: 14 }}>
                BEYOND THE CORE FLOW
              </div>
              <div style={{ fontFamily: FONT_TITLE, fontWeight: 900, fontSize: 72, color: PALETTE.ink, lineHeight: 0.92, letterSpacing: '-0.01em', textTransform: 'uppercase' }}>
                One platform.<br/>Every workflow.
              </div>
            </div>

            <div style={{
              position: 'absolute',
              left: 120, top: 500,
              right: 120,
              display: 'grid',
              gridTemplateColumns: 'repeat(3, 1fr)',
              gap: 24,
              opacity: (1 - exitP),
            }}>
              {features.map(f => {
                const op = clamp((localTime - f.t) / 0.5, 0, 1);
                return (
                  <div key={f.tag} style={{
                    opacity: op,
                    transform: `translateY(${(1 - op) * 14}px)`,
                    borderTop: `1.5px solid ${PALETTE.ink}`,
                    paddingTop: 18,
                  }}>
                    <div style={{ display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 10 }}>
                      <div style={{ fontFamily: FONT_MONO, fontSize: 11, color: PALETTE.ink60, letterSpacing: '0.12em' }}>
                        {f.tag}
                      </div>
                      <div style={{ fontFamily: FONT_TITLE, fontWeight: 900, fontSize: 28, color: PALETTE.ink, letterSpacing: '-0.01em' }}>
                        {f.title}
                      </div>
                    </div>
                    <div style={{ fontFamily: FONT_BODY, fontSize: 15, color: PALETTE.ink80, lineHeight: 1.4, marginBottom: 10 }}>
                      {f.body}
                    </div>
                    <div style={{ fontFamily: FONT_MONO, fontSize: 11, color: PALETTE.brandBlue, letterSpacing: '0.08em' }}>
                      {f.meta}
                    </div>
                  </div>
                );
              })}
            </div>
          </>
        );
      }}
    </Sprite>
  );
}

Object.assign(window, { SceneFeatures });