// kontakt-page.jsx — samostatná stránka Kontakt

const { useState: useStateK } = React;

const KONTAKT_PERSONS = [
  {
    id: 'tom',
    role: 'Chceš pomoct s projektem?',
    name: 'Tomáš Pohl',
    title: 'CEO & Strategy',
    email: 'tomas@justmighty.cz',
    phone: '+420 720 316 570',
    photo: './assets/tom-2.jpg',
  },
  {
    id: 'julie',
    role: 'Chceš být součástí týmu / cokoli jiného?',
    name: 'Julie Dvořáková',
    title: 'People & Operations',
    email: 'julie@justmighty.cz',
    phone: '+420 730 515 010',
    photo: './assets/julie.png',
  },
];

const KONTAKT_FAQ = [
  { q: 'Jste kreativní strategická agentura. Co to znamená?', a: 'Zaměřujeme se na komplexní marketingové strategie včetně online a offline marketingu, grafického designu, tvorby webů a videí. Vytváříme kreativní strategie nebo strategickou kreativu, chcete-li. Protože kreativita bez strategie je samoúčelná, strategie bez kreativity je prostě nuda.' },
  { q: 'Proč bych si měl jako agenturu vybrat právě vás?', a: 'Jsme sehraný tým asi dvaceti lidí, který tvoří zkušení marketéři, designéři, projektoví manažeři i fotografka. Věnujeme se pouze omezenému množství projektů. To nám umožňuje jít víc do hloubky, což je pak na naší práci znát. Mluví za nás naši spokojení klienti a desítky úspěšných projektů pro značky jako Notino, Hartmann-Rico, Kofola, Škoda Auto, ONE3D nebo Gabriella Salvete.' },
  { q: 'Jsem klient pro vás?', a: 'Potřebujete funkční provázaný marketing nebo brand či web s jasně definovanými cíli? Máte rádi moderní a čistý design? Chcete vytvořit něco smysluplného a originálního? Jste otevřeni netradičním řešením? Pak jste klient pro nás a budeme rádi, když se potkáme osobně.' },
  { q: 'Nejsme si jistí, co přesně potřebujeme. Pomůžete nám?', a: 'Ano, rádi vám pomůžeme. Víme, jak je těžké se v dnešním reklamním světě zorientovat. Můžeme se potkat, společně stanovit strategii a posunout projekt správným směrem.' },
  { q: 'Kolik vaše služby stojí?', a: 'Řešení vždy vytváříme na míru. Většinu projektů naceňujeme na základě počtu odpracovaných hodin. Naše hodinová sazba se pohybuje od 1 590 do 1 890 Kč v závislosti na charakteru činnosti. Pokud nám pošlete konkrétní zadání, rádi pro vás zpracujeme přibližný cenový odhad.' },
  { q: 'Na náš projekt máme omezený rozpočet, co s tím?', a: 'Nemějte obavy, zkusíme spolu něco vymyslet. Spolupracujeme také s týmem šikovných juniorů, takže s námi máte možnost realizovat i menší projekty. Ozvěte se.' },
  { q: 'Kolik času vám dokončení projektu zabere?', a: 'Každý projekt je specifický. Tvorba webových stránek nebo kompletního brandingu může u menších projektů trvat okolo dvou a více měsíců, drobnosti pak v řádu několika dnů. Máme i dlouhodobé klienty, se kterými spolupracujeme kontinuálně už několik let.' },
  { q: 'Účastníte se výběrových řízení?', a: 'Zajímavých tendrů se rádi účastníme, ale zapojení do každého z nich pečlivě zvažujeme. Pokud nás chcete pozvat, neváhejte nám poslat zadání. Ideálně se s vámi chceme vždy seznámit blíž — třeba prostřednictvím úvodního workshopu.' },
  { q: 'Naše firma sídlí mimo Brno. Je to problém?', a: 'Z Prahy občas pracujeme, ale primárně nás zastihnete v Brně. Pokud jste odjinud, jednoduše skočíme do auta nebo na vlak a jsme u vás. Žádná vzdálenost není natolik velká, abychom ji nezvládli překonat — i kdybyste byli z New Yorku.' },
  { q: 'Jsme ze zahraničí. Co teď?', a: 'Spolupracujeme s klienty z celého světa. Máme za sebou marketingové projekty pro zákazníky z různých evropských i světových trhů. Vytvořit jazykovou mutaci webu nebo připravit zahraniční kampaň pro nás není problém.' },
  { q: 'Potřebujeme udělat pouze leták, můžeme vám napsat?', a: 'Ano, určitě napište. Naším cílem je primárně pracovat na komplexních strategických projektech, ale to neznamená, že pro vás nemůžeme vytvořit dílčí tiskovinu. Poptávku pečlivě posoudíme a dáme vám co nejdřív vědět.' },
  { q: 'Chtěl bych u vás pracovat. Jak vás můžu kontaktovat?', a: 'Mrkni na stránku Kariéra, kde najdeš všechny volné pozice. Pokud tam zrovna nic nenajdeš, nevěš hlavu — napiš nám i tak. Pošli nám životopis a ideálně i portfolio.' },
];

const KONTAKT_LOCATIONS = [
  {
    id: 'brno',
    city: 'Brno',
    note: 'Tady sídlíme',
    address: ['Justmighty s.r.o.', 'Palackého třída 291/51', '612 00, Brno'],
    legal: ['IČO: 02997274', 'DIČ: CZ02997274'],
    mapsHref: 'https://maps.google.com/?q=Palackého+třída+291/51+Brno',
    embed: 'https://maps.google.com/maps?width=600&height=400&hl=cs&q=Palack%C3%A9ho%20t%C5%99%C3%ADda%20291%2F51%2C%20Brno&t=&z=15&ie=UTF8&iwloc=B&output=embed',
  },
  {
    id: 'praha',
    city: 'Praha',
    note: 'Tady občas sedíme',
    address: ['Justmighty s.r.o.', 'Václavské náměstí', '110 00, Praha 1'],
    legal: [],
    mapsHref: 'https://maps.google.com/?q=Václavské+náměstí+Praha',
    embed: 'https://maps.google.com/maps?width=600&height=400&hl=cs&q=V%C3%A1clavsk%C3%A9%20n%C3%A1m%C4%9Bst%C3%AD%2C%20Praha&t=&z=15&ie=UTF8&iwloc=B&output=embed',
  },
];

function KontaktHero() {
  return (
    <section className="kontakt-hero" data-screen-label="08 Kontakt Hero">
      <div className="shell" style={{ padding: '160px 36px 80px' }}>
        <span className="eyebrow" data-reveal>08 / Kontakt</span>
        <h1 className="kontakt-hero__title h-1" data-reveal style={{ marginTop: 24 }}>
          Připraveni na <em>spolupráci?</em>
        </h1>
        <p className="kontakt-hero__lede" data-reveal style={{ "--reveal-delay": "160ms" }}>
          Chceš pomoci s projektem? Napiš, potkáme se a všechno probereme.
        </p>
      </div>
    </section>
  );
}

function KontaktPersons() {
  return (
    <section className="kontakt-persons" data-screen-label="09 Stačí se ozvat">
      <div className="shell" style={{ padding: '60px 36px 100px' }}>
        <div className="kontakt-persons__head">
          <span className="eyebrow" data-reveal>09 / Stačí se ozvat</span>
          <h2 className="h-2" data-reveal style={{ marginTop: 16 }}>kdo ti zvedne telefon</h2>
        </div>

        <div className="kontakt-persons__grid">
          {KONTAKT_PERSONS.map((p, i) => (
            <a key={p.id} href={`mailto:${p.email}`} className="kontakt-person" data-reveal style={{ "--reveal-delay": `${120 * i}ms` }}>
              <div className="kontakt-person__photo" style={{ backgroundImage: `url(${p.photo})` }} />
              <div className="kontakt-person__body">
                <span className="mono kontakt-person__role">{p.role}</span>
                <strong className="kontakt-person__name">{p.name}</strong>
                <span className="kontakt-person__title">{p.title}</span>
                <div className="kontakt-person__contact">
                  <span className="kontakt-person__email">
                    {p.email}
                    <span className="kontakt-person__arrow">↗</span>
                  </span>
                  <a href={`tel:${p.phone.replace(/\s/g, '')}`} className="kontakt-person__phone" onClick={(e) => e.stopPropagation()}>{p.phone}</a>
                </div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function KontaktLocations() {
  return (
    <section className="kontakt-loc" data-screen-label="10 Kde nas najdete">
      <div className="shell" style={{ padding: '100px 36px' }}>
        <div className="kontakt-loc__head">
          <span className="eyebrow" data-reveal>10 / Kde nás najdete</span>
          <h2 className="h-2" data-reveal style={{ marginTop: 16 }}>dvě města, jeden tým</h2>
        </div>

        <div className="kontakt-loc__grid">
          {KONTAKT_LOCATIONS.map((loc, i) => (
            <article key={loc.id} className="kontakt-loc__card" data-reveal style={{ "--reveal-delay": `${120 * i}ms` }}>
              <div className="kontakt-loc__map">
                <iframe
                  className="kontakt-loc__map-frame"
                  src={loc.embed}
                  title={`Mapa — ${loc.city}`}
                  loading="lazy"
                  referrerPolicy="no-referrer-when-downgrade" />
                <span className="kontakt-loc__map-overlay" aria-hidden="true" />
                <a href={loc.mapsHref} target="_blank" rel="noreferrer" className="kontakt-loc__map-cta">
                  Otevřít v Google Maps <span className="arrow">↗</span>
                </a>
              </div>
              <div className="kontakt-loc__info">
                <span className="mono kontakt-loc__note">{loc.note}</span>
                <h3 className="kontakt-loc__city">{loc.city}</h3>
                <address className="kontakt-loc__addr">
                  {loc.address.map((line) => (<span key={line}>{line}</span>))}
                </address>
                {loc.legal.length > 0 && (
                  <div className="kontakt-loc__legal">
                    {loc.legal.map((line) => (<span key={line}>{line}</span>))}
                  </div>
                )}
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function KontaktFAQ() {
  const [open, setOpen] = useStateK(null);
  const half = Math.ceil(KONTAKT_FAQ.length / 2);
  const cols = [KONTAKT_FAQ.slice(0, half), KONTAKT_FAQ.slice(half)];
  return (
    <section className="kfaq" data-screen-label="12 FAQ">
      <div className="shell" style={{ padding: '120px 36px' }}>
        <div className="kfaq__head">
          <div>
            <span className="eyebrow eyebrow--dark" data-reveal>12 / FAQ</span>
            <h2 className="kfaq__title h-2" data-reveal style={{ marginTop: 16 }}>
              co se nás <em>nejčastěji ptáte</em>
            </h2>
          </div>
          <p className="kfaq__lede" data-reveal>
            Odpovědi na otázky, které dostáváme nejčastěji. Pokud tu tu svoji nenajdeš, napiš — odpovíme rádi.
          </p>
        </div>

        <div className="kfaq__grid">
          {cols.map((col, ci) => (
            <ul key={ci} className="kfaq__col">
              {col.map((item, i) => {
                const idx = ci * half + i;
                const isOpen = open === idx;
                return (
                  <li key={idx} className={"kfaq__card " + (isOpen ? 'is-open' : '')} data-reveal style={{ "--reveal-delay": `${60 * i}ms` }}>
                    <button type="button" className="kfaq__btn" onClick={() => setOpen(isOpen ? null : idx)} aria-expanded={isOpen}>
                      <span className="kfaq__num mono">{String(idx + 1).padStart(2, '0')}</span>
                      <span className="kfaq__q">{item.q}</span>
                      <span className="kfaq__plus" aria-hidden="true">
                        <span className="kfaq__plus-h" />
                        <span className="kfaq__plus-v" />
                      </span>
                    </button>
                    <div className="kfaq__a-wrap">
                      <div className="kfaq__a-inner">
                        <p>{item.a}</p>
                      </div>
                    </div>
                  </li>
                );
              })}
            </ul>
          ))}
        </div>

        <div className="kfaq__foot" data-reveal>
          <span className="mono kfaq__foot-kicker">Tvoje otázka tu není?</span>
          <a href="mailto:tomas@justmighty.cz" className="kfaq__foot-cta">
            napiš Tomášovi <span className="arrow">↗</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function KontaktSocials() {
  const items = [
    { id: 'yt', label: 'YouTube', href: 'https://www.youtube.com/channel/UCO43Jj9RIPZB8Mzf4_1QF_g' },
    { id: 'sp', label: 'Spotify', href: 'https://open.spotify.com/show/0kD92MeXyAR0LLejEolETp' },
    { id: 'fb', label: 'Facebook', href: 'https://www.facebook.com/JustmightyAgency' },
    { id: 'ig', label: 'Instagram', href: 'https://www.instagram.com/justmightyagency/' },
  ];
  return (
    <section className="kontakt-soc" data-screen-label="13 Socials">
      <div className="shell" style={{ padding: '40px 36px 100px' }}>
        <div className="kontakt-soc__inner">
          <span className="mono kontakt-soc__kicker">Najdeš nás taky tady</span>
          <ul className="kontakt-soc__list">
            {items.map((it) => (
              <li key={it.id}>
                <a href={it.href} target="_blank" rel="noreferrer">
                  {it.label} <span className="arrow">↗</span>
                </a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function KontaktPage() {
  useReveal();
  return (
    <>
      <KontaktHero />
      <KontaktPersons />
      <KontaktLocations />
      <Contact />
      <KontaktFAQ />
      <KontaktSocials />
      <Footer />
    </>
  );
}

window.KontaktPage = KontaktPage;