// Aiglú — Home page sections

function Hero() {
  return (
    <section style={{ padding: 'clamp(60px, 10vh, 130px) 0 clamp(80px, 14vh, 180px)', position: 'relative' }}>
      <div className="container">
        <div className="eyebrow reveal" style={{ marginBottom: 32 }}>◆ Promoción inmobiliaria · Madrid</div>
        <h1 className="h-display reveal" style={{ margin: 0, maxWidth: '15ch' }}>
          Construimos <em style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontWeight: 400, color: 'var(--copper)' }}>refugios</em> con atención al detalle.
        </h1>
        <p className="body-lg reveal" style={{ margin: '32px 0 0', maxWidth: '52ch' }}>
          Aiglú es una promotora de nueva creación. Hacemos viviendas pensadas, en un proceso completamente digital, con respeto por los materiales y por el tiempo de las personas.
        </p>
        <div className="reveal" style={{ display: 'flex', gap: 16, marginTop: 44, flexWrap: 'wrap' }}>
          <a className="btn btn-primary" href="#proyectos">
            Ver proyectos <span className="btn-arrow">→</span>
          </a>
          <a className="btn btn-ghost" href="#estudio">Cómo trabajamos</a>
        </div>
      </div>

      {/* Decorative arches strip */}
      <div style={{ marginTop: 'clamp(60px, 10vh, 120px)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="container" style={{ padding: '40px var(--pad-x)' }}>
          <svg viewBox="0 0 1400 80" width="100%" height="80" preserveAspectRatio="xMidYMid meet" style={{ display: 'block' }}>
            {Array.from({ length: 14 }).map((_, i) => {
              const x = 50 + i * 100;
              return <path key={i} d={`M ${x - 30} 70 L ${x - 30} 40 A 30 30 0 0 1 ${x + 30} 40 L ${x + 30} 70`} fill="none" stroke="var(--ink)" strokeWidth="1.5" opacity="0.35"/>;
            })}
          </svg>
        </div>
      </div>
    </section>
  );
}

function Manifesto() {
  return (
    <section className="section" id="estudio" style={{ background: 'var(--cream)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 'clamp(40px, 6vw, 100px)' }}>
          <div>
            <div className="eyebrow reveal" style={{ marginBottom: 28 }}>◆ Estudio</div>
            <h2 className="h-title reveal" style={{ margin: 0 }}>
              Una casa también<br/>es un <em style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontWeight: 400 }}>refugio.</em>
            </h2>
          </div>
          <div className="reveal">
            <p className="body-lg" style={{ margin: 0, marginBottom: 28 }}>
              Aiglú nace de la palabra <strong>iglú</strong>: la forma más pura de refugio. Una arquitectura que protege y respeta el lugar donde se posa.
            </p>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32, marginTop: 50 }}>
              {[
                ['Refugio', 'Hogar como protección, no como producto.'],
                ['Detalle', 'Atención artesanal en cada decisión.'],
                ['Digital', 'Tecnología invisible para clientes y colaboradores.'],
                ['Materia', 'Compromiso medioambiental como punto de partida.'],
              ].map(([k, v]) => (
                <div key={k} style={{ borderTop: '1px solid var(--line)', paddingTop: 18 }}>
                  <div style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 26, marginBottom: 8 }}>{k}</div>
                  <div style={{ fontSize: 16, color: 'var(--ink-soft)', lineHeight: 1.5 }}>{v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProjectCard({ p }) {
  const isFuture = p.statusKey !== 'live';
  return (
    <a href={p.page} className="proj-card reveal">
      <div className="proj-img" style={
        p.cover
          ? { backgroundImage: `url(${p.cover})` }
          : { backgroundColor: 'var(--cream-warm)' }
      }>
        {!p.cover && <ArchPlaceholder tone="var(--cream-warm)" />}
        <div style={{
          position: 'absolute', top: 22, left: 24, zIndex: 2,
          background: 'rgba(250,247,241,0.9)', backdropFilter: 'blur(6px)',
          padding: '8px 14px',
          fontFamily: 'var(--mono)', fontSize: 11,
          letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'var(--ink)',
        }}>
          {p.units} viviendas · {p.delivery}
        </div>
      </div>
      <div className="proj-meta">
        <div>
          <div className="proj-name">{p.name}</div>
          <div className="proj-loc">{p.location}</div>
        </div>
        <div className={'proj-status ' + p.statusKey}>
          <span className="dot"/>{p.status}
        </div>
      </div>
    </a>
  );
}

function ProjectsSection() {
  return (
    <section className="section" id="proyectos">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 60, gap: 40, flexWrap: 'wrap' }}>
          <div>
            <div className="eyebrow reveal" style={{ marginBottom: 24 }}>◆ Proyectos</div>
            <h2 className="h-title reveal" style={{ margin: 0, maxWidth: 14 + 'ch' }}>
              Promociones que cuidan su entorno.
            </h2>
          </div>
          <div className="reveal" style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--mute)', letterSpacing: '0.18em', textTransform: 'uppercase' }}>
            {PROJECTS.length} proyectos · 86 viviendas en cartera
          </div>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))', gap: 32 }}>
          {PROJECTS.map((p) => <ProjectCard key={p.slug} p={p} />)}
        </div>
      </div>
    </section>
  );
}

function Process() {
  const steps = [
    ['01', 'Suelo', 'Buscamos parcelas con sentido: ubicación, escala y posibilidad de hacer las cosas bien.'],
    ['02', 'Proyecto', 'Trabajamos con arquitectos que escuchan el lugar y los materiales antes de dibujar.'],
    ['03', 'Obra', 'Industrializada cuando aporta, artesanal cuando importa. Plazos honestos.'],
    ['04', 'Entrega', 'Acompañamos al cliente más allá de la llave. Una casa es un compromiso largo.'],
  ];
  return (
    <section className="section" style={{ background: 'var(--ink)', color: 'var(--cream)' }}>
      <div className="container">
        <div style={{ marginBottom: 80 }}>
          <div className="eyebrow reveal" style={{ marginBottom: 24, color: 'var(--copper)' }}>◆ Cómo trabajamos</div>
          <h2 className="h-title reveal" style={{ margin: 0, maxWidth: 16 + 'ch' }}>
            Cuatro pasos. <em style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontWeight: 400 }}>Sin atajos.</em>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: 0 }}>
          {steps.map(([n, t, d], i) => (
            <div key={n} className="reveal" style={{
              padding: '40px 36px 40px 0',
              borderTop: '1px solid rgba(241,236,227,0.22)',
              borderRight: i < steps.length - 1 ? '1px solid rgba(241,236,227,0.12)' : 'none',
              paddingLeft: i > 0 ? 36 : 0,
            }}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 13, color: 'var(--copper)', letterSpacing: '0.18em' }}>{n}</div>
              <div style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontSize: 36, margin: '20px 0 18px' }}>{t}</div>
              <div style={{ fontSize: 16, color: 'rgba(241,236,227,0.78)', lineHeight: 1.55 }}>{d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Tools() {
  const tools = [
    { href: 'calculadoras.html', eye: '◆ Herramientas', t: 'Calculadoras', d: 'Hipoteca, capacidad de compra, alquilar vs. comprar, rentabilidad. Seis utilidades sin registro.', n: '01' },
    { href: 'pildoras.html', eye: '◆ Aprende', t: 'Píldoras', d: 'Glosario, pasos para comprar, cómo se construye, inversión. Stories de 10 segundos.', n: '02' },
    { href: 'nosotros.html', eye: '◆ Estudio', t: 'Quiénes somos', d: 'Misión, valores no negociables, equipo y la trayectoria de Aiglú desde 2026.', n: '03' },
  ];
  return (
    <section className="section" style={{ background: 'var(--cream)' }}>
      <div className="container">
        <div style={{ marginBottom: 60 }}>
          <div className="eyebrow reveal" style={{ marginBottom: 22 }}>◆ Más en aiglú.es</div>
          <h2 className="h-title reveal" style={{ margin: 0, maxWidth: '20ch' }}>
            Herramientas para decidir <em style={{ fontFamily: 'var(--display)', fontStyle: 'italic', fontWeight: 400 }}>con calma.</em>
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: 1, background: 'var(--line)' }}>
          {tools.map(t => (
            <a key={t.href} href={t.href} className="reveal" style={{
              background: 'var(--cream)', padding: '40px 32px', textDecoration: 'none', color: 'inherit',
              display: 'flex', flexDirection: 'column', minHeight: 280,
              transition: 'background .25s',
            }}
            onMouseEnter={(e) => e.currentTarget.style.background = 'var(--cream-warm)'}
            onMouseLeave={(e) => e.currentTarget.style.background = 'var(--cream)'}>
              <div style={{ fontFamily: 'var(--mono)', fontSize: 12, color: 'var(--copper)', letterSpacing: '0.18em' }}>{t.n}</div>
              <div style={{ fontSize: 32, fontWeight: 600, letterSpacing: '-0.02em', marginTop: 24 }}>{t.t}</div>
              <div style={{ fontSize: 15, color: 'var(--ink-soft)', lineHeight: 1.55, marginTop: 14, flex: 1 }}>{t.d}</div>
              <div style={{ marginTop: 24, fontFamily: 'var(--mono)', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase' }}>
                Ir a {t.t.toLowerCase()} →
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Stats() {
  return (
    <section style={{ padding: '40px 0', background: 'var(--cream)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div className="stat-row">
          <div className="stat reveal">
            <div className="stat-num accent">86</div>
            <div className="stat-label">Viviendas en cartera</div>
          </div>
          <div className="stat reveal">
            <div className="stat-num">3</div>
            <div className="stat-label">Promociones activas</div>
          </div>
          <div className="stat reveal">
            <div className="stat-num">100<span style={{fontSize: '0.45em'}}>%</span></div>
            <div className="stat-label">Proceso digital</div>
          </div>
          <div className="stat reveal">
            <div className="stat-num">2026</div>
            <div className="stat-label">Año de fundación</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Contact() {
  return (
    <section className="section" id="contacto">
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 80 }}>
          <div>
            <div className="eyebrow reveal" style={{ marginBottom: 24 }}>◆ Contacto</div>
            <h2 className="h-title reveal" style={{ margin: 0, maxWidth: 14 + 'ch' }}>
              ¿Hablamos de tu próxima casa?
            </h2>
            <p className="body-lg reveal" style={{ marginTop: 28, maxWidth: 50 + 'ch' }}>
              Escríbenos. Te respondemos en 24h con una persona del equipo, no con un formulario automático.
            </p>
            <div className="reveal" style={{ marginTop: 50, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href="mailto:hola@aiglu.es">hola@aiglu.es <span className="btn-arrow">→</span></a>
              <a className="btn btn-ghost" href="tel:+34900000000">+34 900 000 000</a>
            </div>
          </div>
          <div className="reveal" style={{ background: 'var(--cream)', padding: 50, position: 'relative', overflow: 'hidden' }}>
            <ArchPlaceholder tone="var(--cream)" />
            <div style={{ position: 'relative' }}>
              <div className="eyebrow" style={{ marginBottom: 22 }}>◆ Inversores</div>
              <div className="h-section" style={{ marginBottom: 16 }}>Cuenta en participaciones</div>
              <p style={{ color: 'var(--ink-soft)', fontSize: 16, lineHeight: 1.55 }}>
                Buscamos inversores acreditados para los tramos privados de nuestras promociones. Acceso a fichas técnicas bajo NDA.
              </p>
              <a href="mailto:inversores@aiglu.es" style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginTop: 26, fontWeight: 500, color: 'var(--ink)', borderBottom: '1px solid var(--ink)', paddingBottom: 4 }}>
                inversores@aiglu.es <span>→</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function HomeApp() {
  useReveal();
  return (
    <>
      <Header active="home" />
      <Hero />
      <Stats />
      <ProjectsSection />
      <Manifesto />
      <Process />
      <Tools />
      <Contact />
      <Footer />
    </>
  );
}

window.HomeApp = HomeApp;