// app.jsx — Gorilla Commerce regulations landing
const { useState, useEffect, useRef } = React;

/* ---------- icons ---------- */
const Arrow = (p) => (
  <svg className="arr" width="16" height="16" viewBox="0 0 16 16" fill="none" {...p}>
    <path d="M3 8h9M8.5 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const Check = ({s=15}) => (
  <svg className="check" width={s} height={s} viewBox="0 0 16 16" fill="none">
    <path d="M3.5 8.5l3 3 6-7" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const Plus = () => (
  <svg width="13" height="13" viewBox="0 0 13 13" fill="none">
    <path d="M6.5 1v11M1 6.5h11" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
  </svg>
);

/* ---------- logo ---------- */
function Logo(){
  return (
    <a className="logo" href="#top" aria-label="Gorilla Commerce">
      <img className="logo-img" src="assets/gorilla-commerce-logo.svg" alt="Gorilla Commerce"/>
    </a>
  );
}

/* ---------- nav ---------- */
function Nav({ onCta }){
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 12);
    h(); window.addEventListener('scroll', h, { passive:true });
    return () => window.removeEventListener('scroll', h);
  }, []);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <div className="wrap nav-inner">
        <Logo/>
        <nav className="nav-links">
          <a href="#moduly">Co wdrażamy</a>
          <a href="#proces">Proces</a>
          <a href="#pakiety">Pakiety</a>
          <a href="#faq">FAQ</a>
        </nav>
        <div className="nav-cta">
          <a className="btn btn-primary" href="#kontakt" onClick={onCta}>Umów audyt<Arrow/></a>
        </div>
      </div>
    </header>
  );
}

/* ---------- hero compliance mock ---------- */
function HeroMock(){
  return (
    <div className="mock" role="img" aria-label="Przykład karty produktu z danymi zgodności">
      <div className="mock-top">
        <span className="dot" style={{background:'#e0685010'}}></span>
        <span className="dot" style={{background:'rgba(27,36,30,.14)'}}></span>
        <span className="dot" style={{background:'rgba(27,36,30,.14)'}}></span>
        <span className="dot" style={{background:'rgba(27,36,30,.14)'}}></span>
        <span className="mock-title">karta-produktu / zgodność</span>
      </div>
      <div className="mock-body">
        <div className="mock-prod">
          <div className="mock-thumb"></div>
          <div>
            <h4>Lampa biurkowa Aurora</h4>
            <div className="sku">SKU&nbsp;AUR-2200&nbsp;·&nbsp;EAN&nbsp;590••••••</div>
          </div>
        </div>
        <div className="mock-rows">
          <div className="mock-row"><span className="mock-label">Producent / importer</span><span className="pill pill-ok"><Check s={12}/>uzupełnione</span></div>
          <div className="mock-row"><span className="mock-label">Osoba odpowiedzialna (GPSR)</span><span className="pill pill-ok"><Check s={12}/>uzupełnione</span></div>
          <div className="mock-row"><span className="mock-label">Ostrzeżenia i instrukcje</span><span className="pill pill-ok"><Check s={12}/>3 języki</span></div>
          <div className="mock-row"><span className="mock-label">Faktura KSeF</span><span className="pill pill-info">auto</span></div>
          <div className="mock-row"><span className="mock-label">Paszport produktu (DPP)</span><span className="pill pill-warn">do uzupełnienia</span></div>
        </div>
        <div className="mock-foot">
          <span className="score">Gotowość zgodności&nbsp; <b>86%</b></span>
          <span className="mock-bar"><i></i></span>
        </div>
      </div>
    </div>
  );
}

/* ---------- reg ticker ---------- */
function Ticker(){
  const items = [...REG_TAGS, ...REG_TAGS];
  return (
    <div className="ticker" aria-hidden="true">
      <div className="ticker-track">
        {items.map((t,i)=>(<span className="ticker-chip" key={i}>{t}</span>))}
      </div>
    </div>
  );
}

/* ---------- hero ---------- */
function Hero({ variant }){
  const ctas = (
    <div className="hero-cta">
      <a className="btn btn-primary" href="#kontakt">Umów audyt techniczny sklepu<Arrow/></a>
      <a className="btn btn-ghost" href="#moduly">Sprawdź, co musisz wdrożyć w 2025/2026</a>
    </div>
  );
  const micro = (
    <div className="hero-micro">
      Audytujemy sklepy B2C, B2B, marketplace, cross-border oraz:
      <span className="plat">{PLATFORMS.map(p=>(<span className="plat-chip" key={p}>{p}</span>))}</span>
    </div>
  );
  if (variant === 'center'){
    return (
      <section className="hero hero-center" id="top">
        <div className="wrap">
          <span className="eyebrow">Regulacje e-commerce 2025 / 2026</span>
          <h1>Wdrożymy Twój sklep internetowy pod regulacje e-commerce 2025/2026</h1>
          <p className="lead">Nowe obowiązki dla e-commerce to nie tylko zmiana regulaminu. To konkretne wdrożenia techniczne: dostępność cyfrowa, KSeF, GPSR, DSA, NIS2, PPWR, EUDR, BNPL, AI, dane produktowe, faktury, bezpieczeństwo i procesy obsługi klienta. Pomagamy sklepom przełożyć wymagania prawne na działające funkcje w systemie sprzedaży.</p>
          {ctas}
          {micro}
        </div>
        <div className="wrap"><Ticker/></div>
      </section>
    );
  }
  return (
    <section className="hero" id="top">
      <div className="wrap hero-grid">
        <div>
          <span className="eyebrow">Regulacje e-commerce 2025 / 2026</span>
          <h1>Wdrożymy Twój sklep internetowy pod regulacje e-commerce 2025/2026</h1>
          <p className="lead">Nowe obowiązki dla e-commerce to nie tylko zmiana regulaminu. To konkretne wdrożenia techniczne: dostępność cyfrowa, KSeF, GPSR, DSA, NIS2, PPWR, EUDR, BNPL, AI, dane produktowe, faktury, bezpieczeństwo i procesy obsługi klienta. Pomagamy sklepom przełożyć wymagania prawne na działające funkcje w systemie sprzedaży.</p>
          {ctas}
          {micro}
        </div>
        <div><HeroMock/></div>
      </div>
    </section>
  );
}

/* ---------- problem ---------- */
const PROBLEM_ITEMS = [
  "pokazać wymagane dane na karcie produktu,",
  "wystawić i obsłużyć faktury w KSeF,",
  "spełnić wymogi dostępności cyfrowej,",
  "zbierać dane o sprzedawcach i produktach,",
  "obsługiwać wycofania produktów i powiadomienia klientów,",
  "raportować dane marketplace,",
  "udokumentować zgody, komunikaty i procesy,",
  "zabezpieczyć system przed incydentami,",
  "dostosować checkout pod BNPL, kredyt, reklamacje, naprawy i odstąpienia.",
];
function Problem(){
  return (
    <section className="sec-pad band" id="problem">
      <div className="wrap prob-grid">
        <div className="prob-left">
          <span className="eyebrow">Problem</span>
          <h2>Nowe przepisy nie są problemem prawnym. Są problemem operacyjnym i technologicznym.</h2>
          <p className="lede">Regulamin można zaktualizować w jeden dzień. Ale sklep internetowy musi jeszcze coś zrobić — w kodzie, w danych i w procesach.</p>
        </div>
        <div>
          <p className="prob-intro">Ale sklep internetowy musi jeszcze:</p>
          <ul className="prob-list">
            {PROBLEM_ITEMS.map((t,i)=>(
              <li key={i}><span className="ix">{String(i+1).padStart(2,'0')}</span><span>{t}</span></li>
            ))}
          </ul>
          <p className="prob-close">I właśnie tym się zajmujemy.</p>
        </div>
      </div>
    </section>
  );
}

/* ---------- modules ---------- */
function ModuleCard({ m, layout }){
  if (layout === 'mag'){
    return (
      <article className="card">
        <div className="magtop"><div className="card-n">{m.n}</div></div>
        <div>
          <h3>{m.title}</h3>
          <div className="card-tags">{m.tags.map(t=>(<span className="tag" key={t}>{t}</span>))}</div>
          <p className="card-desc">{m.desc}</p>
          <div className="card-eff"><span className="lab">Efekt</span><p>{m.effect}</p></div>
        </div>
      </article>
    );
  }
  if (layout === 'list'){
    return (
      <article className="card">
        <div className="card-n">{m.n}</div>
        <div className="card-tags">{m.tags.map(t=>(<span className="tag" key={t}>{t}</span>))}</div>
        <div><h3>{m.title}</h3><p className="card-desc">{m.desc}</p></div>
        <div className="card-eff"><span className="lab">Efekt</span><p>{m.effect}</p></div>
      </article>
    );
  }
  return (
    <article className="card">
      <div className="card-n">{m.n}</div>
      <div className="card-tags">{m.tags.map(t=>(<span className="tag" key={t}>{t}</span>))}</div>
      <h3>{m.title}</h3>
      <p className="card-desc">{m.desc}</p>
      <div className="card-eff"><span className="lab">Efekt</span><p>{m.effect}</p></div>
    </article>
  );
}
function Modules({ layout }){
  return (
    <section className="sec-pad" id="moduly">
      <div className="wrap">
        <div className="mod-head">
          <div className="sec-head">
            <span className="eyebrow">Co wdrażamy?</span>
            <h2>Zamieniamy obowiązki regulacyjne w gotowe moduły e-commerce</h2>
          </div>
          <a className="btn btn-ghost" href="#kontakt">Pełny zakres na audycie<Arrow/></a>
        </div>
        <div className="mod-grid">
          {MODULES.map(m=>(<ModuleCard key={m.n} m={m} layout={layout}/>))}
        </div>
      </div>
    </section>
  );
}

/* ---------- faq ---------- */
function FaqItem({ item, open, onToggle }){
  const ref = useRef(null);
  return (
    <div className={"faq-item" + (open ? " open" : "")}>
      <button className="faq-q" onClick={onToggle} aria-expanded={open}>
        {item.q}<span className="faq-ic"><Plus/></span>
      </button>
      <div className="faq-a" ref={ref} style={{ maxHeight: open ? (ref.current ? ref.current.scrollHeight + 'px' : '300px') : '0px' }}>
        <p>{item.a}</p>
      </div>
    </div>
  );
}
function Faq(){
  const [open, setOpen] = useState(0);
  return (
    <section className="sec-pad band" id="faq">
      <div className="wrap faq-grid">
        <div className="sec-head">
          <span className="eyebrow">FAQ</span>
          <h2>Najczęstsze pytania o regulacje</h2>
          <p className="sub">Krótko o tym, jak wygląda dostosowanie sklepu — bez prawniczego żargonu.</p>
        </div>
        <div className="faq-list">
          {FAQ.map((it,i)=>(
            <FaqItem key={i} item={it} open={open===i} onToggle={()=>setOpen(open===i?-1:i)}/>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---------- contact (CTA końcowe) ---------- */
function Seg({ value, onChange }){
  return (
    <div className="seg" role="radiogroup">
      {['Tak','Nie'].map(o=>(
        <button type="button" key={o} role="radio" aria-checked={value===o}
          className={value===o ? 'on' : ''} onClick={()=>onChange(o)}>{o}</button>
      ))}
    </div>
  );
}
function Contact(){
  const [f, setF] = useState({
    name:'', firma:'', url:'', platform:'',
    marketplace:'Nie', kategorie:'', zagranica:'Nie', b2b:'Nie', msg:'',
  });
  const [err, setErr] = useState({});
  const [sent, setSent] = useState(false);
  const set = (k) => (e) => setF(s => ({ ...s, [k]: e.target.value }));
  const setV = (k) => (v) => setF(s => ({ ...s, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    const er = {};
    if (!f.name.trim()) er.name = 'Podaj imię i nazwisko.';
    if (!f.firma.trim()) er.firma = 'Podaj nazwę firmy.';
    if (!f.platform) er.platform = 'Wybierz platformę.';
    setErr(er);
    if (Object.keys(er).length === 0) setSent(true);
  };
  return (
    <section className="sec-pad contact" id="kontakt">
      <div className="wrap ct-grid">
        <div className="ct-left">
          <span className="eyebrow">Zamów audyt</span>
          <h2>Sprawdź, czy Twój sklep jest gotowy na regulacje e-commerce 2025/2026</h2>
          <p className="sub">Nie czekaj, aż problem pojawi się przy:</p>
          <ul className="ct-points">
            <li><Check/>kontroli lub postępowaniu urzędu</li>
            <li><Check/>integracji z partnerem lub marketplace</li>
            <li><Check/>audycie inwestora lub due diligence</li>
            <li><Check/>ekspansji na nowy rynek</li>
          </ul>
        </div>
        <div>
          {!sent ? (
            <form className="form" onSubmit={submit} noValidate>
              <h3>Zamów audyt techniczny e-commerce</h3>
              <div className="form-grid">
                <div className={"field" + (err.name ? " err" : "")}>
                  <label>Imię i nazwisko</label>
                  <input value={f.name} onChange={set('name')} placeholder="Anna Kowalska"/>
                  {err.name && <div className="msg">{err.name}</div>}
                </div>
                <div className={"field" + (err.firma ? " err" : "")}>
                  <label>Firma</label>
                  <input value={f.firma} onChange={set('firma')} placeholder="Sklep Aurora sp. z o.o."/>
                  {err.firma && <div className="msg">{err.firma}</div>}
                </div>
                <div className="field full">
                  <label>Adres sklepu</label>
                  <input value={f.url} onChange={set('url')} placeholder="https://twojsklep.pl"/>
                </div>
                <div className={"field" + (err.platform ? " err" : "")}>
                  <label>Platforma e-commerce</label>
                  <select value={f.platform} onChange={set('platform')}>
                    <option value="">Wybierz…</option>
                    {PLATFORMS.map(p=>(<option key={p} value={p}>{p}</option>))}
                    <option value="Baselinker">Baselinker</option>
                    <option value="inna">Inna</option>
                  </select>
                  {err.platform && <div className="msg">{err.platform}</div>}
                </div>
                <div className="field">
                  <label>Kategorie produktów</label>
                  <input value={f.kategorie} onChange={set('kategorie')} placeholder="np. elektronika, AGD"/>
                </div>
                <div className="field">
                  <label>Sprzedaż jako marketplace?</label>
                  <Seg value={f.marketplace} onChange={setV('marketplace')}/>
                </div>
                <div className="field">
                  <label>Sprzedaż za granicę?</label>
                  <Seg value={f.zagranica} onChange={setV('zagranica')}/>
                </div>
                <div className="field">
                  <label>Faktury B2B?</label>
                  <Seg value={f.b2b} onChange={setV('b2b')}/>
                </div>
                <div className="field full">
                  <label>Wiadomość (opcjonalnie)</label>
                  <textarea value={f.msg} onChange={set('msg')} placeholder="Krótko o sklepie i tym, czego potrzebujesz…"></textarea>
                </div>
              </div>
              <button className="btn btn-accent" type="submit">Zamów audyt techniczny e-commerce<Arrow/></button>
              <p className="form-note">Odpowiadamy w 1 dzień roboczy. Dane wykorzystujemy wyłącznie do kontaktu w sprawie audytu.</p>
            </form>
          ) : (
            <div className="form">
              <div className="form-ok">
                <div className="big"><Check s={26}/></div>
                <h3>Dziękujemy, {f.name.split(' ')[0] || 'do usłyszenia'}!</h3>
                <p>Zgłoszenie sklepu <b>{f.firma}</b> ({f.platform}) trafiło do nas. Odezwiemy się w ciągu jednego dnia roboczego z propozycją terminu audytu technicznego.</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
}

/* ---------- footer ---------- */
function Footer(){
  return (
    <footer className="footer">
      <div className="wrap">
        <div className="foot-grid">
          <div>
            <Logo/>
            <p className="foot-about">Software house dla e-commerce. Przekładamy wymagania regulacyjne 2025/2026 na działające funkcje w sklepach internetowych.</p>
          </div>
          <div className="foot-col">
            <h5>Moduły</h5>
            <a href="#moduly">Dostępność / EAA</a>
            <a href="#moduly">KSeF i faktury</a>
            <a href="#moduly">GPSR</a>
            <a href="#moduly">Marketplace / DSA</a>
          </div>
          <div className="foot-col">
            <h5>Platformy</h5>
            <a href="#kontakt">WooCommerce</a>
            <a href="#kontakt">Shopify</a>
            <a href="#kontakt">Magento</a>
            <a href="#kontakt">Headless</a>
          </div>
          <div className="foot-col">
            <h5>Firma</h5>
            <a href="#proces">Proces</a>
            <a href="#pakiety">Pakiety</a>
            <a href="#faq">FAQ</a>
            <a href="#kontakt">Zamów audyt</a>
          </div>
        </div>
        <div className="foot-bottom">
          <span>© 2026 Gorilla Commerce. Materiały informacyjne — nie stanowią porady prawnej.</span>
          <span>Logo i dane kontaktowe — placeholder do podmiany.</span>
        </div>
      </div>
    </footer>
  );
}

/* ---------- tweaks ---------- */
const ACCENTS = {
  'Terakota': '#bf5a36',
  'Ochra': '#b07d12',
  'Morski': '#1f6b5c',
  'Śliwka': '#7a3f5c',
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#1f6b5c",
  "font": "editorial",
  "layout": "list",
  "hero": "split"
}/*EDITMODE-END*/;

function App(){
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.setAttribute('data-font', t.font);
    document.documentElement.setAttribute('data-layout', t.layout);
  }, [t.accent, t.font, t.layout]);

  return (
    <React.Fragment>
      <Nav/>
      <main>
        <Hero variant={t.hero}/>
        <Problem/>
        <Modules layout={t.layout}/>
        <Audience/>
        <Process/>
        <Packages/>
        <Advantages/>
        <Contact/>
        <Faq/>
      </main>
      <Footer/>

      <TweaksPanel>
        <TweakSection label="Wygląd"/>
        <TweakColor label="Kolor akcentu" value={t.accent}
          options={Object.values(ACCENTS)}
          onChange={(v)=>setTweak('accent', v)}/>
        <TweakRadio label="Typografia" value={t.font}
          options={[
            { value:'editorial', label:'Edytorial' },
            { value:'modern', label:'Nowoczesny' },
            { value:'technical', label:'Techniczny' },
          ]}
          onChange={(v)=>setTweak('font', v)}/>
        <TweakSection label="Układ"/>
        <TweakRadio label="Hero" value={t.hero}
          options={[
            { value:'split', label:'Klasyczny' },
            { value:'center', label:'Wyśrodkowany' },
          ]}
          onChange={(v)=>setTweak('hero', v)}/>
        <TweakSelect label="Moduły" value={t.layout}
          options={[
            { value:'grid', label:'Karty (siatka)' },
            { value:'list', label:'Lista (wiersze)' },
            { value:'mag', label:'Magazyn (edytorial)' },
          ]}
          onChange={(v)=>setTweak('layout', v)}/>
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);