/* global React, Icon, useReveal */
const { useState: useStateS } = React;

const SectionEyebrow = ({ children, center }) => (
  <span className={`eyebrow ${center ? 'center' : ''}`}>{children}</span>
);

/* ============================================================
   3 · PROBLEMA
   ============================================================ */
const Problema = () => (
  <section id="problema" className="relative z-10 sec py-20 md:py-24 px-6">
    <div className="max-w-3xl mx-auto text-center reveal">
      <SectionEyebrow center>Antes de empezar</SectionEyebrow>
      <h2 className="font-fraunces font-light t-ink mt-6"
        style={{ fontSize: 'clamp(30px,4vw,52px)', lineHeight: 1.18 }}>
        El amor que se fue.<br/>
        La suerte estancada.<br/>
        Lo que hay que <span className="italic" style={{ color: 'rgb(var(--gold) / 0.95)' }}>limpiar.</span>
      </h2>
      <p className="t-soft text-[17px] leading-relaxed mt-8 max-w-2xl mx-auto">
        Hay cargas que no se ven pero se sienten: una relación que se enfrió sin explicación,
        puertas que se cierran una tras otra, un peso que no te deja avanzar. No venimos a prometerte
        magia — venimos a trabajar tu caso con orden, con respeto y con la verdad por delante.<br/>
        <b style={{fontSize:'19px'}}>Nuestros servicios están 100% Garantizados</b>
      </p>
    </div>
  </section>
);

/* ============================================================
   4 · SOLUCIÓN — 3 benefit cards (liquid-glass)
   ============================================================ */
const Solucion = () => {
  const cards = [
    { icon: 'messageCircle', t: 'Se explica antes de empezar', d: 'Te decimos con claridad qué se puede trabajar, cómo y en cuánto tiempo. Sin letra chica.', bg: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=800&q=70&auto=format&fit=crop' },
    { icon: 'shield', t: 'Seriedad, no espectáculo', d: 'Sin compromisos ni promesas imposibles. Trabajo guiado, discreto y con acompañamiento real de nuestros maestros.', bg: 'https://images.unsplash.com/photo-1499209974431-9dddcece7f88?w=800&q=70&auto=format&fit=crop' },
    { icon: 'eyeOff', t: 'Totalmente confidencial', d: 'Tu historia se queda entre nosotros. Cada consulta se maneja con reserva absoluta.', bg: 'https://images.unsplash.com/photo-1516410529446-2c777cb7366d?w=800&q=70&auto=format&fit=crop' },
  ];
  return (
    <section id="solucion" className="relative z-10 sec py-16 md:py-24 px-6">
      <div className="max-w-6xl mx-auto">
        <div className="text-center reveal">
          <SectionEyebrow center>Cómo trabajamos</SectionEyebrow>
          <h2 className="font-fraunces font-light t-ink mt-6" style={{ fontSize: 'clamp(28px,3.5vw,46px)' }}>
            Un camino claro, paso a paso.
          </h2>
        </div>
        <div className="grid md:grid-cols-3 gap-5 mt-14">
          {cards.map((c, i) => (
            <div key={i} className="card-photo liquid-glass rounded-3xl p-8 reveal" style={{ transitionDelay: `${i * 90}ms` }}>
              <div className="card-img" style={{ backgroundImage: `url(${c.bg})` }} aria-hidden="true"></div>
              <div className="card-veil" aria-hidden="true"></div>
              <div className="w-12 h-12 rounded-full flex items-center justify-center mb-6"
                style={{ background: 'rgb(var(--gold) / 0.10)', color: 'rgb(var(--gold))' }}>
                <Icon name={c.icon} size={22} />
              </div>
              <h3 className="font-fraunces text-2xl t-ink mb-3">{c.t}</h3>
              <p className="t-soft text-[15px] leading-relaxed">{c.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   5 · SERVICIOS — 6 items
   ============================================================ */
const Servicios = () => {
  const items = [
    { icon: 'heart', t: 'Retorno del ser amado', d: 'Trabajo enfocado en reencuentros y en sanar vínculos que se rompieron.', bg: 'https://images.unsplash.com/photo-1518199266791-5375a83190b7?w=800&q=70&auto=format&fit=crop' },
    { icon: 'clover', t: 'Mejora de la suerte', d: 'Destrabar oportunidades, abrir caminos de trabajo, estudio y proyectos.', bg: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=70&auto=format&fit=crop' },
    { icon: 'droplet', t: 'Limpias', d: 'Liberación de energías densas que estancan tu vida cotidiana.', bg: 'https://images.unsplash.com/photo-1502691876148-a84978e59af8?w=800&q=70&auto=format&fit=crop' },
    { icon: 'shield', t: 'Protección', d: 'Resguardo espiritual para ti, tu familia y tu hogar.', bg: 'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=70&auto=format&fit=crop' },
    { icon: 'unlink', t: 'Adicciones y alcoholismo', d: 'Acompañamiento espiritual como apoyo en procesos de liberación.', bg: 'https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?w=800&q=70&auto=format&fit=crop' },
    { icon: 'coins', t: 'Dinero y prosperidad', d: 'Atracción de abundancia y orden en tu economía.', bg: 'https://images.unsplash.com/photo-1621451537084-482c73073a0f?w=800&q=70&auto=format&fit=crop' },
  ];
  return (
    <section id="servicios" className="sec-alt relative z-10 py-16 md:py-24 px-6">
      <div className="max-w-6xl mx-auto">
        <div className="reveal">
          <SectionEyebrow>Áreas de trabajo</SectionEyebrow>
          <h2 className="font-fraunces font-light t-ink mt-6" style={{ fontSize: 'clamp(28px,3.5vw,46px)' }}>
            En qué te <span className="italic" style={{ color: 'rgb(var(--gold) / 0.95)' }}>acompañamos.</span>
          </h2>
        </div>
        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5 mt-14">
          {items.map((s, i) => (
            <div key={i} className="card-photo gold-hairline rounded-2xl p-7 reveal transition-all duration-500 hover:-translate-y-1"
              style={{ background: 'var(--card)', transitionDelay: `${(i % 3) * 80}ms` }}
              onMouseEnter={e => e.currentTarget.style.borderColor = 'rgb(var(--gold) / 0.5)'}
              onMouseLeave={e => e.currentTarget.style.borderColor = 'rgb(var(--gold) / 0.18)'}>
              <div className="card-img" style={{ backgroundImage: `url(${s.bg})` }} aria-hidden="true"></div>
              <div className="card-veil" aria-hidden="true"></div>
              <div style={{ color: 'rgb(var(--gold))' }} className="mb-5"><Icon name={s.icon} size={26} strokeWidth={1.3} /></div>
              <h3 className="font-fraunces text-xl t-ink mb-2">{s.t}</h3>
              <p className="t-soft text-[14px] leading-relaxed">{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   6 · CONGREGACIÓN / CONFIANZA
   ============================================================ */
const Congregacion = () => (
  <section id="congregacion" className="relative z-10 sec py-20 md:py-24 px-6">
    <div className="max-w-4xl mx-auto text-center reveal">
      <SectionEyebrow center>Quiénes somos</SectionEyebrow>
      <h2 className="font-fraunces font-light t-ink mt-6" style={{ fontSize: 'clamp(28px,3.6vw,48px)', lineHeight: 1.2 }}>
        Una congregación que asiste y acompaña
      </h2>
      <p className="t-soft text-[17px] leading-relaxed mt-8 max-w-2xl mx-auto">
        Somos guías espirituales dedicados a acompañar a quienes atraviesan un momento difícil.
        No prometemos milagros ni resultados inmediatos: trabajamos con fe, con método y con respeto
        por tu historia. Cada persona que llega es escuchada antes de que se decida cualquier trabajo.
      </p>
      <div className="flex flex-wrap justify-center gap-x-10 gap-y-4 mt-12">
        {[['Años de servicio', '+20'], ['Consultas atendidas', '5K+'], ['Primera consulta', 'Gratis']].map(([l, n]) => (
          <div key={l} className="text-center">
            <div className="font-fraunces text-3xl" style={{ color: 'rgb(var(--gold))' }}>{n}</div>
            <div className="t-mute text-[11px] tracking-[0.18em] uppercase mt-1">{l}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

/* ============================================================
   7 · TESTIMONIOS — 3 quote cards
   ============================================================ */
const Testimonios = () => {
  const items = [
    { q: 'Llegué destrozada después de una separación. Me explicaron todo con calma y sin presionarme. Hoy mi relación volvió a florecer.', n: 'María C.', r: 'Retorno del ser amado', bg: 'https://images.unsplash.com/photo-1518199266791-5375a83190b7?w=800&q=70&auto=format&fit=crop' },
    { q: 'Sentía que todas las puertas se cerraban. El trabajo de limpia me devolvió la tranquilidad y las oportunidades empezaron a llegar.', n: 'Jorge R.', r: 'Limpias y suerte', bg: 'https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&q=70&auto=format&fit=crop' },
    { q: 'Lo que más valoro es la honestidad. Nunca me prometieron algo imposible, me acompañaron paso a paso con respeto.', n: 'Lucía M.', r: 'Protección familiar', bg: 'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=70&auto=format&fit=crop' },
    { q: 'Vivía con una angustia que no me dejaba dormir. Después del acompañamiento sentí que me quitaron un peso enorme de encima.', n: 'Verónica T.', r: 'Limpia espiritual', bg: 'https://images.unsplash.com/photo-1441974231531-c6227db76b6e?w=800&q=70&auto=format&fit=crop' },
    { q: 'Mi negocio estaba estancado y sin clientes. Con su guía y trabajo constante todo empezó a moverse de nuevo.', n: 'Andrés P.', r: 'Prosperidad y trabajo', bg: 'https://images.unsplash.com/photo-1500534623283-312aade485b7?w=800&q=70&auto=format&fit=crop' },
    { q: 'Buscaba respuestas después de años de dudas. Aquí encontré claridad, respeto y una fe que había perdido.', n: 'Sofía G.', r: 'Guía y claridad', bg: 'https://images.unsplash.com/photo-1490730141103-6cac27aaab94?w=800&q=70&auto=format&fit=crop' },
  ];
  const loop = [...items, ...items];
  return (
    <section id="testimonios" className="sec-alt relative z-10 py-16 md:py-24 px-6">
      <div className="max-w-6xl mx-auto">
        <div className="text-center reveal">
          <SectionEyebrow center>Testimonios</SectionEyebrow>
          <h2 className="font-fraunces font-light t-ink mt-6" style={{ fontSize: 'clamp(28px,3.5vw,46px)' }}>
            Historias de quienes ya dieron el paso.
          </h2>
        </div>
      </div>
      <div className="marquee mt-14 reveal">
        <div className="marquee-track">
          {loop.map((t, i) => (
            <figure key={i} className="marquee-card card-photo liquid-glass rounded-3xl p-8 flex flex-col" aria-hidden={i >= items.length ? 'true' : undefined}>
              <div className="card-img" style={{ backgroundImage: `url(${t.bg})` }} aria-hidden="true"></div>
              <div className="card-veil" aria-hidden="true"></div>
              <div style={{ color: 'rgb(var(--gold-2) / 0.85)' }} className="mb-4"><Icon name="quote" size={30} /></div>
              <blockquote className="font-fraunces font-light text-[18px] leading-relaxed t-ink flex-1">{t.q}</blockquote>
              <figcaption className="mt-6 pt-5" style={{ borderTop: '1px solid var(--hairline)' }}>
                <div className="t-ink text-[15px] font-medium">{t.n}</div>
                <div className="t-mute text-[12px] tracking-wide mt-0.5">{t.r}</div>
              </figcaption>
            </figure>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   8 · CONSULTA / REGISTRO
   ============================================================ */
const Consulta = () => {
  const [sent, setSent] = useStateS(false);
  const [form, setForm] = useStateS({ name: '', contact: '', reason: '' });
  const upd = k => e => setForm({ ...form, [k]: e.target.value });
  const submit = e => { e.preventDefault(); setSent(true); };

  const perks = ['Se explica tu caso antes de empezar', 'Sin compromiso ni presión', 'Totalmente confidencial'];

  return (
    <section id="consulta" className="relative z-10 sec py-20 md:py-24 px-6">
      <div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-12 md:gap-8 items-center">
        <div className="reveal">
          <SectionEyebrow>Empieza aquí</SectionEyebrow>
          <h2 className="font-fraunces font-light t-ink mt-6" style={{ fontSize: 'clamp(30px,4vw,50px)', lineHeight: 1.15 }}>
            Tu primera consulta <span className="italic" style={{ color: 'rgb(var(--gold) / 0.95)' }}>es gratis.</span>
          </h2>
          <p className="t-soft text-[16px] leading-relaxed mt-6 max-w-md">
            Cuéntanos tu situación. Te escuchamos, te explicamos qué se puede trabajar y decides con total libertad.
          </p>
          <ul className="mt-8 flex flex-col gap-3">
            {perks.map(p => (
              <li key={p} className="flex items-center gap-3 t-soft text-[15px]">
                <span className="w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0"
                  style={{ background: 'rgb(var(--gold) / 0.15)', color: 'rgb(var(--gold))' }}>
                  <Icon name="check" size={13} strokeWidth={2} />
                </span>
                {p}
              </li>
            ))}
          </ul>
        </div>

        <div className="liquid-glass rounded-3xl p-8 md:p-10 reveal">
          {sent ? (
            <div className="text-center py-10">
              <div className="w-14 h-14 rounded-full mx-auto flex items-center justify-center mb-5"
                style={{ border: '1px solid rgb(var(--gold))', color: 'rgb(var(--gold))' }}>
                <Icon name="check" size={26} />
              </div>
              <h3 className="font-fraunces text-2xl t-ink">Recibimos tu solicitud.</h3>
              <p className="t-soft mt-3 text-[15px]">Te contactaremos muy pronto, con total discreción.</p>
            </div>
          ) : (
            <form onSubmit={submit} className="flex flex-col gap-4">
              <div>
                <label className="block text-[11px] tracking-[0.16em] uppercase t-mute mb-2">Nombre</label>
                <input className="field" required value={form.name} onChange={upd('name')} placeholder="Tu nombre" />
              </div>
              <div>
                <label className="block text-[11px] tracking-[0.16em] uppercase t-mute mb-2">Contacto (WhatsApp o email)</label>
                <input className="field" required value={form.contact} onChange={upd('contact')} placeholder="+57 300 000 0000" />
              </div>
              <div>
                <label className="block text-[11px] tracking-[0.16em] uppercase t-mute mb-2">Motivo de consulta</label>
                <textarea className="field" required value={form.reason} onChange={upd('reason')} placeholder="Cuéntanos brevemente qué te trae aquí…" />
              </div>
              <button type="submit"
                className="mt-2 rounded-full px-8 py-3.5 text-[15px] font-medium flex items-center justify-center gap-2 transition-all duration-300 hover:scale-[1.02] active:scale-[0.98] btn-cta">
                Solicitar mi consulta gratis
                <Icon name="arrowRight" size={17} />
              </button>
              <p className="text-[12px] text-center leading-relaxed flex items-center justify-center gap-1.5 mt-1 pt-4"
                style={{ color: 'rgb(var(--gold-2))', fontWeight: 500, borderTop: '1px solid rgb(var(--gold-2) / 0.28)' }}>
                <Icon name="lock" size={13} strokeWidth={1.8} /> Tus datos se manejan con absoluta reserva.
              </p>
            </form>
          )}
        </div>
      </div>
    </section>
  );
};

/* ============================================================
   9 · FOOTER
   ============================================================ */
const Footer = () => (
  <footer className="footer-scope relative z-10 px-6 pt-14 pb-10" style={{ background: 'var(--footer)', borderTop: '1px solid rgb(var(--gold) / 0.14)' }}>
    <div className="max-w-6xl mx-auto">
      <div className="flex flex-col md:flex-row justify-between gap-10 pb-12">
        <div className="max-w-sm">
          <div className="mb-5"><span className="logo-chip"><img src={(window.__resources && window.__resources.logo) || "assets/logo.png"} alt="Congregación En La Fe" /></span></div>
          <p className="t-mute text-[14px] leading-relaxed">
            Guía espiritual con seriedad y respeto. Retorno del ser amado, suerte, limpias y protección —
            cada caso, explicado antes de empezar.
          </p>
        </div>
        <div className="flex flex-col gap-3 t-soft text-[14px]">
          <a href="#consulta" className="flex items-center gap-3 hover:text-[color:var(--ink)] transition-colors">
            <Icon name="phone" size={16} /> +57 321 258 4109 - +52 614 405 2422
          </a>
          <a href="#consulta" className="flex items-center gap-3 hover:text-[color:var(--ink)] transition-colors">
            <Icon name="globe" size={16} /> www.congregacionenlafe.com
          </a>
          <a href="#consulta" className="flex items-center gap-3 hover:text-[color:var(--ink)] transition-colors">
            <Icon name="mail" size={16} /> contacto@congregacionenlafe.com
          </a>
          <div className="flex items-center gap-3">
            <Icon name="clock" size={16} /> Atención todos los días · 8am – 8pm
          </div>
        </div>
      </div>
      <div className="pt-8 flex flex-col md:flex-row justify-between items-center gap-4 t-mute text-[12px]"
        style={{ borderTop: '1px solid var(--hairline)' }}>
        <span>© 2026 Congregación En La Fe. Todos los derechos reservados.</span>
        <span className="flex items-center gap-1.5"><Icon name="lock" size={12} /> Consultas 100% confidenciales</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Problema, Solucion, Servicios, Congregacion, Testimonios, Consulta, Footer });