/* Home Page sections for LK Mejia */

const HeroSection = ({ setPage }) => (
  <div style={{ background: 'var(--bg)', overflow: 'hidden', position: 'relative' }}>
    {/* Image with overlay */}
    <div style={{ position: 'relative', width: '100%' }}>
      <img
        src="assets/hero-pastry.png"
        alt="Repostería LK Mejia"
        style={{ width: '100%', height: 'clamp(360px, 45vw, 520px)', objectFit: 'cover', objectPosition: 'center top', display: 'block' }}
      />
      {/* Left fade */}
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(to right, var(--bg) 28%, rgba(245,240,235,0.82) 52%, rgba(245,240,235,0.15) 78%, transparent 100%)' }}></div>
      {/* Bottom fade */}
      <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: 100, background: 'linear-gradient(to top, var(--bg), transparent)' }}></div>
      {/* Mobile: stronger overlay so text is readable */}
      <div className="hero-mobile-overlay" style={{ position: 'absolute', inset: 0, background: 'rgba(245,240,235,0.55)', display: 'none' }}></div>

      {/* Content overlaid */}
      <div className="container" style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center' }}>
        <div style={{ maxWidth: 560 }}>
          <div className="hero-chips-row" style={{ display: 'flex', gap: 8, marginBottom: 16, flexWrap: 'wrap' }}>
            <span className="sec-label sec-label-green" style={{ margin: 0 }}>Bogotá, Colombia</span>
            <span className="sec-label sec-label-orange" style={{ margin: 0 }}>Escuela · Tienda</span>
          </div>
          <h1 style={{ marginBottom: 14 }}>Aprende y <span style={{ color: 'var(--or)' }}>emprende</span><br/>con LK</h1>
          <span className="heading-bar" style={{ background: 'var(--or)' }}></span>
          <p className="hero-desc" style={{ fontSize: 'clamp(14px,1.3vw,17px)', maxWidth: 460, marginBottom: 24, lineHeight: 1.65 }}>
            La única escuela de repostería en Bogotá donde <strong style={{ color: 'var(--t1)' }}>tú participas activamente</strong> en cada técnica.
          </p>
          <div style={{ display: 'flex', gap: 10, marginBottom: 20, flexWrap: 'wrap' }}>
            <button className="btn btn-lg btn-green" onClick={() => setPage('academia')}>
              <Icon name="book" size={15} color="#fff" /> Ver Talleres
            </button>
            <button className="btn btn-lg btn-orange" onClick={() => setPage('tienda')}>
              <Icon name="cart" size={15} color="#fff" /> Comprar Insumos
            </button>
          </div>
        </div>
      </div>
    </div>
    {/* Stats row BELOW hero image — always visible */}
    <div className="container" style={{ paddingTop: 16, paddingBottom: 20 }}>
      <div style={{ display: 'flex', gap: 20, flexWrap: 'wrap', justifyContent: 'flex-start' }}>
        {[
          { icon: 'users', num: '+4.000', lbl: 'Estudiantes' },
          { icon: 'award', num: '+500', lbl: 'Talleres Realizados' },
          { icon: 'star', num: '4.6★', lbl: 'Calificación' },
        ].map((s, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
            <Icon name={s.icon} size={16} color="var(--gr)" />
            <div>
              <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 15, color: 'var(--t1)' }}>{s.num}</div>
              <div style={{ fontSize: 11, color: 'var(--t3)' }}>{s.lbl}</div>
            </div>
          </div>
        ))}
      </div>
    </div>
  </div>
);


const WhySection = () => {
  const cards = [
  { icon: 'check', title: 'Asesoría técnica real', desc: 'No vendemos por vender. Te recomendamos exactamente lo que necesitas, basados en conocimiento real.', bg: 'var(--or-lt)', ic: 'var(--or)' },
  { icon: 'users', title: 'Grupos pequeños', desc: 'Talleres con máximo 6 personas. Cada estudiante participa activamente en cada proceso.', bg: 'var(--gr-lt)', ic: 'var(--gr)' },
  { icon: 'lightbulb', title: 'Conocimiento', desc: 'Cada producto y taller está respaldado por expertise real y especializado.', bg: '#E8F6FD', ic: '#2a90c0' },
  { icon: 'heart', title: 'Acompañamiento', desc: 'Estamos con el cliente en cada etapa: antes, durante y después.', bg: '#EAF5D6', ic: 'var(--gr)' }];

  return (
    <section style={{ background: '#fff' }}>
      <div className="container">
        <div style={{ textAlign: 'center', marginBottom: 36 }}>
          <span className="sec-label sec-label-orange">¿Por qué LK Mejia?</span>
          <h2>La diferencia está en el <span style={{ color: 'var(--or)' }}>acompañamiento</span></h2>
          <span className="heading-bar" style={{ background: 'var(--or)', margin: '10px auto 20px' }}></span>
        </div>
        <div className="grid-4">
          {cards.map((c, i) =>
          <div key={i} style={{ background: c.bg, borderRadius: 'var(--r-lg)', padding: '22px 20px' }}>
              <div style={{ width: 40, height: 40, borderRadius: 10, display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#fff', marginBottom: 14 }}>
                <Icon name={c.icon} size={20} color={c.ic} />
              </div>
              <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 15, color: 'var(--t1)', marginBottom: 7 }}>{c.title}</div>
              <div style={{ fontSize: 13, color: 'var(--t2)', lineHeight: 1.55 }}>{c.desc}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const QuoteSection = () =>
<div style={{ background: '#fff', padding: '48px 0' }}>
    <div className="container">
      <div style={{ maxWidth: 720, margin: '0 auto', background: '#fff', border: '1px solid var(--bd)', borderRadius: 20, padding: '40px 48px', textAlign: 'center', boxShadow: 'var(--sh)' }}>
        <span style={{ fontFamily: 'Georgia,serif', fontSize: 56, lineHeight: 1, color: 'var(--gr)', display: 'block', marginBottom: 8 }}>"</span>
        <p style={{ fontSize: 20, color: 'var(--t1)', fontWeight: 500, lineHeight: 1.6, marginBottom: 24, fontFamily: 'var(--font-d)' }}>
          Te acompañamos de principio a fin. Nuestra recomendación siempre estará basada en lo que realmente necesitas, no en <em style={{ color: 'var(--or)' }}>el tamaño de tu compra.</em>
        </p>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 12 }}>
          <div style={{ width: 40, height: 40, borderRadius: '50%', background: 'var(--or)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 14, color: '#fff' }}>LK</div>
          <div style={{ textAlign: 'left' }}>
            <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 14, color: 'var(--t1)' }}>Luis Alberto Mejía</div>
            <div style={{ fontSize: 12, color: 'var(--t3)' }}>Fundador, LKA Mejía SAS</div>
          </div>
        </div>
      </div>
    </div>
  </div>;


const HistoriaSection = () => (
  <section style={{ background: 'var(--bg)' }}>
    <div className="container">
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))', gap: 48, alignItems: 'start' }}>
        {/* Photo column — fixed 325×600 */}
        <div style={{ borderRadius: 'var(--r-lg)', overflow: 'hidden', width: '100%', maxWidth: 325, height: 600, position: 'relative', flexShrink: 0 }}>
          <img src="assets/luis-mejia.png" alt="Luis Alberto Mejía" style={{ width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center 15%', display: 'block' }} />
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, height: '55%', background: 'linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.55) 50%, transparent 100%)' }}></div>
          <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, padding: '16px 18px' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
              <div style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--or)', flexShrink: 0 }}></div>
              <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 13, color: '#fff', textShadow: '0 1px 4px rgba(0,0,0,0.6)' }}>Luis Alberto Mejía</div>
              <div style={{ fontSize: 11, color: 'rgba(255,255,255,0.75)' }}>· Fundador</div>
            </div>
            <p style={{ fontStyle: 'italic', fontSize: 13, color: '#fff', lineHeight: 1.6, margin: 0, textShadow: '0 1px 6px rgba(0,0,0,0.7)', fontWeight: 500 }}>
              "Quería ver a Colombia convertirse en un referente mundial de repostería de calidad."
            </p>
          </div>
        </div>

        {/* Text column */}
        <div>
          <span className="sec-label sec-label-green">Nuestra Historia</span>
          <h2>Más que una tienda, un <span style={{ color: 'var(--or)' }}>ecosistema</span></h2>
          <span className="heading-bar" style={{ background: 'var(--or)' }}></span>
          <p style={{ marginBottom: 20, fontSize: 15 }}>LKA Mejia SAS nació del espíritu emprendedor de Luis Alberto Mejía. Con amplia experiencia en la venta de insumos para repostería, Luis tomó la decisión de crear su propia comercializadora.</p>
          <p style={{ marginBottom: 24, fontSize: 15 }}>Pronto comprendió que vender excelentes insumos no era suficiente: quería educar a sus clientes para llevar la repostería colombiana a otro nivel.</p>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 20 }}>
            <div style={{ background: 'var(--or-lt)', borderRadius: 'var(--r)', padding: 14 }}>
              <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 12, color: 'var(--or)', display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                <Icon name="clock" size={14} color="var(--or)" /> Misión
              </div>
              <div style={{ fontSize: 12, color: 'var(--t2)', lineHeight: 1.5 }}>Llevar la repostería de cada cliente a un nivel superior, siendo un acompañante determinante.</div>
            </div>
            <div style={{ background: 'var(--gr-lt)', borderRadius: 'var(--r)', padding: 14 }}>
              <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 12, color: 'var(--gr-d)', display: 'flex', alignItems: 'center', gap: 6, marginBottom: 6 }}>
                <Icon name="globe" size={14} color="var(--gr-d)" /> Visión
              </div>
              <div style={{ fontSize: 12, color: 'var(--t2)', lineHeight: 1.5 }}>Ser el referente #1 educativo y de venta de insumos en Bogotá en 5 años, y nacional en 10.</div>
            </div>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
            {[
              { name: 'Responsabilidad', desc: 'Cumplimos cada promesa al cliente.', c: 'var(--or)' },
              { name: 'Honestidad', desc: 'Recomendamos lo que genuinamente beneficia al cliente, no lo que genera mayor venta.', c: 'var(--gr)' },
              { name: 'Conocimiento', desc: 'Expertise real detrás de cada producto y taller.', c: '#89CFF0' },
              { name: 'Acompañamiento', desc: 'Estamos con el cliente en cada etapa: antes, durante y después.', c: '#FFB347' },
            ].map((v, i) => (
              <div key={i} style={{ display: 'flex', gap: 8, alignItems: 'flex-start' }}>
                <div style={{ width: 8, height: 8, borderRadius: '50%', background: v.c, flexShrink: 0, marginTop: 4 }}></div>
                <div>
                  <div style={{ fontFamily: 'var(--font-d)', fontWeight: 700, fontSize: 13, color: 'var(--t1)' }}>{v.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--t3)', lineHeight: 1.4 }}>{v.desc}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  </section>
);


Object.assign(window, { HeroSection, WhySection, QuoteSection, HistoriaSection });