// landing.jsx — Wordmark, TopNav, Hero (com carrossel), Steps

const STYLES = [
  {
    id: 'classico',
    name: 'Clássico',
    eyebrow: 'Layout 01',
    desc: 'Lista vertical limpa, direta. Ideal para quem quer poucos links de alto impacto.',
    Content: () => <window.ContentClassico />,
  },
  {
    id: 'bento',
    name: 'Bento',
    eyebrow: 'Layout 02',
    desc: 'Grade modular com cards de tamanhos variados. Mostre vários canais sem perder hierarquia.',
    Content: () => <window.ContentBento />,
  },
  {
    id: 'catalogo',
    name: 'Catálogo',
    eyebrow: 'Layout 03',
    desc: 'Cards de produto com foto, preço e botão de compra. Pensado para vender direto da bio.',
    Content: () => <window.ContentCatalogo />,
  },
  {
    id: 'mural',
    name: 'Mural',
    eyebrow: 'Layout 04',
    desc: 'Grid editorial com cards coloridos individualmente. Cada bloco tem cor e tamanho próprios.',
    Content: () => <window.ContentMural />,
  },
];

// ──────────────────────────────────────────────────────────────
// Wordmark (Editorial Noir 6b)
// ──────────────────────────────────────────────────────────────
function Wordmark({ size = 22, light = false, tagline = false }) {
  const inkColor = light ? 'var(--soft)' : 'var(--ink)';
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', alignItems: 'center', gap: 4 }}>
      <span style={{
        fontFamily: 'Instrument Serif, serif', fontStyle: 'italic',
        fontSize: size, lineHeight: 1, letterSpacing: '-0.02em',
        color: inkColor, position: 'relative',
      }}>
        Linko
        <span style={{
          position: 'absolute',
          bottom: -size * 0.10,
          left: '46%',
          width: Math.max(4, size * 0.085),
          height: Math.max(4, size * 0.085),
          borderRadius: '50%',
          background: 'var(--copper)',
        }} />
      </span>
      {tagline && (
        <span className="mono" style={{
          fontSize: 9.5, letterSpacing: '0.32em', textTransform: 'uppercase',
          color: light ? 'rgba(253,250,240,0.55)' : 'rgba(13,13,13,0.4)',
          marginTop: 6,
        }}>uma página · sua marca completa</span>
      )}
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// Top nav
// ──────────────────────────────────────────────────────────────
function TopNav() {
  const navLinks = [
    { label: 'Layouts', href: '#layouts' },
    { label: 'Recursos', href: '#recursos' },
    { label: 'Preços', href: '#precos' },
    { label: 'FAQ', href: '#faq' },
  ];
  return (
    <nav style={{
      position: 'absolute', top: 0, left: 0, right: 0, zIndex: 5,
      padding: '24px 0',
    }}>
      <div className="wrap top-nav" style={{
        display: 'flex', alignItems: 'center', gap: 32,
      }}>
        <Wordmark size={26} light />
        <div style={{ flex: 1 }} />
        <div className="nav-links" style={{
          display: 'flex', alignItems: 'center', gap: 28,
          fontSize: 13.5, fontWeight: 500,
          color: 'rgba(253,250,240,0.7)',
        }}>
          {navLinks.map(l => (
            <a key={l.label} href={l.href}
              onMouseEnter={e => e.currentTarget.style.color = 'var(--soft)'}
              onMouseLeave={e => e.currentTarget.style.color = 'rgba(253,250,240,0.7)'}
              style={{ transition: 'color 120ms' }}>
              {l.label}
            </a>
          ))}
        </div>
        <a href="/login.html" className="nav-login" style={{
          fontSize: 13.5, fontWeight: 500, color: 'rgba(253,250,240,0.7)',
        }}>Entrar</a>
        <a href="/login.html?tab=register" style={{
          padding: '10px 18px', borderRadius: 999,
          background: 'var(--soft)', color: 'var(--ink)',
          fontSize: 13.5, fontWeight: 600,
          display: 'inline-flex', alignItems: 'center', gap: 6,
        }}>
          Criar conta →
        </a>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .nav-links { display: none !important; }
        }
      `}</style>
    </nav>
  );
}

// ──────────────────────────────────────────────────────────────
// Hero — agora com carrossel de 4 layouts
// ──────────────────────────────────────────────────────────────
function Hero() {
  const [handle, setHandle] = React.useState('');
  const [active, setActive] = React.useState(0);
  const [paused, setPaused] = React.useState(false);

  // Auto-rotate
  React.useEffect(() => {
    if (paused) return;
    const id = setInterval(() => {
      setActive(a => (a + 1) % STYLES.length);
    }, 4200);
    return () => clearInterval(id);
  }, [paused]);

  const current = STYLES[active];

  return (
    <section className="hero-section" style={{
      position: 'relative',
      background: 'var(--ink)',
      color: 'var(--soft)',
      paddingTop: 120, paddingBottom: 100,
      overflow: 'hidden',
    }} id="layouts">
      <TopNav />

      {/* Decorative copper glow */}
      <div style={{
        position: 'absolute', top: '-15%', right: '-10%',
        width: 700, height: 700, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(192,137,98,0.16), transparent 70%)',
        pointerEvents: 'none',
      }} />

      <div className="wrap hero-grid" style={{
        display: 'grid',
        gridTemplateColumns: '1.1fr 1fr',
        gap: 56, alignItems: 'center',
        position: 'relative',
      }}>
        {/* Left: copy */}
        <div>
          <div className="mono" style={{
            fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
            color: 'var(--copper)', marginBottom: 22,
          }}>
            <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--copper)', verticalAlign: 'middle', marginRight: 10 }} />
            Linko · página de links
          </div>

          <h1 className="serif" style={{
            margin: 0,
            fontStyle: 'italic',
            fontSize: 'clamp(44px, 6.4vw, 88px)',
            lineHeight: 1.02, letterSpacing: '-0.025em',
            fontWeight: 400,
            color: 'var(--soft)',
          }}>
            Toda a sua marca em uma <span style={{ color: 'var(--copper)' }}>única página</span>.
          </h1>

          <p style={{
            margin: '26px 0 36px',
            fontSize: 'clamp(15px, 1.3vw, 17px)',
            lineHeight: 1.6,
            color: 'rgba(253,250,240,0.7)',
            maxWidth: 520,
          }}>
            Centralize seus links, produtos e canais de atendimento em uma página rápida e
            personalizável. Escolha entre quatro layouts, ajuste paletas e fundo de imagem,
            e publique em poucos minutos.
          </p>

          {/* Handle input + CTA */}
          <form onSubmit={e => e.preventDefault()} className="hero-form" style={{
            display: 'flex', alignItems: 'center', gap: 8,
            background: 'rgba(253,250,240,0.06)',
            border: '1px solid rgba(253,250,240,0.14)',
            borderRadius: 999,
            padding: 6,
            maxWidth: 540,
            backdropFilter: 'blur(8px)',
          }}>
            <span className="mono hero-form-prefix" style={{
              padding: '0 4px 0 18px',
              fontSize: 13, color: 'rgba(253,250,240,0.55)',
              whiteSpace: 'nowrap',
            }}>linko.business/</span>
            <input
              value={handle}
              onChange={e => setHandle(e.target.value.replace(/[^a-z0-9.\-_]/gi, '').toLowerCase())}
              placeholder="seu-negocio"
              className="mono"
              style={{
                flex: 1, minWidth: 0,
                background: 'transparent', border: 'none', outline: 'none',
                color: 'var(--soft)', fontSize: 13,
                padding: '10px 14px',
              }}
            />
            <a href={`/login.html?tab=register${handle ? '&handle=' + encodeURIComponent(handle) : ''}`} className="hero-form-cta" style={{
              padding: '10px 18px', borderRadius: 999,
              background: 'var(--soft)', color: 'var(--ink)',
              fontSize: 13.5, fontWeight: 600,
              display: 'inline-flex', alignItems: 'center', gap: 6,
            }}>
              Criar página →
            </a>
          </form>

          <div style={{
            marginTop: 22,
            display: 'flex', alignItems: 'center', gap: 14,
            fontSize: 12.5, color: 'rgba(253,250,240,0.55)',
          }}>
            <div style={{ display: 'flex' }}>
              {['#c08962', '#5a3a1e', '#fdfaf0', '#ece2cc'].map((c, i) => (
                <div key={i} style={{
                  width: 22, height: 22, borderRadius: '50%',
                  background: c, border: '2px solid var(--ink)',
                  marginLeft: i === 0 ? 0 : -8,
                }} />
              ))}
            </div>
            <span>30 dias grátis</span>
          </div>
        </div>

        {/* Right: phone carousel */}
        <div
          className="hero-carousel"
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}
          style={{
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 24,
            position: 'relative',
          }}
        >
          <div style={{
            position: 'absolute',
            top: '50%', left: '50%', transform: 'translate(-50%, -55%)',
            width: 360, height: 360, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(192,137,98,0.14), transparent 65%)',
            pointerEvents: 'none',
          }} />

          {/* Phone with stacked contents (cross-fade) */}
          <div style={{ position: 'relative', transform: 'rotate(-1.5deg)' }}>
            <window.LandingPhone width={280} height={568}>
              {STYLES.map((s, i) => (
                <div key={s.id} style={{
                  position: 'absolute', inset: 0,
                  paddingTop: 44,
                  opacity: i === active ? 1 : 0,
                  transition: 'opacity 600ms ease',
                  pointerEvents: i === active ? 'auto' : 'none',
                }}>
                  <s.Content />
                </div>
              ))}
            </window.LandingPhone>
          </div>

          {/* Active style caption */}
          <div style={{
            textAlign: 'center', maxWidth: 360,
            minHeight: 72,
          }}>
            <div className="mono" style={{
              fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'var(--copper)',
            }}>{current.eyebrow}</div>
            <div className="serif" style={{
              fontStyle: 'italic', fontSize: 26, lineHeight: 1.1,
              color: 'var(--soft)', marginTop: 8, letterSpacing: '-0.01em',
            }}>{current.name}</div>
            <div style={{
              fontSize: 12.5, lineHeight: 1.5,
              color: 'rgba(253,250,240,0.6)',
              marginTop: 10,
            }}>{current.desc}</div>
          </div>

          {/* Tabs */}
          <div style={{
            display: 'inline-flex',
            background: 'rgba(253,250,240,0.06)',
            border: '1px solid rgba(253,250,240,0.12)',
            borderRadius: 999,
            padding: 4, gap: 2,
            backdropFilter: 'blur(8px)',
          }}>
            {STYLES.map((s, i) => {
              const isActive = i === active;
              return (
                <button key={s.id} onClick={() => setActive(i)} style={{
                  padding: '8px 14px',
                  borderRadius: 999,
                  background: isActive ? 'var(--soft)' : 'transparent',
                  color: isActive ? 'var(--ink)' : 'rgba(253,250,240,0.7)',
                  fontSize: 12.5, fontWeight: 600,
                  transition: 'all 180ms',
                }}>
                  {s.name}
                </button>
              );
            })}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          .hero-grid { grid-template-columns: 1fr !important; gap: 48px !important; }
          .hero-carousel { transform: scale(0.92); transform-origin: top center; }
        }
        @media (max-width: 480px) {
          .hero-carousel { transform: scale(0.82); transform-origin: top center; }
        }
      `}</style>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// Steps — Como funciona
// ──────────────────────────────────────────────────────────────
function Steps() {
  const steps = [
    {
      n: '01',
      title: 'Crie sua página',
      body: 'Escolha seu endereço em linko.business/seu-negocio e cadastre-se em menos de um minuto.',
    },
    {
      n: '02',
      title: 'Adicione seu conteúdo',
      body: 'Importe links, redes sociais, produtos e canais de atendimento. Organize por arrastar e soltar.',
    },
    {
      n: '03',
      title: 'Personalize e publique',
      body: 'Escolha um dos 4 layouts, ajuste a paleta de cores e a imagem de fundo. Sua página vai ao ar imediatamente.',
    },
  ];
  return (
    <section id="como-funciona" style={{
      padding: '120px 0',
      background: 'var(--cream)',
    }}>
      <div className="wrap">
        <SectionHeader
          eyebrow="Como funciona"
          title={<>Três passos<br /><em className="serif" style={{ fontStyle: 'italic', color: 'var(--brown)' }}>até estar no ar.</em></>}
          sub="Sem instalações, sem código. Do cadastro à publicação em menos de cinco minutos."
        />
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 32,
          marginTop: 64,
        }}>
          {steps.map(s => (
            <div key={s.n} style={{
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div className="mono" style={{
                fontSize: 11, letterSpacing: '0.18em',
                color: 'var(--copper)', fontWeight: 600,
              }}>{s.n}</div>
              <div style={{ height: 1, background: 'var(--hairline-light)' }} />
              <h3 className="serif" style={{
                margin: '8px 0 0', fontSize: 30, fontStyle: 'italic',
                fontWeight: 400, letterSpacing: '-0.015em', lineHeight: 1.15,
                color: 'var(--ink)',
              }}>{s.title}</h3>
              <p style={{
                margin: 0, fontSize: 14.5, lineHeight: 1.6, color: 'var(--ink-2)',
                maxWidth: 360,
              }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// Section header
// ──────────────────────────────────────────────────────────────
function SectionHeader({ eyebrow, title, sub }) {
  return (
    <div style={{ maxWidth: 720 }}>
      <div className="mono" style={{
        fontSize: 11, letterSpacing: '0.28em', textTransform: 'uppercase',
        color: 'var(--copper)',
      }}>
        <span style={{ display: 'inline-block', width: 24, height: 1, background: 'var(--copper)', verticalAlign: 'middle', marginRight: 10 }} />
        {eyebrow}
      </div>
      <h2 style={{
        margin: '18px 0 0',
        fontSize: 'clamp(34px, 4.8vw, 60px)',
        lineHeight: 1.05, letterSpacing: '-0.025em',
        fontWeight: 700, color: 'var(--ink)',
        fontFamily: 'Plus Jakarta Sans, sans-serif',
      }}>{title}</h2>
      {sub && (
        <p style={{
          margin: '20px 0 0',
          fontSize: 16, lineHeight: 1.6, color: 'var(--ink-2)',
          maxWidth: 560,
        }}>{sub}</p>
      )}
    </div>
  );
}

window.Wordmark = Wordmark;
window.Hero = Hero;
window.Steps = Steps;
window.SectionHeader = SectionHeader;