// VARIANT C — "Editorial Premium"
// Más oscura y dramática: hero a sangre con imagen + overlay, secciones negras
// alternadas con crema, números masivos en Cormorant, presencia geográfica
// destacada. Inspiración: informes anuales de utilities top tier.

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

  const cColors = {
    bg: '#0a0a0a',
    cream: '#f5f4ee',
    white: '#fdfcf9',
    border: '#1f1f1f',
    borderLight: '#dad8cc',
    text: '#fafaf8',
    textDark: '#0f0f0f',
    muted: 'rgba(255,255,255,0.55)',
    mutedDark: '#6b6b6b',
    green: '#00b31b',
    greenBright: '#1ad437',
    greenDark: '#005a0d',
  };

  // ─────────── NAV ───────────
  function NavC() {
    return (
      <header style={{
        position: 'absolute', top: 0, left: 0, right: 0, zIndex: 10,
        padding: '28px 56px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <window.FeijooLogo mode="mono-light" width={140}/>
        <nav style={{ display: 'flex', gap: 32, alignItems: 'center' }}>
          {C.nav.map(item => (
            <a key={item} style={{
              fontSize: 12, color: 'rgba(255,255,255,0.85)',
              textDecoration: 'none', fontWeight: 400, letterSpacing: '0.06em',
              textTransform: 'uppercase',
            }}>{item}</a>
          ))}
          <span style={{ width: 1, height: 16, background: 'rgba(255,255,255,0.2)' }}/>
          <a style={{ fontSize: 12, color: cColors.green, letterSpacing: '0.06em', textTransform: 'uppercase', fontWeight: 500 }}>ES · EN</a>
        </nav>
      </header>
    );
  }

  // ─────────── HERO ───────────
  function HeroC() {
    return (
      <section style={{ position: 'relative', height: 880, color: cColors.text, overflow: 'hidden', background: cColors.bg }}>
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `url(${I.heroLandscape})`,
          backgroundSize: 'cover', backgroundPosition: 'center 60%',
          filter: 'brightness(0.55) saturate(0.85)',
        }}/>
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(10,10,10,0.50) 0%, rgba(10,10,10,0.15) 30%, rgba(10,10,10,0.95) 100%)',
        }}/>

        <NavC/>

        {/* Side index */}
        <div style={{
          position: 'absolute', left: 56, top: '50%', transform: 'translateY(-50%)',
          zIndex: 3, fontFamily: "'DM Mono', monospace", fontSize: 11,
          color: 'rgba(255,255,255,0.5)', letterSpacing: '0.12em',
        }}>
          <div style={{ writingMode: 'vertical-rl', transform: 'rotate(180deg)' }}>
            01 — INICIO
          </div>
        </div>

        <div style={{
          position: 'absolute', left: 0, right: 0, bottom: 0,
          zIndex: 2, padding: '0 56px 64px 56px',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
            <span style={{ width: 8, height: 8, borderRadius: '50%', background: cColors.green }}/>
            <span style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, letterSpacing: '0.16em', color: 'rgba(255,255,255,0.7)' }}>{C.hero.eyebrow}</span>
          </div>
          <h1 style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontWeight: 300, fontSize: 132, lineHeight: 0.92,
            margin: '0 0 32px', letterSpacing: '-0.03em', maxWidth: 1200,
          }}>
            {C.hero.title[0]}<br/>
            <span style={{ color: 'rgba(255,255,255,0.55)' }}>{C.hero.title[1]}</span><br/>
            <em style={{ fontStyle: 'italic', color: cColors.green }}>{C.hero.titleItalic}</em>
          </h1>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 48 }}>
            <p style={{ fontSize: 16, lineHeight: 1.7, color: 'rgba(255,255,255,0.7)', maxWidth: 520, margin: 0 }}>{C.hero.desc}</p>
            <div style={{ display: 'flex', gap: 14 }}>
              <button style={{
                background: cColors.green, color: '#fff', border: 'none',
                padding: '18px 28px', fontSize: 12, fontWeight: 500,
                letterSpacing: '0.16em', textTransform: 'uppercase', cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 16,
              }}>{C.hero.cta} <span style={{ fontSize: 16 }}>→</span></button>
              <button style={{
                background: 'rgba(255,255,255,0.08)', backdropFilter: 'blur(6px)',
                color: '#fff', border: '1px solid rgba(255,255,255,0.25)',
                padding: '18px 24px', fontSize: 12, fontWeight: 500,
                letterSpacing: '0.16em', textTransform: 'uppercase', cursor: 'pointer',
              }}>{C.hero.ctaSecondary}</button>
            </div>
          </div>
        </div>

        {/* tiny bottom meta strip */}
        <div style={{
          position: 'absolute', bottom: 16, right: 56, zIndex: 2,
          fontFamily: "'DM Mono', monospace", fontSize: 10,
          color: 'rgba(255,255,255,0.35)', letterSpacing: '0.12em',
        }}>SCROLL ↓ · 06 SECCIONES</div>
      </section>
    );
  }

  // ─────────── HUGE STATS / NUMBERS ───────────
  function NumbersC() {
    return (
      <section style={{ background: cColors.bg, color: cColors.text, padding: '120px 56px', borderBottom: `1px solid ${cColors.border}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 96, marginBottom: 80 }}>
          <div>
            <window.Eyebrow color={cColors.green}>02 — Cifras</window.Eyebrow>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 300, fontSize: 56, lineHeight: 1.02,
              margin: '24px 0 0', letterSpacing: '-0.02em', color: '#fff',
            }}>{C.about.title}</h2>
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.75, color: 'rgba(255,255,255,0.65)', alignSelf: 'end', maxWidth: 560 }}>{C.about.body}</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {C.about.stats.map((s, i) => (
            <div key={s.label} style={{
              padding: '40px 32px 0 0',
              borderTop: '1px solid rgba(255,255,255,0.2)',
              borderRight: i < 3 ? '1px solid rgba(255,255,255,0.12)' : 'none',
              paddingLeft: i === 0 ? 0 : 32,
            }}>
              <div style={{
                fontFamily: "'Cormorant Garamond', serif",
                fontSize: 144, fontWeight: 300, lineHeight: 0.85,
                color: i === 0 ? cColors.green : '#fff',
                letterSpacing: '-0.04em',
              }}>{s.value}</div>
              <div style={{
                marginTop: 28, paddingTop: 14,
                fontSize: 12, letterSpacing: '0.16em',
                textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)',
              }}>{s.label}</div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  // ─────────── SERVICES (vertical list, large) ───────────
  function ServicesC() {
    const imgs = [I.windField, I.solarPanels, I.battery, I.hydrogen];
    return (
      <section style={{ background: cColors.cream, padding: '120px 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96, marginBottom: 80, alignItems: 'end' }}>
          <div>
            <window.Eyebrow color={cColors.green}>03 — Servicios</window.Eyebrow>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 300, fontSize: 72, lineHeight: 1.0,
              margin: '24px 0 0', letterSpacing: '-0.025em',
              whiteSpace: 'pre-line', color: cColors.textDark,
            }}>{C.services.title}</h2>
          </div>
          <p style={{ fontSize: 16.5, lineHeight: 1.75, color: '#3a3a3a', maxWidth: 580, margin: 0 }}>{C.services.intro}</p>
        </div>

        <div>
          {C.services.items.map((s, i) => (
            <article key={s.id} style={{
              display: 'grid', gridTemplateColumns: '80px 1.2fr 1fr 320px 80px',
              gap: 32, alignItems: 'center',
              padding: '36px 0',
              borderTop: i === 0 ? `1px solid ${cColors.borderLight}` : 'none',
              borderBottom: `1px solid ${cColors.borderLight}`,
            }}>
              <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 12, color: cColors.green, letterSpacing: '0.1em' }}>— {s.id}</div>
              <h3 style={{
                fontFamily: "'Cormorant Garamond', serif",
                fontSize: 44, fontWeight: 400, margin: 0,
                letterSpacing: '-0.015em', color: cColors.textDark,
              }}>{s.name}</h3>
              <p style={{ fontSize: 14.5, lineHeight: 1.6, color: '#3a3a3a', margin: 0 }}>{s.desc}</p>
              <div style={{
                height: 100,
                backgroundImage: `url(${imgs[i]})`,
                backgroundSize: 'cover', backgroundPosition: 'center',
              }}/>
              <div style={{ fontSize: 22, color: cColors.green, textAlign: 'right' }}>→</div>
            </article>
          ))}
        </div>
      </section>
    );
  }

  // ─────────── PRESENCE (geographic) ───────────
  function PresenceC() {
    return (
      <section style={{ background: cColors.bg, color: '#fff', padding: '120px 56px', borderTop: `1px solid ${cColors.border}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, marginBottom: 64 }}>
          <div>
            <window.Eyebrow color={cColors.green}>04 — Presencia</window.Eyebrow>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 300, fontSize: 64, lineHeight: 1.02,
              margin: '24px 0 0', letterSpacing: '-0.02em',
              whiteSpace: 'pre-line', color: '#fff',
            }}>{C.presence.title}</h2>
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.75, color: 'rgba(255,255,255,0.6)', alignSelf: 'end', maxWidth: 480 }}>
            Operamos con equipos locales en cada país, no con consultores en remoto. Esa es la única forma de construir relaciones de largo plazo con el territorio.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0 }}>
          {C.presence.countries.map((c, i) => (
            <div key={c.code} style={{
              padding: '32px 28px 32px 0',
              borderTop: `1px solid rgba(255,255,255,0.2)`,
              borderRight: i < 3 ? `1px solid rgba(255,255,255,0.1)` : 'none',
              paddingLeft: i === 0 ? 0 : 28,
              position: 'relative',
            }}>
              <div style={{
                fontFamily: "'DM Mono', monospace", fontSize: 11,
                color: cColors.green, letterSpacing: '0.1em', marginBottom: 24,
              }}>{c.code} — {c.since}</div>
              <h3 style={{
                fontFamily: "'Cormorant Garamond', serif",
                fontSize: 36, fontWeight: 400, margin: '0 0 6px',
                color: '#fff', letterSpacing: '-0.01em',
              }}>{c.name}</h3>
              <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.65)', marginBottom: 16 }}>{c.city}</div>
              <div style={{
                paddingTop: 16, borderTop: '1px solid rgba(255,255,255,0.12)',
                fontSize: 12, color: 'rgba(255,255,255,0.55)', letterSpacing: '0.04em',
              }}>{c.detail}</div>
            </div>
          ))}
        </div>
      </section>
    );
  }

  // ─────────── TEAM ───────────
  function TeamC() {
    return (
      <section style={{ background: cColors.bg, color: '#fff', padding: '120px 56px', borderTop: `1px solid ${cColors.border}` }}>
        <div style={{ marginBottom: 64 }}>
          <window.Eyebrow color={cColors.green}>05 — Equipo</window.Eyebrow>
          <h2 style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontWeight: 300, fontSize: 64, lineHeight: 1.02,
            margin: '24px 0 0', letterSpacing: '-0.02em', color: '#fff',
          }}>{C.team.title}</h2>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0, border: '1px solid rgba(255,255,255,0.15)' }}>
          {C.team.members.map((m, i) => (
            <article key={m.name} style={{
              padding: '48px 40px',
              borderRight: i === 0 ? '1px solid rgba(255,255,255,0.15)' : 'none',
              display: 'grid', gridTemplateColumns: '180px 1fr', gap: 32, alignItems: 'start',
            }}>
              <window.AvatarInitials initials={m.initials} bg={i === 0 ? cColors.greenDark : '#1a1a1a'} fg={i === 0 ? '#fff' : cColors.green} size={180}/>
              <div>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 11, color: cColors.green, letterSpacing: '0.1em', marginBottom: 12 }}>FUNDADOR · 0{i+1}</div>
                <h3 style={{
                  fontFamily: "'Cormorant Garamond', serif",
                  fontSize: 32, fontWeight: 400, margin: '0 0 4px',
                  color: '#fff', letterSpacing: '-0.01em',
                }}>{m.name}</h3>
                <div style={{ fontSize: 11.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginBottom: 24 }}>{m.role}</div>
                <p style={{ fontSize: 14, lineHeight: 1.65, color: 'rgba(255,255,255,0.7)', margin: 0 }}>{m.bio}</p>
              </div>
            </article>
          ))}
        </div>
      </section>
    );
  }

  // ─────────── COMMITMENT (cream block with quote) ───────────
  function CommitmentC() {
    return (
      <section style={{ background: cColors.cream, padding: '120px 56px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 64, alignItems: 'start', marginBottom: 64 }}>
          <div>
            <window.Eyebrow color={cColors.green}>06 — Compromiso</window.Eyebrow>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 300, fontSize: 84, lineHeight: 0.98,
              margin: '24px 0 0', letterSpacing: '-0.03em',
              whiteSpace: 'pre-line', color: cColors.textDark,
            }}>{C.commitment.title}</h2>
          </div>
          <div style={{
            backgroundImage: `url(${I.community})`,
            backgroundSize: 'cover', backgroundPosition: 'center',
            minHeight: 340, position: 'relative',
          }}>
            <div style={{
              position: 'absolute', bottom: 16, left: 16,
              background: 'rgba(0,0,0,0.65)', color: '#fff',
              padding: '8px 14px', fontFamily: "'DM Mono', monospace",
              fontSize: 11, letterSpacing: '0.08em',
            }}>↳ COMUNIDAD · A CORUÑA</div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.2fr 2fr', gap: 96 }}>
          <p style={{
            fontFamily: "'Cormorant Garamond', serif", fontStyle: 'italic',
            fontSize: 28, lineHeight: 1.4, color: cColors.textDark, margin: 0,
            fontWeight: 300,
          }}>
            "Un proyecto renovable solo es viable cuando crea valor para las comunidades donde se asienta."
            <span style={{ display: 'block', fontStyle: 'normal', fontFamily: "'DM Mono', monospace", fontSize: 11, letterSpacing: '0.14em', color: cColors.green, marginTop: 16, textTransform: 'uppercase' }}>— Equipo Feijoo Energy</span>
          </p>
          <div style={{ display: 'grid', gap: 0 }}>
            {C.commitment.points.map((p, i) => (
              <div key={p.title} style={{
                padding: '28px 0',
                borderTop: `1px solid ${cColors.borderLight}`,
                borderBottom: i === 2 ? `1px solid ${cColors.borderLight}` : 'none',
                display: 'grid', gridTemplateColumns: '60px 1fr 100px', gap: 24, alignItems: 'baseline',
              }}>
                <div style={{ fontFamily: "'DM Mono', monospace", fontSize: 12, color: cColors.green, letterSpacing: '0.1em' }}>0{i+1}</div>
                <div>
                  <h4 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 28, fontWeight: 400, margin: '0 0 8px', color: cColors.textDark }}>{p.title}</h4>
                  <p style={{ fontSize: 14, lineHeight: 1.6, color: '#3a3a3a', margin: 0 }}>{p.desc}</p>
                </div>
                <div style={{ textAlign: 'right', fontSize: 22, color: cColors.green }}>→</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // ─────────── CONTACT (big editorial) ───────────
  function ContactC() {
    return (
      <section style={{ background: cColors.bg, color: '#fff', padding: '120px 56px', position: 'relative', overflow: 'hidden' }}>
        <div style={{
          position: 'absolute', top: 0, right: -80, width: 600, height: 600,
          background: 'radial-gradient(circle, rgba(0,179,27,0.12) 0%, transparent 65%)',
          pointerEvents: 'none',
        }}/>
        <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 0.7fr', gap: 96 }}>
          <div>
            <window.Eyebrow color={cColors.green}>07 — Contacto</window.Eyebrow>
            <h2 style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontWeight: 300, fontSize: 120, lineHeight: 0.92,
              margin: '24px 0 32px', letterSpacing: '-0.03em',
              whiteSpace: 'pre-line', color: '#fff',
            }}>{C.contact.title}</h2>
            <p style={{ fontSize: 17, lineHeight: 1.7, color: 'rgba(255,255,255,0.7)', maxWidth: 540, marginBottom: 48 }}>{C.contact.body}</p>
            <button style={{
              background: cColors.green, color: '#fff', border: 'none',
              padding: '22px 36px', fontSize: 13, fontWeight: 500,
              letterSpacing: '0.16em', textTransform: 'uppercase', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 18,
            }}>{C.hero.cta} <span style={{ fontSize: 18 }}>→</span></button>
          </div>
          <div style={{ paddingTop: 80 }}>
            {[
              { label: 'Oficina', value: C.contact.addr.join('\n') },
              { 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(255,255,255,0.2)',
                borderBottom: i === 3 ? '1px solid rgba(255,255,255,0.2)' : 'none',
              }}>
                <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: cColors.green, marginBottom: 8, fontWeight: 500 }}>{item.label}</div>
                <div style={{ fontSize: 16, color: '#fff', lineHeight: 1.5, whiteSpace: 'pre-line' }}>{item.value}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  // ─────────── FOOTER ───────────
  function FooterC() {
    return (
      <footer style={{ background: '#000', color: 'rgba(255,255,255,0.6)', padding: '64px 56px 32px', borderTop: `1px solid ${cColors.border}` }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, marginBottom: 48, paddingBottom: 36, borderBottom: '1px solid rgba(255,255,255,0.1)' }}>
          <div>
            <window.FeijooLogo mode="dark" width={160}/>
            <p style={{ marginTop: 20, fontSize: 13, lineHeight: 1.7, color: 'rgba(255,255,255,0.45)', maxWidth: 280 }}>{C.footer.tagline}</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 24 }}>
              {['LI', 'IG', '×'].map(s => (
                <div key={s} style={{
                  width: 36, height: 36, border: '1px solid rgba(255,255,255,0.2)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 11, color: 'rgba(255,255,255,0.6)',
                }}>{s}</div>
              ))}
            </div>
          </div>
          {Object.entries(C.footer.links).map(([k, v]) => (
            <div key={k}>
              <div style={{ fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase', color: cColors.green, marginBottom: 16 }}>{k}</div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
                {v.map(l => <li key={l} style={{ fontSize: 13, color: 'rgba(255,255,255,0.55)' }}>{l}</li>)}
              </ul>
            </div>
          ))}
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11.5, color: 'rgba(255,255,255,0.3)', fontFamily: "'DM Mono', monospace", letterSpacing: '0.06em' }}>
          <span>© 2025 FEIJOO ENERGY S.L. — TODOS LOS DERECHOS RESERVADOS</span>
          <span>SITE V.2025.05 · A CORUÑA · 43.37°N 8.39°W</span>
        </div>
      </footer>
    );
  }

  function VariantC() {
    return (
      <div style={{
        width: W, background: cColors.bg, color: cColors.text,
        fontFamily: "'DM Sans', sans-serif", fontSize: 15,
      }}>
        <HeroC/>
        <NumbersC/>
        <ServicesC/>
        <PresenceC/>
        <TeamC/>
        <CommitmentC/>
        <ContactC/>
        <window.KitDigitalFooter theme="dark" accent={cColors.green}/>
      </div>
    );
  }

  window.VariantC = VariantC;
})();
