/* Aseo Casa Express — reusable bits + middle sections */

// Official-style WhatsApp glyph (filled). Use this instead of <Icon name="whatsapp"/>.
function WhatsAppLogo({ size = 24, color = 'currentColor' }) {
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill={color} xmlns="http://www.w3.org/2000/svg" aria-label="WhatsApp">
      <path d="M27.2 4.7A15.86 15.86 0 0 0 16 .07C7.18.07.02 7.23.02 16.05c0 2.82.74 5.58 2.14 8.02L0 32l8.13-2.13a16 16 0 0 0 7.87 2c8.81 0 15.97-7.16 15.97-15.98a15.9 15.9 0 0 0-4.77-11.2zM16 29.21h-.01a13.3 13.3 0 0 1-6.77-1.85l-.49-.29-5.27 1.38 1.4-5.14-.32-.53A13.27 13.27 0 0 1 2.7 16.05c0-7.34 5.97-13.3 13.3-13.3 3.56 0 6.9 1.38 9.41 3.9a13.21 13.21 0 0 1 3.9 9.4c0 7.34-5.96 13.3-13.31 13.3zm7.3-9.96c-.4-.2-2.36-1.17-2.73-1.3-.37-.13-.63-.2-.9.2-.27.4-1.03 1.3-1.27 1.57-.23.27-.46.3-.86.1-.4-.2-1.69-.62-3.22-1.99-1.19-1.06-2-2.37-2.23-2.77-.23-.4-.02-.6.18-.8.18-.18.4-.46.6-.7.2-.23.27-.4.4-.66.13-.27.07-.5-.03-.7-.1-.2-.9-2.17-1.23-2.97-.33-.78-.66-.67-.9-.69l-.77-.01a1.47 1.47 0 0 0-1.07.5c-.37.4-1.4 1.37-1.4 3.33s1.43 3.87 1.63 4.13c.2.27 2.82 4.3 6.83 6.03.95.41 1.7.65 2.28.84.96.3 1.83.26 2.52.16.77-.11 2.36-.96 2.7-1.9.33-.93.33-1.73.23-1.9-.1-.16-.36-.26-.76-.46z" />
    </svg>);

}

// ============ Icons ============
const Icon = ({ name, size = 22, stroke = 2 }) => {
  const props = {
    width: size, height: size, viewBox: '0 0 24 24',
    fill: 'none', stroke: 'currentColor', strokeWidth: stroke,
    strokeLinecap: 'round', strokeLinejoin: 'round'
  };
  const paths = {
    sparkle: <><path d="M12 3l1.7 4.6L18 9.3l-4.3 1.7L12 15.6l-1.7-4.6L6 9.3l4.3-1.7L12 3z" /><path d="M18 14l.9 2.4L21 17.3l-2.1.9L18 20.6l-.9-2.4L15 17.3l2.1-.9L18 14z" /></>,
    shirt: <path d="M16 3l4 2-2 5-2-1v13H8V9L6 10 4 5l4-2 4 2 4-2z" />,
    food: <><path d="M3 11h18l-1.5 9h-15L3 11z" /><path d="M6 11V7a6 6 0 0112 0v4" /></>,
    sofa: <><rect x="3" y="11" width="18" height="7" rx="2" /><path d="M5 11V8a3 3 0 013-3h8a3 3 0 013 3v3" /><path d="M5 18v2M19 18v2" /></>,
    heart: <path d="M12 21s-7-4.5-9-9a5 5 0 019-3 5 5 0 019 3c-2 4.5-9 9-9 9z" />,
    paw: <><circle cx="6" cy="10" r="1.8" /><circle cx="10" cy="6" r="1.8" /><circle cx="14" cy="6" r="1.8" /><circle cx="18" cy="10" r="1.8" /><path d="M8 17a4 4 0 018 0c0 2-1.5 3-4 3s-4-1-4-3z" /></>,
    shield: <><path d="M12 3l8 3v5c0 5-3.5 8.5-8 10-4.5-1.5-8-5-8-10V6l8-3z" /><path d="M9 12l2 2 4-4" /></>,
    clock: <><circle cx="12" cy="12" r="9" /><path d="M12 7v5l3 2" /></>,
    phone: <path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72c.13.96.36 1.9.7 2.81a2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0122 16.92z" />,
    mail: <><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 7l9 6 9-6" /></>,
    pin: <><path d="M12 21s-7-7-7-12a7 7 0 0114 0c0 5-7 12-7 12z" /><circle cx="12" cy="9" r="2.5" /></>,
    check: <path d="M5 12l4 4 10-10" />,
    star: <path d="M12 3l2.6 6 6.4.6-4.9 4.3 1.5 6.3L12 17.3 6.4 20.2l1.5-6.3L3 9.6 9.4 9 12 3z" style={{ stroke: "rgb(245, 158, 11)", fill: "rgb(245, 158, 11)" }} />,
    user: <><circle cx="12" cy="8" r="4" /><path d="M4 20c0-4 4-6 8-6s8 2 8 6" /></>,
    search: <><circle cx="11" cy="11" r="7" /><path d="M21 21l-4-4" /></>,
    file: <><path d="M14 3H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2V9z" /><path d="M14 3v6h6" /></>,
    fingerprint: <><path d="M12 3a8 8 0 018 8c0 2-.3 4-1 6" /><path d="M5 11a7 7 0 0114 0v3" /><path d="M9 21c-1-2-1-4-1-6a4 4 0 018 0c0 3-1 5-1 6" /></>,
    badge: <><circle cx="12" cy="9" r="5" /><path d="M9 14l-1 7 4-2 4 2-1-7" /></>,
    whatsapp: <path d="M20.5 3.5A11.93 11.93 0 0012.05 0C5.55 0 .27 5.28.27 11.78c0 2.08.54 4.1 1.58 5.89L0 24l6.5-1.71a11.74 11.74 0 005.55 1.42h.01c6.5 0 11.78-5.28 11.78-11.78 0-3.15-1.22-6.1-3.34-8.43zM12.05 21.79h-.01a9.78 9.78 0 01-4.98-1.36l-.36-.21-3.86 1.01 1.03-3.76-.23-.39a9.74 9.74 0 01-1.5-5.31c0-5.4 4.4-9.79 9.81-9.79 2.62 0 5.07 1.02 6.92 2.87a9.7 9.7 0 012.87 6.93c0 5.4-4.4 9.79-9.69 9.79zm5.36-7.34c-.29-.15-1.74-.86-2.01-.96-.27-.1-.47-.15-.66.15-.2.29-.76.96-.93 1.16-.17.2-.34.22-.64.07-.29-.15-1.24-.46-2.36-1.45-.87-.78-1.46-1.74-1.63-2.03-.17-.29-.02-.45.13-.6.13-.13.29-.34.44-.51.15-.17.2-.29.29-.49.1-.2.05-.37-.02-.51-.07-.15-.66-1.59-.9-2.18-.24-.57-.49-.49-.66-.5l-.56-.01c-.2 0-.51.07-.78.37-.27.29-1.02 1-1.02 2.44s1.05 2.83 1.19 3.03c.15.2 2.06 3.15 5 4.42.7.3 1.24.48 1.67.62.7.22 1.33.19 1.83.12.56-.08 1.74-.71 1.99-1.4.24-.69.24-1.28.17-1.4-.07-.12-.27-.2-.56-.34z" />
  };
  return <svg {...props}>{paths[name]}</svg>;
};

// ============ Services ============
function Services() {
  const items = [
  { ic: 'sparkle', t: 'Aseo y limpieza profunda', d: 'Limpieza general del apto: pisos, baños, cocina, polvo, vidrios. El cliente revisa la prioridad de labores para el día contratado.',
    pts: ['Limpieza general y desinfección', 'Atención al detalle en baños y cocina', 'Los productos de aseo los aporta el cliente'] },
  { ic: 'shirt', t: 'Lavado o planchado de ropa.',
    pts: ['Clasificación por color y tejido', 'Planchado de ropa', 'Orden en clósets y cajones si se permite'] },
  { ic: 'food', t: 'Preparación de alimentos', d: 'Una funcionaria prepara comidas caseras para el día del hogar.',
    pts: ['Menús según tu rutina', 'Cocina aseada al terminar'] }];


  const [active, setActive] = React.useState(0);

  const photos = [
  'assets/services-photo-1.jpg',
  'assets/services-photo-2.jpg',
  'assets/services-photo-3.jpg',
  'assets/services-photo-4.jpg',
  'assets/services-photo-5.jpg'];

  const [photoIdx, setPhotoIdx] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setPhotoIdx((p) => (p + 1) % photos.length), 3000);
    return () => clearInterval(id);
  }, [photos.length]);

  return (
    <section className="section services-section" id="servicios" data-screen-label="03 Servicios">
      <div className="container services-content">
        <div className="section-head services-head">
          <span className="eyebrow"><span className="dot"></span> Servicios principales</span>
          <h2>Todo lo que tu hogar necesita</h2>
          <p>Una misma funcionaria de confianza realiza varias labores en el mismo servicio. Sin tener que coordinar con varias personas.</p>
        </div>

        <div className="services-hero-photo">
          {photos.map((src, i) =>
          <img
            key={src}
            src={src}
            alt="Servicios Aseo Casa Express"
            className={'services-photo-slide' + (i === photoIdx ? ' active' : '')}
            loading={i === 0 ? 'eager' : 'lazy'}
            decoding="async"
            onError={(e) => {e.target.style.display = 'none';}} />
          )}
        </div>

        <div className="services-grid-dark">
          {items.map((s, i) =>
          <button
            type="button"
            key={i}
            className={'service-card-dark' + (i === active ? ' active' : '')}
            onClick={() => setActive(i)}
            onMouseEnter={() => setActive(i)}
            aria-pressed={i === active}>
              <div className="ic"><Icon name={s.ic} size={26} /></div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
              <ul>{s.pts.map((p, j) => <li key={j}>{p}</li>)}</ul>
            </button>
          )}
        </div>

        <div className="services-logo">
          <img src="assets/logo-mark.png" alt="Aseo Casa Express" className="services-logo-mark" />
          <div className="services-logo-text">
            <span className="sl-1">Aseo Casa Express</span>
            <span className="sl-2">Confianza · Calidad · Cumplimiento</span>
          </div>
        </div>
      </div>
    </section>);

}

// ============ Packages ============
function Packages() {
  const pkgs = [
  {
    tag: 'Por día', name: 'Servicio Diario eventual o por contrato con una funcionaria exclusiva', tagline: 'Un servicio puntual o un día a la semana contratado.',
    list: [
    'Una jornada de horas laborales legales',
    'Funcionaria exclusiva asignada',
    'Aseo general, lavado o planchado o cocina',
    'Reemplazo si hay algún imprevisto',
    'Tarifa preferencial por contratar varios meses',
    'Soporte por WhatsApp todos los días de la semana'],

    featured: false
  },
  {
    tag: 'Por quincena', name: 'Plan Quincenal', tagline: 'La opción más popular para hogares activos.',
    list: [
    'Visitas programadas cada 15 días',
    'Misma funcionaria siempre que sea posible',
    'Aseo profundo o lavado o planchado',
    'Tarifa preferencial por continuidad',
    'Reagendamiento flexible sin costo y previo aviso',
    'Soporte prioritario por WhatsApp'],

    featured: false
  },
  {
    tag: 'Por mes', name: 'Plan Mensual', tagline: 'Para acompañamiento constante en tu hogar.',
    list: [
    'Lunes a viernes o lunes a sábado; según necesidad',
    'Funcionaria exclusiva asignada',
    'Incluye preparación de alimentos',
    'Súper descuentos en precios por fidelidad y permanencia'],

    featured: true, badge: 'Más solicitado'
  }];

  return (
    <section className="section packages" id="paquetes" data-screen-label="04 Paquetes">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span> Paquetes</span>
          <h2>Elige el plan que se ajusta a tu hogar</h2>
          <p>Tarifas claras según frecuencia. Cotiza sin compromiso y te enviamos el detalle por WhatsApp en minutos.</p>
        </div>
        <div className="packages-grid">
          {pkgs.map((p, i) =>
          <div key={i} className={'pkg' + (p.featured ? ' featured' : '')}>
              {p.badge && <span className="pkg-badge">{p.badge}</span>}
              <span className="pkg-eyebrow">{p.tag}</span>
              <h3>{p.name}</h3>
              <div className="pkg-tagline">{p.tagline}</div>
              <ul className="pkg-list">
                {p.list.map((it, j) =>
              <li key={j}><Icon name="check" size={18} stroke={3} /> {it}</li>
              )}
              </ul>
              <div className="pkg-price">Cotiza según tu necesidad</div>
              <a href="#cotizar" className={'btn ' + (p.featured ? 'btn-accent' : 'btn-primary')}>Cotizar este plan</a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============ How it works ============
function HowItWorks() {
  const steps = [
  { n: 1, t: 'Solicita el servicio que necesitas', d: 'Envía el formulario o escríbenos por WhatsApp, indicanos días y tipo de servicio.' },
  { n: 2, t: 'Recibe la cotización y confirma', d: 'Te enviamos en minutos el plan recomendado y el valor según tu hogar para que confirmes.' },
  { n: 3, t: 'Agenda, paga y disfruta "Recibimos por todas las plataformas de pago"', d: 'Te confirmamos WhatsApp datos del personal autorizado, recibes la funcionaria verificada y uniformada, y disfrutas tu hogar impecable.' }];

  return (
    <section className="section" id="como-funciona" data-screen-label="05 Cómo funciona">
      <div className="container">
        <div className="section-head">
          <h2>Pedir servicio es muy sencillo</h2>
          <p>En 3 pasos coordinamos todo. Sin llamadas largas, sin papeleo.</p>
        </div>
        <div className="steps">
          {steps.map((s) =>
          <div key={s.n} className="step">
              <div className="num">{s.n}</div>
              <h3>{s.t}</h3>
              <p>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ============ About ============
function About() {
  return (
    <section className="section about" id="nosotros" data-screen-label="06 Nosotros">
      <div className="container">
        <div className="about-grid">
          <div>
            <span className="eyebrow"><span className="dot"></span> Sobre nosotros</span>
            <h2 style={{ marginTop: 16, marginBottom: 18 }}>Pioneros en la formalización de las profesionales del aseo para hogares en Bogotá desde 2013</h2>
            <p className="lead">
              Somos <strong style={{ color: '#fff' }}>Aseo Casa Express</strong>, Empresa Colombiana fundada en 2013 dedicada al aseo y limpieza de hogares en toda Bogotá. Nos distingue la calidad y cumplimiento de nuestro servicio y, sobre todo, nuestro riguroso proceso de selección, contratación y verificación de cada funcionaria.
            </p>
            <p style={{ marginTop: 14, color: 'rgba(255,255,255,0.85)' }}>
              Queremos darle a cada familia tranquilidad legal, calidad garantizada y una funcionaria capacitada para todas las labores del hogar en un mismo servicio.
            </p>
            <div className="about-stats">
              <div className="about-stat"><div className="n">+12</div><div className="l">Años de experiencia</div></div>
              <div className="about-stat"><div className="n">100%</div><div className="l">Funcionaria exclusiva</div></div>
              <div className="about-stat"><div className="n">7 días</div><div className="l">Atención toda la semana</div></div>
            </div>
          </div>
          <div className="about-img">
            <img src="assets/about-team.jpg" alt="Equipo de funcionarias de Aseo Casa Express" loading="lazy" decoding="async" onError={(e) => {e.target.style.display = 'none';}} />
            <div className="about-logo-card">
              <img src="assets/logo-mark.png" alt="Aseo Casa Express" className="about-logo-mark" />
              <div className="about-logo-text">
                <span className="alt-1">Aseo Casa Express</span>
                <span className="alt-2">Confianza · Calidad · Cumplimiento</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

// ============ Selection process ============
function Selection() {
  const cards = [
  { ic: 'file', t: 'Hoja de vida y entrevista', d: 'Revisamos antecedentes, experiencia previa, referencias laborales y personales.' },
  { ic: 'fingerprint', t: 'Verificación de antecedentes', d: 'Validamos identidad, antecedentes judiciales y consultamos en bases oficiales.' },
  { ic: 'badge', t: 'Capacitación continua', d: 'Cada funcionaria se capacita en limpieza, manipulación de alimentos y trato al cliente.' },
  { ic: 'shield', t: 'Contratación legal', d: 'Garantizamos vinculación cumpliendo la normativa laboral colombiana.' },
  { ic: 'shirt', t: 'Uniforme corporativo', d: 'Llegan a tu hogar uniformadas y debidamente identificadas.' },
  { ic: 'heart', t: 'Compromiso humano', d: 'Trabajamos con un equipo estable, valorado y motivado para cuidar tu hogar.' }];

  return (
    <section className="section" id="seleccion" data-screen-label="07 Selección">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow"><span className="dot"></span> Proceso de selección</span>
          <h2>Por qué puedes confiar en nuestras funcionarias</h2>
          <p>Cada persona que envía Aseo Casa Express pasa por un proceso de verificación riguroso. Tu hogar está en manos seguras.</p>
        </div>
        <div className="selection-grid">
          {cards.map((c, i) =>
          <div key={i} className="sel-card">
              <div className="ic"><Icon name={c.ic} size={24} /></div>
              <h3>{c.t}</h3>
              <p>{c.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

Object.assign(window, { Icon, WhatsAppLogo, Services, Packages, HowItWorks, About, Selection });