// landing.jsx — marketing landing page

function LandingScreen({ user, onEnterApp, onAuthRequired }) {
  const [heroInput, setHeroInput] = React.useState('');
  const [scrolled, setScrolled] = React.useState(false);

  React.useEffect(() => {
    const el = document.getElementById('landing-scroll');
    if (!el) return;
    const fn = () => setScrolled(el.scrollTop > 40);
    el.addEventListener('scroll', fn);
    return () => el.removeEventListener('scroll', fn);
  }, []);

  const handleGenerate = () => {
    if (user) { onEnterApp(); } else { onAuthRequired(); }
  };

  const scrollTo = (id) => {
    document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' });
  };

  const gold = '#c9a96e';
  const sage = '#A8C29A';
  const ink = '#F0EFEA';
  const ink2 = '#888888';
  const ink3 = '#444444';
  const surface = 'rgba(255,255,255,0.04)';
  const border = 'rgba(255,255,255,0.07)';

  const LANDING_PLANS = [
    {
      id: 'free', name: 'Basic', price: 'Free',
      desc: 'For explorers just starting out.',
      features: [
        'Unlimited MiniStore creation & sharing',
        'Unlimited TikTok carousels',
        '30 Visual searches',
        '20 Product catalogs',
        '5 saved boards',
        'Basic feed exploration',
      ],
      btnLabel: 'Get Started',
    },
    {
      id: 'standard', name: 'Pro', price: '$19.99', sub: '/mo', popular: true,
      desc: 'For creators and affiliates growing their brand.',
      features: [
        'Unlimited MiniStore creation & sharing',
        'Unlimited TikTok carousels',
        '50 Visual searches',
        '50 Product catalogs',
        '10 Virtual try-ons',
        '5 Animations',
        '3 Reel videos',
        'Unlimited saved boards',
        'Personalized feed',
      ],
      btnLabel: 'Upgrade to Pro',
    },
    {
      id: 'premium', name: 'Premium', price: '$29.99', sub: '/mo',
      desc: 'For professional agencies and power users.',
      features: [
        'Unlimited MiniStore creation & sharing',
        'Unlimited TikTok carousels',
        '100 Visual searches',
        '100 Product catalogs',
        '10 Virtual try-ons',
        '5 Animations',
        '3 Reel videos',
        '2 Telegram bots',
        'Pinterest & Facebook posts',
        'Automatic blog posts',
        'Publication campaigns',
        'Marketing AI + Psychology .99',
      ],
      btnLabel: 'Go Premium',
    },
  ];

  return (
    <div id="landing-scroll" style={{
      background: '#0A0A0A', color: ink, fontFamily: 'Georgia, serif',
      height: '100dvh', overflowY: 'auto', overflowX: 'hidden',
    }}>
      <style>{`
        .l-nav-link:hover { color: #c9a96e !important; }
        .l-btn-outline:hover { background: rgba(201,169,110,0.1) !important; }
        .l-generate-btn:hover { opacity: 0.88; }
        .l-plan-btn:hover { opacity: 0.82; }
        .l-begin-btn:hover { opacity: 0.88; }
        .l-feature-card:hover { border-color: rgba(201,169,110,0.22) !important; background: rgba(255,255,255,0.06) !important; }
        @keyframes l-fade-up { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
        .l-hero-content { animation: l-fade-up 0.75s ease forwards; }
        @keyframes l-pulse { 0%,100% { opacity:0.35; } 50% { opacity:1; } }
        .l-scroll-line { animation: l-pulse 2.2s ease-in-out infinite; }
      `}</style>

      {/* ── NAVBAR ── */}
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '16px 40px',
        background: scrolled ? 'rgba(10,10,10,0.95)' : 'transparent',
        backdropFilter: scrolled ? 'blur(12px)' : 'none',
        transition: 'background 0.3s',
        borderBottom: scrolled ? '1px solid rgba(255,255,255,0.06)' : 'none',
      }}>
        <div
          onClick={() => document.getElementById('landing-scroll')?.scrollTo({ top: 0, behavior: 'smooth' })}
          style={{ fontSize: 20, fontWeight: 700, letterSpacing: 0.5, cursor: 'pointer' }}>
          <em style={{ color: gold, fontStyle: 'italic' }}>D</em>eanna
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>
          <button className="l-nav-link" onClick={() => scrollTo('landing-pricing')} style={{
            background: 'none', border: 'none', cursor: 'pointer',
            fontFamily: 'sans-serif', fontSize: 13, letterSpacing: 1.5,
            textTransform: 'uppercase', color: ink2, transition: 'color 0.2s',
          }}>Pricing</button>
          {user ? (
            <button className="l-btn-outline" onClick={onEnterApp} style={{
              background: 'transparent', border: '1px solid rgba(201,169,110,0.5)',
              color: gold, padding: '8px 20px', borderRadius: 50,
              fontFamily: 'sans-serif', fontSize: 12, letterSpacing: 1.5,
              textTransform: 'uppercase', cursor: 'pointer', transition: 'background 0.2s',
            }}>Enter App</button>
          ) : (
            <button className="l-btn-outline" onClick={onAuthRequired} style={{
              background: 'transparent', border: '1px solid rgba(201,169,110,0.5)',
              color: gold, padding: '8px 20px', borderRadius: 50,
              fontFamily: 'sans-serif', fontSize: 12, letterSpacing: 1.5,
              textTransform: 'uppercase', cursor: 'pointer', transition: 'background 0.2s',
            }}>Sign In</button>
          )}
        </div>
      </nav>

      {/* ── HERO ── */}
      <section style={{
        minHeight: '100dvh',
        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
        padding: '100px 24px 80px', position: 'relative', overflow: 'hidden',
        background: 'radial-gradient(ellipse at 50% 60%, rgba(26,36,23,0.55) 0%, #0A0A0A 70%)',
      }}>
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          backgroundImage: 'radial-gradient(circle, rgba(255,255,255,0.028) 1px, transparent 1px)',
          backgroundSize: '32px 32px',
        }} />
        <div className="l-hero-content" style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          width: '100%', maxWidth: 800, position: 'relative',
        }}>
          <div style={{
            fontFamily: 'sans-serif', fontSize: 11, letterSpacing: 4,
            textTransform: 'uppercase', color: gold, marginBottom: 20, opacity: 0.85,
          }}>Your personal curator</div>
          <h1 style={{
            fontSize: 'clamp(30px, 6vw, 66px)', fontWeight: 600,
            textAlign: 'center', lineHeight: 1.15, margin: '0 0 40px',
          }}>
            What would you like to<br />
            <em style={{ color: gold, fontStyle: 'italic' }}>discover</em> today?
          </h1>
          <div style={{
            width: '100%', maxWidth: 660,
            background: 'rgba(255,255,255,0.06)',
            border: '1px solid rgba(255,255,255,0.10)',
            borderRadius: 60, display: 'flex', alignItems: 'center',
            padding: '6px 6px 6px 22px', backdropFilter: 'blur(12px)',
            marginBottom: 20,
            boxShadow: '0 8px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05)',
          }}>
            <input
              value={heroInput}
              onChange={e => setHeroInput(e.target.value)}
              onKeyDown={e => e.key === 'Enter' && handleGenerate()}
              placeholder="Describe an idea, a mood, a style…"
              style={{
                flex: 1, background: 'transparent', border: 'none', outline: 'none',
                color: ink, fontFamily: 'sans-serif', fontSize: 15,
              }}
            />
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '0 10px', color: ink3, fontSize: 18 }}>
              <span style={{ cursor: 'pointer' }} title="Upload image">🖼</span>
              <span style={{ cursor: 'pointer' }} title="Voice input">🎤</span>
            </div>
            <button className="l-generate-btn" onClick={handleGenerate} style={{
              background: `linear-gradient(135deg, ${gold}, ${sage})`,
              color: '#0A0A0A', border: 'none', borderRadius: 50,
              padding: '12px 22px', fontFamily: 'sans-serif', fontSize: 12,
              fontWeight: 700, letterSpacing: 1.5, textTransform: 'uppercase',
              cursor: 'pointer', transition: 'opacity 0.2s', whiteSpace: 'nowrap',
            }}>✦ Generate</button>
          </div>
          <p style={{
            fontFamily: 'sans-serif', fontSize: 14, color: ink3,
            textAlign: 'center', maxWidth: 500, lineHeight: 1.7, margin: 0,
          }}>
            Describe an idea, upload a picture, or use your voice —{' '}
            and <span style={{ color: sage }}>Deanna</span> creates an intelligent MiniStore in seconds.
          </p>
        </div>
        <div style={{
          position: 'absolute', bottom: 28, left: '50%', transform: 'translateX(-50%)',
          display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
          color: ink3, fontFamily: 'sans-serif', fontSize: 10, letterSpacing: 2, textTransform: 'uppercase',
        }}>
          <div className="l-scroll-line" style={{ width: 1, height: 36, background: `linear-gradient(to bottom, transparent, ${gold})` }} />
          <span>Scroll</span>
        </div>
      </section>

      {/* ── HOW IT WORKS ── */}
      <section style={{ padding: '80px 24px', maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ fontFamily: 'sans-serif', fontSize: 11, letterSpacing: 4, textTransform: 'uppercase', color: gold, marginBottom: 14 }}>How it works</div>
        <h2 style={{ fontSize: 'clamp(22px, 3vw, 34px)', fontWeight: 600, margin: '0 0 48px' }}>Three steps to your world</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))', gap: 24 }}>
          {[
            { num: '01', title: 'Describe', body: "Type an idea, upload an image, or speak a vibe. Deanna understands what you're looking for." },
            { num: '02', title: 'Deanna curates', body: 'AI searches the web and handpicks the best products, building you a personalized MiniStore.' },
            { num: '03', title: 'Explore your world', body: 'Browse, save to mood boards, share on TikTok, and keep discovering — all in one place.' },
          ].map(s => (
            <div key={s.num} style={{ padding: 28, background: surface, border: `1px solid ${border}`, borderRadius: 16 }}>
              <div style={{ fontSize: 44, fontWeight: 700, color: 'rgba(201,169,110,0.12)', lineHeight: 1, marginBottom: 14 }}>{s.num}</div>
              <div style={{ width: 28, height: 2, background: `linear-gradient(90deg, ${gold}, ${sage})`, marginBottom: 14 }} />
              <h3 style={{ fontSize: 17, margin: '0 0 10px', color: ink }}>{s.title}</h3>
              <p style={{ fontFamily: 'sans-serif', fontSize: 14, color: ink2, lineHeight: 1.65, margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </section>

      {/* ── FEATURES ── */}
      <section style={{ background: 'rgba(255,255,255,0.02)', borderTop: `1px solid ${border}`, borderBottom: `1px solid ${border}` }}>
        <div style={{ padding: '80px 24px', maxWidth: 1100, margin: '0 auto' }}>
          <div style={{ fontFamily: 'sans-serif', fontSize: 11, letterSpacing: 4, textTransform: 'uppercase', color: gold, marginBottom: 14 }}>What's inside</div>
          <h2 style={{ fontSize: 'clamp(22px, 3vw, 34px)', fontWeight: 600, margin: '0 0 36px' }}>Everything you need to discover</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: 20 }}>
            {[
              { icon: '🔍', title: 'Visual Search', body: 'Upload any image and find products that match the vibe instantly.' },
              { icon: '🎴', title: 'MiniStores', body: 'AI-curated collections built around your idea in seconds.' },
              { icon: '📱', title: 'TikTok Carousels', body: 'Turn any MiniStore into a shareable TikTok carousel instantly.' },
              { icon: '🗂', title: 'Mood Boards', body: 'Save and organise your favourite finds into beautiful collections.' },
            ].map(f => (
              <div key={f.title} className="l-feature-card" style={{
                padding: 24, borderRadius: 12, background: surface,
                border: `1px solid ${border}`, textAlign: 'center',
                transition: 'border-color 0.2s, background 0.2s',
              }}>
                <div style={{ fontSize: 26, marginBottom: 12 }}>{f.icon}</div>
                <h4 style={{ fontSize: 15, margin: '0 0 8px', color: ink }}>{f.title}</h4>
                <p style={{ fontFamily: 'sans-serif', fontSize: 13, color: ink2, lineHeight: 1.55, margin: 0 }}>{f.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ── PRICING ── */}
      <section id="landing-pricing" style={{ padding: '80px 24px', maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ fontFamily: 'sans-serif', fontSize: 11, letterSpacing: 4, textTransform: 'uppercase', color: gold, marginBottom: 14 }}>Pricing</div>
        <h2 style={{ fontSize: 'clamp(22px, 3vw, 34px)', fontWeight: 600, margin: '0 0 48px' }}>Start free, grow with Deanna</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', gap: 20, alignItems: 'start' }}>
          {LANDING_PLANS.map(p => (
            <div key={p.id} style={{
              padding: 32, borderRadius: 16, position: 'relative',
              background: p.popular ? 'rgba(201,169,110,0.06)' : surface,
              border: p.popular ? '1px solid rgba(201,169,110,0.3)' : `1px solid ${border}`,
            }}>
              {p.popular && (
                <div style={{
                  position: 'absolute', top: -12, left: '50%', transform: 'translateX(-50%)',
                  background: `linear-gradient(135deg, ${gold}, ${sage})`,
                  color: '#0A0A0A', fontFamily: 'sans-serif', fontSize: 11, fontWeight: 700,
                  letterSpacing: 1.5, textTransform: 'uppercase',
                  padding: '4px 16px', borderRadius: 50, whiteSpace: 'nowrap',
                }}>Most Popular</div>
              )}
              <div style={{ fontFamily: 'sans-serif', fontSize: 12, letterSpacing: 2, textTransform: 'uppercase', color: ink2, marginBottom: 8 }}>{p.name}</div>
              <div style={{ marginBottom: 4 }}>
                <span style={{ fontSize: 38, fontWeight: 700 }}>{p.price}</span>
                {p.sub && <span style={{ fontFamily: 'sans-serif', fontSize: 15, color: ink2, marginLeft: 4 }}>{p.sub}</span>}
              </div>
              <div style={{ fontFamily: 'sans-serif', fontSize: 13, color: ink2, marginBottom: 24, lineHeight: 1.5 }}>{p.desc}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 28px' }}>
                {p.features.map(f => (
                  <li key={f} style={{
                    fontFamily: 'sans-serif', fontSize: 13, color: '#999',
                    padding: '7px 0', borderBottom: '1px solid rgba(255,255,255,0.04)',
                    display: 'flex', alignItems: 'flex-start', gap: 10, lineHeight: 1.4,
                  }}>
                    <span style={{ color: p.popular ? gold : sage, fontWeight: 700, flexShrink: 0, marginTop: 1 }}>✓</span>
                    {f}
                  </li>
                ))}
              </ul>
              <button className="l-plan-btn" style={{
                width: '100%', padding: '14px', borderRadius: 50,
                fontFamily: 'sans-serif', fontSize: 13, fontWeight: 600,
                letterSpacing: 1, textTransform: 'uppercase', cursor: 'pointer',
                transition: 'opacity 0.2s',
                background: p.popular ? `linear-gradient(135deg, ${gold}, ${sage})` : 'transparent',
                color: p.popular ? '#0A0A0A' : ink,
                border: p.popular ? 'none' : '1px solid rgba(255,255,255,0.15)',
              }}>{p.btnLabel}</button>
            </div>
          ))}
        </div>
      </section>

      {/* ── CURATOR CTA ── */}
      <section style={{
        padding: '100px 24px', textAlign: 'center',
        background: 'radial-gradient(ellipse at 50% 50%, rgba(201,169,110,0.08) 0%, transparent 65%)',
        borderTop: `1px solid ${border}`,
      }}>
        <div style={{ fontFamily: 'sans-serif', fontSize: 11, letterSpacing: 4, textTransform: 'uppercase', color: gold, marginBottom: 24, opacity: 0.85 }}>An invitation</div>
        <h2 style={{ fontSize: 'clamp(26px, 5vw, 56px)', fontWeight: 600, lineHeight: 1.2, maxWidth: 660, margin: '0 auto 20px' }}>
          This isn't a search engine.<br />
          <em style={{ color: gold }}>This is your personal curator.</em>
        </h2>
        <p style={{ fontFamily: 'sans-serif', fontSize: 15, color: ink2, marginBottom: 40 }}>Whisper an idea to Deanna. Watch a world appear.</p>
        <button className="l-begin-btn" onClick={() => window.open('https://deanna.pro', '_blank')} style={{
          background: `linear-gradient(135deg, ${gold}, #b8955a)`,
          color: '#0A0A0A', border: 'none', borderRadius: 50,
          padding: '16px 48px', fontFamily: 'sans-serif', fontSize: 13,
          fontWeight: 700, letterSpacing: 2, textTransform: 'uppercase',
          cursor: 'pointer', transition: 'opacity 0.2s',
          boxShadow: '0 8px 32px rgba(201,169,110,0.22)',
        }}>Begin with Deanna</button>
      </section>

      {/* ── FOOTER ── */}
      <footer style={{
        padding: '28px 40px', borderTop: '1px solid rgba(255,255,255,0.06)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 12,
      }}>
        <div style={{ fontSize: 17 }}><em style={{ color: gold, fontStyle: 'italic' }}>D</em>eanna</div>
        <div style={{ fontFamily: 'sans-serif', fontSize: 12, color: ink3 }}>© 2026 Deanna · deanna.chat</div>
      </footer>
    </div>
  );
}