/* global React */
const EC = {
  bg: 'rgb(6,11,24)',
  bgDeep: 'rgb(21,19,49)',
  gold: '#E6C79C',
  lavender: 'rgb(186,171,212)',
  muted: 'rgb(78,70,114)',
  white: 'rgb(255,255,255)',
  violet: 'rgba(59,39,172,0.5)'
};

const EXP_LIST = [
{
  name: 'Konstancja Zahmala Lumia',
  role: 'Tarocistka, Przewodniczka w Pracy z Intuicją',
  photo: 'assets/expert-konsta.png',
  objectPos: 'center 15%',
  bio: 'Urodzona pod mistrzowską energią, od zawsze czułam i widziałam więcej niż inni. Pracuję z tarotem jako narzędziem rozmowy — nie z przyszłością, ale z tym, co już w Tobie jest. Z tym, co czujesz, ale czego jeszcze nie nazwałeś.',
  specTitle: 'Tarot — rozmowa z intuicją',
  specBody: 'Tarot to nie jest przewidywanie przyszłości. To spotkanie z tym, co już w Tobie jest — tylko jeszcze nienazwane. Karty działają jak lustro. Pokazują to, co czujesz, ale czego czasem nie potrafisz uchwycić albo dopuścić do głosu. To przestrzeń, w której możesz zatrzymać się na chwilę i spojrzeć na swoją sytuację z innej perspektywy. Bez ocen. Bez presji. Z uważnością.',
  services: [
  { tag: 'TAROT', title: 'Dywinacja Tarota', subtitle: 'Zobacz wyraźniej to, co się dzieje', body: 'To forma wglądu, która pomaga lepiej zrozumieć aktualny moment, powtarzające się napięcia i możliwe kierunki rozwoju sytuacji.', icon: '⚀' },
  { tag: 'TAROT', title: 'Stawianie Tarota', subtitle: 'Przyjrzyj się temu, co domaga się uwagi', body: 'Tarot pozwala skupić się na konkretnym pytaniu lub obszarze życia i zobaczyć go w bardziej uporządkowany sposób.', icon: '⚁' }],

  flipped: false
},
{
  name: 'Karolina Mardoll Kułakowska',
  role: 'Numerolog, Runista',
  photo: 'assets/expert.png',
  objectPos: 'center 20%',
  bio: 'W swojej pracy łączy wiedzę z zakresu duchowości oraz tradycji nordyckich, tworząc unikalne podejście oparte na intuicji, wrażliwości i głębokim rozumieniu ludzkiej natury. Pomaga spojrzeć na życie z innej perspektywy.',
  specTitle: 'Numerologia i Runy — język zrozumienia',
  specBody: 'Numerologia odczytuje zależności zapisane w liczbach, runy dodają głębszy, symboliczny wymiar. Razem tworzą narzędzie, które pomaga lepiej zrozumieć Twoją drogę, moment życia i kierunki, które wspierają rozwój.',
  services: [
  { tag: 'NUMEROLOGIA', title: 'Portret Numerologiczny', subtitle: 'Twoja historia zapisana w liczbach', body: 'Pogłębiona analiza oparta na dacie urodzenia oraz wszystkich imionach i nazwiskach. Poznasz kluczowe liczby związane z drogą życia.', icon: '☽' },
  { tag: 'RUNY', title: 'Czytanie Run', subtitle: 'Głos nordyckiej tradycji', body: 'Sesja z runami jako narzędziem głębokiej refleksji — pytania o drogę, decyzje, moment w życiu.', icon: 'ᚠ' }],

  flipped: true
},
{
  name: 'Damian Orion',
  role: 'Astrolog, Astrokartograf',
  photo: 'assets/expert.png',
  objectPos: 'center 25%',
  bio: 'Damian od lat pracuje jako astrolog — jako narzędzie zrozumienia człowieka i jego drogi. W swojej pracy skupia się na konkretach — tłumaczy złożone układy w prosty sposób i pokazuje jak przełożyć je na realne decyzje i codzienne życie.',
  specTitle: 'Astrologia — cykl i kierunek',
  specBody: 'Praca z kosmogramem to czytanie mapy Twojego potencjału. To spojrzenie na wrodzone predyspozycje i aktualne cykle, które kształtują Twoje doświadczenia. Pomaga świadomie planować kolejne etapy i decyzje.',
  services: [
  { tag: 'ASTROLOGIA', title: 'Horoskop Natalny', subtitle: 'Mapa Twojego potencjału', body: 'Czytanie kosmogramu — Słońce, Księżyc, planety i domy. Zrozumienie wrodzonych predyspozycji i napięć.', icon: '♄' },
  { tag: 'ASTROLOGIA', title: 'Astrokartografia', subtitle: 'Miejsca mocy', body: 'Poznaj miejsca na mapie, które wspierają konkretne obszary Twojego życia — karierę, miłość, wzrost.', icon: '♅' }],

  flipped: false
}];


// ─ HERO ─
function ExpertsHero() {
  return (
    <section style={{
      position: 'relative', height: 559, paddingTop: 84,
      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
      overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: `url(assets/hero-bg.png)`,
        backgroundSize: 'cover', backgroundPosition: 'center'
      }} />
      <div style={{ position: 'absolute', inset: 0, background: EC.violet }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(${EC.bg} 0%, rgba(6,11,24,0.5) 26%, rgba(6,11,24,0) 75%), linear-gradient(rgba(6,11,24,0) 0%, rgba(6,11,24,0.5) 71%, ${EC.bg} 100%)`
      }} />
      <div style={{
        position: 'relative', zIndex: 2, maxWidth: 1100,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 28,
        padding: '0 40px 64px', textAlign: 'center'
      }}>
        <span style={{
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
          letterSpacing: '0.3em', color: EC.gold
        }}>NASI EKSPERCI</span>
        <h1 style={{
          margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 64,
          lineHeight: 1.15, letterSpacing: '-0.022em', color: EC.white
        }}>Ludzie, którzy prowadzą<br />Cię przez proces</h1>
        <p style={{
          margin: 0, maxWidth: 820,
          fontFamily: 'Nunito', fontSize: 18, lineHeight: 1.6, color: EC.lavender
        }}>Każdy z naszych ekspertów wnosi własne doświadczenie i metodę pracy, ale łączy nas wspólny sposób myślenia: rzetelność, spokój i odpowiedzialność.</p>
      </div>
    </section>);

}

// ─ WSTĘP (single centered line) ─
function ExpertsIntro() {
  return (
    <section style={{
      position: 'relative', background: EC.bg,
      borderTop: `1px solid ${EC.muted}`, borderBottom: `1px solid ${EC.muted}`,
      padding: '80px 24px'
    }}>
      <div style={{ maxWidth: 1156, margin: '0 auto', textAlign: 'center' }}>
        <div style={{
          fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
          letterSpacing: '0.2em', color: EC.muted, marginBottom: 20
        }}>LUDZIE ZA LUNA PERSONA</div>
        <h2 style={{
          margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
          lineHeight: 1.3, letterSpacing: '-0.022em', color: EC.white,
          fontStyle: 'italic'
        }}>Pracujemy z tym, co <em style={{ color: EC.white }}>nienazwane</em> — z uważnością, spokojem i odpowiedzialnością.</h2>
      </div>
    </section>);

}

// ─ EXPERT BLOCK ─
function ExpertBlock({ exp }) {
  const photoNode =
  <div style={{
    width: '100%', height: 537, borderRadius: 16, overflow: 'hidden',
    background: EC.bgDeep, position: 'relative'
  }}>
      <img src={exp.photo} alt={exp.name}
    style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: exp.objectPos }} />
      <div style={{
      position: 'absolute', inset: 0,
      background: 'linear-gradient(180deg, rgba(6,11,24,0) 60%, rgba(6,11,24,0.4) 100%)'
    }} />
    </div>;


  const textNode =
  <div style={{ display: 'flex', flexDirection: 'column', gap: 20, justifyContent: 'center' }}>
      <h2 style={{
      margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 40,
      lineHeight: 1.2, letterSpacing: '-0.022em', color: EC.white
    }}>{exp.name}</h2>
      <div style={{
      fontFamily: 'Playfair Display', fontSize: 22,
      letterSpacing: '-0.022em', color: EC.gold
    }}>{exp.role}</div>
      <p style={{
      margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6, color: EC.lavender
    }}>{exp.bio}</p>
      <div style={{ marginTop: 8, display: 'flex', flexDirection: 'column', gap: 8 }}>
        <h3 style={{
        margin: 0, fontFamily: 'Nunito', fontSize: 20, color: EC.white, fontWeight: "400"
      }}>{exp.specTitle}</h3>
        <p style={{
        margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.6, color: EC.lavender
      }}>{exp.specBody}</p>
      </div>
      <div style={{ display: 'flex', gap: 16, marginTop: 12 }}>
        <BtnSecond small>Więcej o specjalizacji</BtnSecond>
        <BtnSecond small>Napisz wiadomość</BtnSecond>
      </div>
    </div>;


  return (
    <section style={{ background: EC.bg, padding: '80px 24px 40px' }}>
      <div style={{
        maxWidth: 1312, margin: '0 auto', padding: '0 40px',
        display: 'grid', gridTemplateColumns: exp.flipped ? '1fr 478px' : '478px 1fr',
        gap: 64, alignItems: 'center'
      }}>
        {exp.flipped ? textNode : photoNode}
        {exp.flipped ? photoNode : textNode}
      </div>

      {/* Co przygotuję */}
      <div style={{
        maxWidth: 1312, margin: '48px auto 0', padding: '40px'
      }}>
        <h3 style={{
          margin: '0 0 48px', fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 32,
          letterSpacing: '-0.022em', color: EC.white
        }}>Co dla Ciebie przygotuję?</h3>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {exp.services.map((s, i) =>
          <div key={i} style={{
            borderRadius: 16, background: EC.bgDeep,
            padding: 32, display: 'flex', flexDirection: 'column', gap: 16,
            transition: 'transform .3s',
            transform: 'none'
          }}>
              <div style={{
              width: 52, height: 52, borderRadius: '50%',
              border: `1.5px solid ${EC.gold}`, color: EC.gold,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 24, fontFamily: 'Playfair Display'
            }}>{s.icon}</div>
              <div style={{
              fontFamily: 'Nunito', fontWeight: 700, fontSize: 12,
              letterSpacing: '0.2em', color: EC.muted
            }}>{s.tag}</div>
              <h4 style={{
              margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 28,
              color: EC.white
            }}>{s.title}</h4>
              <div style={{
              fontFamily: 'Nunito', fontSize: 16,
              color: EC.gold, lineHeight: 1.4, fontWeight: "500"
            }}>{s.subtitle}</div>
              <p style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.6, color: EC.lavender
            }}>{s.body}</p>
              <div style={{ marginTop: 8 }}>
                <BtnMainSmall>Poznaj szczegóły</BtnMainSmall>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

function Experts() {
  // Single-expert view — this page now represents one expert's dedicated subpage.
  // Each expert will have their own URL; for the static prototype we render the first.
  const e = EXP_LIST[0];
  return (
    <ExpertBlock exp={e} />
  );
}

// ─ DLACZEGO WARTO (2-col) ─
function ExpDlaczegoWarto() {
  const points = [
  { title: 'Uważność zamiast schematów', body: 'Nie zakładamy jednej drogi dla wszystkich. Każda konsultacja i każda analiza opiera się na indywidualnym kontekście.' },
  { title: 'Różne specjalizacje, jeden standard jakości', body: 'Każdy ekspert wnosi własne doświadczenie i metodę pracy, ale łączy nas wspólny sposób myślenia: rzetelność, spokój i odpowiedzialność.' },
  { title: 'Zrozumienie, które porządkuje', body: 'Pomagamy zobaczyć więcej tam, gdzie pojawia się chaos, niepewność lub powtarzalność doświadczeń.' },
  { title: 'Przestrzeń do świadomych decyzji', body: 'Naszym celem nie jest dawanie gotowych recept, ale wspieranie Cię w lepszym rozumieniu siebie i swojej sytuacji.' }];

  return (
    <section style={{
      position: 'relative', background: EC.bg,
      borderTop: `1px solid ${EC.muted}`, borderBottom: `1px solid ${EC.muted}`,
      padding: '80px 24px', overflow: 'hidden'
    }}>
      <div style={{
        position: 'absolute', width: 1400, height: 300,
        top: '40%', left: '-10%',
        background: 'radial-gradient(ellipse, rgb(21,20,53) 0%, rgba(21,20,53,0.5) 39%, rgba(21,20,53,0) 100%)',
        transform: 'rotate(-20deg)', pointerEvents: 'none'
      }} />
      <div style={{
        position: 'relative', maxWidth: 1312, margin: '0 auto', padding: '0 40px',
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64
      }}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, justifyContent: 'flex-start' }}>
          <div style={{
            fontFamily: 'Nunito', fontWeight: 700, fontSize: 14,
            letterSpacing: '0.2em', color: EC.muted
          }}>DLACZEGO WARTO</div>
          <h2 style={{
            margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 48,
            lineHeight: 1.15, letterSpacing: '-0.022em', color: EC.white
          }}>To co ważne, wymaga <em style={{ color: EC.gold }}>uważnego</em> podejścia</h2>
          <p style={{
            margin: 0, fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6, color: EC.lavender
          }}>W pracy z człowiekiem nie ma miejsca na przypadkowość ani uproszczenia. Dlatego łączymy doświadczenie ekspertów, spokojny proces i podejście, które pomaga lepiej zrozumieć swoją sytuację.</p>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          {points.map((p, i) =>
          <div key={i} style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <h3 style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 22, color: EC.white, fontWeight: "400"
            }}>{p.title}</h3>
              <p style={{
              margin: 0, fontFamily: 'Nunito', fontSize: 15, lineHeight: 1.6, color: EC.lavender
            }}>{p.body}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ─ CTA ─
function ExpertsCTA() {
  return (
    <section style={{
      position: 'relative', background: EC.bg,
      padding: '0 24px 80px', overflow: 'hidden', textAlign: 'center',
      minHeight: 720, display: 'flex', alignItems: 'flex-end', justifyContent: 'center'
    }}>
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/cta_pyl.jpg)',
        backgroundSize: 'contain',
        backgroundPosition: 'center top',
        backgroundRepeat: 'no-repeat',
        pointerEvents: 'none'
      }} />
      <div aria-hidden style={{
        position: 'absolute', inset: 0,
        background: `linear-gradient(180deg, rgba(6,11,24,0) 0%, rgba(6,11,24,0) 55%, ${EC.bg} 100%)`,
        pointerEvents: 'none'
      }} />
      <div style={{
        position: 'relative', maxWidth: 1156, margin: '0 auto',
        display: 'flex', flexDirection: 'column', gap: 20, alignItems: 'center'
      }}>
        <h2 style={{
          margin: 0, fontFamily: 'Playfair Display', fontWeight: 400, fontSize: 48,
          lineHeight: 1.2, letterSpacing: '-0.022em', color: EC.white
        }}>Nie wiesz, od czego zacząć?</h2>
        <p style={{
          margin: '0 0 16px', maxWidth: 720,
          fontFamily: 'Nunito', fontSize: 16, lineHeight: 1.6, color: EC.lavender
        }}>Zobacz wszystkie usługi albo skontaktuj się z nami, a pomożemy dobrać najlepszy punkt wyjścia.</p>
        <div style={{ display: 'flex', gap: 36 }}>
          <BtnSecond>Wybierz eksperta</BtnSecond>
          <BtnSecond>Znajdź usługę</BtnSecond>
        </div>
      </div>
    </section>);

}

Object.assign(window, {
  ExpertsHero, ExpertsIntro, Experts, ExpDlaczegoWarto, ExpertsCTA
});