/* global React */
// bookme — Produktseite (Terminbuchung & Einladungen), im 4its-Dark-Theme

const BM_ICONS = {
  calendar: "M8 2v3M16 2v3M3.5 9h17M5 5h14a1.5 1.5 0 0 1 1.5 1.5V19A1.5 1.5 0 0 1 19 20.5H5A1.5 1.5 0 0 1 3.5 19V6.5A1.5 1.5 0 0 1 5 5z",
  teams: "M8 10h8M8 14h5M21 12a9 9 0 0 1-14 7.6L3 21l1.4-4A9 9 0 1 1 21 12z",
  check: "M4 8a4 4 0 0 1 4-4h8a4 4 0 0 1 4 4v8a4 4 0 0 1-4 4H8a4 4 0 0 1-4-4zM9 12l2 2 4-4",
  mail: "M3 6.5h18v11H3zM3.5 7l8.5 6 8.5-6",
  repeat: "M17 2l3 3-3 3M20 5H9a4 4 0 0 0-4 4v1M7 22l-3-3 3-3M4 19h11a4 4 0 0 0 4-4v-1",
  lock: "M6 10V8a6 6 0 0 1 12 0v2M5 10h14v10H5zM12 14v3",
  key: "M14 7a4 4 0 1 0-3.5 3.97L11 11l2 2-1 1 2 2 2-2-2-2 1.5-1.5A4 4 0 0 0 14 7z",
  shield: "M12 3l7 3v5c0 4.5-3 8-7 9-4-1-7-4.5-7-9V6z",
  doc: "M7 3h7l4 4v14H7zM14 3v5h4M9 13h6M9 16h6",
  flag: "M5 21V4M5 4h11l-1.5 3.5L16 11H5",
  clock: "M12 7v5l3 2M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z",
  puzzle: "M10 4a1.5 1.5 0 0 1 3 0c0 .8.7 1.5 1.5 1.5H17v2.5c0 .8.7 1.5 1.5 1.5a1.5 1.5 0 0 1 0 3c-.8 0-1.5.7-1.5 1.5V20h-3a1.5 1.5 0 0 0-1.5-1.5 1.5 1.5 0 0 0-1.5 1.5H6.5v-2.5C6.5 16.7 5.8 16 5 16a1.5 1.5 0 0 1 0-3c.8 0 1.5-.7 1.5-1.5V9H10z",
};

const BM_FEATURES = [
  { icon: 'calendar', title: 'Selbst-Buchung für Kund:innen', desc: 'Eigener Link je Mitarbeiter:in. Kund:innen wählen selbst einen freien Termin — Schluss mit E-Mail-Ping-Pong.' },
  { icon: 'teams', title: 'Automatischer Teams-Link', desc: 'Für jede Buchung wird automatisch eine Microsoft-Teams-Besprechung erstellt und mitgeschickt.' },
  { icon: 'check', title: 'Echte Verfügbarkeit', desc: 'Frei/Belegt kommt live aus Exchange oder Microsoft 365 — keine Doppelbuchungen.' },
  { icon: 'mail', title: 'Gebrandete Einladungen', desc: 'Professionelle Teams-Einladungs-E-Mails im 4its-Look, zweisprachig, mit Kalender-Datei.' },
  { icon: 'repeat', title: 'Erinnerungen & Storno', desc: 'Automatische Erinnerung 24 h vorher; Kund:innen können selbst absagen oder verschieben.' },
  { icon: 'lock', title: 'Microsoft-365-Login', desc: 'Anmeldung per SSO mit dem bestehenden 4its-Konto — inklusive MFA, ohne neue Passwörter.' },
];

const BM_STEPS = [
  { n: '01', title: 'Link teilen', desc: 'Jede:r Mitarbeiter:in hat einen persönlichen Buchungslink — auf der Website, in der E-Mail-Signatur oder direkt verschickt.' },
  { n: '02', title: 'Termin wählen', desc: 'Kund:innen sehen nur wirklich freie Zeiten und buchen in wenigen Klicks — inklusive eigener Angaben.' },
  { n: '03', title: 'Fertig & im Kalender', desc: 'Teams-Termin wird erstellt, Bestätigung mit .ics versendet, alles landet automatisch im Kalender.' },
];

const BM_SECURITY = [
  { icon: 'key', title: 'Single-Sign-on (M365)', desc: 'Anmeldung über Microsoft Entra ID mit euren bestehenden Richtlinien (MFA, Conditional Access).' },
  { icon: 'shield', title: 'Verschlüsselt gespeichert', desc: 'Zugangsdaten zur Kalender-Abfrage werden AES-256-verschlüsselt abgelegt.' },
  { icon: 'doc', title: 'DSGVO-konform', desc: 'Einwilligung bei der Buchung, Audit-Log und automatische Löschung alter Daten.' },
  { icon: 'flag', title: 'In eurer Infrastruktur', desc: 'Selbst gehostet auf eurem Server — die Daten bleiben bei euch.' },
  { icon: 'clock', title: 'Rate-Limiting & Spamschutz', desc: 'Schutz der öffentlichen Buchungsseite gegen Missbrauch und Bots.' },
  { icon: 'puzzle', title: 'Rollen & Rechte', desc: 'Getrennte Admin- und Benutzerrollen mit zentral verwalteten Standards.' },
];

// ---- Interactive booking demo ----
const BM_WD = ['So','Mo','Di','Mi','Do','Fr','Sa'];
const BM_MON = ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'];
const BM_SLOTS = ['09:00','09:30','10:30','11:00','13:00','13:30','14:30','15:30'];
const BM_TAKEN = { 0:['09:30','13:00','14:30'], 1:['11:00','13:30'], 2:['09:00','15:30'], 3:['10:30'], 4:['11:00'] };

function bmBuildDays() {
  const out = [];
  const base = new Date();
  base.setHours(0,0,0,0);
  base.setDate(base.getDate() + 1);
  let added = 0, cursor = new Date(base);
  while (added < 5) {
    const dow = cursor.getDay();
    if (dow !== 0 && dow !== 6) {
      out.push({
        idx: added,
        wd: BM_WD[dow],
        day: cursor.getDate(),
        mon: BM_MON[cursor.getMonth()],
        full: `${BM_WD[dow]}, ${cursor.getDate()}. ${BM_MON[cursor.getMonth()]} ${cursor.getFullYear()}`,
      });
      added++;
    }
    cursor.setDate(cursor.getDate() + 1);
  }
  return out;
}

function BookmeDemo() {
  const days = useRef(bmBuildDays()).current;
  const [step, setStep] = useState(1);
  const [dayIdx, setDayIdx] = useState(3);
  const [slot, setSlot] = useState(null);
  const [form, setForm] = useState({ name:'', email:'', note:'' });
  const [err, setErr] = useState('');

  const curDay = days[dayIdx] || days[0];
  const taken = BM_TAKEN[dayIdx] || [];
  const chosenLabel = `${curDay.full} · ${slot || ''} Uhr`;
  const setF = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const confirm = () => {
    if (!form.name.trim() || !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email.trim())) {
      setErr('Bitte Name und eine gültige E-Mail angeben.');
      return;
    }
    setErr(''); setStep(3);
  };
  const reset = () => { setStep(1); setSlot(null); setForm({ name:'', email:'', note:'' }); setErr(''); };

  const progressColor = (n) => step >= n ? 'var(--accent)' : 'var(--border)';

  return (
    <div className="bm-demo">
      {/* Sidebar — meeting info */}
      <div className="bm-demo-side">
        <div className="mono bm-kicker">Termin mit</div>
        <h3 style={{fontSize:22,marginTop:6,marginBottom:4}}>René Graetz</h3>
        <div style={{fontSize:13,color:'var(--fg-dim)',marginBottom:24}}>4its GmbH</div>
        <ul className="bm-meta">
          <li><span className="bm-meta-ic"><Icon d={BM_ICONS.clock} size={16}/></span><div><strong>30 Minuten</strong><br/>Beratungsgespräch</div></li>
          <li><span className="bm-meta-ic"><Icon d={BM_ICONS.teams} size={16}/></span><div><strong>Microsoft Teams</strong><br/>Link wird automatisch erstellt</div></li>
          <li><span className="bm-meta-ic"><Icon d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zM2 12h20M12 2c3 3 3 17 0 20M12 2c-3 3-3 17 0 20" size={16}/></span><div><strong>Europe/Berlin</strong><br/>Zeitzone (MEZ)</div></li>
        </ul>
        <div className="bm-note mono">Interaktive Vorschau — es wird keine echte Buchung erstellt.</div>
      </div>

      {/* Main flow */}
      <div className="bm-demo-main">
        <div className="bm-progress">
          {[1,2,3].map(n => <span key={n} style={{background:progressColor(n)}}/>)}
        </div>

        {step === 1 && (
          <div className="bm-panel">
            <div className="bm-step-h">
              <h4>Wähle Tag &amp; Uhrzeit</h4>
              <p>Verfügbarkeit kommt live aus dem Kalender.</p>
            </div>
            <div className="bm-days">
              {days.map(d => (
                <button key={d.idx} onClick={() => { setDayIdx(d.idx); setSlot(null); }}
                  className={`bm-day ${dayIdx===d.idx?'active':''}`}>
                  <span className="bm-day-wd">{d.wd}</span>
                  <span className="bm-day-num">{d.day}</span>
                  <span className="bm-day-mon">{d.mon}</span>
                </button>
              ))}
            </div>
            <div className="mono bm-slots-label">Freie Zeiten · {curDay.wd} {curDay.day}. {curDay.mon}</div>
            <div className="bm-slots">
              {BM_SLOTS.map(t => {
                const isTaken = taken.includes(t);
                return (
                  <button key={t} disabled={isTaken}
                    className={`bm-slot ${isTaken?'taken':''}`}
                    onClick={() => { if(!isTaken){ setSlot(t); setStep(2); setErr(''); } }}>
                    {t}
                  </button>
                );
              })}
            </div>
          </div>
        )}

        {step === 2 && (
          <div className="bm-panel">
            <div className="bm-step-h">
              <h4>Deine Angaben</h4>
              <p className="mono" style={{color:'var(--accent)'}}>{chosenLabel}</p>
            </div>
            <div className="form-grid" style={{gap:16}}>
              <div className="field"><label>Name *</label><input type="text" value={form.name} onChange={setF('name')} placeholder="Vor- und Nachname"/></div>
              <div className="field"><label>E-Mail *</label><input type="email" value={form.email} onChange={setF('email')} placeholder="name@firma.de"/></div>
              <div className="field"><label>Notiz (optional)</label><textarea value={form.note} onChange={setF('note')} placeholder="Worum geht es?" style={{minHeight:80}}/></div>
              {err && <div className="bm-error">{err}</div>}
              <div style={{display:'flex',gap:12,flexWrap:'wrap'}}>
                <button className="btn btn-ghost" onClick={() => setStep(1)}>← zurück</button>
                <button className="btn btn-primary" style={{flex:1,justifyContent:'center'}} onClick={confirm}>Termin verbindlich buchen <ArrowRight/></button>
              </div>
            </div>
          </div>
        )}

        {step === 3 && (
          <div className="bm-panel bm-success">
            <div className="bm-success-badge"><Icon d="M5 12l5 5L20 7" size={28}/></div>
            <h4 style={{fontSize:24,marginBottom:8}}>Termin gebucht!</h4>
            <p style={{marginBottom:24}}>Eine Bestätigung mit Teams-Link und Kalender-Datei wurde an <strong style={{color:'var(--fg)'}}>{form.email || 'deine E-Mail'}</strong> gesendet <span className="mono" style={{color:'var(--fg-dim)'}}>(Demo)</span>.</p>
            <ul className="bm-confirm">
              <li><Icon d="M5 12l5 5L20 7" size={15}/>{chosenLabel}</li>
              <li><Icon d="M5 12l5 5L20 7" size={15}/>Teams-Link erstellt &amp; versendet</li>
              <li><Icon d="M5 12l5 5L20 7" size={15}/>Kalender-Einladung (.ics) angehängt</li>
            </ul>
            <button className="btn btn-ghost" style={{marginTop:24}} onClick={reset}>Demo neu starten</button>
          </div>
        )}
      </div>
    </div>
  );
}

function bmScrollTo(id) {
  const el = document.getElementById(id);
  if (el) {
    const y = el.getBoundingClientRect().top + window.pageYOffset - 80;
    window.scrollTo({ top: y, behavior: 'smooth' });
  }
}

function BookmePage() {
  return (
    <div className="page">
      <header className="page-header">
        <div className="bg-grid"></div>
        <div className="container" style={{position:'relative',zIndex:2}}>
          <div className="breadcrumb">
            <a href="#/">Start</a><span className="sep">/</span>
            <a href="#/loesungen">Lösungen</a><span className="sep">/</span><span>bookme</span>
          </div>
          <div className="bm-hero">
            <div>
              <span className="showcase-badge">● bookme · Made by 4its</span>
              <h1 style={{fontSize:'clamp(40px,5vw,68px)',margin:'20px 0'}}>
                Termine buchen.<br/>Einladungen senden.<br/>
                <span style={{color:'var(--fg-muted)',fontWeight:500}}>Ganz ohne Hin&nbsp;und&nbsp;Her.</span>
              </h1>
              <p style={{fontSize:18,maxWidth:'48ch'}}>
                bookme ist das schlanke Buchungs- und Einladungs-Tool für Microsoft 365 &amp; Teams.
                Kund:innen wählen selbst einen freien Termin — der Teams-Link entsteht automatisch.
              </p>
              <div className="hero-cta" style={{marginTop:32,marginBottom:32}}>
                <button className="btn btn-primary" onClick={() => bmScrollTo('bm-demo')}>Demo ausprobieren <ArrowRight/></button>
                <button className="btn btn-ghost" onClick={() => bmScrollTo('bm-funktionen')}>Mehr erfahren</button>
              </div>
              <div className="bm-pills">
                <span><Icon d="M5 12l5 5L20 7" size={14}/> Microsoft-365-Login (SSO)</span>
                <span><Icon d="M5 12l5 5L20 7" size={14}/> Automatischer Teams-Link</span>
                <span><Icon d="M5 12l5 5L20 7" size={14}/> DSGVO-konform, in Deutschland gehostet</span>
              </div>
            </div>
            <div className="bm-hero-card">
              <div className="mono bm-kicker">Beratungsgespräch · 30 Min</div>
              <div style={{fontSize:13,color:'var(--fg-dim)',margin:'4px 0 16px'}}>Freie Zeiten · Do 26. Juni</div>
              <div className="bm-hero-slots">
                {['09:00','09:30','10:30','11:00','13:00','14:30'].map((t,i) => (
                  <span key={t} className={`bm-hero-slot ${i===2?'active':''}`}>{t}</span>
                ))}
              </div>
              <div className="bm-hero-confirm">
                <Icon d={BM_ICONS.calendar} size={16}/>
                <span><strong>Teams-Termin</strong> wird automatisch erstellt &amp; per E-Mail bestätigt.</span>
              </div>
              <div className="bm-hero-ok"><Icon d="M5 12l5 5L20 7" size={15}/> Termin gebucht</div>
            </div>
          </div>
        </div>
      </header>

      {/* Features */}
      <section className="section" id="bm-funktionen">
        <div className="container">
          <div className="section-head">
            <div className="left">
              <Eyebrow>Funktionen</Eyebrow>
              <h2>Alles für Termine — an einem Ort</h2>
              <p style={{fontSize:16}}>Von der Selbstbuchung durch Kund:innen bis zur fertigen Teams-Einladung. bookme verbindet sich direkt mit eurem Microsoft 365.</p>
            </div>
          </div>
          <div className="card-grid">
            {BM_FEATURES.map((f,i) => (
              <div key={i} className="card" style={{cursor:'default'}}>
                <div className="card-num mono">{String(i+1).padStart(2,'0')} / 06</div>
                <div className="card-icon"><Icon d={BM_ICONS[f.icon]} size={18}/></div>
                <h3>{f.title}</h3>
                <p>{f.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Steps */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="two-col" style={{marginBottom:48,gap:48,alignItems:'end'}}>
            <div>
              <Eyebrow>In 3 Schritten</Eyebrow>
              <h2 style={{marginTop:16}}>So einfach läuft eine Buchung</h2>
            </div>
          </div>
          <div className="process-grid" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:1,background:'var(--border-soft)',border:'1px solid var(--border-soft)',borderRadius:16,overflow:'hidden'}}>
            {BM_STEPS.map((s,i) => (
              <div key={i} style={{background:'var(--bg)',padding:32,minHeight:200}}>
                <div className="mono" style={{fontSize:36,fontWeight:500,color:'var(--accent)',letterSpacing:'-0.02em',marginBottom:24}}>{s.n}</div>
                <h4 style={{fontSize:20,marginBottom:10}}>{s.title}</h4>
                <p style={{fontSize:14}}>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* Interactive demo */}
      <section className="section" style={{paddingTop:0}} id="bm-demo">
        <div className="container">
          <div className="two-col" style={{marginBottom:40,gap:48,alignItems:'end'}}>
            <div>
              <Eyebrow>Zum Klicken</Eyebrow>
              <h2 style={{marginTop:16}}>Probier die Buchung aus</h2>
            </div>
            <p style={{fontSize:16}}>Genau so sehen es eure Kund:innen. Wählt einen Tag, eine Uhrzeit und schließt die Beispiel-Buchung ab.</p>
          </div>
          <BookmeDemo/>
        </div>
      </section>

      {/* Branded invitations */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="showcase">
            <div>
              <span className="showcase-badge" style={{background:'color-mix(in oklab, var(--brand-orange) 15%, transparent)',color:'var(--brand-orange)'}}>● Bonus</span>
              <h3>Gebrandete Teams-Einladungen in Sekunden</h3>
              <p style={{fontSize:15}}>Neben der Selbstbuchung enthält bookme einen Einladungs-Generator: professionelle, im 4its-Look gestaltete E-Mails mit Agenda, Teams-Link und Kalender-Datei — direkt aus dem Tool versendet.</p>
              <ul>
                <li>Zweisprachig (DE/EN)</li>
                <li>Direktversand über euren Mailserver</li>
                <li>Wiederverwenden mit einem Klick</li>
              </ul>
            </div>
            <div className="bm-invite">
              <div className="bm-invite-top mono">Einladung · Microsoft Teams</div>
              <div className="bm-invite-body">
                <div className="bm-invite-date">
                  <span className="bm-invite-day">26</span>
                  <span className="bm-invite-mon mono">JUNI</span>
                </div>
                <div>
                  <h4 style={{fontSize:18,marginBottom:6}}>Sichere IT für den Mittelstand</h4>
                  <div style={{fontSize:13,color:'var(--fg-muted)',marginBottom:4}}>14:00–15:00 Uhr · Microsoft Teams</div>
                </div>
              </div>
              <div className="bm-invite-cta"><Icon d={BM_ICONS.teams} size={15}/> An Teams-Besprechung teilnehmen</div>
            </div>
          </div>
        </div>
      </section>

      {/* Security */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <Eyebrow>Sicherheit &amp; Datenschutz</Eyebrow>
          <h2 style={{marginTop:16,marginBottom:40}}>Sicher. Konform. In eurer Hand.</h2>
          <div className="card-grid">
            {BM_SECURITY.map((s,i) => (
              <div key={i} className="card" style={{cursor:'default',minHeight:200}}>
                <div className="card-icon"><Icon d={BM_ICONS[s.icon]} size={18}/></div>
                <h3 style={{fontSize:18}}>{s.title}</h3>
                <p>{s.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="section" style={{paddingTop:0}}>
        <div className="container">
          <div className="cta-banner">
            <Eyebrow>Los geht's</Eyebrow>
            <h2 style={{marginTop:20,maxWidth:'20ch',marginLeft:'auto',marginRight:'auto'}}>Bereit für entspannte Terminbuchung?</h2>
            <p style={{maxWidth:'50ch',marginLeft:'auto',marginRight:'auto'}}>Probiert bookme aus oder sprecht mit uns über die Einführung in eurem Team.</p>
            <div className="hero-cta">
              <button className="btn btn-accent" onClick={() => bmScrollTo('bm-demo')}>Demo ausprobieren <ArrowRight/></button>
              <a className="btn btn-ghost" href="#/kontakt">Beratung anfragen</a>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { BookmePage });