// VARIANT B — "Estructurado Moderno"
// Layouts asimétricos, paleta crema/blanco con verde, hero split (texto + imagen),
// más blanco, ritmo editorial moderno. Sigue siendo corporativo pero más fresco.

(() => {
  const C = window.FE_CONTENT;
  const I = window.FE_IMAGES;
  const W = 1440;

  const bColors = {
    bg: '#fafaf6',
    cream: '#f0eee5',
    white: '#ffffff',
    border: '#e0ddd0',
    text: '#0f0f0f',
    muted: '#7a7a72',
    green: '#00b31b',
    greenDark: '#005a0d',
    greenLight: '#e6f7e8',
  };

  // ─────────── NAV ───────────
  function NavB() {
    return (
      <header style={{
        padding: '20px 56px',
        display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center',
        background: bColors.bg,
        borderBottom: `1px solid ${bColors.border}`,
      }}>
        <window.FeijooLogo mode="default" width={140}/>
        <nav style={{ display: 'flex', gap: 36, justifyContent: 'center' }}>
          {C.nav.map(item => (
            <a key={item} style={{ fontSize: 13.5, color: bColors.text, textDecoration: 'none', fontWeight: 400 }}>{item}</a>
          ))}
        </nav>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, justifyContent: 'flex-end' }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 11, color: bColors.muted, letterSpacing: '0.1em' }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: bColors.green, display: 'inline-block' }}/>
            <span>ES — Cambiar idioma</span>
          </div>
          <button style={{
            background: bColors.text, color: '#fff', border: 'none',
            padding: '12px 22px', fontSize: 12, fontWeight: 500,
            letterSpacing: '0.1em', textTransform: 'uppercase', cursor: 'pointer',
            borderRadius: 999,
          }}>Contacto</button>
        </div>
      </header>
    );
  }

  // ─────────── HERO ───────────
  function HeroB() {
    return (
      <section style={{ background: bColors.bg }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 0, alignItems: 'stretch' }}>
          <div style={{ padding: '96px 64px 80px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 32 }}>
              <window.FeijooSymbol width={28} color={bColors.green}/>
              <window.Eyebrow color={bColors.muted} mono>FEIJOO ENERGY · EST. 2004</window.Eyebrow>
            </div>
            <h1 style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 300, fontSize: 92, lineHeight: 0.98,
              margin: '0 0 24px', letterSpacing: '-0.025em',
            }}>
              {C.hero.title[0]} <span style={{ color: bColors.green }}>{C.hero.title[1].split(' ')[0]}</span> {C.hero.title[1].split(' ').slice(1).join(' ')} <em style={{ fontStyle: 'italic', color: bColors.muted }}>{C.hero.titleItalic}</em>
            </h1>
            <p style={{ fontSize: 16.5, lineHeight: 1.7, color: '#3a3a3a', maxWidth: 540, marginBottom: 44 }}>{C.hero.desc}</p>
            <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
              <button style={{
                background: bColors.green, color: '#fff', border: 'none',
                padding: '16px 28px', fontSize: 13, fontWeight: 500,
                letterSpacing: '0.1em', textTransform: 'uppercase', cursor: 'pointer',
                borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 12,
              }}>{C.hero.cta} <span>→</span></button>
              <button style={{
                background: 'transparent', color: bColors.text,
                border: 'none', padding: '16px 6px', fontSize: 13, fontWeight: 500,
                letterSpacing: '0.1em', textTransform: 'uppercase', cursor: 'pointer',
                borderBottom: `2px solid ${bColors.text}`,
              }}>{C.hero.ctaSecondary}</button>
            </div>

            {/* mini-stats row inline */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24, marginTop: 80, paddingTop: 32, borderTop: `1px solid ${bColors.border}` }}>
              {C.about.stats.map(s => (
                <div key={s.label}>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 42, fontWeight: 400, lineHeight: 1, color: bColors.text }}>{s.value}</div>
                  <div style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: bColors.muted, marginTop: 8 }}>{s.label}</div>
                </div>
              ))}
            </div>
          </div>

          <div style={{ position: 'relative', minHeight: 720, overflow: 'hidden' }}>
            <div style={{
              position: 'absolute', inset: 0,
              backgroundImage: `url(${I.heroSolar})`,
              backgroundSize: 'cover', backgroundPosition: 'center',
            }}/>
            {/* corner label */}
            <div style={{
              position: 'absolute', bottom: 24, left: 24, right: 24,
              display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
              color: '#fff',
            }}>
              <div style={{
                background: 'rgba(0,0,0,0.55)', padding: '12px 16px',
                fontFamily: "'DM Mono', monospace", fontSize: 11, letterSpacing: '0.08em',
              }}>
                <div style={{ color: bColors.green, marginBottom: 4 }}>● PROYECTO EN DESARROLLO</div>
                <div>Planta fotovoltaica · Colombia · 2026</div>
              </div>
              <div style={{
                background: bColors.green, color: '#fff',
                padding: '12px 16px', fontFamily: "'DM Mono', monospace",
                fontSize: 11, letterSpacing: '0.08em',
              }}>120 MWp</div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // ─────────── ABOUT (manifesto card) ───────────
  function AboutB() {
    return (
      <section style={{ padding: '120px 56px', background: bColors.cream }}>
        <div style={{ display: 'grid', gridTemplateColumns: '0.6fr 1fr', gap: 64, alignItems: 'start' }}>
          <div style={{ position: 'sticky', top: 24 }}>
            <window.Eyebrow color={bColors.green}>{C.about.eyebrow}</window.Eyebrow>
            <div style={{ marginTop: 32, fontFamily: "'DM Mono', monospace", fontSize: 11, color: bColors.muted, letterSpacing: '0.1em' }}>
              <div>01 — Desarrollo</div>
              <div style={{ marginTop: 8, opacity: 0.5 }}>02 — Ingeniería</div>
              <div style={{ marginTop: 8, opacity: 0.5 }}>03 — Social</div>
              <div style={{ marginTop: 8, opacity: 0.5 }}>04 — Operación</div>
            </div>
          </div>
          <div>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 300, fontSize: 64, lineHeight: 1.04,
              margin: '0 0 32px', letterSpacing: '-0.02em', maxWidth: 720,
            }}>{C.about.title}</h2>
            <p style={{ fontSize: 17, lineHeight: 1.75, color: '#2a2a2a', maxWidth: 720, marginBottom: 48 }}>{C.about.body}</p>

            <div style={{
              display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
              background: bColors.white,
              border: `1px solid ${bColors.border}`,
            }}>
              <div style={{ padding: 32, borderRight: `1px solid ${bColors.border}` }}>
                <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: bColors.green, marginBottom: 12 }}>Empresa del Grupo</div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 26, fontWeight: 400, marginBottom: 8 }}>Fe Energy Wind Development</div>
                <div style={{ fontSize: 13, color: bColors.muted, lineHeight: 1.6 }}>Empresa especializada en el desarrollo de proyectos de energía eólica en España. Feijoo Energy es su único socio.</div>
              </div>
              <div style={{ padding: 32 }}>
                <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: bColors.green, marginBottom: 12 }}>Sede principal</div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 26, fontWeight: 400, marginBottom: 8 }}>A Coruña — Galicia</div>
                <div style={{ fontSize: 13, color: bColors.muted, lineHeight: 1.6 }}>Operaciones activas en España, Colombia, México y República Dominicana con equipos locales especializados.</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  // ─────────── SERVICES (large image cards 2x2) ───────────
  function ServicesB() {
    const imgs = [I.windField, I.solarPanels, I.battery, I.hydrogen];
    return (
      <section style={{ padding: '120px 56px', background: bColors.bg }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 64 }}>
          <div>
            <window.Eyebrow>{C.services.eyebrow}</window.Eyebrow>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 300, fontSize: 64, lineHeight: 1.04,
              margin: '20px 0 0', letterSpacing: '-0.02em',
              whiteSpace: 'pre-line',
            }}>{C.services.title}</h2>
          </div>
          <a style={{ fontSize: 13, fontWeight: 500, letterSpacing: '0.1em', textTransform: 'uppercase', color: bColors.text, borderBottom: `2px solid ${bColors.green}`, paddingBottom: 6 }}>Ver todos los servicios →</a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {C.services.items.map((s, i) => (
            <article key={s.id} style={{
              background: bColors.white,
              border: `1px solid ${bColors.border}`,
              overflow: 'hidden', position: 'relative',
            }}>
              <div style={{
                height: 280,
                backgroundImage: `url(${imgs[i]})`,
                backgroundSize: 'cover', backgroundPosition: 'center',
                position: 'relative',
              }}>
                <div style={{
                  position: 'absolute', top: 20, left: 20,
                  background: 'rgba(255,255,255,0.95)',
                  padding: '6px 12px', fontFamily: "'DM Mono', monospace",
                  fontSize: 11, letterSpacing: '0.1em', color: bColors.greenDark,
                }}>SERVICIO {s.id}</div>
              </div>
              <div style={{ padding: '36px 32px' }}>
                <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
                  <h3 style={{
                    fontFamily: "'Cormorant Garamond', serif",
                    fontSize: 34, fontWeight: 400, margin: 0,
                    letterSpacing: '-0.01em',
                  }}>{s.name}</h3>
                  <span style={{ fontSize: 22, color: bColors.green }}>→</span>
                </div>
                <p style={{ fontSize: 14.5, lineHeight: 1.65, color: '#444', margin: '0 0 20px' }}>{s.desc}</p>
                <div style={{ display: 'flex', gap: 8 }}>
                  {s.tags.map(t => <window.Tag key={t}>{t}</window.Tag>)}
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>
    );
  }

  // ─────────── TEAM (horizontal) ───────────
  function TeamB() {
    return (
      <section style={{ padding: '120px 56px', background: bColors.cream }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 96, marginBottom: 64 }}>
          <div>
            <window.Eyebrow>{C.team.eyebrow}</window.Eyebrow>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 300, fontSize: 56, lineHeight: 1.04,
              margin: '20px 0 0', letterSpacing: '-0.02em',
            }}>{C.team.title}</h2>
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.75, color: '#3a3a3a', maxWidth: 540, alignSelf: 'end' }}>
            Dirigimos cada proyecto desde la convicción de que las renovables son, antes que una tecnología, un trabajo de gestión cuidadosa de personas, territorio y recurso.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
          {C.team.members.map((m, i) => (
            <article key={m.name} style={{
              background: bColors.white,
              border: `1px solid ${bColors.border}`,
              padding: 0, overflow: 'hidden',
              display: 'grid', gridTemplateColumns: '1fr 1.5fr',
            }}>
              <window.AvatarInitials initials={m.initials} bg={i === 0 ? bColors.text : bColors.green} fg={i === 0 ? bColors.green : '#fff'} size={260}/>
              <div style={{ padding: '32px 28px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div>
                  <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 10.5, letterSpacing: '0.1em', color: bColors.green, marginBottom: 10 }}>0{i+1}</div>
                  <h3 style={{
                    fontFamily: "'Cormorant Garamond', serif",
                    fontSize: 28, fontWeight: 400, margin: '0 0 4px',
                  }}>{m.name}</h3>
                  <div style={{ fontSize: 11.5, letterSpacing: '0.12em', textTransform: 'uppercase', color: bColors.muted, marginBottom: 18 }}>{m.role}</div>
                  <p style={{ fontSize: 13.5, lineHeight: 1.6, color: '#3a3a3a', margin: 0 }}>{m.bio}</p>
                </div>
                <div style={{ marginTop: 24, paddingTop: 16, borderTop: `1px solid ${bColors.border}`, fontSize: 12, color: bColors.muted, letterSpacing: '0.06em' }}>
                  En el sector desde <strong style={{ color: bColors.text }}>{i === 0 ? '2004' : '2012'}</strong>
                </div>
              </div>
            </article>
          ))}
        </div>
      </section>
    );
  }

  // ─────────── COMMITMENT ───────────
  function CommitmentB() {
    return (
      <section style={{ padding: '120px 56px', background: bColors.bg }}>
        <div style={{
          background: bColors.text, color: '#fff',
          display: 'grid', gridTemplateColumns: '1fr 1fr',
        }}>
          <div style={{
            backgroundImage: `url(${I.community})`,
            backgroundSize: 'cover', backgroundPosition: 'center',
            minHeight: 520, position: 'relative',
          }}>
            <div style={{
              position: 'absolute', top: 24, left: 24,
              background: bColors.green, color: '#fff',
              padding: '8px 14px', fontFamily: "'DM Mono', monospace",
              fontSize: 11, letterSpacing: '0.1em',
            }}>06 — COMPROMISO SOCIAL</div>
          </div>
          <div style={{ padding: '64px 56px' }}>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 300, fontSize: 52, lineHeight: 1.04,
              margin: '0 0 28px', letterSpacing: '-0.02em',
              whiteSpace: 'pre-line', color: '#fff',
            }}>{C.commitment.title}</h2>
            <p style={{ fontSize: 15.5, lineHeight: 1.7, color: 'rgba(255,255,255,0.7)', marginBottom: 36 }}>{C.commitment.body}</p>

            <div>
              {C.commitment.points.map((p, i) => (
                <div key={p.title} style={{
                  display: 'grid', gridTemplateColumns: '40px 1fr',
                  padding: '20px 0', gap: 20,
                  borderTop: '1px solid rgba(255,255,255,0.15)',
                }}>
                  <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, color: bColors.green, letterSpacing: '0.1em', paddingTop: 4 }}>0{i+1}</div>
                  <div>
                    <h4 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 22, fontWeight: 400, margin: '0 0 6px', color: '#fff' }}>{p.title}</h4>
                    <p style={{ fontSize: 13.5, lineHeight: 1.55, color: 'rgba(255,255,255,0.6)', margin: 0 }}>{p.desc}</p>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>
    );
  }

  // ─────────── CONTACT / CTA ───────────
  function ContactB() {
    return (
      <section style={{ background: bColors.green, color: '#fff', padding: '120px 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 96 }}>
          <div>
            <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, letterSpacing: '0.14em', color: '#003d09', marginBottom: 24 }}>07 — CONTACTO</div>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 300, fontSize: 80, lineHeight: 1.0,
              margin: '0 0 32px', letterSpacing: '-0.025em',
              whiteSpace: 'pre-line', color: '#fff',
            }}>{C.contact.title}</h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'rgba(0,40,8,0.85)', maxWidth: 500, marginBottom: 40 }}>{C.contact.body}</p>
            <button style={{
              background: bColors.text, color: '#fff', border: 'none',
              padding: '20px 36px', fontSize: 13, fontWeight: 500,
              letterSpacing: '0.14em', textTransform: 'uppercase', cursor: 'pointer',
              borderRadius: 999, display: 'inline-flex', alignItems: 'center', gap: 12,
            }}>{C.hero.cta} <span>→</span></button>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {[
              { label: 'Oficina', value: C.contact.addr.join(', ') },
              { label: 'Correo', value: C.contact.email },
              { label: 'Teléfono', value: C.contact.phone },
              { label: 'Horario', value: C.contact.hours },
            ].map((item, i) => (
              <div key={item.label} style={{
                padding: '24px 0',
                borderTop: '1px solid rgba(0,0,0,0.18)',
                borderBottom: i === 3 ? '1px solid rgba(0,0,0,0.18)' : 'none',
                display: 'grid', gridTemplateColumns: '120px 1fr', gap: 20,
              }}>
                <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#003d09', fontWeight: 500 }}>{item.label}</div>
                <div style={{ fontSize: 15, color: '#fff', lineHeight: 1.5 }}>{item.value}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // ─────────── FOOTER ───────────
  function FooterB() {
    return (
      <footer style={{ background: bColors.text, color: 'rgba(255,255,255,0.7)', padding: '64px 56px 28px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, marginBottom: 48, paddingBottom: 36, borderBottom: '1px solid rgba(255,255,255,0.12)' }}>
          <div>
            <window.FeijooLogo mode="dark" width={170}/>
            <p style={{ marginTop: 20, fontSize: 13.5, lineHeight: 1.7, color: 'rgba(255,255,255,0.5)', maxWidth: 280 }}>{C.footer.tagline}</p>
          </div>
          {Object.entries(C.footer.links).map(([k, v]) => (
            <div key={k}>
              <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: bColors.green, marginBottom: 16 }}>{k}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 9 }}>
                {v.map(l => <li key={l} style={{ fontSize: 13, color: 'rgba(255,255,255,0.6)' }}>{l}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'rgba(255,255,255,0.35)' }}>
          <span>© 2025 Feijoo Energy S.L. · CIF B12345678</span>
          <span style={{ fontFamily: "'DM Mono', monospace", letterSpacing: '0.1em' }}>v.2025.05 — A CORUÑA</span>
        </div>
      </footer>
    );
  }

  function VariantB() {
    return (
      <div style={{
        width: W, background: bColors.bg, color: bColors.text,
        fontFamily: "'DM Sans', sans-serif", fontSize: 15,
      }}>
        <NavB/>
        <HeroB/>
        <AboutB/>
        <ServicesB/>
        <TeamB/>
        <CommitmentB/>
        <ContactB/>
        <window.KitDigitalFooter theme="dark" accent={bColors.green}/>
      </div>
    );
  }

  window.VariantB = VariantB;
})();