Dodaj widok Pomoc i kontakt w panelu uzytkownika

frontend/src/App.tsx

@@ -9,7 +9,7 @@ const cityImage = new URL('./assets/city-panorama.png', import.meta.url).href;
 const loginRoomImage = new URL('./assets/login-room.png', import.meta.url).href;
 const SMS_VERIFICATION_CODE = '123456';
 
-type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'map' | 'login' | 'account' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
+type View = 'home' | 'buy' | 'rent' | 'sell' | 'valuation' | 'priceHistory' | 'districtRanking' | 'negotiation' | 'comparison' | 'add' | 'services' | 'guides' | 'map' | 'login' | 'account' | 'accountPriceAlerts' | 'accountMeetings' | 'accountListings' | 'accountSettings' | 'accountSecurity' | 'accountProfileEdit' | 'accountPublicProfile' | 'accountHelpContact' | 'notifications' | 'favorites' | 'messages' | 'admin' | 'listingDetail';
 
 type MessageThreadListing = {
   listingId: number;
@@ -110,7 +110,7 @@ const LIVE_LISTINGS_REFRESH_MS = 15000;
 
 const PROTECTED_VIEWS = new Set<View>([
   'add', 'admin', 'account', 'accountPriceAlerts', 'accountMeetings', 'accountListings', 'accountSettings',
-  'accountSecurity', 'accountProfileEdit', 'accountPublicProfile', 'notifications', 'favorites', 'messages', 'comparison',
+  'accountSecurity', 'accountProfileEdit', 'accountPublicProfile', 'accountHelpContact', 'notifications', 'favorites', 'messages', 'comparison',
 ]);
 
 type NotificationCategory = 'listing' | 'messages' | 'system';
@@ -2914,6 +2914,7 @@ function App() {
         {view === 'accountSecurity' && <AccountSecurityPage onNavigate={navigate} activeView={view} />}
         {view === 'accountProfileEdit' && <AccountProfileEditPage onNavigate={navigate} activeView={view} />}
         {view === 'accountPublicProfile' && <AccountPublicProfilePage onNavigate={navigate} activeView={view} />}
+        {view === 'accountHelpContact' && <AccountHelpContactPage onNavigate={navigate} activeView={view} />}
         {view === 'notifications' && <NotificationsPage />}
         {view === 'messages' && (
           <MessagesPage
@@ -4412,6 +4413,7 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
   const { user } = useAuth();
   const isSettingsView = activeView === 'accountSettings' || activeView === 'accountProfileEdit' || activeView === 'accountPublicProfile';
   const isSecurityView = activeView === 'accountSecurity';
+  const isHelpContactView = activeView === 'accountHelpContact';
   const isDashboardView = activeView === 'account';
   const isPriceAlertsView = activeView === 'accountPriceAlerts';
   const isMeetingsView = activeView === 'accountMeetings';
@@ -4483,7 +4485,7 @@ function AccountSidebar({ onNavigate, activeView }: { onNavigate: (view: View) =
         <button className={isSettingsView ? 'active' : ''} onClick={() => onNavigate('accountSettings')}><Icon name="gear" /> Dane i ustawienia</button>
         <button className={activeView === 'notifications' ? 'active' : ''} onClick={() => onNavigate('notifications')}><Icon name="bell" /> Powiadomienia</button>
         <button className={isSecurityView ? 'active' : ''} onClick={() => onNavigate('accountSecurity')}><Icon name="shield" /> Bezpieczeństwo</button>
-        <button><Icon name="phone" /> Pomoc i kontakt</button>
+        <button className={isHelpContactView ? 'active' : ''} onClick={() => onNavigate('accountHelpContact')}><Icon name="phone" /> Pomoc i kontakt</button>
       </div>
 
       <div className="account-premium-card">
@@ -4942,6 +4944,189 @@ function AccountDashboardPage({ onNavigate, activeView }: { onNavigate: (view: V
   );
 }
 
+function AccountHelpContactPage({ onNavigate, activeView }: { onNavigate: (view: View) => void; activeView: View }) {
+  const supportChannels = [
+    {
+      id: 'live-chat',
+      icon: 'message',
+      iconTone: 'green',
+      title: 'Czat na żywo',
+      badge: 'Najszybsza pomoc',
+      description: 'Porozmawiaj z naszym konsultantem w czasie rzeczywistym.',
+      action: 'Dostępny 8:00 - 20:00',
+    },
+    {
+      id: 'email',
+      icon: 'mail',
+      iconTone: 'blue',
+      title: 'E-mail',
+      description: 'Napisz do nas, odpowiemy najszybciej jak to możliwe.',
+      action: 'bok@mieszko.pl',
+    },
+    {
+      id: 'phone',
+      icon: 'phone',
+      iconTone: 'violet',
+      title: 'Telefon',
+      description: 'Zadzwoń do nas, chętnie odpowiemy na Twoje pytania.',
+      action: '+48 22 123 45 67',
+    },
+    {
+      id: 'form',
+      icon: 'document',
+      iconTone: 'orange',
+      title: 'Formularz kontaktowy',
+      description: 'Wyślij nam wiadomość, a my skontaktujemy się z Tobą.',
+      action: 'Przejdź do formularza',
+    },
+  ] as const;
+
+  const faqItems = [
+    'Jak dodać ogłoszenie?',
+    'Ile kosztuje dodanie ogłoszenia?',
+    'Jak wyróżnić moje ogłoszenie?',
+    'Jak edytować lub usunąć ogłoszenie?',
+    'Jak działa porównywarka mieszkań?',
+    'Jak ustawić alerty cenowe?',
+  ] as const;
+
+  const moreHelpCards = [
+    {
+      id: 'guides',
+      icon: 'document',
+      iconTone: 'green',
+      title: 'Poradniki',
+      description: 'Praktyczne artykuły i wskazówki dotyczące kupna, sprzedaży i wynajmu nieruchomości.',
+      action: 'Zobacz poradniki',
+    },
+    {
+      id: 'security',
+      icon: 'shield',
+      iconTone: 'gold',
+      title: 'Bezpieczeństwo',
+      description: 'Dowiedz się jak bezpiecznie korzystać z serwisu i unikać oszustw.',
+      action: 'Zasady bezpieczeństwa',
+    },
+    {
+      id: 'rules',
+      icon: 'list',
+      iconTone: 'blue',
+      title: 'Regulamin i zasady',
+      description: 'Zapoznaj się z regulaminem serwisu oraz zasadami korzystania.',
+      action: 'Przeczytaj regulamin',
+    },
+    {
+      id: 'report',
+      icon: 'warning',
+      iconTone: 'red',
+      title: 'Zgłoś problem',
+      description: 'Zgłoś nieodpowiednie treści lub problemy techniczne.',
+      action: 'Zgłoś',
+    },
+  ] as const;
+
+  return (
+    <section className="account-page account-help-contact-page" aria-label="Pomoc i kontakt">
+      <div className="account-layout">
+        <AccountSidebar onNavigate={onNavigate} activeView={activeView} />
+
+        <div className="account-main">
+          <section className="help-contact-panel">
+            <header className="help-contact-header">
+              <div>
+                <h1>Pomoc i kontakt</h1>
+                <p>Jesteśmy tutaj, aby Ci pomóc. Skontaktuj się z nami lub znajdź odpowiedzi na najczęściej zadawane pytania.</p>
+              </div>
+              <div className="help-contact-visual" aria-hidden="true">
+                <span><Icon name="mail" /></span>
+                <strong><Icon name="phone" /></strong>
+                <span><Icon name="message" /></span>
+              </div>
+            </header>
+
+            <section className="help-contact-section">
+              <h2>Jak możemy Ci pomóc?</h2>
+              <div className="help-contact-channel-grid">
+                {supportChannels.map((channel) => (
+                  <article key={channel.id} className="help-contact-channel-card">
+                    <div className="help-contact-channel-head">
+                      <span className={`help-contact-channel-icon ${channel.iconTone}`}><Icon name={channel.icon} /></span>
+                      <div>
+                        <h3>{channel.title}</h3>
+                        {'badge' in channel && channel.badge ? <em>{channel.badge}</em> : null}
+                      </div>
+                    </div>
+                    <p>{channel.description}</p>
+                    <button type="button" className="help-contact-channel-action">
+                      {channel.action}
+                      <Icon name="chevron" />
+                    </button>
+                  </article>
+                ))}
+              </div>
+            </section>
+
+            <section className="help-contact-section help-contact-middle-grid">
+              <article className="help-contact-faq-card">
+                <header>
+                  <h2>Najczęściej zadawane pytania</h2>
+                  <button type="button">Zobacz wszystkie <Icon name="arrow" /></button>
+                </header>
+                <div className="help-contact-faq-list">
+                  {faqItems.map((question) => (
+                    <details key={question}>
+                      <summary>
+                        <span>{question}</span>
+                        <Icon name="chevron" />
+                      </summary>
+                      <p>Znajdziesz odpowiedź w naszym centrum pomocy. W razie potrzeby skorzystaj z formularza kontaktowego obok.</p>
+                    </details>
+                  ))}
+                </div>
+              </article>
+
+              <article className="help-contact-form-card">
+                <h2>Napisz do nas</h2>
+                <form>
+                  <div className="help-contact-form-row">
+                    <input type="text" placeholder="Imię i nazwisko" />
+                    <input type="email" placeholder="Adres e-mail" />
+                  </div>
+                  <select defaultValue="">
+                    <option value="" disabled>Temat</option>
+                    <option value="ogloszenie">Pytanie o ogłoszenie</option>
+                    <option value="konto">Problemy z kontem</option>
+                    <option value="platnosci">Płatności i faktury</option>
+                    <option value="techniczne">Problem techniczny</option>
+                  </select>
+                  <textarea rows={5} placeholder="Wiadomość&#10;Opisz swój problem lub pytanie..." />
+                  <button type="button">Wyślij wiadomość</button>
+                </form>
+              </article>
+            </section>
+
+            <section className="help-contact-section">
+              <h2>Więcej sposobów na pomoc</h2>
+              <div className="help-contact-more-grid">
+                {moreHelpCards.map((card) => (
+                  <article key={card.id} className="help-contact-more-card">
+                    <span className={`help-contact-more-icon ${card.iconTone}`}><Icon name={card.icon} /></span>
+                    <div>
+                      <h3>{card.title}</h3>
+                      <p>{card.description}</p>
+                      <button type="button">{card.action} <Icon name="arrow" /></button>
+                    </div>
+                  </article>
+                ))}
+              </div>
+            </section>
+          </section>
+        </div>
+      </div>
+    </section>
+  );
+}
+
 function AccountPriceAlertsPage({
   onNavigate,
   activeView,