// ─── Punchy one-pager ────────────────────────────────────────────────────
// Ultra-tight, bold, scannable. Detail lives on Platform / BI / Integration pages.
const TWEAK_DEFAULTS = window.TWEAK_DEFAULTS;

// Bold hero — big claim, two CTAs.
function PunchyHero() {
  return (
    <section className="hero" id="top">
      <div className="hero-bg" style={{
        backgroundImage: "url('" + ((window.__resources && window.__resources.heroBg) || 'https://simple.space/wp-content/uploads/2015/11/49082342_illustration-Converted_Photo1_Workspaces_Bare.jpg') + "')"
      }} />
      <div className="hero-content">
        <div className="hero-left">
          <div className="eyebrow rise" style={{ animationDelay: '.3s' }}>
            <span className="line" /><span>Workplace Intelligence &amp; BI Reporting</span>
          </div>
          <h1 className="rise" style={{ marginTop: 22, animationDelay: '.5s' }}>
            <span className="hero-line-1">Where workplace meets</span>
            <em>business intelligence.</em>
          </h1>
          <p className="hero-tagline rise" style={{ animationDelay: '.62s' }}>Your workplace. Your data.</p>
          <p className="hero-sub rise" style={{ animationDelay: '.7s' }}>
            We start where it matters — and layer every data source your organisation
            holds to produce intelligence that directly affects the bottom line.
          </p>
          <div className="hero-actions rise" style={{ animationDelay: '.9s' }}>
            <a className="btn btn-orange" href="Platform.html#contact">Make an Enquiry</a>
            <a className="btn-ghost-on-dark" href="Platform.html">About the platform <span>→</span></a>
          </div>
        </div>
      </div>
      <a className="hero-scroll" href="#problem" aria-label="Scroll" onClick={(e) => { e.preventDefault(); document.getElementById('problem')?.scrollIntoView({ behavior: 'smooth' }); }}>
        <span/>
      </a>
    </section>
  );
}

// One bold statement. The problem, in a breath.
function PunchyProblem() {
  const chips = ['Sensors', 'Access logs', 'WiFi presence', 'HR / HRIS', 'Bookings', 'Leases', 'Travel', 'Energy', 'Surveys', 'Spreadsheets'];
  return (
    <section className="punch-problem" id="problem">
      <div className="wrap">
        <h2>Workplace data is everywhere.<br />Useful <em>insights</em> are not.</h2>
        <p className="ps-sub">
          A dozen systems, none that agree. We connect, validate and reconcile them
          into a single source of truth — so the number on the boardroom screen holds up.
        </p>
        <div className="punch-chips">{chips.map(c => <span key={c}>{c}</span>)}</div>
        <a className="lm" href="Integration.html">How integration works <span className="ar">→</span></a>
      </div>
    </section>
  );
}

// Condensed are / aren't.
function PunchyDiff() {
  const aint = ['A sensor company', 'A desk-booking app', 'A single-source dashboard'];
  const are = ['A multi-source intelligence layer', 'Reporting that follows the question', 'Business Intelligence delivered on time'];
  return (
    <section className="punch-diff" id="difference">
      <div className="pd-head">
        <h2>A sensor isn't an <em>insight.</em></h2>
        <p className="pd-sub">Sensors, Teams activity, Active Directory — data points that feed Business Intelligence.</p>
        <p className="pd-lead">No single feed tells the story. We merge every source into one model, so the pattern becomes a decision.</p>
      </div>
      <div className="pd-silos"><SilosGraphic /></div>
      <div className="pd-cols" style={{ marginTop: 56 }}>
        <div className="pd-col aint">
          <h4><span className="m">×</span> What we aren't</h4>
          <ul>{aint.map(t => <li key={t}>{t}</li>)}</ul>
        </div>
        <div className="pd-col are">
          <h4><span className="m">✓</span> What we are</h4>
          <ul>{are.map(t => <li key={t}>{t}</li>)}</ul>
        </div>
      </div>
      <div style={{ textAlign: 'center' }}>
        <a className="lm" href="Integration.html" style={{ marginTop: 34 }}>Why we built it this way <span className="ar">→</span></a>
      </div>
    </section>
  );
}

// Bold closing CTA band.
function PunchyCTA() {
  return (
    <section className="cta">
      <div className="cta-inner">
        <div className="eyebrow on-dark"><span className="line" /><span>Get Started</span></div>
        <h2 className="h-section">See your portfolio<br />as <em>one picture.</em></h2>
        <p className="lead">
          Get in touch — we'll show you a starting view built on the
          systems you already run.
        </p>
        <div className="cta-actions">
          <a href="Platform.html#contact" className="btn btn-orange">Make an Enquiry</a>
          <a href="mailto:info@simple.space" className="btn btn-ghost" style={{ color: '#fff', borderColor: 'rgba(255,255,255,0.18)' }}>Talk to our team</a>
        </div>
      </div>
    </section>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  React.useEffect(() => { document.body.dataset.logoFont = t.logoFont || 'mono'; }, [t.logoFont]);
  React.useEffect(() => { document.body.dataset.logoAccent = t.logoAccent || 'dot'; }, [t.logoAccent]);
  React.useEffect(() => { document.body.dataset.pageFont = t.pageFont || 'current'; }, [t.pageFont]);
  React.useEffect(() => { document.body.style.setProperty('--logo-scale', (t.logoSize || 100) / 100); }, [t.logoSize]);
  React.useEffect(() => { document.body.dataset.logoWeight = t.logoWeight || 'auto'; }, [t.logoWeight]);
  React.useEffect(() => { document.body.dataset.navHome = t.navHomeText ? 'show' : 'hide'; }, [t.navHomeText]);
  React.useEffect(() => { document.body.dataset.heroBg = t.heroBg || 'dim'; }, [t.heroBg]);
  React.useEffect(() => {
    document.body.dataset.ambient = t.ambient ? 'on' : 'off';
    document.body.style.setProperty('--amb-dur', (t.ambientDur || 160) + 's');
  }, [t.ambient, t.ambientDur]);

  return (
    <>
      <SiteNav/>
      <PunchyHero/>
      <PunchyProblem/>

      <div className="amb-host dark">
        <AmbientPie tone="light"/>
        <BIDemo/>
        <div className="lm-band"><a className="lm" href="BI-Reporting.html">Explore BI reporting <span className="ar">→</span></a></div>
      </div>

      <div className="amb-host cream">
        <AmbientSensors tone="dark"/>
        <Sources hubStyle={t.hubStyle || 'ring'}/>
      </div>

      <Clients/>
      <PunchyDiff/>
      <PunchyCTA/>
      <Foot/>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Ambient visuals"/>
        <TweakToggle label="Background motion"
                     value={t.ambient}
                     onChange={v => setTweak('ambient', v)}/>
        <TweakSlider label="Motion speed (slower →)" min={80} max={320} step={10} unit="s"
                     value={t.ambientDur}
                     onChange={v => setTweak('ambientDur', v)}/>
        <TweakSection label="Hub graphic"/>
        <TweakRadio label="Centre style"
                    value={t.hubStyle || 'ring'}
                    options={[
                      { value: 'ring',  label: 'Ring' },
                      { value: 'mark',  label: 'Logo' },
                      { value: 'orbit', label: 'Orbit' },
                    ]}
                    onChange={v => setTweak('hubStyle', v)}/>
        <TweakSection label="Hero"/>
        <TweakRadio label="Background"
                    value={t.heroBg}
                    options={[
                      { value: 'photo', label: 'Photo' },
                      { value: 'dim',   label: 'Dimmed' },
                      { value: 'solid', label: 'Solid' },
                    ]}
                    onChange={v => setTweak('heroBg', v)}/>
        <TweakSection label="Logo"/>
        <TweakSelect label="Wordmark font"
                     value={t.logoFont}
                     options={[
                       { value: 'manrope',       label: 'Manrope bold' },
                       { value: 'manrope-black', label: 'Manrope extra-bold' },
                       { value: 'manrope-light', label: 'Manrope light' },
                       { value: 'dm',            label: 'DM Sans' },
                       { value: 'mono',          label: 'JetBrains Mono' },
                       { value: 'mono-caps',     label: 'Mono spaced caps' },
                       { value: 'cormorant',     label: 'Cormorant Garamond italic' },
                       { value: 'fraunces-italic',   label: 'Fraunces italic' },
                       { value: 'fraunces-semibold', label: 'Fraunces semibold' },
                       { value: 'fraunces-black',    label: 'Fraunces black' },
                       { value: 'archivo',           label: 'Archivo bold' },
                     ]}
                     onChange={v => setTweak('logoFont', v)}/>
        <TweakSlider label="Logo size" min={70} max={160} step={5} unit="%"
                     value={t.logoSize || 100}
                     onChange={v => setTweak('logoSize', v)}/>
        <TweakSelect label="Logo weight"
                     value={t.logoWeight || 'auto'}
                     options={[
                       { value: 'auto', label: 'Font default' },
                       { value: '300', label: 'Light (300)' },
                       { value: '400', label: 'Regular (400)' },
                       { value: '500', label: 'Medium (500)' },
                       { value: '600', label: 'Semibold (600)' },
                       { value: '700', label: 'Bold (700)' },
                       { value: '800', label: 'Extra bold (800)' },
                     ]}
                     onChange={v => setTweak('logoWeight', v)}/>
        <TweakToggle label="SIMPLE.SPACE home link" value={!!t.navHomeText}
          onChange={v => setTweak('navHomeText', v)}/>
        <TweakRadio label="Orange accent"
                    value={t.logoAccent || 'dot'}
                    options={[
                      { value: 'dot',   label: 'Dot only' },
                      { value: 'space', label: '.space' },
                    ]}
                    onChange={v => setTweak('logoAccent', v)}/>
        <TweakSection label="Page fonts"/>
        <TweakSelect label="Font system"
                     value={t.pageFont || 'current'}
                     options={[
                       { value: 'current',   label: 'Manrope + DM Sans + JetBrains' },
                       { value: 'editorial', label: 'Fraunces + Public Sans + Plex Mono' },
                       { value: 'archivo',   label: 'Archivo + Public Sans + Plex Mono' },
                     ]}
                     onChange={v => setTweak('pageFont', v)}/>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);