// Patera — interactive bits (tabs, FAQ, tweaks integration, demo widget)
// Mounts into dedicated <div id="..."> slots inside index.html.
// Most content remains static HTML so it stays directly editable.

const { useState, useEffect, useRef } = React;

/* ─────────────────────────────────────────────────────────────────────────
   FEATURE TABS
   ────────────────────────────────────────────────────────────────────── */

const FEATURES = [
  {
    id: 'ordering',
    nav: 'Zamówienia online',
    title: 'Twoja sprzedaż online — bez prowizji platform.',
    desc: 'Własny sklep z dostawą, na wynos i preorderem. Wszystkie zamówienia trafiają do jednego ekranu, a Ty zatrzymujesz każdą złotówkę z rachunku.',
    points: [
      ['Dostawa, odbiór własny i preorder', 'jeden interfejs dla wszystkich kanałów sprzedaży.'],
      ['Zero prowizji od zamówienia', 'klient płaci bezpośrednio, Ty wybierasz operatora płatności.'],
      ['Pełna kontrola promocji', 'kupony, happy hours, zestawy, programy lojalnościowe.'],
      ['Integracja z dostawcami last-mile', 'Wolt Drive, Glovo, Stuart — bez własnej floty.'],
    ],
    visual: 'mobile-order',
  },
  {
    id: 'reservations',
    nav: 'Rezerwacje',
    title: 'Stolik zarezerwowany. Bez maili, bez nadrezerwacji.',
    desc: 'System rezerwacji z planem sali w czasie rzeczywistym. Goście rezerwują w 20 sekund — z Twojej strony, z Google\u00A0Maps, z Instagrama, z kodu QR.',
    points: [
      ['Plan sali z drag-and-drop', 'widzisz, który stolik kiedy i na ile osób jest zajęty.'],
      ['Automatyczne potwierdzenia i przypomnienia', 'mniej no-show o nawet 40%.'],
      ['Rezerwacje 24/7', 'również wtedy, gdy nikt nie odbiera telefonu w lokalu.'],
      ['Profil gościa', 'preferencje, alergie, historia wizyt — w jednym miejscu.'],
    ],
    visual: 'reservation-demo',
  },
  {
    id: 'qr',
    nav: 'QR menu i zamówienia',
    title: 'Karta, która sama dosprzedaje.',
    desc: 'Cyfrowe menu na stoliku, z aktualnymi cenami, zdjęciami i alergenami. Gość zamawia kolejną rundę przez telefon — kelner ma czas dla nowych stolików.',
    points: [
      ['Karta gotowa w 48 godzin', 'masz tłumaczenie na 99 języków automatycznie.'],
      ['Średni rachunek wyższy o 18%', 'inteligentne podpowiedzi cross-sellowe.'],
      ['Edytujesz menu sam, bez programistów', 'wyłącz danie jednym kliknięciem.'],
      ['Działa bez instalowania aplikacji', 'gość skanuje QR — i już zamawia.'],
    ],
    visual: 'qr-menu',
  },
  {
    id: 'payments',
    nav: 'Płatności QR',
    title: 'Rachunek dzielony w 20 sekund.',
    desc: 'Goście płacą skanując QR na stoliku — Apple Pay, Google Pay, BLIK, karta. Bez kolejki do terminala, bez czekania na kelnera.',
    points: [
      ['Podział rachunku per osoba lub per pozycja', 'koniec liczenia "kto co miał".'],
      ['Napiwki na ekranie', 'średnio +20% na napiwki dla obsługi.'],
      ['Automatyczne paragony i faktury', 'wysyłka na email gościa.'],
      ['Pełna synchronizacja z POS', 'Poster, Syrve, R-Keeper, Dotykačka.'],
    ],
    visual: 'payment-qr',
  },
  {
    id: 'marketplace',
    nav: 'Integracje marketplace',
    title: 'Wolt, Bolt, Glovo — w jednym tablecie.',
    desc: 'Koniec żonglowania trzema urządzeniami w godzinach szczytu. Wszystkie kanały wpadają do jednego widoku, z jednym menu i jednym pracownikiem.',
    points: [
      ['Jedno menu — wszędzie aktualne', 'wyłączasz danie u siebie, znika u Wolta.'],
      ['Wszystkie zamówienia na jednym ekranie', 'mniej błędów, krótsze czasy realizacji.'],
      ['Analityka kanałów', 'wiesz, gdzie tracisz prowizję, a gdzie zarabiasz.'],
      ['Auto-drukowanie na kuchni', 'integracja z drukarkami i KDS.'],
    ],
    visual: 'dashboard',
  },
  {
    id: 'crm',
    nav: 'CRM i lojalność',
    title: 'Każdy gość — Twój gość.',
    desc: 'Baza klientów rośnie z każdym zamówieniem i rezerwacją. Wysyłasz spersonalizowane oferty, programy lojalnościowe, kampanie email i push — wszystko z jednego panelu.',
    points: [
      ['Auto-segmentacja gości', 'nowi, stali, wracają po dłuższej przerwie, VIP.'],
      ['Punkty, cashback, kupony', 'reguły lojalnościowe ustawiasz w 5 minut.'],
      ['Push, email, SMS — w jednym narzędziu', 'kampanie do segmentów albo całej bazy.'],
      ['Średni ROI z kampanii: 8–12x', 'na podstawie 25\u00A0000+ restauracji.'],
    ],
    visual: 'crm',
  },
];

function FeatureVisual({ kind }) {
  if (kind === 'mobile-order') {
    return (
      <div className="phone" style={{ width: '70%', maxWidth: 280 }}>
        <div className="phone-notch"></div>
        <div className="phone-screen">
          <OnlineOrderScreen />
        </div>
      </div>
    );
  }
  if (kind === 'reservation-demo') {
    return <ReservationDemo />;
  }
  if (kind === 'qr-menu') {
    return (
      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 18 }}>
        <div className="qr-card">
          <div className="qr-img"><QrPattern /></div>
          <div className="qr-card-title">Zeskanuj &amp; zamów</div>
          <div className="qr-card-sub">PaTaThai · Stolik 12</div>
        </div>
        <div className="qr-tables">
          <span className="qr-tab-badge">Stolik 01</span>
          <span className="qr-tab-badge">Stolik 02</span>
          <span className="qr-tab-badge">Stolik 03</span>
          <span className="qr-tab-badge">+38</span>
        </div>
      </div>
    );
  }
  if (kind === 'payment-qr') {
    return <PaymentScreen />;
  }
  if (kind === 'dashboard') {
    return <Dashboard />;
  }
  if (kind === 'crm') {
    return <CRMScreen />;
  }
  return null;
}

function FeatureTabs() {
  const [active, setActive] = useState(0);
  const feat = FEATURES[active];
  return (
    <>
      <div className="feat-tabs" role="tablist">
        {FEATURES.map((f, i) => (
          <button
            key={f.id}
            className={`feat-tab ${i === active ? 'active' : ''}`}
            onClick={() => setActive(i)}
            role="tab"
            aria-selected={i === active}
          >
            <span className="feat-tab-idx">0{i + 1}</span>
            {f.nav}
          </button>
        ))}
      </div>
      <div className="feat-panel" key={feat.id}>
        <div className="feat-copy">
          <h3>{feat.title}</h3>
          <p>{feat.desc}</p>
          <ul className="feat-list">
            {feat.points.map((p, i) => (
              <li key={i}>
                <span className="feat-check">✓</span>
                <span><strong>{p[0]}</strong> — {p[1]}</span>
              </li>
            ))}
          </ul>
          <a href="#contact" className="btn btn-ghost btn-sm">
            Zobacz w działaniu <span className="btn-arrow"></span>
          </a>
        </div>
        <div className="feat-visual">
          <FeatureVisual kind={feat.visual} />
        </div>
      </div>
    </>
  );
}

/* ─────────────────────────────────────────────────────────────────────────
   PHONE SCREENS / MOCKUPS
   ────────────────────────────────────────────────────────────────────── */

function OnlineOrderScreen() {
  return (
    <div style={{ height: '100%', display: 'flex', flexDirection: 'column', position: 'relative' }}>
      <div className="po-head">
        <div className="po-status">
          <span>9:41</span>
          <span>●●●●</span>
        </div>
        <div className="po-title">Phad Thai &amp; więcej</div>
        <div className="po-sub">PATATHAI · POWIŚLE</div>
      </div>
      <div className="po-tabs">
        <span className="po-tab active">Polecane</span>
        <span className="po-tab">Przystawki</span>
        <span className="po-tab">Curry</span>
        <span className="po-tab">Wok</span>
        <span className="po-tab">Desery</span>
      </div>
      <div className="po-list" style={{ flex: 1, overflow: 'hidden' }}>
        <div className="po-item">
          <div>
            <div className="po-item-name">Phad Thai z krewetkami</div>
            <div className="po-item-desc">Makaron ryżowy, jajko, tamaryndowiec, orzeszki ziemne</div>
            <div className="po-item-price" style={{ marginTop: 4 }}>52 zł</div>
          </div>
          <div className="po-item-img" style={{ backgroundImage: 'url(https://patathai.pl/wp-content/uploads/2024/05/DSC01297-720x1080.jpg)' }}>
            <div className="po-item-add">+</div>
          </div>
        </div>
        <div className="po-item">
          <div>
            <div className="po-item-name">Tom Kha Gai</div>
            <div className="po-item-desc">Zupa kokosowa z kurczakiem, galangal, trawa cytrynowa</div>
            <div className="po-item-price" style={{ marginTop: 4 }}>38 zł</div>
          </div>
          <div className="po-item-img" style={{ backgroundImage: 'url(https://patathai.pl/wp-content/uploads/2024/05/Frame-67.jpg)' }}>
            <div className="po-item-add">+</div>
          </div>
        </div>
        <div className="po-item">
          <div>
            <div className="po-item-name">Phad Gapraw</div>
            <div className="po-item-desc">Wieprzowina, tajska bazylia, chili, jajko sadzone, ryż</div>
            <div className="po-item-price" style={{ marginTop: 4 }}>46 zł</div>
          </div>
          <div className="po-item-img" style={{ backgroundImage: 'url(https://patathai.pl/wp-content/uploads/2024/05/Frame-68.jpg)' }}>
            <div className="po-item-add">+</div>
          </div>
        </div>
      </div>
      <div className="po-bar">
        <span>3 pozycje w koszyku</span>
        <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          136 zł
          <span className="po-bar-count">→</span>
        </span>
      </div>
    </div>
  );
}

function ReservationDemo() {
  const [day, setDay] = useState(18);
  const [time, setTime] = useState('19:30');
  const [people, setPeople] = useState(4);
  const days = [];
  for (let i = 0; i < 31; i++) days.push(i + 1);
  const taken = ['18:00', '20:30', '21:00'];
  const slots = ['17:00', '17:30', '18:00', '18:30', '19:00', '19:30', '20:00', '20:30', '21:00', '21:30', '22:00', '22:30'];
  return (
    <div className="demo" style={{ width: '100%' }}>
      <div className="demo-cal">
        <div className="demo-cal-head">
          <span className="demo-cal-month">Maj 2026</span>
          <div className="demo-cal-nav">
            <button>‹</button>
            <button>›</button>
          </div>
        </div>
        <div className="demo-cal-grid">
          {['Pn','Wt','Śr','Cz','Pt','So','Nd'].map(d => <div key={d} className="dow">{d}</div>)}
          {/* May 2026 starts Friday — 4 muted days from prev month (Mon–Thu) */}
          <div className="day muted">27</div>
          <div className="day muted">28</div>
          <div className="day muted">29</div>
          <div className="day muted">30</div>
          {days.map(d => (
            <div
              key={d}
              className={`day ${d === day ? 'selected' : ''} ${[8, 15].includes(d) ? 'full' : ''} ${d === 22 ? 'today' : ''}`}
              onClick={() => !([8, 15].includes(d)) && setDay(d)}
            >
              {d}
            </div>
          ))}
        </div>
      </div>
      <div className="demo-slots">
        <h4>22 maja, piątek</h4>
        <div className="demo-slots-sub">Wybierz liczbę osób i godzinę</div>
        <div className="demo-people">
          {[2, 3, 4, 5, 6, '7+'].map(n => (
            <button key={n} className={n === people ? 'active' : ''} onClick={() => typeof n === 'number' && setPeople(n)}>{n}</button>
          ))}
        </div>
        <div className="demo-times">
          {slots.map(t => (
            <button
              key={t}
              className={`demo-time ${time === t ? 'selected' : ''} ${taken.includes(t) ? 'taken' : ''}`}
              onClick={() => !taken.includes(t) && setTime(t)}
            >
              {t}
            </button>
          ))}
        </div>
        <div className="demo-cta">Zarezerwuj na {time} →</div>
      </div>
    </div>
  );
}

function PaymentScreen() {
  return (
    <div className="phone" style={{ width: '70%', maxWidth: 280 }}>
      <div className="phone-notch"></div>
      <div className="phone-screen" style={{ background: '#f6efe2', padding: 24, display: 'flex', flexDirection: 'column' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, fontWeight: 600, marginBottom: 20 }}>
          <span>9:41</span>
          <span>●●●●</span>
        </div>
        <div style={{ fontFamily: 'Instrument Serif', fontSize: 28, lineHeight: 1, letterSpacing: '-0.02em', marginBottom: 4 }}>Rachunek</div>
        <div style={{ fontSize: 11, color: '#8a7860', fontFamily: 'JetBrains Mono', letterSpacing: '0.05em', textTransform: 'uppercase' }}>Stolik 12 · PATATHAI</div>
        <div style={{ marginTop: 24, display: 'flex', flexDirection: 'column', gap: 10, fontSize: 12 }}>
          {[
            ['Phad Thai z krewetkami', '52,00'],
            ['Tom Kha Gai', '38,00'],
            ['Sticky rice z mango', '24,00'],
            ['Limonkowy ice-tea', '14,00'],
          ].map(([n, p]) => (
            <div key={n} style={{ display: 'flex', justifyContent: 'space-between', paddingBottom: 8, borderBottom: '1px solid #e8dcc4' }}>
              <span>{n}</span>
              <span style={{ fontFamily: 'JetBrains Mono', fontSize: 11 }}>{p}</span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 14, display: 'flex', justifyContent: 'space-between', fontFamily: 'Instrument Serif', fontSize: 22 }}>
          <span>Razem</span>
          <span>128,00 zł</span>
        </div>
        <div style={{ marginTop: 12, fontSize: 11, color: '#8a7860', display: 'flex', justifyContent: 'space-between' }}>
          <span>Napiwek 10%</span>
          <span>12,80 zł</span>
        </div>
        <div style={{ marginTop: 'auto', display: 'flex', flexDirection: 'column', gap: 8 }}>
          <div style={{ background: '#1a140e', color: 'white', padding: 14, borderRadius: 12, textAlign: 'center', fontSize: 13, fontWeight: 500 }}>
             Apple Pay
          </div>
          <div style={{ background: 'white', color: '#1a140e', padding: 12, borderRadius: 12, textAlign: 'center', fontSize: 12, border: '1px solid #e8dcc4' }}>
            BLIK · Karta · Google Pay
          </div>
        </div>
      </div>
    </div>
  );
}

function Dashboard() {
  return (
    <div className="dash">
      <div className="dash-top">
        <div className="dash-top-l">
          <span className="dash-dot"></span>
          <span style={{ fontWeight: 600, fontFamily: 'Instrument Serif', fontSize: 14 }}>Patera · PaTaThai Powiśle</span>
        </div>
        <div className="dash-tabs">
          <span className="active">Zamówienia</span>
          <span>Rezerwacje</span>
          <span>Menu</span>
          <span>Goście</span>
        </div>
      </div>
      <div className="dash-body">
        <div className="dash-card">
          <div className="dash-card-h">Dziś · sprzedaż</div>
          <div className="dash-card-v">12 480 zł<span className="delta">+18%</span></div>
        </div>
        <div className="dash-card">
          <div className="dash-card-h">Aktywne zamówienia</div>
          <div className="dash-card-v">24<span className="delta">8 nowych</span></div>
        </div>
        <div className="dash-chart">
          <svg viewBox="0 0 300 80" preserveAspectRatio="none">
            <path d="M0,60 L25,55 L50,58 L75,40 L100,42 L125,30 L150,38 L175,22 L200,18 L225,28 L250,15 L275,20 L300,10"
                  stroke="#c4502a" strokeWidth="2" fill="none" strokeLinejoin="round"/>
            <path d="M0,60 L25,55 L50,58 L75,40 L100,42 L125,30 L150,38 L175,22 L200,18 L225,28 L250,15 L275,20 L300,10 L300,80 L0,80 Z"
                  fill="rgba(196,80,42,0.12)"/>
          </svg>
        </div>
        <div className="dash-orders">
          <div className="dash-order">
            <div className="dash-order-platform">P</div>
            <div>
              <div className="dash-order-name">Anna K. · Phad Thai + Tom Kha</div>
              <div className="dash-order-id">#PT-2841 · 19:34</div>
            </div>
            <div className="dash-order-status new">Nowe</div>
            <div className="dash-order-price">94 zł</div>
          </div>
          <div className="dash-order">
            <div className="dash-order-platform w">W</div>
            <div>
              <div className="dash-order-name">Wolt · 3 pozycje</div>
              <div className="dash-order-id">#WL-1029 · 19:31</div>
            </div>
            <div className="dash-order-status cooking">Kuchnia</div>
            <div className="dash-order-price">128 zł</div>
          </div>
          <div className="dash-order">
            <div className="dash-order-platform b">B</div>
            <div>
              <div className="dash-order-name">Bolt · 2 pozycje</div>
              <div className="dash-order-id">#BL-0418 · 19:28</div>
            </div>
            <div className="dash-order-status cooking">Kuchnia</div>
            <div className="dash-order-price">72 zł</div>
          </div>
          <div className="dash-order">
            <div className="dash-order-platform g">G</div>
            <div>
              <div className="dash-order-name">Glovo · 5 pozycji</div>
              <div className="dash-order-id">#GV-0712 · 19:22</div>
            </div>
            <div className="dash-order-status">Pakowanie</div>
            <div className="dash-order-price">186 zł</div>
          </div>
        </div>
      </div>
    </div>
  );
}

function CRMScreen() {
  return (
    <div className="dash" style={{ background: 'white', padding: 18 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 14 }}>
        <div>
          <div style={{ fontFamily: 'Instrument Serif', fontSize: 18 }}>Goście</div>
          <div style={{ fontSize: 11, color: '#8a7860', fontFamily: 'JetBrains Mono', letterSpacing: '0.05em', textTransform: 'uppercase' }}>4 218 aktywnych</div>
        </div>
        <div style={{ display: 'flex', gap: 6 }}>
          {['VIP', 'Stali', 'Nowi', '+'].map(t => (
            <span key={t} style={{ padding: '4px 10px', borderRadius: 999, background: t === 'VIP' ? '#1a140e' : '#faf4e7', color: t === 'VIP' ? 'white' : '#8a7860', fontSize: 10, fontWeight: 500 }}>{t}</span>
          ))}
        </div>
      </div>
      {[
        ['Marek W.', 'marek.w@…', '24 wizyty', '3 480 zł', 'VIP'],
        ['Anna K.', 'anna.k@…', '18 wizyt', '2 120 zł', 'Stała'],
        ['Tomasz P.', 'tomasz@…', '12 wizyt', '1 680 zł', 'Stały'],
        ['Karolina S.', 'k.s@…', '8 wizyt', '940 zł', 'Stała'],
        ['Michał R.', 'michal@…', '3 wizyty', '320 zł', 'Nowy'],
      ].map(([name, mail, visits, total, tag]) => (
        <div key={name} style={{ display: 'grid', gridTemplateColumns: '24px 1fr auto auto 60px', gap: 10, padding: '9px 0', borderBottom: '1px solid #efe5d2', alignItems: 'center', fontSize: 11 }}>
          <div style={{ width: 24, height: 24, borderRadius: '50%', background: '#e8dcc4', display: 'grid', placeItems: 'center', fontSize: 10, fontWeight: 600, color: '#1a140e' }}>{name[0]}</div>
          <div>
            <div style={{ color: '#1a140e', fontWeight: 500 }}>{name}</div>
            <div style={{ color: '#8a7860', fontSize: 9.5 }}>{mail}</div>
          </div>
          <div style={{ color: '#8a7860', fontFamily: 'JetBrains Mono', fontSize: 10 }}>{visits}</div>
          <div style={{ fontWeight: 600, fontFamily: 'JetBrains Mono', fontSize: 10.5 }}>{total}</div>
          <div style={{ textAlign: 'right' }}>
            <span style={{ padding: '3px 8px', borderRadius: 999, fontSize: 9.5, background: tag === 'VIP' ? 'rgba(196,80,42,0.12)' : '#faf4e7', color: tag === 'VIP' ? '#c4502a' : '#8a7860', fontWeight: 500 }}>{tag}</span>
          </div>
        </div>
      ))}
      <div style={{ marginTop: 14, padding: 12, background: '#faf4e7', borderRadius: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 600, color: '#1a140e' }}>Kampania: "Weekendowy lunch"</div>
          <div style={{ fontSize: 10, color: '#8a7860', marginTop: 2 }}>Wysłano do 4 218 osób · konwersja 11,2%</div>
        </div>
        <div style={{ background: '#c4502a', color: 'white', padding: '6px 12px', borderRadius: 6, fontSize: 10, fontWeight: 500 }}>+39 280 zł</div>
      </div>
    </div>
  );
}

function QrPattern() {
  // crude QR-looking dot grid
  const rows = 15;
  const cells = [];
  // deterministic pseudo-random
  let seed = 7;
  const rand = () => { seed = (seed * 9301 + 49297) % 233280; return seed / 233280; };
  for (let r = 0; r < rows; r++) {
    for (let c = 0; c < rows; c++) {
      // finder squares in corners
      const corner = (r < 4 && c < 4) || (r < 4 && c > rows - 5) || (r > rows - 5 && c < 4);
      let on;
      if (corner) {
        on = (r === 0 || r === 3 || c === 0 || c === 3 || (r >= 1 && r <= 2 && c >= 1 && c <= 2))
          && !((r === 0 && c === 3) || (r === 3 && c === 0))
          && !(r > rows - 5 && c < 4 && (r === rows - 4 && c === 3 || r === rows - 1 && c === 0))
          && !(r < 4 && c > rows - 5 && (r === 0 && c === rows - 1 || r === 3 && c === rows - 4));
      } else {
        on = rand() > 0.5;
      }
      cells.push(<div key={`${r}-${c}`} className={on ? '' : 'off'}></div>);
    }
  }
  return <div className="qr-grid">{cells}</div>;
}

/* ─────────────────────────────────────────────────────────────────────────
   FAQ
   ────────────────────────────────────────────────────────────────────── */

const FAQ_ITEMS = [
  ['Ile trwa wdrożenie?', 'Standardowy launch zajmuje 48 godzin: pierwszego dnia wprowadzamy menu i konfigurujemy płatności, drugiego — uruchamiamy stronę zamówień i integrujemy POS. Większe sieci (3+ lokali) wdrażamy w 5–7 dni roboczych z dedykowanym project managerem.'],
  ['Jaki POS jest wspierany?', 'Integrujemy się natywnie z Poster, Syrve, Dotykačka, R-Keeper, Servio i Profit. Dla pozostałych mamy otwarte API i zespół, który podłączy Twój system w ciągu tygodnia.'],
  ['Czy działa to z Wolt, Bolt i Glovo?', 'Tak — wszystkie zamówienia z marketplace\'ów spływają do jednego tabletu w lokalu, z jednym menu i automatycznym drukowaniem na kuchni. Dodatkowo udostępniamy integrację z Wolt Drive do własnej dostawy bez prowizji od marketplace\'u.'],
  ['Ile to kosztuje?', 'Plan Start to 199 zł / miesiąc za pojedynczy lokal, bez prowizji od zamówień. Plany Pro i Sieć dla wielolokalówek wyceniamy indywidualnie — średnio 30–40% taniej w przeliczeniu na lokal w stosunku do konkurencji.'],
  ['Czy mogę zachować swoją domenę i branding?', 'Tak. Strona zamówień działa pod Twoją domeną (np. online.twojarestauracja.pl), z Twoją typografią, kolorami i fotografią. Klient nie zobaczy żadnego logo Patera — to Twoja restauracja, Twoja marka.'],
  ['Co z RODO i bezpieczeństwem płatności?', 'Jesteśmy zgodni z RODO i PCI-DSS. Dane gości są w UE, płatności obsługujemy przez certyfikowanych operatorów (Przelewy24, Stripe, BLIK). Pełne audyty bezpieczeństwa udostępniamy do wglądu na życzenie.'],
  ['Czy można testować bez zobowiązań?', '14 dni za darmo — pełna platforma, bez podawania karty. Po okresie testowym decydujesz, czy zostajesz. Możesz wypowiedzieć subskrypcję w dowolnym momencie z 30-dniowym wyprzedzeniem.'],
];

function FAQ() {
  const [open, setOpen] = useState(0);
  return (
    <div className="faq-list">
      {FAQ_ITEMS.map(([q, a], i) => (
        <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
          <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
            <span>{q}</span>
            <span className="faq-toggle">+</span>
          </button>
          <div className="faq-a">{a}</div>
        </div>
      ))}
    </div>
  );
}

/* ─────────────────────────────────────────────────────────────────────────
   TWEAKS
   ────────────────────────────────────────────────────────────────────── */

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#e2693d",
  "dark": false,
  "headlineFont": "DM Serif Display",
  "hero": "split-photo",
  "showCase": true,
  "showPricing": true,
  "showIntegrations": true,
  "showTestimonials": true
}/*EDITMODE-END*/;

const ACCENTS = [
  '#e2693d', // terracotta
  '#c79768', // sand
  '#8a5a32', // espresso
  '#3a6b50', // olive
  '#b13a2a', // chili red
];

function applyTweaks(t) {
  const root = document.documentElement;
  root.setAttribute('data-theme', t.dark ? 'dark' : 'light');
  // Accent
  root.style.setProperty('--accent', t.accent);
  // derive soft variant
  const hex = t.accent.replace('#', '');
  const r = parseInt(hex.slice(0, 2), 16);
  const g = parseInt(hex.slice(2, 4), 16);
  const b = parseInt(hex.slice(4, 6), 16);
  root.style.setProperty('--accent-soft', `rgba(${r}, ${g}, ${b}, 0.16)`);
  // Headline font
  root.style.setProperty('--font-display', `"${t.headlineFont}", ui-serif, Georgia, serif`);
  // Section visibility
  document.querySelectorAll('[data-toggle]').forEach(el => {
    const key = el.dataset.toggle;
    const map = { case: t.showCase, pricing: t.showPricing, integrations: t.showIntegrations, testimonials: t.showTestimonials };
    if (key in map) el.style.display = map[key] ? '' : 'none';
  });
  // Hero variant
  document.body.setAttribute('data-hero', t.hero);
}

function TweaksApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => { applyTweaks(t); }, [t]);
  return (
    <TweaksPanel>
      <TweakSection label="Wygląd" />
      <TweakToggle label="Tryb ciemny" value={t.dark} onChange={(v) => setTweak('dark', v)} />
      <TweakColor label="Kolor akcentu" value={t.accent} options={ACCENTS} onChange={(v) => setTweak('accent', v)} />
      <TweakSelect label="Krój nagłówków" value={t.headlineFont}
        options={['Instrument Serif', 'DM Serif Display', 'Newsreader', 'Playfair Display', 'Geist']}
        onChange={(v) => setTweak('headlineFont', v)} />
      <TweakSection label="Sekcje" />
      <TweakToggle label="Case study PaTaThai" value={t.showCase} onChange={(v) => setTweak('showCase', v)} />
      <TweakToggle label="Integracje" value={t.showIntegrations} onChange={(v) => setTweak('showIntegrations', v)} />
      <TweakToggle label="Opinie" value={t.showTestimonials} onChange={(v) => setTweak('showTestimonials', v)} />
      <TweakToggle label="Cennik" value={t.showPricing} onChange={(v) => setTweak('showPricing', v)} />
    </TweaksPanel>
  );
}

/* ─────────────────────────────────────────────────────────────────────────
   MOUNT
   ────────────────────────────────────────────────────────────────────── */

function mount(id, El) {
  const el = document.getElementById(id);
  if (el) ReactDOM.createRoot(el).render(<El />);
}

mount('mount-features', FeatureTabs);
mount('mount-faq', FAQ);
mount('mount-reservation-demo', ReservationDemo);
mount('mount-dashboard', Dashboard);
mount('mount-tweaks', TweaksApp);

// Apply tweaks on initial load too (in case panel never opens)
applyTweaks(TWEAK_DEFAULTS);