// screen-landing.jsx — Landing page with hero + features + CTA

function LandingScreen({ go, tweaks }) {
  const showAI = tweaks?.showAISections !== false;
  return (
    <div style={{ minHeight: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* Top nav */}
      <header style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '20px clamp(20px, 5vw, 56px)'
      }}>
        <Logo size={22} />
        <nav style={{ display: 'flex', alignItems: 'center', gap: 24 }}>
          <a className="nav-link" href="#features">Funzionalità</a>
          <a className="nav-link" href="#coaches">Allenatori</a>
          <a className="nav-link" href="#how">Come funziona</a>
          <Button size="sm" variant="ghost" onClick={() => go('auth', { mode: 'signin' })}>
            Accedi
          </Button>
        </nav>
      </header>

      {/* Hero */}
      <section style={{
        padding: 'clamp(40px, 8vw, 96px) clamp(20px, 5vw, 56px) clamp(40px, 6vw, 72px)',
        display: 'grid',
        gridTemplateColumns: 'minmax(0, 1fr)',
        gap: 'clamp(40px, 6vw, 80px)',
        alignItems: 'center'
      }} className="hero-grid">
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 12px', borderRadius: 999,
            background: 'var(--accent-soft)',
            color: 'var(--accent-strong)',
            fontSize: 12, fontWeight: 600, letterSpacing: '0.02em',
            textTransform: 'uppercase',
            marginBottom: 24
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--accent-strong)' }} />
            Per giocatori amatoriali
          </div>
          <h1 style={{
            fontFamily: '"Instrument Serif", Georgia, serif',
            fontWeight: 400,
            fontSize: 'clamp(44px, 7vw, 84px)',
            lineHeight: 1.02,
            letterSpacing: '-0.025em',
            color: 'var(--ink)',
            margin: 0
          }}>
            Il tuo tennis<br />
            <em style={{ fontStyle: 'italic', color: 'var(--accent-strong)' }}>letto</em> <br />
            dall'intelligenza artificiale.
          </h1>
          <p style={{
            fontSize: 'clamp(16px, 2vw, 19px)',
            lineHeight: 1.55,
            color: 'var(--muted)',
            marginTop: 24,
            maxWidth: 540,
            letterSpacing: '-0.005em'
          }}>
            Crea il tuo profilo da tennista, racconta il tuo stile e la tua attrezzatura,
            e ricevi un'analisi dettagliata dei colpi, dei punti di forza e delle aree da migliorare.
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <Button size="lg" onClick={() => go('auth', { mode: 'signup' })}>
              Crea il tuo profilo
            </Button>
            <Button size="lg" variant="secondary" onClick={() => go('auth', { mode: 'signin' })}>
              Ho già un account
            </Button>
          </div>
          <div style={{
            display: 'flex', alignItems: 'center', gap: 12,
            marginTop: 24, color: 'var(--muted)', fontSize: 13
          }}>
            <div style={{ display: 'flex' }}>
              {[80, 30, 200].map((h, i) =>
              <div key={i} style={{
                width: 28, height: 28, borderRadius: '50%',
                background: `oklch(0.78 0.08 ${h})`,
                border: '2px solid var(--bg)',
                marginLeft: i === 0 ? 0 : -8
              }} />
              )}
            </div>
            <span><b style={{ color: 'var(--ink)' }}>2.400+</b> tennisti già iscritti</span>
          </div>
        </div>

        <LandingHeroVisual />
      </section>

      {/* Features */}
      <section id="features" style={{
        padding: 'clamp(40px, 6vw, 80px) clamp(20px, 5vw, 56px)',
        background: 'var(--surface-deep)',
        borderTop: '1px solid var(--border)'
      }}>
        <div style={{
          fontSize: 12, fontWeight: 600, letterSpacing: '0.08em',
          color: 'var(--muted)', textTransform: 'uppercase', marginBottom: 16
        }}>Come funziona</div>
        <h2 style={{
          fontFamily: '"Instrument Serif", Georgia, serif',
          fontSize: 'clamp(32px, 4vw, 52px)',
          fontWeight: 400, margin: 0,
          letterSpacing: '-0.02em', color: 'var(--ink)',
          maxWidth: 720
        }}>
          Un profilo che <em style={{ color: 'var(--accent-strong)' }}>racconta davvero</em> come
          giochi.
        </h2>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
          gap: 16,
          marginTop: 48
        }}>
          <FeatureCard
            num="01"
            title="Raccontaci chi sei"
            body="Altezza, peso, mano dominante. Le basi che ogni allenatore deve sapere." />
          <FeatureCard
            num="02"
            title="Descrivi il tuo stile"
            body="I tuoi punti di forza, di debolezza e come interpreti il gioco." />
          <FeatureCard
            num="03"
            title="Indica l'attrezzatura"
            body="Racchetta e scarpe — perché l'equipaggiamento plasma il tuo gioco." />
          <FeatureCard
            num="04"
            title="Scegli l'allenatore"
            body="Ti suggeriamo i coach più affini al tuo livello, stile e obiettivi." />
        </div>
      </section>

      {/* AI showcase — Prossimamente */}
      {window.AILandingSection && showAI && <AILandingSection />}

      {/* Final CTA */}
      <section style={{
        borderTop: '1px solid var(--border)'
      }}>
        <div style={{
          maxWidth: 1120, margin: '0 auto',
          padding: 'clamp(60px, 8vw, 112px) clamp(20px, 5vw, 56px)'
        }}>
          <div style={{
            overflow: 'hidden',
            borderRadius: 28,
            background: 'var(--ink)',
            color: 'var(--bg)',
            position: 'relative'
          }}>
            <div style={{
              position: 'relative',
              padding: 'clamp(40px, 6vw, 80px) clamp(24px, 5vw, 56px)'
            }}>
              {/* Subtle grain / decoration */}
              <div aria-hidden="true" style={{
                position: 'absolute', inset: 0,
                background:
                'radial-gradient(circle at 80% 0%, var(--accent) 0%, transparent 50%),' +
                'radial-gradient(circle at 0% 100%, var(--accent) 0%, transparent 45%)',
                opacity: 0.18,
                pointerEvents: 'none'
              }} />
              {/* Faint court lines */}
              <svg aria-hidden="true" viewBox="0 0 1000 600" preserveAspectRatio="none"
              style={{
                position: 'absolute', inset: 0, width: '100%', height: '100%',
                opacity: 0.05, pointerEvents: 'none'
              }}>
                <g stroke="var(--bg)" strokeWidth="1" fill="none">
                  <rect x="100" y="80" width="800" height="440" />
                  <line x1="100" y1="300" x2="900" y2="300" />
                  <line x1="500" y1="80" x2="500" y2="520" />
                </g>
              </svg>

              <div style={{ position: 'relative', maxWidth: 640 }}>
                <h2 style={{
                  margin: 0,
                  fontFamily: '"Instrument Serif", Georgia, serif',
                  fontSize: 'clamp(34px, 5vw, 56px)',
                  fontWeight: 400,
                  letterSpacing: '-0.025em',
                  lineHeight: 1.05,
                  textWrap: 'balance'
                }}>
                  Pronto a vedere il tuo gioco con <em style={{ color: 'var(--accent)' }}>altri occhi</em>?
                </h2>
                <p style={{
                  margin: '20px 0 0',
                  fontSize: 'clamp(15px, 1.6vw, 17px)',
                  lineHeight: 1.55,
                  color: 'rgba(255,255,255,0.75)',
                  letterSpacing: '-0.005em',
                  maxWidth: 520
                }}>
                  Crea il tuo profilo ora. L'upload video e l'analisi AI saranno
                  disponibili a breve.
                </p>
                <div style={{
                  marginTop: 28,
                  display: 'flex', flexDirection: 'column', gap: 12,
                  alignItems: 'stretch'
                }} className="final-cta-actions">
                  <style>{`
                    @media (min-width: 520px) {
                      .final-cta-actions {
                        flex-direction: row !important;
                        align-items: center !important;
                      }
                    }
                  `}</style>
                  <button onClick={() => go('auth', { mode: 'signup' })} style={{
                    height: 48, padding: '0 24px', borderRadius: 999,
                    background: 'var(--accent)', color: 'var(--accent-fg)',
                    border: 'none', cursor: 'pointer',
                    fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8,
                    letterSpacing: '-0.005em'
                  }}>
                    Inizia gratis
                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                    stroke="currentColor" strokeWidth="2"
                    strokeLinecap="round" strokeLinejoin="round">
                      <line x1="5" y1="12" x2="19" y2="12" />
                      <polyline points="12 5 19 12 12 19" />
                    </svg>
                  </button>
                  <button onClick={() => go('auth', { mode: 'signin' })} style={{
                    height: 48, padding: '0 24px', borderRadius: 999,
                    background: 'transparent',
                    color: 'var(--bg)',
                    border: '1px solid rgba(255,255,255,0.3)',
                    cursor: 'pointer',
                    fontFamily: 'inherit', fontSize: 14, fontWeight: 600,
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    letterSpacing: '-0.005em'
                  }}>
                    Ho già un account
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Footer */}
      <footer style={{
        padding: '32px clamp(20px, 5vw, 56px)',
        borderTop: '1px solid var(--border)',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        flexWrap: 'wrap', gap: 16,
        color: 'var(--muted)', fontSize: 13
      }}>
        <Logo size={18} />
        <span>© 2026 Trygo · Fatto per amore del gioco</span>
      </footer>
    </div>);

}

function FeatureCard({ num, title, body }) {
  return (
    <div style={{
      padding: 24,
      background: 'var(--bg)',
      borderRadius: 16,
      border: '1px solid var(--border)'
    }}>
      <div style={{
        fontFamily: '"Instrument Serif", Georgia, serif',
        fontSize: 32, fontStyle: 'italic',
        color: 'var(--accent-strong)',
        marginBottom: 16,
        lineHeight: 1
      }}>{num}</div>
      <h4 style={{
        margin: '0 0 6px',
        fontSize: 17, fontWeight: 600,
        letterSpacing: '-0.01em',
        color: 'var(--ink)'
      }}>{title}</h4>
      <p style={{
        margin: 0, fontSize: 14, lineHeight: 1.55,
        color: 'var(--muted)'
      }}>{body}</p>
    </div>);

}

// Hero visual — a stylized "court + ball" composition using only basic shapes.
function LandingHeroVisual() {
  return (
    <div style={{
      position: 'relative',
      aspectRatio: '1 / 1',
      maxWidth: 480,
      width: '100%',
      marginInline: 'auto',
      background: 'var(--accent)',
      borderRadius: 24,
      overflow: 'hidden'
    }}>
      {/* Court lines */}
      <svg viewBox="0 0 400 400" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
        <g stroke="var(--accent-fg)" strokeWidth="1.5" fill="none" opacity="0.35">
          <rect x="80" y="40" width="240" height="320" />
          <line x1="80" y1="120" x2="320" y2="120" />
          <line x1="80" y1="280" x2="320" y2="280" />
          <line x1="200" y1="120" x2="200" y2="280" />
          <line x1="80" y1="200" x2="320" y2="200" strokeDasharray="4 4" />
        </g>
        {/* Ball */}
        <g>
          <circle cx="265" cy="160" r="34" fill="var(--accent-fg)" style={{ fill: "rgb(255, 255, 255)" }} />
          <path d="M232 152c12 4 22 12 28 24M298 168c-12-4-22-12-28-24"
          stroke="var(--accent)" strokeWidth="2" fill="none" />
        </g>
      </svg>

      {/* Floating stat cards */}
      <div style={{
        position: 'absolute', bottom: 24, left: 24, right: 24,
        display: 'flex', gap: 8, flexWrap: 'wrap'
      }}>
        <FloatPill label="Stile" value="Aggressivo da fondo" />
        <FloatPill label="Match" value="92%" highlight />
      </div>
      <div style={{
        position: 'absolute', top: 24, left: 24
      }}>
        <FloatPill label="Coach" value="Marco R." />
      </div>
    </div>);

}

function FloatPill({ label, value, highlight }) {
  return (
    <div style={{
      background: highlight ? 'var(--ink)' : 'rgba(255,255,255,0.95)',
      color: highlight ? 'var(--bg)' : 'var(--ink)',
      borderRadius: 12,
      padding: '8px 12px',
      backdropFilter: 'blur(8px)',
      fontSize: 12,
      boxShadow: '0 4px 20px rgba(0,0,0,0.08)'
    }}>
      <div style={{ fontSize: 10, opacity: 0.6, letterSpacing: '0.04em', textTransform: 'uppercase' }}>{label}</div>
      <div style={{ fontWeight: 600, letterSpacing: '-0.01em' }}>{value}</div>
    </div>);

}

Object.assign(window, { LandingScreen });