// Customers page

function CustomersPage() {
  useReveal();
  const customers = [
    {
      name: 'Björk & Hagel', sub: 'Stockholm · 2★ Michelin',
      hero: 'We took a hundred and forty minutes off our Saturday turn time.',
      body: 'Maître Magnus Forsberg led the migration from a stack of seven tools to one. The pacing engine handled the most disruptive change without a single guest noticing.',
      stats: [['−18%','time per cover'],['+12.4%','margin / cover'],['9 months','since switch']],
      year: '2024',
    },
    {
      name: 'Nocturne', sub: 'Malmö · 1★ Michelin',
      hero: 'The pacing chime is quieter than my old kitchen printer.',
      body: 'Head Chef Sara Wallén integrated Bord into a kitchen that had resisted three previous tools. The team adopted it in six days. The flag system at the pass replaced four hand-written boards.',
      stats: [['6 days','to full adoption'],['−15 min','avg ticket time'],['0','allergen incidents']],
      year: '2025',
    },
    {
      name: 'Salt & Ember', sub: 'Göteborg',
      hero: 'I expected to argue with the AI. I haven\'t, once.',
      body: 'Owner Henrik Lundgren turned on Mise\'s DRAFT tier in week two and never turned it off. The team\'s reply time on guest emails dropped from 14 hours to 41 minutes — most of that latency is now the owner reading drafts on the tram.',
      stats: [['41 min','avg reply time'],['+3.2%','direct bookings'],['18 months','running']],
      year: '2024',
    },
    {
      name: 'Fyra Vindar', sub: 'Copenhagen · 2★ Michelin',
      hero: 'Margin is no longer a quarterly conversation.',
      body: 'Sommelier Annika Bjørndal built a wine program that pays for the room. The list rebalanced twice in six months — both times against a live margin model the team trusted.',
      stats: [['+6.8 pts','wine GP'],['2','rebalances'],['1 year','since switch']],
      year: '2025',
    },
    {
      name: 'Råmtida', sub: 'Uppsala · 1★ Michelin',
      hero: 'Our books match. They have never matched.',
      body: 'Owner-Chef Lars Granström: "We used to close a Sunday and not know within ten thousand kronor what we did. Now I see the number on my phone before I leave the building."',
      stats: [['100%','ledger close'],['Daily','vs monthly']],
      year: '2025',
    },
  ];

  return (
    <div className="site">
      <PublicNav current="customers"/>
      <main>
        <section style={{ paddingTop:80, paddingBottom:64, position:'relative' }}>
          <div className="hero-grad"/>
          <div className="wrap" style={{ position:'relative' }}>
            <Eyebrow>Customers</Eyebrow>
            <h1 className="display display-xl" style={{ marginTop:24, maxWidth:900 }}>
              The houses<br/>
              <em className="display-italic ink-gold">we work for</em>.
            </h1>
            <p className="lede" style={{ marginTop:32, maxWidth:560 }}>
              Bord runs in fifty-eight restaurants across the Nordics. Eleven hold a star.
              The rest are independent rooms with seventy seats and an opinion. We work for both.
            </p>
            <div style={{ marginTop:48 }}>
              <ProofBar items={[
                {value:'58', label:'restaurants'},
                {value:'11', label:'starred'},
                {value:'4', label:'countries'},
                {value:'1.4M', label:'covers / yr'},
                {value:'99.94%', label:'uptime · 12mo'},
              ]}/>
            </div>
          </div>
        </section>

        <section className="section">
          <div className="wrap">
            <div style={{ display:'flex', justifyContent:'center', marginBottom:48 }}>
              <LogoStrip large/>
            </div>
            <hr className="rule"/>
          </div>
        </section>

        {/* Cases */}
        {customers.map((c,i) => (
          <section key={c.name} className={i%2===0 ? 'section' : 'section'} style={{ borderTop: i ? '1px solid var(--site-hair)' : 'none' }}>
            <div className="wrap">
              <div style={{ display:'grid', gridTemplateColumns: i%2===0 ? '1fr 1.4fr' : '1.4fr 1fr', gap:80, alignItems:'center' }}>
                {i%2===0 ? (
                  <>
                    <CustomerSide c={c}/>
                    <CustomerCase c={c}/>
                  </>
                ) : (
                  <>
                    <CustomerCase c={c}/>
                    <CustomerSide c={c}/>
                  </>
                )}
              </div>
            </div>
          </section>
        ))}

        <section className="section" style={{ borderTop:'1px solid var(--site-hair)' }}>
          <div className="wrap">
            <SectionHead align="center" eyebrow="In their words" title="More from the floor."/>
            <div style={{ display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:0, border:'1px solid var(--site-hair)' }}>
              {[
                ['It changed the morning briefing from a meeting to a piece of paper.','Ingeborg Lindström','GM, Ateljé Nord'],
                ['I trust the GP number now. That sentence took two years.','Lars Granström','Chef-Owner, Råmtida'],
                ['Mise wrote my last forty supplier replies. Better than I would.','Henrik Lundgren','Owner, Salt & Ember'],
                ['It seats my room better than I do, and that\'s embarrassing.','Magnus Forsberg','Maître, Björk & Hagel'],
                ['The kitchen tablet doesn\'t need a tablet stand for the noise anymore.','Sara Wallén','Chef, Nocturne'],
                ['Our book is a book again. Not a spreadsheet.','Annika Bjørndal','Sommelier, Fyra Vindar'],
              ].map((q,i)=>(
                <div key={i} style={{ padding:32, borderRight:(i+1)%3 ? '1px solid var(--site-hair)' : 'none', borderBottom: i<3 ? '1px solid var(--site-hair)' : 'none' }}>
                  <p className="display display-sm" style={{ fontStyle:'italic', fontWeight:400, marginBottom:18 }}>"{q[0]}"</p>
                  <div style={{ fontSize:12, fontWeight:600, color:'var(--site-ink)' }}>{q[1]}</div>
                  <div style={{ fontSize:11, color:'var(--site-ink-dim)', textTransform:'uppercase', letterSpacing:'0.1em', fontWeight:600, marginTop:2 }}>{q[2]}</div>
                </div>
              ))}
            </div>
          </div>
        </section>

        <CtaBlock
          eyebrow="Talk to one of them"
          title={<>We'll <em className="display-italic ink-gold">introduce you</em>.</>}
          sub="If you'd like to speak with a chef or owner running Bord today, we'll set it up. We don't pay for references and they don't owe us a thing."
        />
      </main>
      <PublicFooter/>
    </div>
  );
}

function CustomerSide({ c }) {
  return (
    <div>
      <div style={{ fontSize:12, fontWeight:600, color:'var(--site-gold)', letterSpacing:'0.16em', textTransform:'uppercase' }}>{c.year} · case {c.name}</div>
      <div className="display display-md" style={{ marginTop:14, fontWeight:500 }}>{c.name}</div>
      <div style={{ fontSize:12, color:'var(--site-ink-dim)', textTransform:'uppercase', letterSpacing:'0.14em', fontWeight:600, marginTop:6 }}>{c.sub}</div>
      <div style={{ marginTop:28, display:'flex', flexDirection:'column' }}>
        {c.stats.map((s,i)=>(
          <div key={i} style={{ display:'flex', alignItems:'baseline', gap:14, padding:'14px 0', borderTop:'1px solid var(--site-hair)' }}>
            <span className="display" style={{ fontSize:32, lineHeight:1, color:'var(--site-ink)', minWidth:120 }}>{s[0]}</span>
            <span style={{ fontSize:12, fontWeight:600, color:'var(--site-ink-dim)', textTransform:'uppercase', letterSpacing:'0.1em' }}>{s[1]}</span>
          </div>
        ))}
        <div style={{ borderBottom:'1px solid var(--site-hair)' }}/>
      </div>
    </div>
  );
}

function CustomerCase({ c }) {
  return (
    <div className="reveal" style={{ borderLeft:'1px solid var(--site-hair)', paddingLeft:48 }}>
      <p className="pullquote" style={{ marginBottom:32 }}>{c.hero}</p>
      <p className="copy" style={{ fontSize:14.5 }}>{c.body}</p>
      <a href="#" className="btn-link" style={{ marginTop:24, display:'inline-block' }}>Read the full case</a>
    </div>
  );
}

window.CustomersPage = CustomersPage;