// Página Quienes Somos
const THEME_URI = window.THEME_URI || (window.WP_DATA ? window.WP_DATA.themeUri : '');

const QSHero = () => (
  <section className="qs-hero container">
    <div className="qs-hero-grid">
      <div className="qs-hero-left">
        <span className="eyebrow reveal" data-delay="0">Agencia El Bocha — Equipo</span>
        <h1 className="reveal" data-delay="0.1">
          Más que<br/>una agencia,<br/><span className="serif">somos tu equipo.</span>
        </h1>
        <p className="qs-hero-desc reveal" data-delay="0.2">
          Contamos con profesionales de tercer y cuarto nivel en Marketing Digital, Publicidad, Periodismo y Comunicación. Un equipo dinámico, creativo y recursivo que se preocupa genuinamente por sus clientes.
        </p>
        <div className="qs-hero-stats reveal" data-delay="0.3">
          <div className="qs-stat">
            <div className="qs-stat-v">10<span>+</span></div>
            <div className="qs-stat-l">Años de<br/>experiencia</div>
          </div>
          <div className="qs-stat-sep"/>
          <div className="qs-stat">
            <div className="qs-stat-v">150<span>+</span></div>
            <div className="qs-stat-l">Proyectos<br/>realizados</div>
          </div>
          <div className="qs-stat-sep"/>
          <div className="qs-stat">
            <div className="qs-stat-v">30<span>+</span></div>
            <div className="qs-stat-l">Clientes<br/>satisfechos</div>
          </div>
        </div>
      </div>
      <div className="qs-hero-right reveal" data-delay="0.15">
        <div className="qs-hero-img-frame">
          <img src={THEME_URI + '/src/images/Equipo-landing-page.png'} alt="Equipo Agencia El Bocha"/>
          <div className="qs-hero-badge">
            <p>Fundada en</p>
            <strong>2016</strong>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const QSBocha = () => (
  <section className="qs-bocha container">
    <div className="qs-bocha-grid">
      <div className="qs-bocha-img-wrap reveal">
        <img src={THEME_URI + '/src/images/CEO-hero-bocha.png'} alt="Edison El Bocha Ramírez" className="qs-bocha-img"/>
        <div className="qs-bocha-line"/>
      </div>
      <div className="qs-bocha-right">
        <div className="qs-bocha-content reveal">
          <span className="qs-section-label">Fundador &amp; Director</span>
          <h2>Edison<br/>"El Bocha"<br/>Ramírez</h2>
          <p className="qs-bocha-role">Ing. Gestión Empresarial y Mercadeo · Énfasis en Finanzas</p>
        </div>
        <div className="qs-bocha-body reveal" data-delay="0.1">
          <p className="qs-bocha-bio">
            Ejecutivo con más de 25 años de experiencia y resultados probados en desarrollo e implementación estratégica, planificación financiera, ventas, mercadeo, tesorería y reingeniería de procesos. Ha liderado equipos de alto rendimiento en ambientes multiculturales, en importantes empresas nacionales y multinacionales.
          </p>
          <div className="qs-tags">
            {['Liderazgo Ejecutivo','Estrategia Digital','Planificación Financiera','Marketing','Ventas'].map((t,i) => (
              <span key={i} className="qs-tag">{t}</span>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);

const QSVideo = () => (
  <section className="qs-video container">
    <div className="qs-video-grid">
      <div className="qs-video-text reveal">
        <span className="qs-section-label">Conócenos</span>
        <h2>Más de 25 años<br/>de experiencia,<br/><span className="serif">en un solo video</span></h2>
        <p>Descubre quiénes somos, qué nos mueve y cómo trabajamos día a día para transformar la presencia digital de nuestros clientes en resultados reales.</p>
      </div>
      <div className="qs-video-embed reveal" data-delay="0.1">
        <iframe
          src="https://www.youtube.com/embed/_4a9Itc3CLE"
          title="Presentación Agencia El Bocha"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen={true}
        />
      </div>
    </div>
  </section>
);

const QSMisionVision = () => (
  <section className="qs-misionvision container">
    <div className="section-hd">
      <div className="lhs reveal">
        <span className="num">— Propósito</span>
        <h2>Misión &amp; <span className="serif">Visión</span></h2>
      </div>
    </div>
    <div className="qs-mv-grid">
      <div className="qs-mv-card liquid-glass reveal">
        <span className="qs-mv-label">Misión</span>
        <p>Generar y producir soluciones ajustadas a las necesidades de Comunicación, Publicidad y Marketing de nuestros clientes, cumpliendo a cabalidad con los objetivos marcados, por medio de la seriedad y profesionalismo que nos caracteriza.</p>
      </div>
      <div className="qs-mv-card liquid-glass reveal" data-delay="0.1">
        <span className="qs-mv-label">Visión</span>
        <p>Ser una Agencia reconocida a nivel nacional por su prestigio y cumplimiento en la prestación de servicios publicitarios, enlazando estrategias de Comunicación y Marketing totalmente efectivas que permiten a nuestros clientes alcanzar el éxito en cualquier mercado competitivo y posicionar su marca.</p>
      </div>
    </div>
  </section>
);

const QSValores = () => (
  <section className="qs-valores container">
    <div className="section-hd">
      <div className="lhs reveal">
        <span className="num">— Valores</span>
        <h2>Los principios<br/><span className="serif">que nos guían</span></h2>
      </div>
      <div className="rhs reveal" data-delay="0.1">
        <p>Los principios que guían cada decisión que tomamos para nuestros clientes y nuestro equipo.</p>
      </div>
    </div>
    <div className="qs-valores-grid">
      {VALUES.map((v, i) => (
        <div key={i} className="qs-valor-card liquid-glass reveal" data-delay={i * 0.1}>
          <div className="qs-valor-num">{v.num}</div>
          <h3>{v.name}</h3>
          <p>{v.desc}</p>
        </div>
      ))}
    </div>
  </section>
);

const QSEquipo = () => (
  <section className="qs-equipo container">
    <div className="section-hd" style={{gridTemplateColumns: '3fr 2fr'}}>
      <div className="lhs reveal">
        <span className="num">— El equipo</span>
        <h2>Personas reales<br/><span className="serif">detrás de cada resultado</span></h2>
      </div>
      <div className="rhs reveal" data-delay="0.1">
        <p>Somos un equipo de expertos apasionados por el marketing digital, con años de experiencia en la industria.</p>
      </div>
    </div>
    <div className="qs-equipo-grid">
      {TEAM.map((m, i) => (
        <div key={i} className="qs-miembro reveal" data-delay={i * 0.08}>
          <div className="qs-miembro-img">
            <img src={m.img} alt={m.name}/>
          </div>
          <div className="qs-miembro-name">{m.name}</div>
          <div className="qs-miembro-role">{m.role}</div>
        </div>
      ))}
    </div>
  </section>
);

const QSFilosofia = () => (
  <section className="qs-filosofia container">
    <div className="qs-filosofia-grid">
      <div className="qs-filosofia-text reveal">
        <span className="qs-section-label">Nuestra filosofía</span>
        <h2>Más que clientes,<br/><span className="serif">son familia</span></h2>
        <p>Para nosotros, cada cliente es único y especial. Nos enorgullece brindar un servicio personalizado y cercano, como si fueran miembros de nuestra propia familia.</p>
        <p style={{marginTop:16}}>Nos involucramos profundamente en sus proyectos, celebramos sus logros y superamos juntos los desafíos. Su satisfacción es nuestra mayor recompensa.</p>
        <a href={`https://wa.me/593991810190?text=${encodeURIComponent('Hola, me gustaría trabajar con Agencia El Bocha. ¿Podemos conversar?')}`} target="_blank" rel="noopener" className="btn btn-red" style={{marginTop:32, alignSelf:'flex-start'}}>
          Trabajemos juntos <img src={THEME_URI + '/src/images/Logo_Whatsapp_CTA.png'} alt="WhatsApp" style={{height: '15px', width: 'auto'}}/>
        </a>
      </div>
      <div className="qs-filosofia-visual reveal" data-delay="0.1">
        <div className="qs-filosofia-img-wrap">
          <img src={THEME_URI + '/src/images/logo-el-bocha.png'} alt="Logo El Bocha" style={{objectFit:'contain', background:'transparent'}}/>
        </div>
      </div>
    </div>
  </section>
);

const AppQS = () => {
  useReveal();
  return (
    <div className="wrap">
      <Navbar activePage="quienes-somos" />
      <QSHero/>
      <QSBocha/>
      <QSVideo/>
      <QSMisionVision/>
      <QSValores/>
      <QSEquipo/>
      <QSFilosofia/>
      <Footer />
      <WaFloat/>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById('root')).render(<AppQS/>);