// BeHueman — Landing Page (pre-login)
const LandingScreens = {};

LandingScreens.Landing = function Landing({ onLogin, onRegister }) {
  const [playHover, setPlayHover] = useState(false);

  const features = [
    {
      icon: 'Education',
      name: 'Wisdom',
      hue: 'sage',
      desc: 'Skarbiec wiedzy: polecajki książek, podcasty, kursy i artykuły — wybierane przez ludzi, nie algorytm.',
    },
    {
      icon: 'Community',
      name: 'Community',
      hue: 'sky',
      desc: 'Feed bez gwiazdek i rankingów. Rozmowy, wątki tematyczne, głosy o każdym odcieniu.',
    },
    {
      icon: 'Users',
      name: 'Circles',
      hue: 'violet',
      desc: 'Płatne grupy subskrypcyjne twórców. Bezpośredni kontakt, premium treści, bez pośredników.',
    },
    {
      icon: 'Fun',
      name: 'Joy',
      hue: 'amber',
      desc: 'Shared Moments, muzyka, travel, małe radości. Bo life is not only self-work.',
    },
    {
      icon: 'Calendar',
      name: 'Practices',
      hue: 'rose',
      desc: 'Warsztaty, retreaty, kursy stacjonarne i online. Rezerwacja bez opuszczania platformy.',
    },
    {
      icon: 'Link',
      name: 'Drop-a-Find',
      hue: 'amber',
      desc: 'Polecaj zasoby z całego internetu jednym kliknięciem. Twoja biblioteka, Twoja wiedza.',
    },
  ];

  const plans = [
    {
      name: 'Member',
      tagline: 'Zacznij odkrywać',
      price: 0,
      period: 'zawsze',
      featured: false,
      features: [
        'Dostęp do Community i Joy',
        'Przeglądanie Wisdom i Practices',
        'Prywatna Biblioteka treści',
        'Drop-a-Find (korzystanie)',
        'Subskrypcja Circles twórców',
      ],
      cta: 'Zarejestruj się za darmo',
    },
    {
      name: 'Autor Free',
      tagline: 'Twórz i zarabiaj',
      price: 0,
      period: 'zawsze',
      featured: true,
      features: [
        'Wszystko z Member',
        'Publikowanie w Wisdom, Joy, Practices',
        'Drop-a-Find jako twórca',
        'Udział w podziale zysku (algorytm)',
        'Własna sekcja w Goods Market',
        'Sekcja Create — zarządzaj treściami',
      ],
      cta: 'Zostań Autorem',
      note: '[TODO: decyzja klienta] Czy Autor Free ma pełny dostęp do wszystkich sekcji od razu?',
    },
    {
      name: 'Partner',
      tagline: 'Dla firm i studii',
      price: null,
      period: 'wycena indywidualna',
      featured: false,
      features: [
        'Wszystko z Autor Pro',
        'Konto firmowe + marka własna',
        'Przełączanie kontekstu (Ja / Firma)',
        'Zaawansowane statystyki',
        'Dedykowany onboarding',
        'Priorytetowe wsparcie',
      ],
      cta: 'Skontaktuj się',
      isBusiness: true,
    },
  ];

  return (
    <div className="landing">
      {/* Top nav */}
      <nav className="landing-nav">
        <div className="logo-mark" style={{fontSize:24, padding:0, marginRight:'auto'}}>
          be<span className="hue">hue</span>man
        </div>
        <div className="logo-sub" style={{padding:0, margin:0, marginRight:16}}>odcień, którym jesteś</div>
        <button className="btn btn-ghost" onClick={onLogin}>Zaloguj się</button>
        <button className="btn btn-primary" onClick={onRegister}>Zarejestruj się</button>
      </nav>

      {/* Hero */}
      <div className="landing-hero">
        <div className="landing-hero-text">
          <div style={{display:'flex', alignItems:'center', gap:10, marginBottom:20}}>
            <div className="spectrum" style={{width:48, height:4}}/>
            <span style={{fontSize:12, fontWeight:700, letterSpacing:'.1em', textTransform:'uppercase', color:'var(--ink-3)'}}>
              Przestrzeń dla rozwijających się
            </span>
          </div>
          <h1>
            Odcień,<br/>
            którym<br/>
            <em style={{fontStyle:'italic', background:'linear-gradient(90deg, var(--hue-rose), var(--hue-amber) 30%, var(--hue-sage) 60%, var(--hue-sky) 85%, var(--hue-violet))', WebkitBackgroundClip:'text', WebkitTextFillColor:'transparent', backgroundClip:'text'}}>jesteś.</em>
          </h1>
          <p>
            Platforma dla ludzi poszukujących — nie chodzi tu o uwagę.
            Zero gwiazdek, zero algorytmów kradnących czas.
            Wiedza, społeczność i twórcy, którzy naprawdę są sobą.
          </p>
          <div style={{display:'flex', gap:12, flexWrap:'wrap'}}>
            <button className="btn btn-primary" style={{padding:'12px 24px', fontSize:15}} onClick={onRegister}>
              Dołącz — to nic nie kosztuje
            </button>
            <button className="btn btn-ghost" style={{padding:'12px 20px', fontSize:15}} onClick={onLogin}>
              Mam już konto
            </button>
          </div>
          <div style={{display:'flex', gap:20, marginTop:24, fontSize:13, color:'var(--ink-3)'}}>
            {['Bez reklam', 'Bez algorytmu uwagi', 'Open Pricing'].map(t => (
              <span key={t} className="row gap-6">
                <I name="Check" size={13}/> {t}
              </span>
            ))}
          </div>
        </div>

        {/* Video placeholder */}
        <div
          className="landing-video-placeholder"
          onMouseEnter={() => setPlayHover(true)}
          onMouseLeave={() => setPlayHover(false)}
          onClick={() => window.__app && window.__app.pushToast('ok','Video intro','Wideo twórców platformy — niedługo!')}
        >
          <div className="landing-video-play" style={{transform: playHover ? 'scale(1.08)' : 'scale(1)', transition:'transform 200ms ease'}}>
            ▶
          </div>
          <div className="landing-video-label">Video intro twórców platformy</div>
          <div style={{position:'absolute', top:14, left:14, background:'rgba(255,255,255,0.15)', backdropFilter:'blur(6px)', borderRadius:'var(--r-pill)', padding:'4px 10px', fontSize:11, fontWeight:700, color:'white', letterSpacing:'.06em', zIndex:2}}>
            WKRÓTCE
          </div>
        </div>
      </div>

      {/* Features grid */}
      <div style={{background:'var(--bg-elev)', borderTop:'1px solid var(--line)', borderBottom:'1px solid var(--line)'}}>
        <div className="landing-section">
          <div className="section-eyebrow mb-8">Co tu znajdziesz</div>
          <div className="landing-section-title">Jedna platforma.<br/>Wiele odcieni.</div>
          <div className="landing-section-sub">
            Wisdom, Community, Joy, Practices, Circles i Drop-a-Find — każda sekcja to osobny paradygmat odkrywania.
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap:16}}>
            {features.map(f => (
              <div key={f.name} className="card" style={{padding:22, border:'1px solid var(--line)'}}>
                <div style={{display:'flex', alignItems:'center', gap:12, marginBottom:12}}>
                  <div style={{
                    width:40, height:40,
                    borderRadius:10,
                    background:`color-mix(in oklab, var(--hue-${f.hue}) 30%, var(--bg-elev))`,
                    display:'grid', placeItems:'center',
                    color:`color-mix(in oklab, var(--hue-${f.hue}) 80%, var(--ink-1))`,
                  }}>
                    <I name={f.icon} size={20} sw={1.6}/>
                  </div>
                  <div style={{fontFamily:'var(--font-serif)', fontSize:20, fontWeight:500}}>{f.name}</div>
                </div>
                <div style={{fontSize:13.5, lineHeight:1.6, color:'var(--ink-2)'}}>{f.desc}</div>
              </div>
            ))}
          </div>
        </div>
      </div>

      {/* Values */}
      <div className="landing-section" style={{textAlign:'center'}}>
        <div className="section-eyebrow mb-8">Nasze wartości</div>
        <div className="landing-section-title" style={{margin:'0 auto 8px'}}>Human by design.</div>
        <div className="landing-section-sub" style={{margin:'0 auto 40px', textAlign:'center'}}>
          Nie budujemy platformy uwagi. Budujemy przestrzeń dla myśli, które zasługują na ciszę.
        </div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:16, textAlign:'left'}}>
          {[
            { icon: 'Check', hue:'sage', title:'Brak oceniania gwiazdkami', desc:'Każda perspektywna ma wartość. Liczby to nie wszystko.' },
            { icon: 'Shield', hue:'sky', title:'Prywatność w centrum', desc:'Nie sprzedajemy danych. Nie profilujemy dla reklamodawców.' },
            { icon: 'Sparkle', hue:'amber', title:'Twórcy zarabiają', desc:'Bezpośredni udział w podziale zysku platformy. Bez pośredników.' },
            { icon: 'Users', hue:'violet', title:'Wspólnota, nie tłum', desc:'Zasady bez hejtu, rozmowy bez gwiazdek. Bo to działa.' },
          ].map(v => (
            <div key={v.title} style={{padding:20, background:'var(--bg-elev)', border:'1px solid var(--line)', borderRadius:'var(--r-2)'}}>
              <div style={{width:36, height:36, borderRadius:8, background:`color-mix(in oklab, var(--hue-${v.hue}) 22%, var(--bg-elev))`, display:'grid', placeItems:'center', marginBottom:12, color:`color-mix(in oklab, var(--hue-${v.hue}) 70%, var(--ink-1))`}}>
                <I name={v.icon} size={18}/>
              </div>
              <div style={{fontWeight:600, fontSize:14, marginBottom:6}}>{v.title}</div>
              <div style={{fontSize:13, color:'var(--ink-3)', lineHeight:1.5}}>{v.desc}</div>
            </div>
          ))}
        </div>
      </div>

      {/* Plans */}
      <div style={{background:'var(--bg-soft)', borderTop:'1px solid var(--line)'}}>
        <div className="landing-section" style={{paddingBottom:16}}>
          <div className="section-eyebrow mb-8">Plany subskrypcji</div>
          <div className="landing-section-title">Zacznij za darmo.</div>
          <div className="landing-section-sub">
            Member i Autor Free są zawsze bezpłatne. Partner — wycena indywidualna dla firm.
          </div>
          <div className="landing-plans" style={{padding:0, margin:0}}>
            {plans.map(p => (
              <div key={p.name} className={`plan-card ${p.featured ? 'featured' : ''}`}>
                <div>
                  <div className="plan-name">{p.name}</div>
                  <div style={{fontSize:14, marginTop:3, opacity:0.7}}>{p.tagline}</div>
                </div>
                <div className="plan-price">
                  {p.price === null ? (
                    <span style={{fontSize:22, fontFamily:'var(--font-sans)', fontWeight:600}}>Wycena<br/>indywidualna</span>
                  ) : p.price === 0 ? (
                    <><sup>zł</sup>0 <span className="per">/ {p.period}</span></>
                  ) : (
                    <><sup>zł</sup>{p.price} <span className="per">/ mies.</span></>
                  )}
                </div>
                <ul className="plan-features">
                  {p.features.map((f, i) => (
                    <li key={i}>
                      <span className="plan-check">
                        <I name="Check" size={9} sw={3} style={{color: p.featured ? 'var(--ink-1)' : 'white'}}/>
                      </span>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
                {p.note && (
                  <div className="todo-note" style={{marginTop:4}}>📌 {p.note}</div>
                )}
                <button
                  className={`btn ${p.featured ? 'btn-accent' : p.isBusiness ? 'btn-ghost' : 'btn-primary'}`}
                  style={{width:'100%', justifyContent:'center', padding:'11px'}}
                  onClick={p.isBusiness ? undefined : onRegister}
                >
                  {p.cta}
                </button>
              </div>
            ))}
          </div>
          {/* TODO note #4 */}
          <div className="todo-note" style={{marginTop:16}}>
            📌 [TODO #4: decyzja klienta] Widoczność opcji Partner na landing page — czy pokazywać równorzędnie czy jako "Dla firm" niżej na stronie?
          </div>
        </div>

        {/* Footer CTA */}
        <div style={{textAlign:'center', padding:'48px 48px 64px', borderTop:'1px solid var(--line)'}}>
          <div className="spectrum" style={{width:120, margin:'0 auto 24px'}}/>
          <div style={{fontFamily:'var(--font-serif)', fontSize:36, fontWeight:400, letterSpacing:'-0.02em', marginBottom:12}}>
            Twój odcień czeka.
          </div>
          <div style={{color:'var(--ink-3)', marginBottom:28, fontSize:15}}>Dołącz — za darmo, bez zobowiązań.</div>
          <button className="btn btn-primary" style={{padding:'13px 32px', fontSize:15}} onClick={onRegister}>
            Zarejestruj się
          </button>
        </div>
      </div>
    </div>
  );
};

window.LandingScreens = LandingScreens;