// Reservations product page

function ProductReservationsPage() {
  useReveal();
  return (
    <div className="site">
      <PublicNav current="product"/>
      <main>
        {/* Hero */}
        <section style={{ position:'relative', overflow:'hidden', paddingTop:64, paddingBottom:80 }}>
          <div className="hero-grad"/>
          <div className="wrap" style={{ position:'relative' }}>
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:64, alignItems:'end', marginBottom:56 }}>
              <div>
                <Eyebrow>Product · Movement I</Eyebrow>
                <h1 className="display display-xl" style={{ marginTop:24 }}>
                  A book that<br/>
                  <em className="display-italic ink-gold">remembers</em>.
                </h1>
              </div>
              <p className="lede" style={{ maxWidth:440 }}>
                Reservations carry every name your hosts already know — preferences, allergies,
                last-visit notes, the table by the window. Pacing offered, never enforced.
                A waitlist that talks back, in the language of your guests.
              </p>
            </div>
            <div className="reveal">
              <ProductShot path="bord.app / reservations · sat 25 apr">
                <div style={{ height:560 }}>
                  <ReservationsHeroShot/>
                </div>
              </ProductShot>
            </div>
          </div>
        </section>

        {/* Feature list */}
        <section className="section">
          <div className="wrap wrap-narrow">
            <SectionHead align="center"
              eyebrow="What's in the book"
              title="Built for restaurants where every seat carries a name."
            />
            <div>
              {[
                ['I',   'Guest profile at the host stand', 'Last visit, dietary, table preferences, allergens, who they came with. Visible the second their booking lights up. Servers see only what they need.'],
                ['II',  'Pacing without panic',            'Bord suggests when to seat the next four-top so the kitchen breathes. The host decides. The system never overrides.'],
                ['III', 'WhatsApp, email, web — one inbox','Replies are drafted by Mise in your house voice. You read, edit, send. Templates remember your phrasing for next time.'],
                ['IV',  'Waitlist with names, not numbers','Walk-ins keep their place even when the room turns over. We text them when their table is ten minutes out, in their language.'],
                ['V',   'Dietary intelligence',            'Ten allergen taxonomies cross-checked against tonight\'s menu. Conflicts surface at booking time, not at the pass.'],
                ['VI',  'Source attribution',              'Direct, web, Concierge, OpenTable, walk-in. Cost-per-cover by source, in the dashboard you already have open.'],
                ['VII', 'Holds & deposits',                'Tasting menus held with a card on file. Stripe Radar checks. Deposits returned automatically on a cancel under your policy.'],
                ['VIII','GDPR-native',                     'Guests can request export or deletion in two clicks. Audit log, retention policy, lawful basis — written down where the auditor expects it.'],
              ].map(([ix, t, b]) => (
                <div className="feature" key={ix}>
                  <div className="feature-ix">{ix}</div>
                  <div>
                    <h3 className="display display-sm" style={{ fontWeight:500, marginBottom:6 }}>{t}</h3>
                    <p className="copy">{b}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* Detail shot — guest profile drawer */}
        <section className="section" style={{ borderTop:'1px solid var(--site-hair)' }}>
          <div className="wrap">
            <div style={{ display:'grid', gridTemplateColumns:'1fr 1.4fr', gap:80, alignItems:'center' }}>
              <div>
                <Eyebrow>Guest detail</Eyebrow>
                <h2 className="display display-lg" style={{ marginTop:24 }}>
                  Hospitality<br/>
                  <em className="display-italic">is recognition.</em>
                </h2>
                <p className="copy" style={{ marginTop:24 }}>
                  Open any guest. See their nine visits, their seventy-eight thousand kronor across them,
                  the bottle they liked, the corner they didn't. The note your maître d' wrote three years ago.
                  All searchable, all exportable, all theirs to delete.
                </p>
                <ul style={{ listStyle:'none', padding:0, margin:'28px 0 0', display:'flex', flexDirection:'column', gap:12 }}>
                  {['Visit history with spend curve','Notes timeline (chef, server, host)','Preferred tables and times','Pairing memory','Last-message context'].map(x => (
                    <li key={x} style={{ display:'flex', alignItems:'center', gap:12, fontSize:13.5, color:'var(--site-ink-mute)' }}>
                      <span style={{ width:5, height:5, background:'var(--site-gold)', transform:'rotate(45deg)' }}/>
                      {x}
                    </li>
                  ))}
                </ul>
              </div>
              <ProductShot path="bord.app / guest · andersson · linnea">
                <div style={{ height:520 }}><GuestDetailShot/></div>
              </ProductShot>
            </div>
          </div>
        </section>

        <CtaBlock
          eyebrow="See your book in Bord"
          title={<>Bring us <em className="display-italic ink-gold">your last 90 days</em>.</>}
          sub="In a 30-minute call, we import your booking history and show you what's been hiding — the names you should remember, the dishes that pay for the room, the tables that turn quietest."
        />
      </main>
      <PublicFooter/>
    </div>
  );
}

function ReservationsHeroShot() {
  return (
    <ShotApp active="reservations" title="Reservations" subtitle="Sat · 25 Apr" crumbs={['Bord','Service','Reservations']} compactSidebar
      actions={<><Button size="sm" variant="ghost" icon={<Icon.download size={12}/>}>Export</Button><Button size="sm" variant="primary" icon={<Icon.plus size={12}/>}>New booking</Button></>}>
      <div style={{ display:'flex', gap:12, height:'100%' }}>
        <div style={{ flex:1.5, minWidth:0, display:'flex', flexDirection:'column' }}>
          <div style={{ display:'flex', alignItems:'center', gap:8, marginBottom:10 }}>
            <Input size="sm" icon={<Icon.search size={11}/>} placeholder="Search guest…" value="" onChange={()=>{}} style={{ flex:1, maxWidth:200 }}/>
            <ToggleGroup size="sm" options={[{value:'all',label:'All'},{value:'vip',label:'VIP'},{value:'allergy',label:'Allergies'},{value:'pending',label:'Pending'}]} value="all" onChange={()=>{}}/>
          </div>
          <DataTable compact
            columns={[
              { key:'time', label:'Time', width:'52px', render:r=><span className="num" style={{ fontWeight:600 }}>{r.time}</span> },
              { key:'p', label:'#', width:'24px', align:'center', render:r=><span className="num">{r.p}</span> },
              { key:'name', label:'Guest', render:r => (
                <div style={{ display:'flex', alignItems:'center', gap:8, minWidth:0 }}>
                  <Avatar name={r.name} vip={r.vip} size={22}/>
                  <div style={{ minWidth:0 }}>
                    <div style={{ fontSize:11.5, fontWeight:500, whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' }}>{r.name}</div>
                    {r.diet?.length > 0 && <div style={{ fontSize:10, color:'var(--critical)' }}>{r.diet.join(', ')}</div>}
                  </div>
                </div>)},
              { key:'src', label:'Source', width:'68px', render:r => <span style={{ fontSize:10.5, color:'var(--text-tertiary)' }}>{r.src}</span> },
              { key:'st', label:'Status', width:'82px', render:r => <Badge variant={r.stv} size="sm">{r.st}</Badge> },
              { key:'tier', label:'Tier', width:'48px', render:r => r.vip ? <Badge variant="gold" size="sm">{r.vip}</Badge> : <span style={{ color:'var(--text-tertiary)' }}>—</span> },
            ]}
            rows={[
              { id:1, time:'18:00', p:2, name:'Anja Dörner', vip:'VIP', diet:[], src:'Direct', st:'Confirmed', stv:'success' },
              { id:2, time:'18:30', p:4, name:'Sandra Björkqvist-Rosén', vip:null, diet:['nut','shell'], src:'Web', st:'Confirmed', stv:'success' },
              { id:3, time:'19:00', p:8, name:'Chen Wen-Hsiu', vip:'VVIP', diet:[], src:'Concierge', st:'Pending', stv:'warning' },
              { id:4, time:'19:30', p:2, name:'Andersson · Linnea', vip:'VIP', diet:['gluten'], src:'Web', st:'Confirmed', stv:'success' },
              { id:5, time:'20:00', p:6, name:'Karim El Hassan', vip:null, diet:[], src:'Direct', st:'Confirmed', stv:'success' },
              { id:6, time:'20:30', p:2, name:'Elin Kvarnström', vip:null, diet:['vegan'], src:'Direct', st:'Confirmed', stv:'success' },
              { id:7, time:'21:00', p:4, name:'Lucía García', vip:null, diet:[], src:'Web', st:'Cancelled', stv:'neutral' },
              { id:8, time:'21:30', p:2, name:'Magnus Holm', vip:null, diet:[], src:'Direct', st:'Confirmed', stv:'success' },
            ]}
            getKey={r=>r.id} selectedKey={4}
          />
        </div>
        <aside style={{ width:280, flexShrink:0, padding:14, background:'var(--bg-secondary)', border:'1px solid var(--border-subtle)', borderRadius:6, overflow:'hidden' }}>
          <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14 }}>
            <Avatar name="Andersson Linnea" vip="VIP" size={36}/>
            <div style={{ flex:1, minWidth:0 }}>
              <div style={{ fontSize:13, fontWeight:700, display:'flex', alignItems:'center', gap:4 }}><Icon.star size={11} color="var(--accent-gold)"/> Andersson · Linnea</div>
              <div style={{ fontSize:11, color:'var(--text-tertiary)' }}>VIP · 9 visits · 78 200 kr</div>
            </div>
          </div>
          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
            <KeyValue k="Tonight" v="2 guests · 19:30" size="sm"/>
            <KeyValue k="Allergens" v={<span style={{ color:'var(--critical)' }}>gluten</span>} size="sm"/>
            <KeyValue k="Preferred" v="Window · T7" size="sm"/>
            <KeyValue k="Last visit" v="14 Mar 2026" size="sm"/>
            <KeyValue k="Pairing" v="Off-dry Riesling" size="sm"/>
          </div>
          <div style={{ marginTop:12, padding:'10px 12px', background:'var(--bg-elevated)', border:'1px dashed var(--border-default)', borderRadius:4 }}>
            <div style={{ fontSize:10, color:'var(--text-tertiary)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600, marginBottom:4 }}>Note · 14 Mar</div>
            <div style={{ fontSize:11.5, color:'var(--text-primary)', fontFamily:'var(--font-display)', fontStyle:'italic', lineHeight:1.4 }}>"Came with father — birthday. Loved the cèpe ravioli. Send a card."</div>
          </div>
        </aside>
      </div>
    </ShotApp>
  );
}

function GuestDetailShot() {
  return (
    <ShotApp active="reservations" title="Andersson · Linnea" subtitle="9 visits · 78 200 kr" crumbs={['Bord','Guests','Andersson Linnea']} compactSidebar
      actions={<><Button size="sm" variant="ghost" icon={<Icon.envelope size={12}/>}>Message</Button><Button size="sm" variant="primary" icon={<Icon.plus size={12}/>}>Book again</Button></>}>
      <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:12, height:'100%' }}>
        <Card padded>
          <SectionHeader size="sm" title="Visit history" subtitle="9 visits · 14 months"/>
          <div style={{ display:'flex', flexDirection:'column', gap:6, marginTop:6 }}>
            {[
              ['14 Mar 2026','2','Cèpe ravioli','3 240 kr'],
              ['08 Feb 2026','4','Reindeer','5 880 kr'],
              ['22 Dec 2025','6','Tasting menu','12 600 kr'],
              ['11 Oct 2025','2','Halibut','3 120 kr'],
              ['30 Aug 2025','3','Char','4 500 kr'],
              ['18 Jun 2025','2','Beetroot','2 980 kr'],
            ].map((r,i) => (
              <div key={i} style={{ display:'flex', alignItems:'center', gap:8, padding:'7px 0', borderBottom:'1px solid var(--border-subtle)', fontSize:11.5 }}>
                <span style={{ minWidth:84, color:'var(--text-secondary)' }}>{r[0]}</span>
                <span className="num" style={{ minWidth:18, color:'var(--text-tertiary)' }}>{r[1]}</span>
                <span style={{ flex:1, color:'var(--text-primary)', fontStyle:'italic', fontFamily:'var(--font-display)' }}>{r[2]}</span>
                <span className="num" style={{ color:'var(--accent-gold)', fontWeight:600 }}>{r[3]}</span>
              </div>
            ))}
          </div>
          <div style={{ marginTop:14, padding:14, background:'var(--bg-elevated)', borderRadius:6 }}>
            <div style={{ fontSize:10, color:'var(--text-tertiary)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600, marginBottom:6 }}>Spend curve</div>
            <Sparkline data={[28, 32, 35, 42, 48, 51, 58, 64, 78]} width={300} height={40} tone="gold"/>
          </div>
        </Card>
        <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
          <Card padded>
            <SectionHeader size="sm" title="Profile"/>
            <div style={{ display:'flex', flexDirection:'column', gap:4 }}>
              <KeyValue k="VIP tier" v={<Badge variant="gold" size="sm">VIP</Badge>} size="sm"/>
              <KeyValue k="Allergens" v={<span style={{ color:'var(--critical)' }}>gluten</span>} size="sm"/>
              <KeyValue k="Preferred table" v="T7 · window" size="sm"/>
              <KeyValue k="Pairing" v="Off-dry Riesling" size="sm"/>
              <KeyValue k="No-show rate" v="0%" size="sm"/>
              <KeyValue k="Source mix" v="Direct 67% · Web 33%" size="sm"/>
            </div>
          </Card>
          <Card padded style={{ flex:1 }}>
            <SectionHeader size="sm" title="Notes"/>
            {[
              ['14 Mar','Maître','Came with father — birthday. Loved the cèpe ravioli.'],
              ['08 Feb','Sommelier','Asked for the 2018 Riesling again.'],
              ['22 Dec','Chef','Allergic to gluten — no breadcrumbs in the staff meal either.'],
            ].map((n,i) => (
              <div key={i} style={{ marginTop:i?12:6, paddingBottom:i<2?12:0, borderBottom:i<2?'1px solid var(--border-subtle)':'none' }}>
                <div style={{ fontSize:10, color:'var(--text-tertiary)', textTransform:'uppercase', letterSpacing:'0.06em', fontWeight:600, marginBottom:4 }}>{n[0]} · {n[1]}</div>
                <div style={{ fontSize:11.5, fontStyle:'italic', fontFamily:'var(--font-display)', color:'var(--text-primary)', lineHeight:1.4 }}>"{n[2]}"</div>
              </div>
            ))}
          </Card>
        </div>
      </div>
    </ShotApp>
  );
}

window.ProductReservationsPage = ProductReservationsPage;