/* Aseo Casa Express — main shell, header, hero, tweaks */

const { useState, useEffect } = React;

// ============ Tweak defaults ============
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "navy_aqua",
  "style": "modern",
  "hero": "split",
  "logoText": "ACE"
}/*EDITMODE-END*/;

// Palette options — first color = navy, second = aqua/accent
const PALETTES = {
  navy_aqua:   { navy: '#0B2545', navy2: '#13315C', accent: '#14B8A6', accentSoft: '#E0F7F4' },
  navy_coral:  { navy: '#102A43', navy2: '#1B3A6B', accent: '#F87171', accentSoft: '#FEE2E2' },
  royal_gold:  { navy: '#1E3A8A', navy2: '#2563EB', accent: '#F59E0B', accentSoft: '#FEF3C7' },
};

function applyPalette(p) {
  const pal = PALETTES[p] || PALETTES.navy_aqua;
  const r = document.documentElement;
  r.style.setProperty('--navy', pal.navy);
  r.style.setProperty('--navy-2', pal.navy2);
  r.style.setProperty('--accent', pal.accent);
  r.style.setProperty('--accent-soft', pal.accentSoft);
  r.style.setProperty('--aqua', pal.accent);
  r.style.setProperty('--aqua-soft', pal.accentSoft);
}

// ============ Logo ============
function Logo({ size = 44, light = false }) {
  // Corporate logo mark (house + ce monogram). On dark surfaces it sits on a white chip.
  return (
    <span
      className="brand-logo"
      style={{
        width: size,
        height: size,
        background: light ? '#fff' : 'transparent',
        boxShadow: light ? '0 4px 14px rgba(0,0,0,0.18)' : 'none',
        borderRadius: light ? Math.round(size * 0.26) : 0,
        padding: light ? Math.round(size * 0.14) : 0,
        display: 'grid',
        placeItems: 'center',
      }}
    >
      <img
        src="assets/logo-mark.png"
        alt="Aseo Casa Express"
        style={{ width: '100%', height: '100%', objectFit: 'contain', display: 'block' }}
      />
    </span>
  );
}

// ============ Header ============
function Header({ logoText }) {
  return (
    <header className="site-header" data-screen-label="01 Header">
      <div className="container">
        <div className="bar">
          <a href="#" className="brand">
            <Logo size={64}/>
            <span className="brand-text">
              <span className="b1">Aseo Casa Express</span>
              <span className="b2">Bogotá · Desde 2013</span>
            </span>
          </a>
          <nav className="nav">
            <a href="#servicios">Servicios</a>
            <a href="#paquetes">Paquetes</a>
            <a href="#nosotros">Nosotros</a>
            <a href="#cuidado">Novedades</a>
            <a href="#faq">FAQ</a>
            <a href="#unete">Únete</a>
          </nav>
          <div className="header-cta">
            <a className="btn-wa-header" href="https://wa.me/573142931380?text=Hola%2C%20los%20contacto%20desde%20su%20p%C3%A1gina%20web.%20Me%20gustar%C3%ADa%20cotizar%20un%20servicio%20de%20Aseo%20Casa%20Express." target="_blank" rel="noopener" aria-label="WhatsApp">
              <WhatsAppLogo size={22} color="#fff"/>
            </a>
            <a href="#cotizar" className="btn btn-primary"><span className="cta-full">Cotizar ahora</span><span className="cta-short">Cotizar</span></a>
          </div>
        </div>
      </div>
    </header>
  );
}

// ============ Hero ============
const HERO_IMAGES = [
  'assets/hero-1.jpg',
  'assets/hero-2.jpg',
  'assets/hero-3.jpg',
  'assets/hero-4.jpg',
  'assets/hero-5.jpg',
];

function Hero() {
  const [form, setForm] = useState({ tipo: 'Aseo profundo', frecuencia: 'Solo un servicio' });
  const [heroIdx, setHeroIdx] = useState(0);

  useEffect(() => {
    const id = setInterval(() => setHeroIdx(i => (i + 1) % HERO_IMAGES.length), 3000);
    return () => clearInterval(id);
  }, []);

  const submit = (e) => {
    e.preventDefault();
    const el = document.getElementById('cotizar');
    if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 60, behavior: 'smooth' });
  };
  return (
    <section className="hero" data-screen-label="02 Hero">
      <div className="container">
        <div className="hero-grid">
          <div className="hero-art">
            {HERO_IMAGES.map((src, i) => (
              <img
                key={src}
                src={src}
                alt="Funcionarias de Aseo Casa Express con uniforme azul"
                className={'hero-slide' + (i === heroIdx ? ' active' : '')}
                loading={i === 0 ? 'eager' : 'lazy'}
                decoding="async"
                onError={(e)=>{e.target.style.display='none'}}/>
            ))}
            <div className="hero-badge b1">
              <div className="ic"><Icon name="shield" size={22}/></div>
              <div>
                <div className="t1">100% verificadas</div>
                <div className="t2">Antecedentes validados</div>
              </div>
            </div>
            <div className="hero-badge b2">
              <div className="ic"><Icon name="clock" size={22}/></div>
              <div>
                <div className="t1">Disponible</div>
                <div className="t2">Todos los días</div>
              </div>
            </div>
            <div className="hero-slide-dots">
              {HERO_IMAGES.map((_, i) => (
                <button
                  key={i}
                  type="button"
                  className={'dot' + (i === heroIdx ? ' active' : '')}
                  onClick={() => setHeroIdx(i)}
                  aria-label={`Foto ${i + 1}`}/>
              ))}
            </div>
          </div>
          <div className="hero-copy">
            <span className="eyebrow"><span className="dot"></span> Servicio de aseo Profesional en Bogotá</span>
            <h1>Tu hogar siempre impecable, en manos <span className="accent">de confianza</span>.</h1>
            <p className="lead">
              Profesionales en servicio para aseo profundo, o lavado, o planchado o preparación de alimentos.
            </p>
            <div className="hero-cta-row">
              <a href="#cotizar" className="btn btn-primary btn-lg">Cotiza gratis</a>
              <a href="https://wa.me/573142931380?text=Hola%2C%20los%20contacto%20desde%20su%20p%C3%A1gina%20web.%20Me%20gustar%C3%ADa%20cotizar%20un%20servicio%20de%20Aseo%20Casa%20Express." target="_blank" rel="noopener" className="btn btn-whatsapp btn-lg">
                <WhatsAppLogo size={18} color="#fff"/> WhatsApp
              </a>
            </div>

            <form className="quick-quote" onSubmit={submit}>
              <div className="qq-title">Cotización rápida</div>
              <div className="qq-grid">
                <select value={form.tipo} onChange={e => setForm({...form, tipo: e.target.value})}>
                  <option>Aseo profundo</option>
                  <option>Aseo + lavado o planchado</option>
                  <option>Preparación de alimentos</option>
                  <option>Lavado de muebles o lavado de cortinas o lavado de alfombras</option>
                  <option>Cuidadora adulto mayor</option>
                  <option>Cuidadora mascotas</option>
                </select>
                <select value={form.frecuencia} onChange={e => setForm({...form, frecuencia: e.target.value})}>
                  <option>Solo un servicio</option>
                  <option>Días fijos contratados</option>
                  <option>Quincenal</option>
                  <option>Mensual</option>
                </select>
                <input type="hidden" value=""/>
                <button type="submit" className="btn btn-accent">Cotizar</button>
              </div>
            </form>

            <div className="hero-trust">
              <div className="item">
                <div className="icon"><Icon name="shield" size={18}/></div>
                <div><div className="label">Garantía</div><div className="val">Funcionaria exclusiva</div></div>
              </div>
              <div className="item">
                <div className="icon"><Icon name="clock" size={18}/></div>
                <div><div className="label">Disponibilidad</div><div className="val">Todos los días de la semana</div></div>
              </div>
              <div className="item">
                <div className="icon"><Icon name="check" size={18} stroke={3}/></div>
                <div><div className="label">Experiencia</div><div className="val">Desde 2013</div></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ============ Trust strip ============
function TrustStrip() {
  return (
    <div className="trust-strip">
      <div className="container">
        <div className="row">
          <span><Icon name="check" size={14} stroke={3}/> Funcionarias contratadas directamente por nuestra empresa. Evitas lios legales</span>
          <span><Icon name="check" size={14} stroke={3}/> Capacitadas y con excelente atención a nuestros clientes y al detalle</span>
          <span><Icon name="check" size={14} stroke={3}/> Antecedentes verificados</span>
          <span><Icon name="check" size={14} stroke={3}/> Ofrecemos reemplazo o reprogramamos el servicio</span>
          <span><Icon name="check" size={14} stroke={3}/> Soporte personalizado por WhatsApp todos los días de la semana</span>
        </div>
      </div>
    </div>
  );
}

// ============ Tweaks ============
function Tweaks() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);

  useEffect(() => { applyPalette(t.palette); }, [t.palette]);
  useEffect(() => { document.documentElement.setAttribute('data-style', t.style); }, [t.style]);
  useEffect(() => { document.documentElement.setAttribute('data-hero', t.hero); }, [t.hero]);

  const { TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakSelect } = window;

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection title="Paleta de color">
        <TweakSelect
          label="Combinación"
          value={t.palette}
          options={[
            { value: 'navy_aqua', label: 'Navy + Aqua (recomendado)' },
            { value: 'navy_coral', label: 'Navy + Coral' },
            { value: 'royal_gold', label: 'Royal + Dorado' },
          ]}
          onChange={v => setTweak('palette', v)}
        />
        <div style={{display:'flex', gap:8, marginTop:10, flexWrap:'wrap'}}>
          {Object.entries(PALETTES).map(([k, p]) => (
            <button key={k} onClick={() => setTweak('palette', k)}
              style={{
                display:'flex', height: 36, borderRadius: 10, overflow:'hidden',
                border: t.palette === k ? '2px solid #fff' : '2px solid transparent',
                outline: t.palette === k ? '2px solid var(--twk-accent, #14B8A6)' : 'none',
                cursor:'pointer', padding: 0, flex: '1 1 90px'
              }}
              title={k}>
              <span style={{flex:1, background: p.navy}}></span>
              <span style={{flex:1, background: p.accent}}></span>
            </button>
          ))}
        </div>
      </TweakSection>
      <TweakSection title="Estilo visual">
        <TweakRadio
          label="Lenguaje"
          value={t.style}
          options={[
            { value: 'modern', label: 'Moderno' },
            { value: 'friendly', label: 'Amigable' },
            { value: 'bold', label: 'Editorial' },
          ]}
          onChange={v => setTweak('style', v)}
        />
      </TweakSection>
      <TweakSection title="Hero">
        <TweakRadio
          label="Composición"
          value={t.hero}
          options={[
            { value: 'split', label: 'Split' },
            { value: 'centered', label: 'Centrado' },
            { value: 'overlay', label: 'Overlay' },
          ]}
          onChange={v => setTweak('hero', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

// ============ App ============
function App() {
  return (
    <>
      <Header/>
      <Hero/>
      <TrustStrip/>
      <Services/>
      <ExtraServices/>
      <CareServices/>
      <Packages/>
      <HowItWorks/>
      <About/>
      <Selection/>
      <Testimonials/>
      <FAQ/>
      <FormsSection/>
      <Footer/>
      <FabWhatsapp/>
      <Tweaks/>
    </>
  );
}

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