import React from 'react';
import { Link } from 'react-router-dom';

const Home: React.FC = () => {
  return (
    <div className="landing-wrap">
      {/* NAV */}
      <nav style={{
        position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100, 
        background: 'rgba(10,10,10,0.95)', borderBottom: '1px solid var(--border)', 
        display: 'flex', alignItems: 'center', justifyContent: 'space-between', 
        padding: '0 2rem', height: '52px', backdropFilter: 'blur(8px)'
      }}>
        <Link to="/" style={{
          fontFamily: 'var(--display)', fontWeight: 900, fontSize: '22px', 
          letterSpacing: '-0.5px', color: 'var(--text)', textDecoration: 'none'
        }}>
          Código<span style={{color: 'var(--orange)'}}>0</span>
        </Link>
        <ul style={{display: 'flex', gap: '2rem', listStyle: 'none'}}>
          <li><a href="#protocolos" className="nav-link">Protocolos</a></li>
          <li><a href="#features" className="nav-link">Características</a></li>
          <li><a href="https://github.com/planetazuzu/codigo0" className="nav-link">GitHub</a></li>
          <li><Link to="/admin" className="nav-cta">Gestión →</Link></li>
        </ul>
      </nav>

      <style>{`
        .nav-link {
          font-family: var(--mono); font-size: 11px; color: var(--text-dim);
          text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em;
          transition: color 0.15s;
        }
        .nav-link:hover { color: var(--orange); }
        .nav-cta {
          background: var(--orange); color: var(--black); padding: 6px 16px;
          font-weight: 700; text-decoration: none; text-transform: uppercase; font-size: 11px;
        }
        .nav-cta:hover { background: var(--orange-pale); }
        
        .hero {
          min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
          padding: 6rem 2rem 4rem; max-width: 1100px; margin: 0 auto; position: relative;
        }
        .hero-badge {
          display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
          font-size: 11px; color: var(--orange); border: 1px solid var(--orange);
          padding: 4px 12px; margin-bottom: 2rem; letter-spacing: 0.15em; text-transform: uppercase; width: fit-content;
        }
        .hero h1 {
          font-family: var(--display); font-size: clamp(64px, 12vw, 140px); font-weight: 900;
          line-height: 0.9; letter-spacing: -2px; text-transform: uppercase; color: var(--text); margin-bottom: 0.5rem;
        }
        .hero h1 .accent { color: var(--orange); }
      `}</style>

      {/* HERO (Simplified for now - porting main parts) */}
      <section className="hero">
        <div className="hero-badge">v0.1 · En desarrollo activo</div>
        <h1>
          <span className="accent">Código</span><br />
          Cero.
        </h1>
        <p style={{
          fontFamily: 'var(--display)', fontSize: 'clamp(20px, 3vw, 32px)', fontWeight: 600,
          color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2.5rem'
        }}>
          Protocolos TES. Sin papel. Sin esperas. Sin excusas.
        </p>
        
        <div style={{display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '4rem'}}>
          <a href="http://207.180.226.141:9112" className="btn-primary">Abrir app →</a>
          <Link to="/admin" style={{
            background: 'transparent', color: 'var(--text-dim)', fontFamily: 'var(--mono)',
            fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', padding: '14px 28px',
            textDecoration: 'none', border: '1px solid var(--border)', transition: 'all 0.15s'
          }}>Panel de Gestión</Link>
        </div>
      </section>

      {/* Rest of the sections can be added slowly, but let's keep it functional first */}
    </div>
  );
};

export default Home;