/* global React */
// Pages: Blog (loads from blog.json), Blog Detail, Jobs, Kontakt

function useBlogPosts() {
  const [posts, setPosts] = useState(null);
  const [err, setErr] = useState(null);
  useEffect(() => {
    fetch('blog.json')
      .then(r => { if (!r.ok) throw new Error('HTTP '+r.status); return r.json(); })
      .then(setPosts)
      .catch(e => setErr(e.message));
  }, []);
  return { posts, err };
}

function formatDate(iso) {
  const [y, m, d] = iso.split('-');
  return `${d}.${m}.${y.slice(2)}`;
}

function BlogPage() {
  const { posts, err } = useBlogPosts();
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Blog'}]}
        eyebrow="Blog & News"
        title="Aus dem Maschinenraum."
        lead="Nachrichten, die wir für lesenswert halten. Keine SEO-Texte — nur Themen, bei denen wir selbst etwas gelernt haben."
      />
      <section className="section">
        <div className="container">
          {err && <p style={{color:'#EB6B5C'}}>Konnte Blog-Einträge nicht laden ({err}).</p>}
          {!posts && !err && <p className="mono" style={{color:'var(--fg-dim)'}}>Lade Artikel…</p>}
          {posts && (
            <div className="blog-list">
              {posts.map((p) => (
                <a key={p.slug} className="blog-item" href={`#/blog/${p.slug}`}>
                  <div className="blog-date">{formatDate(p.date)}</div>
                  <div>
                    <h4>{p.title}</h4>
                    <p>{p.excerpt}</p>
                    {p.tags && (
                      <div style={{display:'flex',gap:6,marginTop:10,flexWrap:'wrap'}}>
                        {p.tags.map(t => <span key={t} className="tag" style={{fontSize:10}}>{t}</span>)}
                      </div>
                    )}
                  </div>
                  <div className="blog-arrow"><ArrowRight size={18}/></div>
                </a>
              ))}
            </div>
          )}
        </div>
      </section>
    </div>
  );
}

function BlogDetailPage({ slug }) {
  const { posts, err } = useBlogPosts();
  const post = posts?.find(p => p.slug === slug);
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Blog',path:'#/blog'},{label: post?.title || 'Artikel'}]}
        eyebrow={post?.date ? formatDate(post.date) : 'Artikel'}
        title={post?.title || 'Artikel wird geladen…'}
        lead={post?.excerpt}
      />
      <section className="section">
        <div className="container" style={{maxWidth:720}}>
          {err && <p style={{color:'#EB6B5C'}}>Fehler beim Laden.</p>}
          {!posts && !err && <p className="mono" style={{color:'var(--fg-dim)'}}>Lade…</p>}
          {posts && !post && (
            <div>
              <p>Artikel nicht gefunden.</p>
              <a className="btn btn-ghost" href="#/blog" style={{marginTop:16}}>Zurück zum Blog</a>
            </div>
          )}
          {post && (
            <>
              <div style={{fontSize:17,lineHeight:1.7,color:'var(--fg-muted)',whiteSpace:'pre-wrap'}}>{post.body}</div>
              {post.tags && (
                <div style={{display:'flex',gap:8,marginTop:32,flexWrap:'wrap'}}>
                  {post.tags.map(t => <span key={t} className="tag">{t}</span>)}
                </div>
              )}
              <div style={{marginTop:48,paddingTop:32,borderTop:'1px solid var(--border-soft)'}}>
                <a className="btn btn-ghost" href="#/blog">← Alle Artikel</a>
              </div>
            </>
          )}
        </div>
      </section>
    </div>
  );
}

function JobsPage() {
  const jobs = [
    { t: 'Senior Systemadministrator', typ: 'Vollzeit', level: 'Senior', ort: 'Hamburg / Hybrid', d: 'Verantwortung für Kundensysteme, 2nd/3rd-Level, Projektleitung kleinerer Rollouts. Sie arbeiten direkt mit festen Kunden — Ticket-System ist ein Werkzeug, nicht Ihr Leben.' },
    { t: 'IT-Mitarbeiter 1st-Level-Support', typ: 'Vollzeit', level: 'Junior–Mid', ort: 'Hamburg', d: 'Erste Anlaufstelle für unsere Kunden. Telefon, Mail, Teamviewer. Sie lösen, was lösbar ist — und geben strukturiert ab, was weiter muss.' },
    { t: 'Junior System- / Netzwerk-Administrator', typ: 'Vollzeit', level: 'Junior', ort: 'Hamburg', d: 'Einstieg mit Mentoring. Sie wachsen mit realen Projekten und festen Ansprechpartnern — nicht in einer anonymen Lern-Pipeline.' },
  ];
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Jobs'}]}
        eyebrow="Jobs · Offene Stellen"
        title="Mit uns arbeiten."
        lead="Wir wachsen bewusst — und suchen Menschen, die Lust auf direkte Kundenbeziehungen haben. Kein Open-Space-Theater, keine synthetische Agilität."
      />
      <section className="section">
        <div className="container" style={{maxWidth:960}}>
          {jobs.map((j, i) => (
            <div key={i} className="job-card">
              <div>
                <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:8,textTransform:'uppercase'}}>{j.ort}</div>
                <h3>{j.t} (m/w/d)</h3>
                <p style={{fontSize:14,marginTop:8}}>{j.d}</p>
                <div className="job-tags">
                  <span className="tag">{j.typ}</span>
                  <span className="tag">{j.level}</span>
                  <span className="tag">Festanstellung</span>
                </div>
              </div>
              <a className="btn btn-ghost" href="#/kontakt">Bewerben <ArrowRight/></a>
            </div>
          ))}
          <div style={{marginTop:48,padding:32,border:'1px dashed var(--border)',borderRadius:12,textAlign:'center'}}>
            <p style={{fontSize:15}}>Nichts Passendes dabei?<br/>Initiativbewerbungen sind willkommen — wir lesen jede.</p>
            <a className="btn btn-ghost" href="mailto:jobs@4its.de" style={{marginTop:16}}>jobs@4its.de</a>
          </div>
        </div>
      </section>
    </div>
  );
}

function KontaktPage() {
  const [state, setState] = useState({ name:'', company:'', email:'', phone:'', topic:'service', message:'', consent:false, website:'', ts: Math.floor(Date.now()/1000) });
  const [errors, setErrors] = useState({});
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [submitError, setSubmitError] = useState('');
  const set = (k) => (e) => setState(s => ({ ...s, [k]: e.target.type === 'checkbox' ? e.target.checked : e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    setSubmitError('');
    const err = {};
    if (!state.name.trim()) err.name = 'Bitte Name angeben';
    if (!state.email.match(/^[^@\s]+@[^@\s]+\.[^@\s]+$/)) err.email = 'Gültige Mail-Adresse';
    if (!state.message.trim() || state.message.length < 10) err.message = 'Mindestens 10 Zeichen';
    if (!state.consent) err.consent = 'Bitte bestätigen';
    setErrors(err);
    if (Object.keys(err).length > 0) return;
    setSending(true);
    try {
      const res = await fetch('contact.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(state),
      });
      const data = await res.json().catch(() => ({}));
      if (res.ok && data.ok) {
        setSent(true);
      } else if (res.status === 422 && data.errors) {
        setErrors(data.errors);
      } else if (res.status === 429) {
        setSubmitError('Zu viele Anfragen von Ihrer Adresse. Bitte versuchen Sie es in einigen Minuten erneut — oder rufen Sie uns direkt an: +49 40 561947 0');
      } else {
        setSubmitError('Leider ist beim Senden etwas schiefgelaufen. Bitte rufen Sie uns an: +49 40 561947 0');
      }
    } catch (_) {
      setSubmitError('Netzwerkfehler. Bitte rufen Sie uns an: +49 40 561947 0');
    } finally {
      setSending(false);
    }
  };
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Kontakt'}]}
        eyebrow="Kontakt"
        title="Reden wir."
        lead="Ein Anruf ist fast immer schneller als ein Formular. Trotzdem — hier ist das Formular. Wir melden uns innerhalb eines Werktags."
      />
      <section className="section">
        <div className="container">
          <div className="two-col">
            <div>
              <Eyebrow>So erreichen Sie uns</Eyebrow>
              <h2 style={{marginTop:16, marginBottom:32}}>Direkt & ohne Umwege.</h2>
              <div style={{display:'grid',gap:24}}>
                <div><div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:6,textTransform:'uppercase'}}>Telefon</div><a href="tel:+494056194700" style={{fontSize:24,fontWeight:500,color:'var(--fg)'}} className="mono">+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:20,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'}}>Adresse</div><div style={{fontSize:16,color:'var(--fg)',lineHeight:1.5}}>Burchardstraße 22<br/>20095 Hamburg</div></div>
                <div><div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:6,textTransform:'uppercase'}}>Bürozeiten</div><div style={{fontSize:15,color:'var(--fg-muted)'}}>Mo – Fr · 09:00 – 18:00 Uhr<br/>Alle anderen Zeiten: Kunden-Hotline</div></div>
              </div>
              <div style={{marginTop:40,padding:24,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'}}>Fernwartung · Teamviewer</div>
                <div style={{display:'flex',gap:12}}>
                  <a className="btn btn-ghost" href="https://get.teamviewer.com/4itsgmbh" style={{flex:1}}>Windows</a>
                  <a className="btn btn-ghost" href="https://get.teamviewer.com/4itsgmbhmac" style={{flex:1}}>macOS</a>
                </div>
              </div>
            </div>
            <div>
              {sent ? (
                <div className="form-success">
                  <Icon d="M5 12l5 5L20 7" size={32}/>
                  <h3 style={{marginTop:16}}>Vielen Dank, {state.name.split(' ')[0]}!</h3>
                  <p style={{color:'var(--fg-muted)',marginTop:8}}>Wir haben Ihre Nachricht erhalten und melden uns innerhalb eines Werktags.</p>
                  <button className="btn btn-ghost" style={{marginTop:24}} onClick={() => { setSent(false); setState({ name:'', company:'', email:'', phone:'', topic:'service', message:'', consent:false, website:'', ts: Math.floor(Date.now()/1000) }); }}>Weitere Nachricht senden</button>
                </div>
              ) : (
                <form className="form-grid" onSubmit={submit} noValidate>
                  <div className="form-row">
                    <div className={`field ${errors.name?'error':''}`}><label>Name *</label><input type="text" value={state.name} onChange={set('name')} placeholder="Vor- und Nachname"/><span className="field-error">{errors.name}</span></div>
                    <div className="field"><label>Unternehmen</label><input type="text" value={state.company} onChange={set('company')} placeholder="Firma"/></div>
                  </div>
                  <div className="form-row">
                    <div className={`field ${errors.email?'error':''}`}><label>E-Mail *</label><input type="email" value={state.email} onChange={set('email')} placeholder="name@firma.de"/><span className="field-error">{errors.email}</span></div>
                    <div className="field"><label>Telefon</label><input type="tel" value={state.phone} onChange={set('phone')} placeholder="+49 …"/></div>
                  </div>
                  <div className="field"><label>Thema</label>
                    <select value={state.topic} onChange={set('topic')}>
                      <option value="service">IT-Service / Outsourcing</option>
                      <option value="beratung">Beratung / Projekt</option>
                      <option value="cloud">UNGANA Cloud</option>
                      <option value="exchange">UNGANA Exchange</option>
                      <option value="jobs">Bewerbung</option>
                      <option value="other">Etwas anderes</option>
                    </select>
                  </div>
                  <div className={`field ${errors.message?'error':''}`}><label>Nachricht *</label><textarea value={state.message} onChange={set('message')} placeholder="Worum geht es?"/><span className="field-error">{errors.message}</span></div>
                  <label className={`checkbox-row ${errors.consent?'error':''}`} style={{color: errors.consent?'#EB6B5C':undefined}}>
                    <input type="checkbox" checked={state.consent} onChange={set('consent')}/>
                    <span>Ich willige ein, dass meine Angaben zur Bearbeitung meiner Anfrage verwendet werden. Weiteres in der <a href="#/datenschutz" style={{textDecoration:'underline'}}>Datenschutzerklärung</a>.</span>
                  </label>
                  {/* Honeypot — für Menschen unsichtbar, Bots füllen es aus */}
                  <div style={{position:'absolute',left:'-9999px',top:'-9999px',width:1,height:1,overflow:'hidden'}} aria-hidden="true">
                    <label>Website (bitte leer lassen)<input type="text" tabIndex={-1} autoComplete="off" value={state.website} onChange={set('website')}/></label>
                  </div>
                  {submitError && <div style={{padding:'12px 16px',background:'rgba(235,107,92,0.1)',border:'1px solid rgba(235,107,92,0.3)',borderRadius:8,color:'#EB6B5C',fontSize:14}}>{submitError}</div>}
                  <button type="submit" disabled={sending} className="btn btn-primary" style={{justifyContent:'center',padding:'14px 20px',opacity:sending?0.6:1,cursor:sending?'wait':undefined}}>
                    {sending ? 'Wird gesendet…' : <>Nachricht senden <ArrowRight/></>}
                  </button>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

function SimplePage({ title, crumbs, body }) {
  return (
    <div className="page">
      <PageHeader crumbs={crumbs} eyebrow="Rechtliches" title={title} />
      <section className="section">
        <div className="container" style={{maxWidth:720}}>
          <div style={{fontSize:15,color:'var(--fg-muted)',lineHeight:1.7}}>{body}</div>
        </div>
      </section>
    </div>
  );
}

function ImpressumPage() {
  const Sec = ({h, children}) => (
    <section style={{marginTop:40}}>
      <h3 style={{fontSize:17,marginBottom:12,letterSpacing:'-0.01em'}}>{h}</h3>
      <div style={{fontSize:14,lineHeight:1.7,color:'var(--fg-muted)'}}>{children}</div>
    </section>
  );
  return (
    <div className="page">
      <PageHeader
        crumbs={[{label:'Start',path:'#/'},{label:'Impressum'}]}
        eyebrow="Rechtliches"
        title="Impressum"
      />
      <section className="section">
        <div className="container" style={{maxWidth:780}}>
          <div style={{display:'grid',gap:32,padding:32,border:'1px solid var(--border-soft)',borderRadius:14,background:'var(--surface)'}}>
            <div>
              <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:8,textTransform:'uppercase'}}>Angaben gemäß § 5 TMG</div>
              <div style={{fontSize:18,color:'var(--fg)',lineHeight:1.5}}>
                <strong>4its GmbH</strong><br/>
                Burchardstraße 22<br/>
                20095 Hamburg
              </div>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fit,minmax(200px,1fr))',gap:24}}>
              <div>
                <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:8,textTransform:'uppercase'}}>Vertreten durch</div>
                <div style={{fontSize:15}}>René Graetz</div>
              </div>
              <div>
                <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:8,textTransform:'uppercase'}}>Telefon</div>
                <a className="mono" style={{fontSize:14,color:'var(--fg)'}} href="tel:+494056194700">+49 (0) 40 56 19 47 0</a>
              </div>
              <div>
                <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:8,textTransform:'uppercase'}}>Telefax</div>
                <div className="mono" style={{fontSize:14,color:'var(--fg-muted)'}}>+49 (0) 40 56 19 47 50</div>
              </div>
              <div>
                <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:8,textTransform:'uppercase'}}>E-Mail</div>
                <a style={{fontSize:14,color:'var(--fg)'}} href="mailto:info@4its.de">info@4its.de</a>
              </div>
              <div>
                <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:8,textTransform:'uppercase'}}>USt-IdNr.</div>
                <div className="mono" style={{fontSize:14}}>DE 278804400</div>
                <div style={{fontSize:11,color:'var(--fg-dim)',marginTop:4}}>gemäß § 27a UStG</div>
              </div>
              <div>
                <div className="mono" style={{fontSize:11,color:'var(--fg-dim)',letterSpacing:'0.08em',marginBottom:8,textTransform:'uppercase'}}>V. i. S. d. P.</div>
                <div style={{fontSize:14}}>René Graetz<br/>Burchardstraße 22<br/>20095 Hamburg</div>
                <div style={{fontSize:11,color:'var(--fg-dim)',marginTop:4}}>§ 55 Abs. 2 RStV</div>
              </div>
            </div>
          </div>

          <Sec h="Streitschlichtung">
            <p style={{marginBottom:12}}>Die Europäische Kommission stellt eine Plattform zur Online-Streitbeilegung (OS) bereit: <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noreferrer" style={{textDecoration:'underline'}}>ec.europa.eu/consumers/odr</a>. Unsere E-Mail-Adresse finden Sie oben im Impressum.</p>
            <p>Wir sind nicht bereit oder verpflichtet, an Streitbeilegungsverfahren vor einer Verbraucher­schlichtungs­stelle teilzunehmen.</p>
          </Sec>

          <Sec h="Haftung für Inhalte">
            <p style={{marginBottom:12}}>Als Diensteanbieter sind wir gemäß § 7 Abs. 1 TMG für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen verantwortlich. Nach §§ 8 bis 10 TMG sind wir als Diensteanbieter jedoch nicht verpflichtet, übermittelte oder gespeicherte fremde Informationen zu überwachen oder nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.</p>
            <p>Verpflichtungen zur Entfernung oder Sperrung der Nutzung von Informationen nach den allgemeinen Gesetzen bleiben hiervon unberührt. Eine diesbezügliche Haftung ist jedoch erst ab dem Zeitpunkt der Kenntnis einer konkreten Rechtsverletzung möglich. Bei Bekanntwerden von entsprechenden Rechtsverletzungen werden wir diese Inhalte umgehend entfernen.</p>
          </Sec>

          <Sec h="Haftung für Links">
            <p style={{marginBottom:12}}>Unser Angebot enthält Links zu externen Websites Dritter, auf deren Inhalte wir keinen Einfluss haben. Deshalb können wir für diese fremden Inhalte auch keine Gewähr übernehmen. Für die Inhalte der verlinkten Seiten ist stets der jeweilige Anbieter oder Betreiber der Seiten verantwortlich. Die verlinkten Seiten wurden zum Zeitpunkt der Verlinkung auf mögliche Rechtsverstöße überprüft. Rechtswidrige Inhalte waren zum Zeitpunkt der Verlinkung nicht erkennbar.</p>
            <p>Eine permanente inhaltliche Kontrolle der verlinkten Seiten ist jedoch ohne konkrete Anhaltspunkte einer Rechtsverletzung nicht zumutbar. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Links umgehend entfernen.</p>
          </Sec>

          <Sec h="Urheberrecht">
            <p style={{marginBottom:12}}>Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung, Verbreitung und jede Art der Verwertung außerhalb der Grenzen des Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors bzw. Erstellers. Downloads und Kopien dieser Seite sind nur für den privaten, nicht kommerziellen Gebrauch gestattet.</p>
            <p>Soweit die Inhalte auf dieser Seite nicht vom Betreiber erstellt wurden, werden die Urheberrechte Dritter beachtet. Insbesondere werden Inhalte Dritter als solche gekennzeichnet. Sollten Sie trotzdem auf eine Urheberrechts­verletzung aufmerksam werden, bitten wir um einen entsprechenden Hinweis. Bei Bekanntwerden von Rechtsverletzungen werden wir derartige Inhalte umgehend entfernen.</p>
          </Sec>

          <Sec h="Bildmaterial">
            <details style={{cursor:'pointer'}}>
              <summary style={{color:'var(--fg)',fontSize:14,padding:'8px 0'}}>Bildnachweise anzeigen</summary>
              <div className="mono" style={{fontSize:12,color:'var(--fg-dim)',lineHeight:1.8,marginTop:12,columnCount:2,columnGap:24}}>
                {['adventtr','BartCo','blueflames','davidf','diego_cervo','DrGrounds','endopack','fpm','Franck-Boston','H-Gall','ictor','iLexx','italianestro','jaroon','jpa1999','LajosRepasi','lisafx','monkeybusinessimages','morganl','Neustockimages','pixdeluxe','RTimages','rzdeb','sjlock','stevecoleccs','tgellan','theboone','TommL','urbancow','WillSelarep','Yuri_Arcurs','Zog','scanrail','paulgrecaud','Niklebedev51','bb_1'].map(n => <div key={n}>@istockphoto · {n}</div>)}
                <div>@photocase · AndreasF.</div>
              </div>
            </details>
          </Sec>

          <div style={{marginTop:56,paddingTop:32,borderTop:'1px solid var(--border-soft)'}}>
            <details>
              <summary style={{color:'var(--fg-dim)',fontSize:13,cursor:'pointer',padding:'8px 0'}} className="mono">SITE NOTICE (ENGLISH VERSION)</summary>
              <div style={{marginTop:24,fontSize:14,lineHeight:1.7,color:'var(--fg-muted)'}}>
                <p style={{marginBottom:12}}><strong style={{color:'var(--fg)'}}>Information provided according to Sec. 5 German Telemedia Act (TMG):</strong><br/>4its GmbH · Burchardstraße 22 · 20095 Hamburg</p>
                <p style={{marginBottom:12}}><strong style={{color:'var(--fg)'}}>Represented by:</strong> René Graetz</p>
                <p style={{marginBottom:12}}><strong style={{color:'var(--fg)'}}>Contact:</strong> Phone +49 (0) 40 56 19 47 0 · Fax +49 (0) 40 56 19 47 50 · Email info@4its.de</p>
                <p style={{marginBottom:12}}><strong style={{color:'var(--fg)'}}>VAT ID (Sec. 27a UStG):</strong> DE 278804400</p>
                <p>The European Commission provides a platform for online dispute resolution: <a href="https://ec.europa.eu/consumers/odr" target="_blank" rel="noreferrer" style={{textDecoration:'underline'}}>ec.europa.eu/consumers/odr</a>. We do not take part in online dispute resolutions at consumer arbitration boards.</p>
              </div>
            </details>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ImpressumPage });