/* global React, Icon, Button */

function Conditions({ onBook }) {
  const isMobile = useIsMobile();
  const items = [
    { icon: 'droplet',     title: 'Trockene Augen',         body: 'Brennen, Juckreiz, Fremdkörpergefühl — Beratung und Therapie.' },
    { icon: 'glasses', title: 'Lidproblem/Schwellung', body: 'Druckschmerz, Lidrandentzündung, Gerstenkorn/Hagelkorn' },
    { icon: 'file-text', title: 'Aufklärung über Erkrankung', body: 'u.a. Altersbedingte Makuladegeneration, Glaukom, Grauer Star, u.v.m.' },
    { icon: 'eye',         title: 'Rötung/Reizung',    body: 'Rote, juckende Augen, Entzündung, Allergien — schnelle Einschätzung und Therapie.' },
    { icon: 'shield-alert',title: 'Zweitmeinung',           body: 'Fachärztliche Einschätzung zu einem bestehenden Befund.' },
  ];
  return (
    <section id="sprechstunde" className="section">
      <div className="container">
        <div className="spread" style={{ marginBottom: 48, alignItems: isMobile ? 'flex-start' : 'flex-end', gap: isMobile ? 24 : 48, flexDirection: isMobile ? 'column' : 'row' }}>
          <div className="section-head">
            <span className="eyebrow">Sprechstunde</span>
            <h2>Wobei wir Ihnen helfen können.</h2>
            <p>Die häufigsten Anliegen unserer Patient:innen. Sie sind sich unsicher? Schildern Sie einfach Ihre Symptome — wir leiten Sie weiter.</p>
          </div>
          <Button variant="ghost" iconRight="arrow-right">Alle Leistungen</Button>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(3, 1fr)', gap: 16 }}>
          {items.map(it => (
            <a key={it.title} href="https://www.etermin.net/blickdoktor" target="_blank" rel="noopener" className="card card-interactive" style={{ display: 'block', textDecoration: 'none', color: 'inherit',
              textAlign: 'left', cursor: 'pointer', border: '1px solid var(--bd-line)'
            }}>
              <div className="spread" style={{ alignItems: 'flex-start', marginBottom: 16 }}>
                <span style={{
                  width: 40, height: 40, borderRadius: 'var(--r-md)',
                  background: 'var(--bd-sage-50)', color: 'var(--bd-sage-700)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center'
                }}>
                  <Icon name={it.icon} size={20} />
                </span>
              </div>
              <h3 style={{ margin: '0 0 6px', fontSize: 20 }}>{it.title}</h3>
              <p style={{ margin: 0, color: 'var(--fg-2)', fontSize: 14.5, lineHeight: 1.55 }}>{it.body}</p>
            </a>
          ))}
        </div>
<div style={{
          marginTop: 32,
          display: 'flex', gap: 16, padding: '18px 22px',
          background: 'var(--bd-warning-bg)',
          border: '1px solid var(--bd-warning-border, transparent)',
          borderRadius: 'var(--r-lg)', alignItems: 'flex-start'
        }}>
          <span style={{
            width: 36, height: 36, borderRadius: 999, flex: 'none',
            background: 'rgba(255,255,255,0.6)', color: 'var(--bd-warning)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
          }}>
            <Icon name="alert-triangle" size={18} />
          </span>
          <div className="stack-2" style={{ flex: 1 }}>
            <strong style={{ fontSize: 15.5, color: 'var(--bd-warning)', fontWeight: 600 }}>
              Akute Beschwerden oder Notfall?
            </strong>
            <p style={{ margin: 0, fontSize: 14, color: 'var(--bd-warning)', lineHeight: 1.55, maxWidth: 720 }}>
              Bei akuter Sehverschlechterung, Doppelbildern, oder starken Schmerzen melden Sie sich bitte
              sofort bei der <strong>116117</strong> oder <strong>112</strong> sowie bei ortsnahen Augenärzt:innen.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Conditions });