// DIRECTION 1: EDITORIAL JOURNAL
// Teplé papírové tóny, knižní sazba, velký serif, kurzivní akcenty.
// Pocit: literární časopis, pomalost, dech mezi řádky.

const EDITORIAL_TYPE = {
  default: { head: "'Fraunces', serif", body: "'Work Sans', sans-serif", italic: "'Fraunces', serif" },
  newsreader: { head: "'Newsreader', serif", body: "'Work Sans', sans-serif", italic: "'Newsreader', serif" },
  playfair: { head: "'Playfair Display', serif", body: "'Inter', sans-serif", italic: "'Playfair Display', serif" },
  instrument: { head: "'Instrument Serif', serif", body: "'Inter', sans-serif", italic: "'Instrument Serif', serif" },
};

const editorialStyles = {
  paper: '#f7f2e9',
  paperDeep: '#efe7d8',
  ink: '#2a2420',
  inkSoft: '#5e554c',
  accent: '#c9632a',
  accentDeep: '#8b4a2a',
  rule: 'rgba(42, 36, 32, 0.15)',
};

const TERAPIE_CZ_URL = 'https://app.terapie.cz/profile/2691-Gabriela-Rohova';

function EditorialDirection({ typographyVariant = 'default' }) {
  const T = EDITORIAL_TYPE[typographyVariant] || EDITORIAL_TYPE.default;
  const S = editorialStyles;

  React.useEffect(() => {
    const els = document.querySelectorAll('.ed-fade');
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { e.target.classList.add('visible'); obs.unobserve(e.target); } });
    }, { threshold: 0.15 });
    els.forEach(el => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  const [scrollY, setScrollY] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const navItems = [
    { href: '#about', label: 'O mně' },
    { href: '#services', label: 'Služby' },
    { href: '#jak-to-probiha', label: 'Jak to probíhá' },
    { href: '#pricing', label: 'Ceník' },
    { href: '#contact', label: 'Kontakt' },
  ];

  return (
    <div style={{ background: S.paper, color: S.ink, fontFamily: T.body, fontSize: 16, lineHeight: 1.65 }}>
      <style>{`
        .ed-fade { opacity: 0; transform: translateY(30px); transition: opacity 1.1s cubic-bezier(.2,.8,.2,1), transform 1.1s cubic-bezier(.2,.8,.2,1); }
        .ed-fade.visible { opacity: 1; transform: none; }
        .ed-serif { font-family: ${T.head}; font-weight: 400; letter-spacing: -0.02em; }
        .ed-italic { font-family: ${T.italic}; font-style: italic; font-weight: 300; }
        .ed-nav a { position: relative; }
        .ed-nav a::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: ${S.ink}; transition: width .4s cubic-bezier(.2,.8,.2,1); }
        .ed-nav a:hover::after { width: 100%; }
        .ed-link { position: relative; display: inline-block; color: ${S.accent}; border-bottom: 1px solid ${S.accent}; padding-bottom: 2px; transition: all .4s ease; }
        .ed-link:hover { color: ${S.accentDeep}; border-color: ${S.accentDeep}; letter-spacing: 0.02em; }
        .ed-drop::first-letter { font-family: ${T.head}; font-size: 4.5em; float: left; line-height: 0.85; padding: 0.05em 0.1em 0 0; color: ${S.accent}; font-weight: 400; }
        .ed-service { transition: all .5s cubic-bezier(.2,.8,.2,1); }
        .ed-service:hover { background: ${S.paperDeep}; }
        .ed-service:hover .ed-service-num { color: ${S.accent}; transform: translateX(4px); }
        .ed-service-num { transition: all .5s cubic-bezier(.2,.8,.2,1); }
        .ed-btn { display: inline-flex; align-items: center; gap: 14px; padding: 18px 32px; background: ${S.ink}; color: ${S.paper}; font-family: ${T.body}; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; border-radius: 999px; transition: all .4s ease; }
        .ed-btn:hover { background: ${S.accent}; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(201, 99, 42, 0.25); }
        .ed-btn-ghost { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; border: 1px solid ${S.ink}; color: ${S.ink}; font-family: ${T.body}; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; border-radius: 999px; transition: all .4s ease; }
        .ed-btn-ghost:hover { background: ${S.ink}; color: ${S.paper}; }
        .ed-marquee { display: flex; animation: ed-marquee 40s linear infinite; }
        @keyframes ed-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
        .ed-tl-row { display: grid; grid-template-columns: 140px 1fr; gap: 32px; padding: 28px 0; border-top: 1px solid ${S.rule}; }
        .ed-tl-row:last-child { border-bottom: 1px solid ${S.rule}; }

        /* Hero headline — responsive */
        .ed-hero-h1 {
          font-size: clamp(2.5rem, 8.5vw, 108px);
          line-height: 1.02;
          letter-spacing: -0.025em;
          margin: 0 0 40px;
          font-weight: 300;
          word-break: normal;
          overflow-wrap: break-word;
          hyphens: manual;
        }
        .ed-hero-h1 .ed-italic { font-style: italic; }

        /* Nav */
        .ed-nav-bar {
          position: fixed; top: 0; left: 0; right: 0; z-index: 50;
          height: 72px;
          display: flex; align-items: center; justify-content: space-between;
          padding: 0 48px;
          transition: all .4s ease;
        }
        .ed-hamburger { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; }
        .ed-hamburger span { display: block; width: 22px; height: 1.5px; background: ${S.ink}; position: relative; transition: all .3s ease; }
        .ed-hamburger span::before, .ed-hamburger span::after { content: ''; position: absolute; left: 0; width: 22px; height: 1.5px; background: ${S.ink}; transition: all .3s ease; }
        .ed-hamburger span::before { top: -7px; }
        .ed-hamburger span::after { top: 7px; }
        .ed-hamburger.open span { background: transparent; }
        .ed-hamburger.open span::before { top: 0; transform: rotate(45deg); }
        .ed-hamburger.open span::after { top: 0; transform: rotate(-45deg); }

        /* Mobile drawer */
        .ed-drawer {
          position: fixed; inset: 0; z-index: 49;
          background: ${S.paper};
          display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
          padding: 100px 48px 48px;
          transform: translateX(100%);
          transition: transform .5s cubic-bezier(.2,.8,.2,1);
        }
        .ed-drawer.open { transform: translateX(0); }
        .ed-drawer a { font-family: ${T.head}; font-size: clamp(32px, 8vw, 56px); font-weight: 300; letter-spacing: -0.02em; color: ${S.ink}; padding: 12px 0; display: block; }
        .ed-drawer a:hover { color: ${S.accent}; }

        /* Mobile sticky CTA */
        .ed-mobile-cta { display: none; }

        @media (max-width: 900px) {
          .ed-nav-bar { padding: 0 24px; background: ${S.paper}; border-bottom: 1px solid ${S.rule}; }
          .ed-nav-desktop { display: none !important; }
          .ed-nav-cta-desktop { display: none !important; }
          .ed-hamburger { display: flex; }

          .ed-hero { padding: 100px 24px 48px !important; }
          .ed-hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; min-height: auto !important; }
          .ed-hero-meta { gap: 24px !important; }
          .ed-hero-meta > div { flex: 1 1 140px; }

          .ed-portrait-col { max-width: 360px; margin: 0 auto; }
          .ed-portrait-pullquote { position: static !important; max-width: none !important; margin-top: 24px !important; transform: none !important; }

          .ed-section { padding: 96px 24px !important; }
          .ed-section-2col { grid-template-columns: 1fr !important; gap: 48px !important; }
          .ed-section-2col-wide { grid-template-columns: 1fr !important; gap: 48px !important; }

          .ed-service-row { grid-template-columns: 1fr !important; gap: 12px !important; padding: 32px 0 !important; }
          .ed-service-tag { text-align: left !important; }

          .ed-process-grid { grid-template-columns: 1fr 1fr !important; }
          .ed-process-grid > div { border-right: none !important; border-bottom: 1px solid ${S.rule}; }
          .ed-process-grid > div:nth-child(odd) { border-right: 1px solid ${S.rule} !important; }
          .ed-process-grid > div:nth-last-child(-n+2) { border-bottom: none; }

          .ed-pricing-split { grid-template-columns: 1fr !important; gap: 24px !important; }
          .ed-pricing-forms { grid-template-columns: repeat(3, 1fr) !important; gap: 8px !important; }

          .ed-contact-grid { grid-template-columns: 1fr !important; gap: 1px !important; }

          .ed-footer { padding: 32px 24px !important; flex-direction: column; text-align: center; }

          .ed-mobile-cta { display: flex; position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 48; box-shadow: 0 8px 24px rgba(42,36,32,0.2); }
        }

        @media (max-width: 480px) {
          .ed-hero-meta > div { flex: 1 1 100%; }
          .ed-process-grid { grid-template-columns: 1fr !important; }
          .ed-process-grid > div { border-right: none !important; border-bottom: 1px solid ${S.rule} !important; }
          .ed-process-grid > div:last-child { border-bottom: none !important; }
          .ed-pricing-forms { grid-template-columns: 1fr !important; }
        }
      `}</style>

      {/* ═══════════════ NAV ═══════════════ */}
      <nav className="ed-nav-bar" style={{ background: scrollY > 40 ? 'rgba(247, 242, 233, 0.85)' : 'transparent', backdropFilter: scrollY > 40 ? 'blur(12px)' : 'none', WebkitBackdropFilter: scrollY > 40 ? 'blur(12px)' : 'none' }}>
        <a href="#top" className="ed-serif" style={{ fontSize: 20, letterSpacing: '-0.01em' }}>
          <span className="ed-italic">Gabriela</span> Rohová
        </a>
        <div className="ed-nav ed-nav-desktop" style={{ display: 'flex', gap: 36, fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase' }}>
          {navItems.map(n => <a key={n.href} href={n.href}>{n.label}</a>)}
        </div>
        <a href="#contact" className="ed-btn ed-nav-cta-desktop" style={{ padding: '12px 24px', fontSize: 12 }}>
          Objednat sezení
        </a>
        <button className={`ed-hamburger ${menuOpen ? 'open' : ''}`} aria-label="Menu" onClick={() => setMenuOpen(o => !o)}>
          <span />
        </button>
      </nav>

      {/* Mobile drawer */}
      <div className={`ed-drawer ${menuOpen ? 'open' : ''}`}>
        {navItems.map(n => (
          <a key={n.href} href={n.href} onClick={() => setMenuOpen(false)}>{n.label}</a>
        ))}
        <a href="#contact" onClick={() => setMenuOpen(false)} style={{ marginTop: 32, fontSize: '22px !important' }}>
          <span style={{ fontFamily: T.body, fontSize: 13, letterSpacing: '0.18em', textTransform: 'uppercase', color: S.accent, display: 'block', padding: '16px 28px', border: `1px solid ${S.accent}`, borderRadius: 999, width: 'fit-content' }}>
            Objednat sezení →
          </span>
        </a>
      </div>

      {/* Mobile sticky CTA pill */}
      <a href="#contact" className="ed-btn ed-mobile-cta" style={{ padding: '14px 28px', fontSize: 12 }}>
        Objednat sezení →
      </a>

      <div id="top" />

      {/* ═══════════════ HERO ═══════════════ */}
      <section className="ed-hero" style={{ minHeight: '100vh', padding: '140px 48px 80px', position: 'relative', overflow: 'hidden' }}>
        <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(ellipse at 20% 30%, ${S.paperDeep} 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(201, 99, 42, 0.08) 0%, transparent 50%)`, transform: `translateY(${scrollY * 0.3}px)`, pointerEvents: 'none' }} />

        <div className="ed-hero-grid" style={{ maxWidth: 1400, margin: '0 auto', position: 'relative', display: 'grid', gridTemplateColumns: '1.3fr 1fr', gap: 80, alignItems: 'center', minHeight: 'calc(100vh - 220px)' }}>
          <div>
            <div className="ed-fade" style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 32, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: S.inkSoft }}>
              <span style={{ width: 40, height: 1, background: S.ink }} />
              Psycholožka &amp; terapeutka · Brno
            </div>
            <h1 className="ed-serif ed-fade ed-hero-h1">
              Změna přichází,<br/>
              když sobě<br/>
              <span className="ed-italic" style={{ color: S.accent }}>poro&shy;zumíme</span>.
            </h1>
            <p className="ed-fade" style={{ fontSize: 'clamp(17px, 2.2vw, 20px)', lineHeight: 1.55, color: S.inkSoft, maxWidth: 560, margin: '0 0 48px', fontWeight: 300 }}>
              Jmenuji se Gabi. Jsem psycholožka a terapeutka v Brně. Pracuju s dospělými, kteří přichází s úzkostí, složitými vztahy, ztrátou — nebo když začne život působit jako něco, co se jenom odehrává kolem nich.
            </p>
            <div className="ed-fade" style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
              <a href="mailto:rohovagabriela@gmail.com" className="ed-btn">
                Napsat e-mail
                <span style={{ fontSize: 18 }}>→</span>
              </a>
              <a href={TERAPIE_CZ_URL} target="_blank" rel="noopener" className="ed-btn-ghost">
                Rezervovat přes terapie.cz
                <span style={{ fontSize: 14 }}>↗</span>
              </a>
            </div>
            <div className="ed-fade" style={{ marginTop: 20 }}>
              <a href="#jak-to-probiha" style={{ fontSize: 13, color: S.inkSoft, textDecoration: 'underline', textDecorationColor: 'rgba(94,85,76,0.3)', textUnderlineOffset: 4 }}>
                Nebo si přečtěte, jak probíhá první sezení →
              </a>
            </div>

            <div className="ed-fade ed-hero-meta" style={{ marginTop: 72, paddingTop: 32, borderTop: `1px solid ${S.rule}`, display: 'flex', gap: 48, fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: S.inkSoft, flexWrap: 'wrap' }}>
              <div>
                <div style={{ fontFamily: T.head, fontSize: 26, color: S.ink, textTransform: 'none', letterSpacing: '-0.02em', marginBottom: 4 }}>Gestalt <span className="ed-italic">přístup</span></div>
                výcvik v Dialogu
              </div>
              <div>
                <div style={{ fontFamily: T.head, fontSize: 26, color: S.ink, textTransform: 'none', letterSpacing: '-0.02em', marginBottom: 4 }}>MUNI</div>
                jednooborová psychologie
              </div>
              <div>
                <div style={{ fontFamily: T.head, fontSize: 26, color: S.ink, textTransform: 'none', letterSpacing: '-0.02em', marginBottom: 4 }}>Josefská 15</div>
                Brno · centrum
              </div>
            </div>
          </div>

          {/* Portrait column */}
          <div className="ed-fade ed-portrait-col" style={{ position: 'relative' }}>
            <div style={{ position: 'relative', aspectRatio: '3/4', overflow: 'hidden', borderRadius: '50% 50% 4px 4px / 40% 40% 4px 4px', background: S.paperDeep }}>
              <img src="assets/gabi-portrait.jpg" alt="Mgr. Gabriela Rohová — portrét" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: '50% 30%', display: 'block' }} />
              <div style={{ position: 'absolute', inset: 0, background: `radial-gradient(circle at 30% 20%, rgba(201, 99, 42, 0.08) 0%, transparent 60%)`, mixBlendMode: 'multiply', pointerEvents: 'none' }} />
            </div>

            <div className="ed-portrait-pullquote" style={{ position: 'absolute', right: -20, bottom: -40, maxWidth: 280, background: S.paper, padding: '24px 28px', borderLeft: `2px solid ${S.accent}`, transform: `translateY(${scrollY * -0.1}px)` }}>
              <div style={{ fontFamily: T.italic, fontStyle: 'italic', fontSize: 17, lineHeight: 1.45, color: S.ink }}>
                „Dobrá terapie vypadá jako dva lidé, kteří spolu mají skutečný rozhovor. Ne jako kancelář, kde dostanete diagnózu a domácí úkoly."
              </div>
              <div style={{ marginTop: 12, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: S.inkSoft }}>
                — Gabi
              </div>
            </div>

            <svg style={{ position: 'absolute', left: -60, top: -40, width: 120, opacity: 0.35 }} viewBox="0 0 100 140" fill="none">
              <path d="M50 10 Q48 70 50 130" stroke={S.accentDeep} strokeWidth="0.8"/>
              <ellipse cx="38" cy="30" rx="10" ry="4" fill={S.accentDeep} opacity="0.4" transform="rotate(-30 38 30)"/>
              <ellipse cx="62" cy="50" rx="11" ry="4" fill={S.accentDeep} opacity="0.4" transform="rotate(30 62 50)"/>
              <ellipse cx="36" cy="75" rx="12" ry="4" fill={S.accentDeep} opacity="0.4" transform="rotate(-35 36 75)"/>
              <ellipse cx="64" cy="100" rx="10" ry="4" fill={S.accentDeep} opacity="0.4" transform="rotate(35 64 100)"/>
            </svg>
          </div>
        </div>
      </section>

      {/* ═══════════════ MARQUEE BAND ═══════════════ */}
      <section style={{ padding: '40px 0', borderTop: `1px solid ${S.rule}`, borderBottom: `1px solid ${S.rule}`, overflow: 'hidden', background: S.paperDeep }}>
        <div className="ed-marquee" style={{ gap: 60, whiteSpace: 'nowrap' }}>
          {[...Array(2)].map((_, i) => (
            <div key={i} style={{ display: 'flex', gap: 60, paddingRight: 60 }}>
              {['Úzkosti', 'Vztahy', 'Sebepoznání', 'Vyhoření', 'Ztráta', 'Životní změny', 'Sebehodnota', 'Rozchod'].map((w, j) => (
                <span key={j} className="ed-serif" style={{ fontSize: 44, fontWeight: 300, color: j % 2 === 0 ? S.ink : S.accent, fontStyle: j % 3 === 0 ? 'italic' : 'normal' }}>
                  {w} <span style={{ color: S.accentDeep, opacity: 0.4, margin: '0 20px' }}>✦</span>
                </span>
              ))}
            </div>
          ))}
        </div>
      </section>

      {/* ═══════════════ ABOUT ═══════════════ */}
      <section id="about" className="ed-section" style={{ padding: '160px 48px', position: 'relative' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div className="ed-fade" style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 48, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: S.inkSoft }}>
            <span style={{ width: 40, height: 1, background: S.ink }} />
            Kapitola první — O mně
          </div>

          <div className="ed-section-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 120, alignItems: 'start' }}>
            <div className="ed-fade">
              <h2 className="ed-serif" style={{ fontSize: 'clamp(48px, 5vw, 72px)', lineHeight: 1, margin: '0 0 48px', fontWeight: 300 }}>
                Mgr. <span className="ed-italic">Gabriela</span><br/>Rohová
              </h2>

              <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '14px 32px', fontSize: 14, paddingTop: 32, borderTop: `1px solid ${S.rule}` }}>
                <div style={{ color: S.inkSoft, letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 11 }}>Titul</div>
                <div>Mgr. · jednooborová psychologie, MUNI</div>
                <div style={{ color: S.inkSoft, letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 11 }}>Výcvik</div>
                <div>Gestalt psychoterapie, Dialog <span className="ed-italic" style={{ color: S.inkSoft }}>(probíhá, víc než ½)</span></div>
                <div style={{ color: S.inkSoft, letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 11 }}>Přístup</div>
                <div>Gestalt — vztah, přítomnost, sebeporozumění</div>
                <div style={{ color: S.inkSoft, letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 11 }}>Místo</div>
                <div>Josefská 15, Brno · online (celá ČR)</div>
                <div style={{ color: S.inkSoft, letterSpacing: '0.08em', textTransform: 'uppercase', fontSize: 11 }}>Jazyk</div>
                <div>Česky · slovensky</div>
              </div>

              <div style={{ marginTop: 40 }}>
                <a href={TERAPIE_CZ_URL} target="_blank" rel="noopener" className="ed-link" style={{ fontSize: 13 }}>
                  Profil na terapie.cz →
                </a>
              </div>
            </div>

            <div className="ed-fade">
              <p className="ed-serif" style={{ fontSize: 26, lineHeight: 1.45, margin: '0 0 32px', fontWeight: 300, color: S.ink, maxWidth: 620 }}>
                Jsem psycholožka a terapeutka — a zároveň manželka, máma, táborová vedoucí a občasná lektorka. S lidmi ráda navazuju skutečné vztahy a právě proto mě baví tahle práce.
              </p>

              <p style={{ fontFamily: "'Newsreader', 'Fraunces', serif", fontSize: 18, lineHeight: 1.65, color: S.inkSoft, margin: '0 0 24px', maxWidth: 620 }}>
                V terapii nedávám rady, nediagnostikuju a nemám dopředu připravený plán. Spolu hledáme, co se ve vašem příběhu <em style={{ color: S.ink, fontFamily: T.italic }}>opakuje</em>, co vás brzdí a co s tím chcete dělat. Bez hodnocení, bez receptů.
              </p>

              <p style={{ fontFamily: "'Newsreader', 'Fraunces', serif", fontSize: 18, lineHeight: 1.65, color: S.inkSoft, margin: '0 0 40px', maxWidth: 620 }}>
                Ve volném čase tvořím rukama, zahradničím, cestuju, hraju deskovky. Myslím, že je důležité, aby terapeut žil i mimo ordinaci.
              </p>

              <a href="#jak-to-probiha" className="ed-link" style={{ fontSize: 15 }}>
                Přečtěte si, jak probíhá první sezení →
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════ TIMELINE — Vzdělání & Praxe ═══════════════ */}
      <section className="ed-section" style={{ padding: '120px 48px', background: S.paperDeep }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div className="ed-fade ed-section-2col" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96 }}>

            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 32, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: S.inkSoft }}>
                <span style={{ width: 40, height: 1, background: S.ink }} />
                Vzdělání &amp; výcvik
              </div>
              <h3 className="ed-serif" style={{ fontSize: 36, lineHeight: 1.1, margin: '0 0 48px', fontWeight: 400 }}>
                Co <span className="ed-italic">stojí</span> za mou prací
              </h3>
              <div>
                {[
                  { year: '2022 — dnes', title: 'Výcvik v Gestalt psychoterapii', place: 'Dialog — Český institut pro výcvik v Gestalt psychoterapii', note: 'akreditováno IPVZ i EAGT · absolvováno víc než ½ programu' },
                  { year: '2021 — 2023', title: 'Specializační vzdělávání v klinické psychologii', place: 'IPVZ', note: 'aktuálně pozastaveno kvůli rodičovské' },
                  { year: '2021 — 2022', title: 'Komplexní výcvik v terapii zaměřené na řešení', place: 'Dalet Olomouc', note: '160 h · úvod' },
                  { year: '2020 — 2021', title: 'Psycholog ve zdravotnictví', place: 'Filosofická fakulta UK' },
                  { year: '2017 — 2018', title: 'Kurz Krizové intervence', place: 'Déčko Liberec' },
                  { year: '2014 — 2019', title: 'Jednooborová psychologie, Mgr.', place: 'Filosofická fakulta, Masarykova univerzita' },
                ].map((it, i) => (
                  <div key={i} className="ed-tl-row">
                    <div className="ed-serif ed-italic" style={{ fontSize: 15, color: S.accent }}>{it.year}</div>
                    <div>
                      <div className="ed-serif" style={{ fontSize: 18, lineHeight: 1.3, marginBottom: 4 }}>{it.title}</div>
                      <div style={{ fontSize: 14, color: S.inkSoft, marginBottom: it.note ? 6 : 0 }}>{it.place}</div>
                      {it.note && <div className="ed-italic" style={{ fontSize: 13, color: S.inkSoft, fontFamily: T.italic, fontStyle: 'italic' }}>{it.note}</div>}
                    </div>
                  </div>
                ))}
              </div>
            </div>

            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 32, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: S.inkSoft }}>
                <span style={{ width: 40, height: 1, background: S.ink }} />
                Praxe
              </div>
              <h3 className="ed-serif" style={{ fontSize: 36, lineHeight: 1.1, margin: '0 0 48px', fontWeight: 400 }}>
                Kde jsem <span className="ed-italic">pracovala</span>
              </h3>
              <div>
                {[
                  { year: 'od 2024', title: 'Soukromá psychologická praxe', place: 'Josefská 15, Brno · online' },
                  { year: '2022 — 2023', title: 'Psycholog ve zdravotnictví', place: 'Neurologická klinika, FN u sv. Anny v Brně' },
                  { year: '2022 — 2023', title: 'Externí pedagog psychologie', place: 'Filozofická fakulta, Masarykova univerzita' },
                  { year: '2020 — 2021', title: 'Psycholog v ambulanci klinické psychologie', place: 'Pro děti i dospělé, Brno' },
                  { year: '2015 — 2019', title: 'Odborné praxe — Projekt SPOLU', place: 'Psychiatrická oddělení brněnských nemocnic · vedení skupinových aktivit' },
                ].map((it, i) => (
                  <div key={i} className="ed-tl-row">
                    <div className="ed-serif ed-italic" style={{ fontSize: 15, color: S.accent }}>{it.year}</div>
                    <div>
                      <div className="ed-serif" style={{ fontSize: 18, lineHeight: 1.3, marginBottom: 4 }}>{it.title}</div>
                      <div style={{ fontSize: 14, color: S.inkSoft }}>{it.place}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>

          </div>
        </div>
      </section>

      {/* ═══════════════ SERVICES ═══════════════ */}
      <section id="services" className="ed-section" style={{ padding: '160px 48px', position: 'relative' }}>
        <div style={{ maxWidth: 1400, margin: '0 auto' }}>
          <div className="ed-fade ed-section-2col-wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'end', marginBottom: 96 }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 32, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: S.inkSoft }}>
                <span style={{ width: 40, height: 1, background: S.ink }} />
                Kapitola druhá
              </div>
              <h2 className="ed-serif" style={{ fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1, margin: 0, fontWeight: 300 }}>
                Formy <span className="ed-italic">spolupráce</span>
              </h2>
            </div>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: S.inkSoft, maxWidth: 520, margin: 0, justifySelf: 'end' }}>
              Potřeby se v čase mění. Nemusíte hned vědět, jestli chcete chodit dlouhodobě, jednorázově v krizi, nebo online. Začneme tak, jak to dává smysl teď — a zbytek přijde.
            </p>
          </div>

          <div style={{ borderTop: `1px solid ${S.rule}` }}>
            {[
              {
                num: '01',
                id: 'forma-pravidelne',
                title: 'Pravidelné individuální sezení',
                label: '50 nebo 80 min · dlouhodobě',
                body: 'Dlouhodobější spolupráce v rytmu, který si sami nastavíme. Prostor jít do hloubky — k tomu, co se opakuje, drhne nebo bolí. Většinou se vídáme jednou týdně nebo po čtrnácti dnech.',
                tag: 'Nejčastější formát'
              },
              {
                num: '02',
                id: 'forma-krize',
                title: 'Krátkodobá krizová intervence',
                label: 'Pár sezení · cíleně',
                body: 'Když se něco právě teď zadrhlo a potřebujete to rozmotat s někým, kdo vás nezná osobně. Rozchod, ztráta, náhlá úzkost, těžké rozhodnutí. Cíl je praktický.',
                tag: 'Akutní podpora'
              },
              {
                num: '03',
                id: 'forma-online',
                title: 'Online konzultace',
                label: 'Video · 50 nebo 80 min',
                body: 'Stejná práce, jen odjinud. Pro lidi mimo Brno, na cestách, nebo když chcete být ve svém prostředí. Bezpečná platforma, konec sezení = konec záznamu.',
                tag: 'Flexibilně'
              },
            ].map((s, i) => (
              <div key={i} id={s.id} className="ed-service ed-fade ed-service-row" style={{ padding: '48px 0', borderBottom: `1px solid ${S.rule}`, display: 'grid', gridTemplateColumns: '100px 1fr 1fr auto', gap: 48, alignItems: 'start' }}>
                <div className="ed-service-num ed-serif" style={{ fontSize: 56, lineHeight: 1, color: S.inkSoft, fontWeight: 300 }}>{s.num}</div>
                <div>
                  <h3 className="ed-serif" style={{ fontSize: 'clamp(24px, 3vw, 32px)', lineHeight: 1.1, margin: '0 0 8px', fontWeight: 400 }}>{s.title}</h3>
                  <div style={{ fontSize: 12, letterSpacing: '0.15em', textTransform: 'uppercase', color: S.accent }}>{s.label}</div>
                </div>
                <p style={{ fontSize: 15, lineHeight: 1.7, color: S.inkSoft, margin: 0, maxWidth: 460 }}>{s.body}</p>
                <div className="ed-service-tag" style={{ fontFamily: T.italic, fontStyle: 'italic', fontSize: 14, color: S.inkSoft, textAlign: 'right', whiteSpace: 'nowrap', paddingTop: 8 }}>
                  {s.tag}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════ PROCESS ═══════════════ */}
      <section id="jak-to-probiha" className="ed-section" style={{ padding: '160px 48px', background: S.paperDeep }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div className="ed-fade" style={{ textAlign: 'center', marginBottom: 96 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 16, marginBottom: 24, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: S.inkSoft }}>
              <span style={{ width: 40, height: 1, background: S.ink }} />
              Jak to probíhá
              <span style={{ width: 40, height: 1, background: S.ink }} />
            </div>
            <h2 className="ed-serif" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', lineHeight: 1.05, margin: 0, fontWeight: 300 }}>
              První sezení bývá <span className="ed-italic">nejtěžší krok</span>.
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: S.inkSoft, maxWidth: 620, margin: '32px auto 0' }}>
              A taky nejdůležitější. Tady je, co čekat — ať máte představu dřív, než mi napíšete.
            </p>
          </div>

          <div className="ed-process-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0, borderTop: `1px solid ${S.rule}`, borderBottom: `1px solid ${S.rule}`, background: S.paper }}>
            {[
              { step: 'I.', title: 'Ozvete se', body: 'E-mailem, telefonem nebo SMS. Stačí pár řádek. Na každé sezení se domlouváme předem.' },
              { step: 'II.', title: 'Domluvíme termín', body: 'Navrhneme čas — osobně v Brně na Josefské, nebo online. Beze spěchu.' },
              { step: 'III.', title: 'Sejdeme se', body: 'První sezení je hlavně o seznámení. Řeknete si, co vás přivádí a co potřebujete.' },
              { step: 'IV.', title: 'Pokračujeme', body: 'Pokud si sedneme, domluvíme rytmus. Pokud ne, doporučím někoho z kolegů.' },
            ].map((p, i) => (
              <div key={i} className="ed-fade" style={{ padding: '48px 32px', borderRight: i < 3 ? `1px solid ${S.rule}` : 'none' }}>
                <div className="ed-serif ed-italic" style={{ fontSize: 28, color: S.accent, marginBottom: 20, fontWeight: 300 }}>{p.step}</div>
                <h4 className="ed-serif" style={{ fontSize: 22, margin: '0 0 12px', fontWeight: 400 }}>{p.title}</h4>
                <p style={{ fontSize: 14, lineHeight: 1.6, color: S.inkSoft, margin: 0 }}>{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ═══════════════ PRICING ═══════════════ */}
      <section id="pricing" className="ed-section" style={{ padding: '160px 48px', background: S.ink, color: S.paper, position: 'relative', overflow: 'hidden' }}>
        <svg style={{ position: 'absolute', right: -40, top: 40, width: 320, opacity: 0.08 }} viewBox="0 0 200 300" fill="none">
          <path d="M100 20 Q95 150 100 280" stroke={S.paper} strokeWidth="1"/>
          {[40, 70, 110, 150, 190, 230].map((y, i) => (
            <ellipse key={i} cx={i % 2 === 0 ? 75 : 125} cy={y} rx="22" ry="7" fill={S.paper} opacity="0.6" transform={`rotate(${i % 2 === 0 ? -30 : 30} ${i % 2 === 0 ? 75 : 125} ${y})`}/>
          ))}
        </svg>

        <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
          <div className="ed-fade" style={{ marginBottom: 80 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 32, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(247, 242, 233, 0.6)' }}>
              <span style={{ width: 40, height: 1, background: S.paper, opacity: 0.6 }} />
              Kapitola třetí — Ceník
            </div>
            <h2 className="ed-serif" style={{ fontSize: 'clamp(40px, 5vw, 72px)', lineHeight: 1, margin: 0, fontWeight: 300 }}>
              Stejná cena,<br/>
              <span className="ed-italic" style={{ color: S.accent }}>ať přijdete kdykoli.</span>
            </h2>
            <p style={{ fontSize: 17, color: 'rgba(247, 242, 233, 0.7)', marginTop: 24, maxWidth: 560, lineHeight: 1.65 }}>
              Cena závisí jen na délce sezení. Platí stejně pro pravidelnou terapii, krizovou intervenci i online formu.
            </p>
          </div>

          {/* Price table — two rows */}
          <div className="ed-fade" style={{ borderTop: '1px solid rgba(247,242,233,0.2)', borderBottom: '1px solid rgba(247,242,233,0.2)' }}>
            {[
              { label: 'Standardní sezení', dur: '50 min', price: '1 100 Kč' },
              { label: 'Prodloužené sezení', dur: '80 min', price: '1 500 Kč' },
            ].map((r, i) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 32, alignItems: 'baseline', padding: '36px 0', borderTop: i > 0 ? '1px solid rgba(247,242,233,0.1)' : 'none' }}>
                <div className="ed-serif" style={{ fontSize: 'clamp(24px, 3vw, 32px)', lineHeight: 1.1, fontWeight: 400 }}>{r.label}</div>
                <div style={{ fontSize: 13, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(247, 242, 233, 0.6)' }}>{r.dur}</div>
                <div className="ed-serif" style={{ fontSize: 'clamp(32px, 4vw, 48px)', lineHeight: 1, fontWeight: 300, color: i === 0 ? S.paper : S.accent, textAlign: 'right' }}>{r.price}</div>
              </div>
            ))}
          </div>

          {/* Form chips */}
          <div className="ed-fade ed-pricing-forms" style={{ marginTop: 32, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12 }}>
            {[
              { label: 'Pravidelná terapie', href: '#forma-pravidelne' },
              { label: 'Krizová intervence', href: '#forma-krize' },
              { label: 'Online konzultace', href: '#forma-online' },
            ].map((c, i) => (
              <a key={i} href={c.href} style={{ padding: '16px 20px', border: '1px solid rgba(247,242,233,0.2)', color: 'rgba(247,242,233,0.75)', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', transition: 'all .3s ease', textAlign: 'center' }} onMouseEnter={e => { e.currentTarget.style.borderColor = S.accent; e.currentTarget.style.color = S.paper; }} onMouseLeave={e => { e.currentTarget.style.borderColor = 'rgba(247,242,233,0.2)'; e.currentTarget.style.color = 'rgba(247,242,233,0.75)'; }}>
                {c.label} ↓
              </a>
            ))}
          </div>

          <div className="ed-fade ed-pricing-split" style={{ marginTop: 56, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 48, fontSize: 14, color: 'rgba(247, 242, 233, 0.7)', lineHeight: 1.75 }}>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: S.accent, marginBottom: 12 }}>Platba</div>
              Převodem na účet. V případě potřeby dle individuální domluvy.
            </div>
            <div>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: S.accent, marginBottom: 12 }}>Storno podmínky</div>
              Zrušení méně než 24 h před sezením — účtována plná cena.
            </div>
          </div>
        </div>
      </section>

      {/* ═══════════════ CONTACT ═══════════════ */}
      <section id="contact" className="ed-section" style={{ padding: '160px 48px' }}>
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <div className="ed-fade" style={{ textAlign: 'center', marginBottom: 80 }}>
            <div style={{ display: 'inline-flex', alignItems: 'center', gap: 16, marginBottom: 32, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase', color: S.inkSoft }}>
              <span style={{ width: 40, height: 1, background: S.ink }} />
              Poslední kapitola
              <span style={{ width: 40, height: 1, background: S.ink }} />
            </div>
            <h2 className="ed-serif" style={{ fontSize: 'clamp(44px, 6.5vw, 96px)', lineHeight: 0.98, margin: '0 0 32px', fontWeight: 300, letterSpacing: '-0.02em' }}>
              Ozvěte se,<br/>
              <span className="ed-italic" style={{ color: S.accent }}>až budete chtít.</span>
            </h2>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: S.inkSoft, maxWidth: 600, margin: '0 auto' }}>
              Ozvěte se, až budete mít chuť. Stačí pár řádek o tom, co vás přivádí. E-mail, SMS nebo zavolání — co vám sedí. Pokud telefon nezvednu, zavolám zpátky.
            </p>
          </div>

          {/* Primary: e-mail */}
          <div className="ed-fade" style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ fontSize: 11, letterSpacing: '0.25em', textTransform: 'uppercase', color: S.inkSoft, marginBottom: 20 }}>E-mail</div>
            <a href="mailto:rohovagabriela@gmail.com" className="ed-serif" style={{ display: 'inline-block', fontSize: 'clamp(28px, 5vw, 52px)', color: S.accent, fontWeight: 300, letterSpacing: '-0.02em', lineHeight: 1.1, borderBottom: `1px solid ${S.accent}`, paddingBottom: 6, transition: 'color .3s ease' }} onMouseEnter={e => e.currentTarget.style.color = S.accentDeep} onMouseLeave={e => e.currentTarget.style.color = S.accent}>
              rohovagabriela@gmail.com
            </a>
            <div style={{ marginTop: 16, fontFamily: T.italic, fontStyle: 'italic', fontSize: 14, color: S.inkSoft }}>
              preferovaný způsob — odpovím během pracovního dne
            </div>
          </div>

          {/* Secondary: phone + location */}
          <div className="ed-fade ed-contact-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 1, background: S.rule, border: `1px solid ${S.rule}`, marginBottom: 56 }}>
            <a href="tel:+420735873101" style={{ background: S.paper, padding: '36px 32px', display: 'block', transition: 'background .4s ease' }} onMouseEnter={e => e.currentTarget.style.background = S.paperDeep} onMouseLeave={e => e.currentTarget.style.background = S.paper}>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: S.inkSoft, marginBottom: 14 }}>Telefon / SMS</div>
              <div className="ed-serif" style={{ fontSize: 22, lineHeight: 1.2, fontWeight: 400, marginBottom: 8 }}>735 873 101</div>
              <div style={{ fontSize: 13, color: S.inkSoft, lineHeight: 1.5, fontFamily: T.italic, fontStyle: 'italic' }}>
                SMS vítané — pokud se nedovoláte, zavolám zpátky
              </div>
            </a>
            <a href="https://mapy.cz/?q=Josefská 15, Brno" target="_blank" rel="noopener" style={{ background: S.paper, padding: '36px 32px', display: 'block', transition: 'background .4s ease' }} onMouseEnter={e => e.currentTarget.style.background = S.paperDeep} onMouseLeave={e => e.currentTarget.style.background = S.paper}>
              <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: S.inkSoft, marginBottom: 14 }}>Ordinace</div>
              <div className="ed-serif" style={{ fontSize: 20, lineHeight: 1.3, fontWeight: 400, marginBottom: 8 }}>Josefská 15, Brno</div>
              <div style={{ fontSize: 13, color: S.inkSoft, lineHeight: 1.5 }}>
                centrum · v budově Dialogu · <span style={{ color: S.accent }}>mapa ↗</span>
              </div>
            </a>
          </div>

          <div className="ed-fade" style={{ textAlign: 'center', display: 'flex', gap: 16, justifyContent: 'center', flexWrap: 'wrap' }}>
            <a href="mailto:rohovagabriela@gmail.com" className="ed-btn">
              Napsat e-mail
              <span style={{ fontSize: 18 }}>→</span>
            </a>
            <a href={TERAPIE_CZ_URL} target="_blank" rel="noopener" className="ed-btn-ghost">
              Rezervovat přes terapie.cz
              <span style={{ fontSize: 16 }}>↗</span>
            </a>
          </div>
        </div>
      </section>

      {/* ═══════════════ FOOTER ═══════════════ */}
      <footer className="ed-footer" style={{ padding: '48px 48px 96px', borderTop: `1px solid ${S.rule}`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: S.inkSoft, flexWrap: 'wrap', gap: 16 }}>
        <div className="ed-serif" style={{ textTransform: 'none', letterSpacing: '-0.01em', fontSize: 16, color: S.ink }}>
          <span className="ed-italic">Gabriela</span> Rohová
        </div>
        <div style={{ display: 'flex', gap: 32, alignItems: 'center', flexWrap: 'wrap' }}>
          <a href={TERAPIE_CZ_URL} target="_blank" rel="noopener" style={{ transition: 'color .3s ease' }} onMouseEnter={e => e.currentTarget.style.color = S.accent} onMouseLeave={e => e.currentTarget.style.color = S.inkSoft}>terapie.cz ↗</a>
          <span>© 2026 · Mgr. Gabriela Rohová</span>
        </div>
      </footer>
    </div>
  );
}

window.EditorialDirection = EditorialDirection;
window.EDITORIAL_TYPE = EDITORIAL_TYPE;