// search-page.jsx — /search page (desktop + mobile)
//
// Pattern: a clear search-hero, a filter chip row, a result-rich list,
// load-more at the bottom. Reuses Header / Footer / page-frame styling.
// Demo data only — visual mock, not functional.

const SEARCH_QUERY = "gotthard";

const SEARCH_RESULTS = [
  {
    kind: 'Angebot',
    bg: 'bg-mountain-sunset',
    title: 'Gotthard-Rundfahrt',
    body: 'Legendäre Passroute über den historischen Gotthard — Geschichte, Panorama und Abenteuer in einer Tour. Inkl. Tremola und Hospiz.',
    crumb: 'Angebot · Saisonale Angebote',
    date: null,
  },
  {
    kind: 'Linie',
    bg: 'bg-alps',
    title: 'Linie 401 · Flüelen – Göschenen',
    body: 'Die Hauptachse durch das Reusstal bis zum Gotthardportal. Verkehrt täglich im Halbstundentakt.',
    crumb: 'Fahrplan · Linien',
    date: null,
  },
  {
    kind: 'News',
    bg: 'bg-mountain-day',
    title: 'Sonderfahrten Gotthard-Hospiz im August',
    body: 'Während der Sommerferien führen wir zusätzliche Wochenend-Sonderfahrten zum Hospiz durch — auf Wunsch mit Führung.',
    crumb: 'Aktuelles · News',
    date: '23. Juni 2025',
  },
  {
    kind: 'Seite',
    bg: 'bg-bus-night',
    title: 'Spezialbillette & Kombi-Angebote',
    body: 'Kombi-Tickets mit Urner Seilbahnen, Skigebieten und Partner-Transportunternehmen — auch für die Gotthard-Route.',
    crumb: 'Angebot · Tickets',
    date: null,
  },
  {
    kind: 'FAQ',
    bg: 'bg-mountain-day',
    title: 'Bis wann fährt der Bus über den Gotthardpass?',
    body: 'Der Busbetrieb über den Gotthardpass ist saisonal. Die Strecke ist in der Regel von Juni bis Oktober befahrbar — abhängig von den Schneeverhältnissen.',
    crumb: 'Häufige Fragen',
    date: null,
  },
  {
    kind: 'Angebot',
    bg: 'bg-lake',
    title: 'Tellbus — Schnellbus durch den Seelisbergtunnel',
    body: 'Schnellbusverbindung Altdorf – Luzern. Fahrzeit knapp 45 Minuten, direkt vom Bahnhof — eine schnelle Alternative zur Gotthardachse.',
    crumb: 'Angebot · Tellbus',
    date: null,
  },
];

const SEARCH_FILTERS = [
  {label: 'Alle',        count: 23, active: true},
  {label: 'Angebot',     count:  8},
  {label: 'Linien',      count:  4},
  {label: 'Fahrplan',    count:  3},
  {label: 'News',        count:  5},
  {label: 'Seiten',      count:  3},
];

// ───────── Result row (desktop) ─────────
function SearchResultRow({r}) {
  return (
    <a href="#" style={{
      display: 'grid',
      gridTemplateColumns: '200px 1fr auto',
      gap: 28,
      padding: '22px 0',
      borderBottom: '1px solid var(--line-2)',
      textDecoration: 'none',
      color: 'inherit',
      alignItems: 'center',
    }}>
      {/* Thumb / kind chip */}
      <div style={{position: 'relative'}}>
        {r.kind === 'Linie' && r.line ? (
          <div style={{
            height: 130,
            borderRadius: 12,
            background: r.color,
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'white',
            fontFamily: 'var(--font-display)',
            fontWeight: 800,
            fontSize: 48,
            letterSpacing: '-0.02em',
          }}>
            {r.line}
          </div>
        ) : r.kind === 'FAQ' && !r.bg ? (
          <div style={{
            height: 130,
            borderRadius: 12,
            background: 'var(--brand-orange-tint)',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'var(--brand-orange-dark)',
            fontFamily: 'var(--font-display)',
            fontWeight: 800,
            fontSize: 64,
            lineHeight: 1,
          }}>
            ?
          </div>
        ) : (
          <div className={r.bg} style={{height: 130, borderRadius: 12, position: 'relative', overflow: 'hidden'}}/>
        )}
      </div>

      {/* Body */}
      <div>
        <div style={{display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8}}>
          <span style={{
            fontFamily: 'var(--font-display)',
            fontWeight: 700,
            fontSize: 11,
            letterSpacing: '0.14em',
            textTransform: 'uppercase',
            color: 'var(--brand-orange-dark)',
            padding: '4px 10px',
            background: 'var(--brand-orange-tint)',
            borderRadius: 999,
          }}>{r.kind}</span>
          <span style={{fontSize: 13, color: 'var(--gray-500)'}}>{r.crumb}</span>
          {r.date && <>
            <span style={{width: 3, height: 3, borderRadius: '50%', background: 'var(--gray-400)'}}/>
            <span style={{fontSize: 13, color: 'var(--gray-500)'}}>{r.date}</span>
          </>}
        </div>
        <h3 style={{
          fontFamily: 'var(--font-display)',
          fontSize: 24,
          fontWeight: 700,
          letterSpacing: '-0.015em',
          marginBottom: 6,
          color: 'var(--gray-900)',
        }}>
          {highlight(r.title, SEARCH_QUERY)}
        </h3>
        <p style={{fontSize: 15, color: 'var(--gray-600)', lineHeight: 1.55, maxWidth: 680}}>
          {highlight(r.body, SEARCH_QUERY)}
        </p>
      </div>

      {/* Affordance arrow */}
      <span style={{
        width: 44, height: 44, borderRadius: '50%',
        border: '1.5px solid var(--line)',
        color: 'var(--gray-800)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        flexShrink: 0,
      }}><I.Arrow/></span>
    </a>
  );
}

// Word-highlight helper — wraps the query in a <mark>
function highlight(text, q) {
  if (!q) return text;
  const re = new RegExp(`(${q.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')})`, 'gi');
  const parts = text.split(re);
  return parts.map((p, i) =>
    re.test(p)
      ? <mark key={i} style={{background: 'var(--brand-orange-tint)', color: 'var(--brand-orange-dark)', padding: '0 2px', borderRadius: 3, fontWeight: 600}}>{p}</mark>
      : <React.Fragment key={i}>{p}</React.Fragment>
  );
}

// ───────── Desktop SearchPage ─────────
function SearchPage() {
  return (
    <div className="page-frame">
      <Header/>

      {/* Search hero — calm light surface, big input */}
      <div style={{background: 'var(--bg-warm)', borderBottom: '1px solid var(--line-2)'}}>
        <div className="block-inner" style={{paddingTop: 56, paddingBottom: 40}}>
          <nav style={{display: 'flex', gap: 8, fontSize: 13, color: 'var(--gray-500)', marginBottom: 18}}>
            <a href="#" style={{color: 'inherit', textDecoration: 'none'}}>Home</a>
            <span>›</span>
            <span style={{color: 'var(--gray-800)'}}>Suche</span>
          </nav>
          <h1 style={{fontSize: 56, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.05, marginBottom: 26}}>
            Suche
          </h1>

          {/* Search input — pill-shaped, large */}
          <form onSubmit={(e) => e.preventDefault()} style={{
            display: 'flex',
            alignItems: 'center',
            gap: 12,
            background: 'white',
            border: '1.5px solid var(--gray-900)',
            borderRadius: 999,
            padding: '8px 8px 8px 26px',
            maxWidth: 760,
            boxShadow: 'var(--shadow-card)',
          }}>
            <span style={{color: 'var(--gray-600)'}}><I.Search/></span>
            <input
              type="text"
              defaultValue={SEARCH_QUERY}
              placeholder="Linie, Haltestelle, Angebot oder Stichwort…"
              style={{
                flex: 1,
                border: 0,
                outline: 'none',
                background: 'transparent',
                fontFamily: 'var(--font-body)',
                fontSize: 18,
                color: 'var(--gray-900)',
                padding: '14px 0',
              }}
            />
            <button type="button" style={{
              border: 0,
              background: 'transparent',
              color: 'var(--gray-500)',
              fontSize: 13,
              cursor: 'pointer',
              padding: '0 8px',
            }}>Löschen</button>
            <button type="submit" className="btn btn-primary" style={{padding: '14px 26px'}}>
              Suchen
            </button>
          </form>

          {/* Result count + sort */}
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            marginTop: 24,
          }}>
            <div style={{fontSize: 14, color: 'var(--gray-600)'}}>
              <strong style={{color: 'var(--gray-900)'}}>23 Resultate</strong> für „<span style={{color: 'var(--brand-orange-dark)', fontWeight: 600}}>{SEARCH_QUERY}</span>"
            </div>
            <label style={{display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--gray-600)'}}>
              Sortieren nach
              <span style={{
                display: 'inline-flex',
                alignItems: 'center',
                gap: 6,
                padding: '8px 14px',
                background: 'white',
                border: '1px solid var(--line)',
                borderRadius: 10,
                color: 'var(--gray-900)',
                fontWeight: 600,
              }}>Relevanz <I.ChevronDown/></span>
            </label>
          </div>
        </div>
      </div>

      {/* Filter row */}
      <div style={{borderBottom: '1px solid var(--line-2)', background: 'white'}}>
        <div className="block-inner" style={{paddingTop: 18, paddingBottom: 18, display: 'flex', gap: 10, flexWrap: 'wrap'}}>
          {SEARCH_FILTERS.map(f => (
            <button key={f.label} style={{
              border: f.active ? '1.5px solid var(--gray-900)' : '1px solid var(--line)',
              background: f.active ? 'var(--gray-900)' : 'white',
              color: f.active ? 'white' : 'var(--gray-800)',
              padding: '10px 16px',
              borderRadius: 999,
              fontFamily: 'var(--font-display)',
              fontSize: 14,
              fontWeight: 600,
              cursor: 'pointer',
              display: 'inline-flex',
              alignItems: 'center',
              gap: 8,
            }}>
              {f.label}
              <span style={{
                fontSize: 12,
                fontWeight: 600,
                color: f.active ? 'rgba(255,255,255,0.7)' : 'var(--gray-500)',
                background: f.active ? 'rgba(255,255,255,0.15)' : 'var(--line-2)',
                padding: '2px 8px',
                borderRadius: 999,
              }}>{f.count}</span>
            </button>
          ))}
        </div>
      </div>

      {/* Results list */}
      <div className="block-inner" style={{paddingTop: 16, paddingBottom: 24}}>
        <div>
          {SEARCH_RESULTS.map((r, i) => <SearchResultRow key={i} r={r}/>)}
        </div>

        <div style={{display: 'flex', justifyContent: 'center', padding: '36px 0 16px'}}>
          <button className="btn btn-ghost" style={{padding: '14px 26px'}}>
            Weitere 17 Resultate laden
          </button>
        </div>
      </div>

      {/* Helpful suggestions block */}
      <div style={{background: 'var(--bg-warm)', borderTop: '1px solid var(--line-2)'}}>
        <div className="block-inner" style={{paddingTop: 48, paddingBottom: 48}}>
          <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 32}}>
            <div>
              <h3 style={{fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, marginBottom: 12}}>Beliebte Suchen</h3>
              <div style={{display: 'flex', flexWrap: 'wrap', gap: 8}}>
                {['Fahrplan', 'Klausenpass', 'Linie 401', 'Tellbus', 'Abo', 'FAIRTIQ'].map(t => (
                  <a key={t} href="#" style={{
                    padding: '6px 12px',
                    border: '1px solid var(--line)',
                    borderRadius: 999,
                    fontSize: 13,
                    color: 'var(--gray-800)',
                    textDecoration: 'none',
                    background: 'white',
                  }}>{t}</a>
                ))}
              </div>
            </div>
            <div>
              <h3 style={{fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, marginBottom: 12}}>Direkt zu</h3>
              <ul style={{listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 8}}>
                {[
                  {icon: <I.Search/>, label: 'Online-Fahrplan'},
                  {icon: <I.Map/>,    label: 'Linien & Karte'},
                  {icon: <I.Alert/>,  label: 'Aktuelle Störungen'},
                  {icon: <I.Ticket/>, label: 'Tickets & Tarife'},
                ].map(l => (
                  <li key={l.label}>
                    <a href="#" className="link-arrow" style={{fontSize: 14}}>
                      <span style={{display: 'inline-flex', width: 22, color: 'var(--brand-orange-dark)'}}>{l.icon}</span>
                      {l.label}
                    </a>
                  </li>
                ))}
              </ul>
            </div>
            <div>
              <h3 style={{fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 18, marginBottom: 12}}>Nicht gefunden?</h3>
              <p style={{fontSize: 14, color: 'var(--gray-600)', lineHeight: 1.55, marginBottom: 14}}>
                Unser Team beantwortet Ihre Fragen gerne persönlich — telefonisch oder per Mail.
              </p>
              <a href="#" className="link-arrow" style={{fontSize: 14}}>Kontakt aufnehmen <I.Arrow/></a>
            </div>
          </div>
        </div>
      </div>

      <Footer/>
    </div>
  );
}

// ───────── Mobile SearchPage ─────────
function MSearchPage() {
  return (
    <div className="page-frame" style={{fontSize: 15}}>
      <HeaderMobile/>

      {/* Search hero */}
      <div style={{background: 'var(--bg-warm)', padding: '24px 16px 18px', borderBottom: '1px solid var(--line-2)'}}>
        <nav style={{display: 'flex', gap: 6, fontSize: 12, color: 'var(--gray-500)', marginBottom: 10}}>
          <a href="#" style={{color: 'inherit', textDecoration: 'none'}}>Home</a>
          <span>›</span>
          <span style={{color: 'var(--gray-800)'}}>Suche</span>
        </nav>
        <h1 style={{fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.05, marginBottom: 16}}>
          Suche
        </h1>

        <form onSubmit={(e) => e.preventDefault()} style={{
          display: 'flex',
          alignItems: 'center',
          gap: 8,
          background: 'white',
          border: '1.5px solid var(--gray-900)',
          borderRadius: 999,
          padding: '6px 6px 6px 18px',
        }}>
          <span style={{color: 'var(--gray-600)', display: 'inline-flex'}}><I.Search/></span>
          <input
            type="text"
            defaultValue={SEARCH_QUERY}
            placeholder="Suchen…"
            style={{
              flex: 1, border: 0, outline: 'none', background: 'transparent',
              fontFamily: 'var(--font-body)', fontSize: 15, color: 'var(--gray-900)',
              padding: '10px 0', minWidth: 0,
            }}
          />
          <button type="submit" className="btn btn-primary" style={{padding: '10px 18px', fontSize: 14}}>
            OK
          </button>
        </form>

        <div style={{fontSize: 13, color: 'var(--gray-600)', marginTop: 12}}>
          <strong style={{color: 'var(--gray-900)'}}>23 Resultate</strong> für „<span style={{color: 'var(--brand-orange-dark)', fontWeight: 600}}>{SEARCH_QUERY}</span>"
        </div>
      </div>

      {/* Filter chips — horizontal scroll */}
      <div style={{
        display: 'flex',
        gap: 8,
        overflowX: 'auto',
        padding: '14px 16px',
        background: 'white',
        borderBottom: '1px solid var(--line-2)',
      }}>
        {SEARCH_FILTERS.map(f => (
          <button key={f.label} style={{
            flexShrink: 0,
            border: f.active ? '1.5px solid var(--gray-900)' : '1px solid var(--line)',
            background: f.active ? 'var(--gray-900)' : 'white',
            color: f.active ? 'white' : 'var(--gray-800)',
            padding: '8px 14px',
            borderRadius: 999,
            fontFamily: 'var(--font-display)',
            fontSize: 13,
            fontWeight: 600,
            display: 'inline-flex',
            alignItems: 'center',
            gap: 6,
          }}>
            {f.label}
            <span style={{
              fontSize: 11,
              color: f.active ? 'rgba(255,255,255,0.7)' : 'var(--gray-500)',
            }}>{f.count}</span>
          </button>
        ))}
      </div>

      {/* Results — compact mobile cards */}
      <div style={{padding: '4px 16px 24px'}}>
        {SEARCH_RESULTS.map((r, i) => (
          <a key={i} href="#" style={{
            display: 'grid',
            gridTemplateColumns: '92px 1fr',
            gap: 14,
            padding: '16px 0',
            borderBottom: '1px solid var(--line-2)',
            textDecoration: 'none',
            color: 'inherit',
          }}>
            {r.kind === 'Linie' && r.line ? (
              <div style={{
                height: 92,
                borderRadius: 10,
                background: r.color,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'white', fontFamily: 'var(--font-display)',
                fontWeight: 800, fontSize: 30, letterSpacing: '-0.02em',
              }}>{r.line}</div>
            ) : r.kind === 'FAQ' && !r.bg ? (
              <div style={{
                height: 92,
                borderRadius: 10,
                background: 'var(--brand-orange-tint)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                color: 'var(--brand-orange-dark)', fontFamily: 'var(--font-display)',
                fontWeight: 800, fontSize: 44, lineHeight: 1,
              }}>?</div>
            ) : (
              <div className={r.bg} style={{height: 92, borderRadius: 10, position: 'relative', overflow: 'hidden'}}/>
            )}
            <div style={{minWidth: 0}}>
              <div style={{display: 'flex', alignItems: 'center', gap: 6, marginBottom: 4, flexWrap: 'wrap'}}>
                <span style={{
                  fontFamily: 'var(--font-display)',
                  fontWeight: 700, fontSize: 10, letterSpacing: '0.12em',
                  textTransform: 'uppercase',
                  color: 'var(--brand-orange-dark)',
                  padding: '3px 8px',
                  background: 'var(--brand-orange-tint)',
                  borderRadius: 999,
                }}>{r.kind}</span>
                {r.date && <span style={{fontSize: 11, color: 'var(--gray-500)'}}>{r.date}</span>}
              </div>
              <h3 style={{
                fontFamily: 'var(--font-display)', fontSize: 16, fontWeight: 700,
                letterSpacing: '-0.01em', lineHeight: 1.3, marginBottom: 4,
                color: 'var(--gray-900)',
              }}>
                {highlight(r.title, SEARCH_QUERY)}
              </h3>
              <p style={{
                fontSize: 13, color: 'var(--gray-600)', lineHeight: 1.45,
                display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical',
                overflow: 'hidden',
              }}>
                {highlight(r.body, SEARCH_QUERY)}
              </p>
              <div style={{fontSize: 11, color: 'var(--gray-500)', marginTop: 4}}>{r.crumb}</div>
            </div>
          </a>
        ))}

        <div style={{display: 'flex', justifyContent: 'center', padding: '22px 0 8px'}}>
          <button className="btn btn-ghost" style={{padding: '12px 22px', fontSize: 14}}>
            17 weitere Resultate laden
          </button>
        </div>
      </div>

      {/* Helpful blocks (stacked) */}
      <div style={{background: 'var(--bg-warm)', padding: '24px 16px 28px', borderTop: '1px solid var(--line-2)'}}>
        <h3 style={{fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, marginBottom: 10}}>Beliebte Suchen</h3>
        <div style={{display: 'flex', flexWrap: 'wrap', gap: 8, marginBottom: 22}}>
          {['Fahrplan', 'Klausenpass', 'Linie 401', 'Tellbus', 'Abo'].map(t => (
            <a key={t} href="#" style={{
              padding: '6px 12px',
              border: '1px solid var(--line)',
              borderRadius: 999,
              fontSize: 13, color: 'var(--gray-800)',
              textDecoration: 'none',
              background: 'white',
            }}>{t}</a>
          ))}
        </div>

        <h3 style={{fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 16, marginBottom: 10}}>Nicht gefunden?</h3>
        <p style={{fontSize: 13, color: 'var(--gray-600)', lineHeight: 1.5, marginBottom: 10}}>
          Unser Team beantwortet Ihre Fragen gerne persönlich — telefonisch oder per Mail.
        </p>
        <a href="#" className="link-arrow" style={{fontSize: 14}}>Kontakt aufnehmen <I.Arrow/></a>
      </div>

      <MFooter showMeta={false}/>
    </div>
  );
}

Object.assign(window, { SearchPage, MSearchPage });