/* global React */
// Anfahrt & Fernwartung

function AnfahrtPage() {
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Kontakt',path:'#/kontakt'},{label:'Anfahrt'}]}
        eyebrow="So finden Sie uns"
        title="Burchardstraße 22, Hamburg."
        lead="Mitten in der Hamburger Innenstadt, zwei Minuten vom Hauptbahnhof. Besucher­parkplätze in den umliegenden Tiefgaragen."
      />
      <section className="section">
        <div className="container">
          <div className="two-col">
            <div>
              <Eyebrow>Adresse</Eyebrow>
              <h2 style={{marginTop:16,marginBottom:24}}>4its GmbH</h2>
              <div style={{fontSize:18,color:'var(--fg)',lineHeight:1.6,marginBottom:32}}>
                Burchardstraße 22<br/>
                20095 Hamburg<br/>
                Deutschland
              </div>
              <div style={{display:'grid',gap:20}}>
                <div>
                  <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:6,textTransform:'uppercase'}}>Telefon</div>
                  <a href="tel:+494056194700" className="mono" style={{fontSize:20,color:'var(--fg)'}}>+49 40 561947 0</a>
                </div>
                <div>
                  <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:6,textTransform:'uppercase'}}>E-Mail</div>
                  <a href="mailto:info@4its.de" style={{fontSize:16,color:'var(--fg)'}}>info@4its.de</a>
                </div>
                <div>
                  <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:6,textTransform:'uppercase'}}>Öffnungszeiten</div>
                  <div style={{fontSize:15,color:'var(--fg-muted)',lineHeight:1.6}}>Mo – Fr · 09:00 – 18:00 Uhr<br/>Alle anderen Zeiten: Kunden-Hotline</div>
                </div>
              </div>
              <div style={{marginTop:32,display:'flex',gap:12,flexWrap:'wrap'}}>
                <a className="btn btn-primary" href="https://www.google.com/maps/dir/?api=1&destination=Burchardstra%C3%9Fe+22,+20095+Hamburg" target="_blank" rel="noreferrer">Route planen <ArrowRight/></a>
                <a className="btn btn-ghost" href="#/kontakt">Kontaktformular</a>
              </div>
            </div>
            <div>
              <div style={{aspectRatio:'4/3',background:'var(--surface)',border:'1px solid var(--border-soft)',borderRadius:14,overflow:'hidden',position:'relative'}}>
                <iframe
                  title="Karte Burchardstraße 22"
                  src="https://www.openstreetmap.org/export/embed.html?bbox=10.002%2C53.548%2C10.010%2C53.552&layer=mapnik&marker=53.5500%2C10.0060"
                  style={{width:'100%',height:'100%',border:0,filter:'var(--map-filter, none)'}}
                  loading="lazy"
                />
              </div>
              <div style={{marginTop:20,padding:20,background:'var(--surface)',border:'1px solid var(--border-soft)',borderRadius:12}}>
                <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:12,textTransform:'uppercase'}}>Anreise</div>
                <ul style={{listStyle:'none',padding:0,margin:0,display:'grid',gap:12,fontSize:14,color:'var(--fg-muted)',lineHeight:1.5}}>
                  <li><strong style={{color:'var(--fg)'}}>Bahn · </strong>Hauptbahnhof (5 Min Fußweg)</li>
                  <li><strong style={{color:'var(--fg)'}}>U-Bahn · </strong>Mönckebergstraße (U3) · Meßberg (U1)</li>
                  <li><strong style={{color:'var(--fg)'}}>S-Bahn · </strong>Jungfernstieg / Hauptbahnhof</li>
                  <li><strong style={{color:'var(--fg)'}}>Auto · </strong>Tiefgarage Domplatz / Steintorwall</li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function FernwartungPage() {
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Kontakt',path:'#/kontakt'},{label:'Fernwartung'}]}
        eyebrow="Support · Teamviewer"
        title="Schnellhilfe per Fernwartung."
        lead="Ein Klick auf Ihr Betriebssystem startet den Download des Quick-Support-Clients. Nach dem Start sehen wir Ihre Sitzungs-ID — bitte nennen Sie uns diese am Telefon."
      />
      <section className="section">
        <div className="container" style={{maxWidth:880}}>
          <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:20,marginBottom:40}}>
            {[
              {os:'Windows', url:'https://get.teamviewer.com/4itsgmbh', d:'Windows 10 / 11 · Windows Server'},
              {os:'macOS', url:'https://get.teamviewer.com/4itsgmbhmac', d:'macOS 11 Big Sur und neuer'},
            ].map(t => (
              <a key={t.os} href={t.url} target="_blank" rel="noreferrer" className="tv-card">
                <div style={{display:'flex',alignItems:'center',gap:10,marginBottom:16}}>
                  <span style={{width:8,height:8,borderRadius:'50%',background:'#3FB950',boxShadow:'0 0 10px #3FB950'}}/>
                  <span className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',textTransform:'uppercase'}}>Quick Support</span>
                </div>
                <h3 style={{fontSize:28,marginBottom:8}}>{t.os}</h3>
                <p style={{fontSize:13,color:'var(--fg-muted)',marginBottom:24}}>{t.d}</p>
                <div className="btn btn-primary" style={{width:'fit-content'}}>Download starten <ArrowRight/></div>
              </a>
            ))}
          </div>
          <div style={{padding:28,background:'var(--surface)',border:'1px solid var(--border-soft)',borderRadius:14}}>
            <Eyebrow>So funktioniert&apos;s</Eyebrow>
            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(200px,1fr))',gap:24,marginTop:20}}>
              {[
                {n:'01',t:'Anrufen',d:'+49 40 561947 0 — Mo–Fr 09:00–18:00'},
                {n:'02',t:'Client starten',d:'Oben Betriebssystem wählen, Download ausführen'},
                {n:'03',t:'„Zugriff erlauben" klicken',d:'Unser Support-Client ist vorkonfiguriert — Session-Code erscheint automatisch.'},
                {n:'04',t:'Fertig',d:'Wir übernehmen & lösen das Problem'},
              ].map(s => (
                <div key={s.n}>
                  <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',marginBottom:8}}>{s.n}</div>
                  <h4 style={{fontSize:15,marginBottom:6}}>{s.t}</h4>
                  <p style={{fontSize:13,color:'var(--fg-muted)',lineHeight:1.5}}>{s.d}</p>
                </div>
              ))}
            </div>
          </div>
          <div style={{marginTop:28,padding:24,background:'var(--surface)',border:'1px solid var(--border-soft)',borderRadius:14}}>
            <Eyebrow>Was Sie sehen</Eyebrow>
            <p style={{fontSize:14,color:'var(--fg-muted)',lineHeight:1.6,marginTop:12,marginBottom:20,maxWidth:640}}>
              Nach dem Start des Clients öffnet sich das Fenster <strong style={{color:'var(--fg)'}}>„Support 4its GmbH"</strong> mit dem Hinweis <em>„Fernsteuerung zulassen"</em>. Session-Code und Name sind bereits vorausgefüllt. Sobald unser Techniker verbindet, erscheint ein zweiter Dialog <strong style={{color:'var(--fg)'}}>„4its Admin – Fernsteuerung"</strong> mit der Frage „Möchten Sie das zulassen?".
            </p>
            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(240px,1fr))',gap:16,marginBottom:16}}>
              <div style={{padding:16,border:'1px dashed var(--border)',borderRadius:10}}>
                <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',marginBottom:10,letterSpacing:'0.08em',textTransform:'uppercase'}}>Schritt 1 · Fenster</div>
                <div style={{fontSize:14,color:'var(--fg)',marginBottom:6,fontWeight:500}}>Support 4its GmbH</div>
                <div style={{fontSize:13,color:'var(--fg-muted)',lineHeight:1.5}}>„Ihr Support-Assistent ist sofort für Sie da" — bitte Fenster geöffnet lassen, bis wir verbinden.</div>
              </div>
              <div style={{padding:16,border:'1px dashed var(--border)',borderRadius:10}}>
                <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',marginBottom:10,letterSpacing:'0.08em',textTransform:'uppercase'}}>Schritt 2 · Bestätigung</div>
                <div style={{fontSize:14,color:'var(--fg)',marginBottom:6,fontWeight:500}}>4its Admin – Fernsteuerung</div>
                <div style={{fontSize:13,color:'var(--fg-muted)',lineHeight:1.5}}>Bitte auf <strong style={{color:'var(--fg)'}}>„Zugriff erlauben"</strong> klicken. Erst dann sehen wir Ihren Bildschirm.</div>
              </div>
            </div>
            <p style={{fontSize:12,color:'var(--fg-dim)',fontStyle:'italic',margin:0}}>
              Hinweis: Sie müssen weder ID noch Passwort vorlesen — der Client verbindet sich automatisch mit unserem Support-Pool.
            </p>
          </div>
          <p style={{fontSize:12,color:'var(--fg-dim)',marginTop:20,textAlign:'center'}} className="mono">Der Zugriff erfolgt nur nach Ihrer ausdrücklichen Freigabe und nur für die Dauer der Sitzung.</p>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { AnfahrtPage, FernwartungPage });