/* More pages: Gift cards, Menu, Comms, Settings */
const { useState: p2S } = React;

// Seed data for gift card products and menu items (kept in state so we can CRUD)
const SEED_GIFTS = [
  { name: 'Smagsmenu for 2', amount: 1800, desc: '5-retters menu inkl. ledsageglas', img: 'tasting' },
  { name: 'À la carte 1000 kr', amount: 1000, desc: 'Beløb til fri afbenyttelse', img: 'cash' },
  { name: 'Brunch for 2', amount: 600, desc: 'Søndagsbrunch fra 11 til 14', img: 'brunch' },
  { name: 'Vinaften', amount: 2400, desc: 'Vinmenu med sommelier · 4 timer', img: 'wine' },
  { name: 'Frit beløb', amount: null, desc: 'Køber vælger selv beløbet', img: 'free' },
];
const SEED_ISSUED = [
  { code: 'HJ-4F2A', buyer: 'Peter Sommer',    recipient: 'Anna Sommer', amount: 1800, remaining: 1800, status: 'aktivt',         expires: '24/05/2027' },
  { code: 'HJ-9B17', buyer: 'Jens Holmer',     recipient: 'Selv',        amount: 1000, remaining: 540,  status: 'delvis indløst', expires: '12/03/2027' },
  { code: 'HJ-2D88', buyer: 'Caroline Lund',   recipient: 'Mor',          amount: 600,  remaining: 0,    status: 'indløst',         expires: '08/04/2026' },
  { code: 'HJ-7E14', buyer: 'Bjarke Damgaard', recipient: 'Karl',         amount: 2400, remaining: 2400, status: 'aktivt',         expires: '18/05/2027' },
  { code: 'HJ-1A09', buyer: 'Karen Strøm',     recipient: 'Selv',         amount: 500,  remaining: 500,  status: 'aktivt',         expires: '03/06/2027' },
];

const SEED_EXP = [
  { name: 'À la carte aften',          desc: 'Standard aften-service · 18-22',          price: 'Fri',             dur: '105m', tag: 'Standard', active: true, covers: 142, items: [] },
  { name: 'Smagsmenu (5 retter)',      desc: 'Sæsonens 5 retter · 18-21',               price: '850 kr / pers',    dur: '150m', tag: 'Tasting',  active: true, covers: 38,  items: ['Tatar af oksefilet','Friske østers (6 stk)','Pighvar med jordskokker','Hjorteryg, sortrod, brombær','Citronfromage, mynte'] },
  { name: 'Vinmenu m. ledsageglas',    desc: '5 retter + 5 glas vin · 18-22',           price: '1.450 kr / pers',  dur: '180m', tag: 'Tasting',  active: true, covers: 24, items: ['Tatar af oksefilet','Pighvar med jordskokker','Hjorteryg, sortrod, brombær','Ostebord, 4 slags','Citronfromage, mynte'] },
  { name: 'Søndagsbrunch',             desc: 'Familievenlig brunch · 11-14',            price: '275 kr / pers',    dur: '90m',  tag: 'Brunch',   active: true, covers: 56, items: [] },
  { name: 'Firma-arrangement',         desc: 'Min. 8 pers · faktura · kan tilpasses',   price: 'Fra 650 kr / pers',dur: '180m', tag: 'Privat',   active: false, covers: 12, items: [] },
  { name: 'Chef\u2019s table',         desc: 'Spisning ved køkkenet · 4 pers max',       price: '1.800 kr / pers',  dur: '210m', tag: 'Tasting',  active: true, covers: 8,  items: ['Tatar af oksefilet','Friske østers (6 stk)','Hjorteryg, sortrod, brombær','Ostebord, 4 slags'] },
];
const SEED_ITEMS = [
  { name: 'Tatar af oksefilet', price: 165 },
  { name: 'Friske østers (6 stk)', price: 220 },
  { name: 'Pighvar med jordskokker', price: 295 },
  { name: 'Hjorteryg, sortrod, brombær', price: 325 },
  { name: 'Stegt and med æbler', price: 285 },
  { name: 'Citronfromage, mynte', price: 95 },
  { name: 'Ostebord, 4 slags', price: 145 },
  { name: 'Børnemenu (3-12 år)', price: 145 },
];
const SEED_SUPP = [
  { n: 'Welcome bobler (glas)', p: 95,  sold: 142 },
  { n: 'Ostebord',              p: 145, sold: 38  },
  { n: 'Vinpakke 2',            p: 425, sold: 24  },
  { n: 'Dessertvin',            p: 85,  sold: 67  },
  { n: 'Specialkaffe',          p: 45,  sold: 89  },
  { n: 'Blomster ved bordet',   p: 175, sold: 14  },
];

// ============= GIFT CARDS =============
function GiftPage() {
  const [tab, setTab] = p2S('products');
  const [products, setProducts] = p2S(SEED_GIFTS);
  const [issued, setIssued] = p2S(SEED_ISSUED);
  const [editing, setEditing] = p2S(null);     // { idx, data } or { idx: -1, data: null } for new
  const [saleOpen, setSaleOpen] = p2S(false);

  return (
    <div className="page-scroll">
      <div className="page-hero">
        <div className="page-hero-eyebrow">Gavekort · {issued.filter(i => i.status === 'aktivt').length} aktive · {issued.reduce((a, i) => a + i.remaining, 0).toLocaleString('da-DK')} kr ude</div>
        <h1 className="page-hero-title">GAVEKORT</h1>
        <p className="page-hero-sub">Sælg gavekort online — de havner direkte hos modtageren via email, og er klar til indløsning samme dag.</p>
        <div style={{display: 'flex', gap: 8, marginTop: 16}}>
          <button className="btn btn-accent" onClick={() => setSaleOpen(true)}><Icon name="bolt" size={14}/> Sælg gavekort</button>
          <button className="btn btn-soft" onClick={() => setEditing({ idx: -1, data: null })}><Icon name="plus" size={14}/> Nyt produkt</button>
        </div>
      </div>

      <div style={{padding: '0 28px 28px'}}>
        <div className="subbar-segs" style={{marginBottom: 14, width: 'fit-content'}}>
          <button className={tab === 'products' ? 'active' : ''} onClick={() => setTab('products')}>Produkter ({products.length})</button>
          <button className={tab === 'issued' ? 'active' : ''} onClick={() => setTab('issued')}>Udstedte ({issued.length})</button>
          <button className={tab === 'settings' ? 'active' : ''} onClick={() => setTab('settings')}>Indstillinger</button>
        </div>

        {tab === 'products' && (
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14}}>
            {products.map((p, idx) => (
              <div key={idx} className="gift-card-product">
                <div className="gift-cover">
                  <div className="gift-monogram">HJEM</div>
                  <div style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 14, letterSpacing: '0.08em'}}>GAVEKORT</div>
                  <div style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 32, letterSpacing: '-0.02em', marginTop: 8}}>
                    {p.amount === null ? '— kr' : `${p.amount} kr`}
                  </div>
                </div>
                <div style={{padding: 14}}>
                  <div style={{fontWeight: 700, marginBottom: 4}}>{p.name}</div>
                  <div style={{fontSize: 12, color: 'var(--muted)'}}>{p.desc}</div>
                  <div style={{display: 'flex', gap: 6, marginTop: 12}}>
                    <button className="btn btn-soft" style={{flex: 1, justifyContent: 'center', fontSize: 12}}
                      onClick={() => setEditing({ idx, data: p })}>
                      <Icon name="edit" size={12}/> Rediger
                    </button>
                    <button className="btn btn-accent" style={{fontSize: 12}}
                      onClick={() => setSaleOpen(true)}>
                      <Icon name="bolt" size={12}/> Sælg
                    </button>
                  </div>
                </div>
              </div>
            ))}
            <button className="gift-card-product"
              onClick={() => setEditing({ idx: -1, data: null })}
              style={{display: 'flex', alignItems: 'center', justifyContent: 'center', border: '2px dashed var(--line-strong)', background: 'transparent', minHeight: 220, color: 'var(--muted)', cursor: 'pointer'}}>
              <span style={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6}}>
                <Icon name="plus" size={20}/> Nyt gavekort
              </span>
            </button>
          </div>
        )}

        {tab === 'issued' && (
          <div style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12}}>
            <table className="list-table">
              <thead><tr><th>Kode</th><th>Købt af</th><th>Modtager</th><th>Beløb</th><th>Tilbage</th><th>Status</th><th>Udløber</th><th></th></tr></thead>
              <tbody>
                {issued.map(r => (
                  <tr key={r.code}>
                    <td style={{fontFamily: 'var(--mono)', fontWeight: 700}}>{r.code}</td>
                    <td>{r.buyer}</td>
                    <td>{r.recipient}</td>
                    <td style={{fontVariantNumeric: 'tabular-nums', fontWeight: 600}}>{r.amount.toLocaleString('da-DK')} kr</td>
                    <td style={{fontVariantNumeric: 'tabular-nums', color: r.remaining === 0 ? 'var(--muted)' : 'var(--ink)'}}>{r.remaining.toLocaleString('da-DK')} kr</td>
                    <td><span className={`status-chip ${r.status === 'aktivt' ? 'confirmed' : r.status === 'indløst' ? 'finished' : 'arriving'}`}>{r.status}</span></td>
                    <td style={{color: 'var(--muted)'}}>{r.expires}</td>
                    <td><button className="btn-icon"><Icon name="mail" size={14}/></button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}

        {tab === 'settings' && <SettingsList items={[
          { t: 'Salgskanaler', d: 'Vælg hvor dine gavekort sælges — online widget, fysisk salg i restauranten' },
          { t: 'Design & branding', d: 'Tilpas gavekortets udseende — logo, farver og brevkort' },
          { t: 'Gyldighed', d: 'Sæt udløbsdato (standard: 3 år fra køb)' },
          { t: 'Betaling', d: 'Stripe forbundet · gebyr 1,4% + 1,80 kr' },
        ]}/>}
      </div>

      {editing && (
        <GiftProductModal initial={editing.data}
          onSave={(data) => {
            if (editing.idx === -1) setProducts(prev => [...prev, data]);
            else setProducts(prev => prev.map((p, i) => i === editing.idx ? data : p));
            setEditing(null);
          }}
          onDelete={() => setProducts(prev => prev.filter((_, i) => i !== editing.idx))}
          onClose={() => setEditing(null)} />
      )}

      {saleOpen && (
        <GiftSaleModal products={products}
          onSale={(card) => setIssued(prev => [card, ...prev])}
          onClose={() => setSaleOpen(false)} />
      )}
    </div>
  );
}

// ============= MENU / ITEMS =============
function MenuPage() {
  const [tab, setTab] = p2S('items');
  const [exp, setExp] = p2S(SEED_EXP);
  const [items, setItems] = p2S(SEED_ITEMS);
  const [supp, setSupp] = p2S(SEED_SUPP);
  const [editing, setEditing] = p2S(null); // { kind, idx, data }

  return (
    <div className="page-scroll">
      <div className="page-hero">
        <div className="page-hero-eyebrow">Menu & oplevelser</div>
        <h1 className="page-hero-title">MENUER & PRODUKTER</h1>
        <p className="page-hero-sub">Definér de oplevelser dine gæster kan booke — fra hverdagsmiddagen til vinaftner og firma-events.</p>
      </div>

      <div style={{padding: '0 28px 28px'}}>
        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14}}>
          <div className="subbar-segs">
            <button className={tab === 'items' ? 'active' : ''} onClick={() => setTab('items')}>Items ({items.length})</button>
            <button className={tab === 'supplements' ? 'active' : ''} onClick={() => setTab('supplements')}>Tilkøb ({supp.length})</button>
            <button className={tab === 'experiences' ? 'active' : ''} onClick={() => setTab('experiences')}>Oplevelser ({exp.length})</button>
          </div>
          <button className="btn btn-primary" onClick={() => setEditing({ kind: tab, idx: -1, data: null })}>
            <Icon name="plus" size={14}/>
            {tab === 'experiences' ? ' Ny oplevelse' : tab === 'items' ? ' Nyt item' : ' Nyt tilkøb'}
          </button>
        </div>

        {tab === 'experiences' && (
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14}}>
            {exp.map((e, idx) => (
              <div key={idx} className="exp-card">
                <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 12}}>
                  <div>
                    <div style={{display: 'flex', alignItems: 'center', gap: 8}}>
                      <span className="tag-pill" style={{margin: 0}}>{e.tag}</span>
                      {e.active ? <span className="status-chip confirmed">Aktiv</span> : <span className="status-chip finished">Inaktiv</span>}
                    </div>
                    <h3 style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em', margin: '8px 0 4px'}}>{e.name}</h3>
                    <div style={{fontSize: 13, color: 'var(--muted)'}}>{e.desc}</div>
                  </div>
                  <button className="btn-icon" onClick={() => setEditing({ kind: 'experiences', idx, data: e })}>
                    <Icon name="edit" size={14}/>
                  </button>
                </div>
                <div style={{display: 'flex', gap: 14, marginTop: 12, padding: '12px 0 0', borderTop: '1px solid var(--line)'}}>
                  <Mini2 l="Pris" v={e.price} />
                  <Mini2 l="Varighed" v={e.dur} />
                  <Mini2 l="Covers / md" v={e.covers} />
                </div>
                {e.items?.length > 0 && (
                  <div style={{marginTop: 12, padding: 12, background: 'var(--surface-2)', borderRadius: 8}}>
                    <div style={{fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700, marginBottom: 6}}>{e.items.length} retter inkluderet</div>
                    <div style={{display: 'flex', flexWrap: 'wrap', gap: 4}}>
                      {e.items.map(n => <span key={n} className="tag-pill" style={{margin: 0, fontSize: 11}}>{n}</span>)}
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
        )}

        {tab === 'items' && (
          <div style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, padding: 18}}>
            <p style={{color: 'var(--muted)', fontSize: 13, marginTop: 0}}>Retter og produkter — kan tilknøjes en oplevelse (f.eks. en tasting-menu) eller bruges på egen hånd.</p>
            <div style={{display: 'grid', gridTemplateColumns: '1fr 140px 60px', gap: 0, fontSize: 11, color: 'var(--muted)', fontWeight: 700, textTransform: 'uppercase', letterSpacing: '0.1em', padding: '12px 0', borderBottom: '1px solid var(--line)'}}>
              <span>Item</span><span style={{textAlign: 'right'}}>Pris</span><span></span>
            </div>
            {items.map((r, i) => (
              <div key={i} style={{display: 'grid', gridTemplateColumns: '1fr 140px 60px', gap: 0, padding: '14px 0', borderBottom: i < items.length - 1 ? '1px solid var(--line)' : 0, alignItems: 'center'}}>
                <span style={{fontWeight: 600}}>{r.name}</span>
                <span style={{fontFamily: 'var(--display)', fontWeight: 700, fontSize: 16, textAlign: 'right', fontVariantNumeric: 'tabular-nums'}}>{r.price} kr</span>
                <span style={{display: 'flex', justifyContent: 'flex-end'}}>
                  <button className="btn-icon" onClick={() => setEditing({ kind: 'items', idx: i, data: r })}>
                    <Icon name="edit" size={14}/>
                  </button>
                </span>
              </div>
            ))}
            {items.length === 0 && <div style={{padding: 20, textAlign: 'center', color: 'var(--muted)'}}>Ingen items endnu — klik „Nyt item“ for at tilføje første.</div>}
          </div>
        )}

        {tab === 'supplements' && (
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14}}>
            {supp.map((s, idx) => (
              <div key={idx} style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, padding: 16, cursor: 'pointer'}}
                onClick={() => setEditing({ kind: 'supplements', idx, data: s })}>
                <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start'}}>
                  <div style={{fontWeight: 700}}>{s.n}</div>
                  <Icon name="edit" size={14}/>
                </div>
                <div style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 26, letterSpacing: '-0.02em', marginTop: 4}}>{s.p} kr</div>
                <div style={{fontSize: 11, color: 'var(--muted)', marginTop: 2}}>{s.sold} solgt denne måned</div>
              </div>
            ))}
          </div>
        )}
      </div>

      {editing?.kind === 'experiences' && (
        <ExperienceModal initial={editing.data} items={items}
          onSave={(data) => {
            if (editing.idx === -1) setExp(prev => [...prev, data]);
            else setExp(prev => prev.map((x, i) => i === editing.idx ? data : x));
            setEditing(null);
          }}
          onDelete={() => setExp(prev => prev.filter((_, i) => i !== editing.idx))}
          onClose={() => setEditing(null)}/>
      )}
      {editing?.kind === 'items' && (
        <ItemModal initial={editing.data}
          onSave={(data) => {
            if (editing.idx === -1) setItems(prev => [...prev, data]);
            else setItems(prev => prev.map((x, i) => i === editing.idx ? data : x));
            setEditing(null);
          }}
          onDelete={() => setItems(prev => prev.filter((_, i) => i !== editing.idx))}
          onClose={() => setEditing(null)}/>
      )}
      {editing?.kind === 'supplements' && (
        <SupplementModal initial={editing.data}
          onSave={(data) => {
            if (editing.idx === -1) setSupp(prev => [...prev, data]);
            else setSupp(prev => prev.map((x, i) => i === editing.idx ? data : x));
            setEditing(null);
          }}
          onDelete={() => setSupp(prev => prev.filter((_, i) => i !== editing.idx))}
          onClose={() => setEditing(null)}/>
      )}
    </div>
  );
}

function Mini2({ l, v }) {
  return (
    <div style={{flex: 1}}>
      <div style={{fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700}}>{l}</div>
      <div style={{fontFamily: 'var(--display)', fontWeight: 700, fontSize: 15, marginTop: 2}}>{v}</div>
    </div>
  );
}

// ============= COMMS =============
function CommsPage() {
  const [tab, setTab] = p2S('campaigns');
  return (
    <div className="page-scroll">
      <div className="page-hero">
        <div className="page-hero-eyebrow">Kommunikation</div>
        <h1 className="page-hero-title">KOMMUNIKATION</h1>
        <p className="page-hero-sub">Send beskeder gæsterne rent faktisk åbner — automatisk eller på kommando.</p>
      </div>

      <div style={{padding: '0 28px 28px'}}>
        <div className="subbar-segs" style={{marginBottom: 14, width: 'fit-content'}}>
          <button className={tab === 'campaigns' ? 'active' : ''} onClick={() => setTab('campaigns')}>Kampagner</button>
          <button className={tab === 'auto-email' ? 'active' : ''} onClick={() => setTab('auto-email')}>Auto-emails</button>
          <button className={tab === 'auto-sms' ? 'active' : ''} onClick={() => setTab('auto-sms')}>Auto-SMS</button>
          <button className={tab === 'preview' ? 'active' : ''} onClick={() => setTab('preview')}>Forhåndsvisning</button>
        </div>

        {tab === 'campaigns' && (
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14}}>
            {[
              { t: 'Vinaften i juni', s: 'Sendt 12/5 · 1.842 modtagere', open: 38, click: 12, status: 'sendt' },
              { t: 'Velkommen tilbage', s: 'Auto · gæster ikke set i 90 dage', open: 52, click: 24, status: 'kører' },
              { t: 'Fødselsdagshilsen', s: 'Auto · 7 dage før fødselsdag', open: 71, click: 41, status: 'kører' },
              { t: 'Sommerlukket-besked', s: 'Kladde · sendes 15/6', open: 0, click: 0, status: 'kladde' },
            ].map(c => (
              <div key={c.t} style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, padding: 18}}>
                <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start'}}>
                  <div>
                    <span className={`status-chip ${c.status === 'sendt' ? 'finished' : c.status === 'kører' ? 'confirmed' : 'arriving'}`}>{c.status}</span>
                    <h3 style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em', margin: '8px 0 4px'}}>{c.t}</h3>
                    <div style={{fontSize: 13, color: 'var(--muted)'}}>{c.s}</div>
                  </div>
                  <button className="btn-icon"><Icon name="edit" size={14}/></button>
                </div>
                {c.open > 0 && (
                  <div style={{display: 'flex', gap: 18, marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--line)'}}>
                    <div><div style={{fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700}}>Åbnet</div><div style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22}}>{c.open}%</div></div>
                    <div><div style={{fontSize: 10, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.08em', fontWeight: 700}}>Klik</div><div style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22}}>{c.click}%</div></div>
                  </div>
                )}
              </div>
            ))}
            <button className="btn btn-primary" style={{justifyContent: 'center', padding: 22, gridColumn: 'span 2'}}>
              <Icon name="plus" size={16}/> Ny kampagne
            </button>
          </div>
        )}

        {tab === 'auto-email' && <AutoList kind="Email"/>}
        {tab === 'auto-sms' && <AutoList kind="SMS"/>}

        {tab === 'preview' && (
          <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18}}>
            <div style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, padding: 22}}>
              <div style={{fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700, marginBottom: 10}}>Bekræftelses-email</div>
              <div style={{background: 'var(--bg)', padding: 18, borderRadius: 10, border: '1px solid var(--line)'}}>
                <div style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 28, letterSpacing: '-0.03em'}}>VI GLÆDER OS</div>
                <p style={{fontSize: 14, lineHeight: 1.5}}>Hej Karen,</p>
                <p style={{fontSize: 14, lineHeight: 1.5}}>Tak for din reservation hos Restaurant Hjem. Vi har dig på listen mandag den 18. maj kl. 19:00, 3 personer.</p>
                <div style={{padding: 14, background: 'var(--surface)', borderRadius: 8, margin: '14px 0', fontFamily: 'var(--mono)', fontSize: 13}}>
                  <div>MAN 18 MAJ · 19:00</div>
                  <div>3 PERSONER · BORD 3</div>
                </div>
                <p style={{fontSize: 14, lineHeight: 1.5}}>Skulle du blive forhindret, bedes du svare på denne mail eller ringe til 33 12 14 18.</p>
                <p style={{fontSize: 14, lineHeight: 1.5}}>Vi ses!<br/>Køkkenet på Hjem</p>
              </div>
            </div>
            <div style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, padding: 22}}>
              <div style={{fontSize: 11, color: 'var(--muted)', textTransform: 'uppercase', letterSpacing: '0.1em', fontWeight: 700, marginBottom: 10}}>Påmindelses-SMS (2 timer før)</div>
              <div style={{padding: 30, background: 'var(--bg)', borderRadius: 16, display: 'flex', justifyContent: 'center'}}>
                <div className="sms-preview" style={{maxWidth: 280}}>
                  Hej Karen! Vi glæder os til at se dig kl. 19:00 i dag på Restaurant Hjem. Svar BEKRÆFT for at bekræfte, eller AFBUD hvis du må aflyse. Mvh, Hjem
                </div>
              </div>
              <div style={{display: 'flex', gap: 6, marginTop: 14}}>
                <button className="btn btn-soft" style={{flex: 1, justifyContent: 'center'}}><Icon name="edit" size={13}/> Rediger</button>
                <button className="btn btn-soft" style={{flex: 1, justifyContent: 'center'}}>Send test</button>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

function AutoList({ kind }) {
  const items = kind === 'Email' ? [
    ['Bekræftelse', 'Sendes når reservation oprettes', true],
    ['Påmindelse', '24 timer før reservation', true],
    ['Tak for besøget', '4 timer efter reservationen', true],
    ['Anmeldelse', '1 dag efter besøg · spørg om review', false],
    ['Vi savner dig', 'Hvis gæst ikke har besøgt i 90 dage', true],
  ] : [
    ['Bekræftelse SMS', 'Sendes når reservation oprettes', true],
    ['Påmindelse', '2 timer før reservation', true],
    ['Bord klar', 'Manuel · når bordet er klar til ankomst', true],
    ['Tak for besøget', '4 timer efter reservationen', false],
  ];
  return (
    <div style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12}}>
      {items.map((r, i) => (
        <div key={i} style={{display: 'grid', gridTemplateColumns: '220px 1fr 100px 60px', gap: 16, padding: '16px 22px', borderBottom: i < items.length - 1 ? '1px solid var(--line)' : 0, alignItems: 'center'}}>
          <span style={{fontWeight: 700}}>{r[0]}</span>
          <span style={{color: 'var(--muted)', fontSize: 13}}>{r[1]}</span>
          <span><span className={`status-chip ${r[2] ? 'confirmed' : 'finished'}`}>{r[2] ? 'aktiv' : 'pause'}</span></span>
          <button className="btn-icon"><Icon name="chev-right" size={14}/></button>
        </div>
      ))}
    </div>
  );
}

// ============= SETTINGS LIST + SUB =============
function SettingsList({ items, onPick }) {
  return (
    <div style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, overflow: 'hidden'}}>
      {items.map((it, i) => (
        <button key={it.t}
          onClick={() => onPick?.(it.t)}
          style={{
            display: 'grid', gridTemplateColumns: '1fr auto',
            alignItems: 'center', gap: 16,
            padding: '20px 22px', width: '100%', textAlign: 'left',
            borderBottom: i < items.length - 1 ? '1px solid var(--line)' : 0,
            background: 'transparent', cursor: 'pointer',
          }}>
          <div>
            <div style={{fontFamily: 'var(--display)', fontWeight: 700, fontSize: 18, letterSpacing: '-0.02em'}}>{it.t}</div>
            <div style={{fontSize: 13, color: 'var(--muted)', marginTop: 3}}>{it.d}</div>
          </div>
          <Icon name="chev-right" size={16}/>
        </button>
      ))}
    </div>
  );
}

function SettingsPage({ goRooms }) {
  const [tab, setTab] = p2S('general');
  const [sub, setSub] = p2S(null); // 'hours' etc.

  const general = [
    { t: 'Restaurant info', d: 'Sæt navn, kontaktinfo og adresse på Restaurant Hjem' },
    { t: 'Åbningstider', d: 'Definér hvornår der kan bookes online — pr. ugedag' },
    { t: 'Rum & borde', d: 'Sæt op rum, borde og bordplan — træk og slip i editoren' },
    { t: 'Allergier & diætønsker', d: 'Konfigurér hvilke allergier I imødekommer i flowet' },
    { t: 'Gavekort', d: 'Administrér gavekort-tilbud og indløsning' },
    { t: 'Brugere', d: 'Se og administrér medarbejdere — host, manager, ejer' },
    { t: 'Betaling', d: 'Stripe · forbundet · depositum og forudbetaling konfiguration' },
  ];
  const online = [
    { t: 'Tilgængelighed', d: 'Konfigurér hvornår restauranten er åben for online reservationer' },
    { t: 'Oplevelser', d: 'Administrér jeres oplevelser — smagsmenu, brunch, etc.' },
    { t: 'Reservations-indstillinger', d: 'Varighed, mellemrum, max antal pers per booking' },
    { t: 'Items', d: 'Obligatoriske valg gæsterne skal tage i booking-flowet' },
    { t: 'Tilkøb', d: 'Sæt op valgfrie tilkøb — ekstra vin, ostebord m.m.' },
    { t: 'Gæsteoplevelse', d: 'Tilpas reservation-siden — farver, logo, billeder' },
    { t: 'Politikker', d: 'Afbud-frist, depositum, no-show gebyrer' },
  ];
  const comms = [
    { t: 'Gæste-marketing', d: 'Send personlige kampagner der bringer gæster tilbage' },
    { t: 'Email', d: 'Administrér og konfigurér automatiske emails' },
    { t: 'SMS', d: 'Administrér og konfigurér automatisk SMS-kommunikation' },
    { t: 'Content Manager', d: 'Tilpas info til gæsterne i online reservation-flowet' },
    { t: 'Google Analytics', d: 'Sæt op Google Analytics og få indsigter' },
  ];

  return (
    <div className="page-scroll">
      <div className="page-hero">
        <div className="page-hero-eyebrow">Indstillinger</div>
        <h1 className="page-hero-title">INDSTILLINGER</h1>
        <p className="page-hero-sub">Alt der gør Seatiq til din restaurant — bordplan, tider, kommunikation, betaling og branding.</p>
      </div>

      <div style={{padding: '0 28px 28px'}}>
        <div style={{display: 'flex', justifyContent: 'center', borderBottom: '1px solid var(--line)', marginBottom: 22, gap: 4}}>
          {[
            ['general', 'Generel opsætning'],
            ['online', 'Online reservationer'],
            ['comms', 'Marketing & kommunikation'],
          ].map(([id, lbl]) => (
            <button key={id}
              onClick={() => setTab(id)}
              style={{
                padding: '12px 18px',
                fontFamily: 'var(--display)', fontWeight: 700, fontSize: 14,
                letterSpacing: '-0.01em',
                color: tab === id ? 'var(--ink)' : 'var(--muted)',
                borderBottom: tab === id ? '2px solid var(--ink)' : '2px solid transparent',
                marginBottom: -1,
              }}>{lbl}</button>
          ))}
        </div>

        {!sub && tab === 'general' && <SettingsList items={general} onPick={(t) => {
          if (t === 'Rum & borde') goRooms?.();
          else if (t === 'Åbningstider') setSub('hours');
        }}/>}
        {!sub && tab === 'online' && <SettingsList items={online} onPick={(t) => {
          if (t === 'Tilgængelighed') setSub('hours');
        }}/>}
        {!sub && tab === 'comms' && <SettingsList items={comms}/>}

        {sub === 'hours' && <OpeningHoursEditor onBack={() => setSub(null)}/>}
      </div>
    </div>
  );
}

// ============= OPENING HOURS EDITOR =============
const DEFAULT_HOURS = {
  mon: { open: true,  o: 17*60, c: 22*60 },
  tue: { open: true,  o: 17*60, c: 22*60 },
  wed: { open: true,  o: 17*60, c: 22*60 },
  thu: { open: true,  o: 17*60, c: 22*60 },
  fri: { open: true,  o: 17*60, c: 23*60 },
  sat: { open: true,  o: 12*60, c: 23*60 },
  sun: { open: false, o: 12*60, c: 22*60 },
};
const DAY_LABELS = [
  ['mon', 'Mandag'], ['tue', 'Tirsdag'], ['wed', 'Onsdag'],
  ['thu', 'Torsdag'], ['fri', 'Fredag'], ['sat', 'Lørdag'], ['sun', 'Søndag'],
];

function minutesToHHMM(m) {
  return `${String(Math.floor(m/60)).padStart(2,'0')}:${String(m%60).padStart(2,'0')}`;
}
function HHMMtoMinutes(s) {
  const [h, m] = String(s||'').split(':').map(n => parseInt(n,10));
  if (isNaN(h)) return null;
  return h*60 + (m||0);
}

function OpeningHoursEditor({ onBack }) {
  const fb = window.fb;
  const auth = window.useAuth();
  const tenant = auth?.tenantDoc;
  const tenantId = tenant?.id;
  const [hours, setHours] = p2S(tenant?.openingHours || DEFAULT_HOURS);
  const [offset, setOffset] = p2S(tenant?.lastBookingOffsetMin ?? 60);
  const [saving, setSaving] = p2S(false);
  const [saved, setSaved] = p2S(false);

  React.useEffect(() => {
    setHours(tenant?.openingHours || DEFAULT_HOURS);
    setOffset(tenant?.lastBookingOffsetMin ?? 60);
  }, [tenantId]);

  const update = (key, patch) => setHours(prev => ({...prev, [key]: { ...prev[key], ...patch }}));

  const save = async () => {
    if (!tenantId) return;
    setSaving(true);
    setSaved(false);
    try {
      const patch = { openingHours: hours, lastBookingOffsetMin: Number(offset) || 0 };
      await fb.updateDoc(fb.doc(fb.db, "tenants", tenantId), patch);
      // Mirror to publicTenants so booking widget sees the change
      if (tenant.slug) {
        await fb.setDoc(fb.doc(fb.db, "publicTenants", tenant.slug), {
          openingHours: hours,
          lastBookingOffsetMin: Number(offset) || 0,
        }, { merge: true });
      }
      setSaved(true);
      setTimeout(() => setSaved(false), 2500);
    } catch (e) {
      alert("Kunne ikke gemme: " + (e.message || e));
    } finally {
      setSaving(false);
    }
  };

  return (
    <div>
      <button className="btn btn-soft" onClick={onBack} style={{marginBottom: 14}}>
        <Icon name="chev-left" size={14}/> Tilbage til indstillinger
      </button>

      <div style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, padding: 22, marginBottom: 14}}>
        <h3 style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 22, letterSpacing: '-0.02em', margin: '0 0 6px'}}>Åbningstider</h3>
        <p style={{color: 'var(--muted)', fontSize: 13, marginTop: 0}}>
          Disse tider styrer hvornår gæster kan booke online via <strong>booking.ooniq.app/{tenant?.slug || '…'}</strong>. Hvis du fx lukker kl. 22 onsdag, vises onsdag aften kun tider op til {minutesToHHMM(22*60 - 60)}.
        </p>

        <div style={{display: 'flex', flexDirection: 'column', gap: 10, marginTop: 18}}>
          {DAY_LABELS.map(([key, label]) => {
            const row = hours[key] || { open: false, o: 17*60, c: 22*60 };
            return (
              <div key={key} className="hours-row">
                <label className="hours-day">
                  <input type="checkbox" checked={row.open}
                    onChange={e => update(key, { open: e.target.checked })}/>
                  <span>{label}</span>
                </label>
                {row.open ? (
                  <>
                    <input type="time" value={minutesToHHMM(row.o)}
                      onChange={e => { const v = HHMMtoMinutes(e.target.value); if (v != null) update(key, { o: v }); }}/>
                    <span style={{color: 'var(--muted)'}}>til</span>
                    <input type="time" value={minutesToHHMM(row.c)}
                      onChange={e => { const v = HHMMtoMinutes(e.target.value); if (v != null) update(key, { c: v }); }}/>
                  </>
                ) : (
                  <span style={{color: 'var(--muted)', fontStyle: 'italic'}}>Lukket</span>
                )}
              </div>
            );
          })}
        </div>
      </div>

      <div style={{background: 'var(--surface)', border: '1px solid var(--line)', borderRadius: 12, padding: 22, marginBottom: 14}}>
        <h3 style={{fontFamily: 'var(--display)', fontWeight: 800, fontSize: 18, letterSpacing: '-0.02em', margin: '0 0 6px'}}>Sidste booking</h3>
        <p style={{color: 'var(--muted)', fontSize: 13, marginTop: 0}}>
          Hvor mange minutter før lukketid sidste online booking skal være. Sat til <strong>60</strong> betyder at hvis I lukker kl. 22, kan der maks. bookes til kl. 21.
        </p>
        <div style={{display: 'flex', gap: 8, alignItems: 'center', marginTop: 12}}>
          <input type="number" min={0} max={240} step={15} value={offset}
            onChange={e => setOffset(e.target.value)}
            style={{width: 100, padding: '8px 10px', border: '1px solid var(--line-strong)', borderRadius: 8, fontSize: 14}}/>
          <span style={{color: 'var(--muted)'}}>minutter før lukketid</span>
        </div>
      </div>

      <div style={{display: 'flex', gap: 8, alignItems: 'center'}}>
        <button className="btn btn-accent" onClick={save} disabled={saving}>
          <Icon name="check" size={14}/> {saving ? 'Gemmer…' : 'Gem ændringer'}
        </button>
        {saved && <span style={{fontSize: 13, color: 'var(--accent-deep)', fontWeight: 600}}>✓ Gemt — booking-siden er opdateret</span>}
      </div>
    </div>
  );
}

window.OpeningHoursEditor = OpeningHoursEditor;

Object.assign(window, { GiftPage, MenuPage, CommsPage, SettingsPage });