/* Hero, Nosotros, Servicios */
const { useState, useEffect, useRef } = React;

function Hero({ tweaks }) {
  const videoRef = useRef(null);
  useEffect(() => {
    if (!videoRef.current) return;
    videoRef.current.muted = tweaks.videoMuted;
  }, [tweaks.videoMuted]);

  return (
    <section id="top" data-screen-label="01 Hero" style={{ padding: 0, position: "relative", minHeight: "100vh", background: "#000", overflow: "hidden" }}>
      <video
        ref={videoRef}
        autoPlay loop muted playsInline
        src="assets/video.mp4"
        poster="assets/fotos/drone.jpg"
        style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover", opacity: .85 }}
      />
      <div style={{
        position: "absolute", inset: 0,
        background: "linear-gradient(180deg, rgba(20,23,28,.55) 0%, rgba(20,23,28,.25) 35%, rgba(20,23,28,.65) 100%)"
      }} />
      <div style={{
        position: "absolute", inset: 0,
        background: "radial-gradient(ellipse at 30% 60%, rgba(31,58,95,.35), transparent 60%)"
      }} />

      <div className="wrap" style={{ position: "relative", zIndex: 2, minHeight: "100vh", display: "flex", flexDirection: "column", justifyContent: "center", paddingTop: 120, paddingBottom: 80 }}>
        <div className="reveal" style={{ maxWidth: 920 }}>
          <span className="eyebrow" style={{ color: "rgba(255,255,255,.85)" }}>
            Geriatría · Centro de Día · Rehabilitación · Canning
          </span>
          <h1 className="display" style={{ color: "#fff", fontSize: "clamp(44px, 6.4vw, 96px)", margin: "20px 0 28px", letterSpacing: "-0.02em" }}>
            Cuidado, bienestar y <span className="it" style={{ color: "#ead2d3" }}>acompañamiento</span><br/>
            para personas mayores.
          </h1>
          <p style={{ color: "rgba(255,255,255,.86)", fontSize: "clamp(17px, 1.4vw, 21px)", maxWidth: 680, lineHeight: 1.55, margin: "0 0 36px" }}>
            Instituto de geriatría, rehabilitación y centro de día en Canning. Atención profesional
            interdisciplinaria, en un entorno pensado para la tranquilidad de cada residente y su familia.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a className="btn btn-primary" href="#contacto">Solicitar información →</a>
            <a className="btn btn-visita-on-dark" href="#contacto">Agendar una visita</a>
            <a className="btn btn-ghost" href="#instalaciones">Ver instalaciones</a>
          </div>
          <a href="https://www.youtube.com/watch?v=P1oJxDq9_g0" target="_blank" rel="noopener"
            style={{ marginTop: 28, display: "inline-flex", alignItems: "center", gap: 12, color: "rgba(255,255,255,.85)", fontSize: 14, letterSpacing: ".02em", textDecoration: "none" }}>
            <span style={{
              width: 38, height: 38, borderRadius: 999, border: "1.5px solid rgba(255,255,255,.55)",
              display: "inline-flex", alignItems: "center", justifyContent: "center", flexShrink: 0,
              transition: "all .2s ease",
            }}>
              <svg width="11" height="13" viewBox="0 0 11 13" fill="none"><path d="M0 0v13l11-6.5L0 0z" fill="#fff"/></svg>
            </span>
            <span>Mirá nuestro video institucional <span style={{ opacity: .55, marginLeft: 6 }}>YouTube ↗</span></span>
          </a>
        </div>

        {/* Hero footer rail */}
        <div style={{
          position: "absolute", left: "var(--gutter)", right: "var(--gutter)", bottom: 36,
          display: "flex", justifyContent: "space-between", alignItems: "end", gap: 24, flexWrap: "wrap",
          color: "rgba(255,255,255,.7)", fontSize: 13, fontWeight: 500, letterSpacing: ".04em"
        }}>
          <div style={{ display: "flex", gap: 28, flexWrap: "wrap" }}>
            <span>Acreditados en calidad asistencial</span>
            <span style={{ opacity: .4 }}>·</span>
            <span>Equipo interdisciplinario</span>
            <span style={{ opacity: .4 }}>·</span>
            <span>Atención 24 hs</span>
          </div>
          <a href="#nosotros" style={{ color: "rgba(255,255,255,.85)", display: "inline-flex", alignItems: "center", gap: 10 }}>
            <span>Conocer más</span>
            <span style={{ display: "inline-block", width: 1, height: 30, background: "currentColor", opacity: .5 }}></span>
          </a>
        </div>
      </div>
    </section>
  );
}

function Nosotros({ tweaks }) {
  const stats = [
    { n: "+25", l: "años de experiencia institucional" },
    { n: "24/7", l: "atención profesional continua" },
    { n: "8+", l: "disciplinas interdisciplinarias" },
  ];
  const diferenciales = [
    { t: "Atención interdisciplinaria", d: "Médicos, kinesiólogos, terapistas ocupacionales, fonoaudiólogos, enfermería y psicología trabajando coordinadamente." },
    { t: "Espacios confortables", d: "Habitaciones, jardines y áreas comunes diseñadas para el bienestar y la autonomía de cada residente." },
    { t: "Enfoque humano", d: "Cada persona es escuchada, conocida y acompañada según su historia, sus tiempos y sus posibilidades." },
    { t: "Seguimiento profesional", d: "Plan de cuidados personalizado, comunicación constante con la familia y revisión clínica permanente." },
  ];
  return (
    <section id="nosotros" data-screen-label="02 Nosotros" style={{ background: "var(--c-paper)" }}>
      {tweaks.showFloral && <img className="floral" src="assets/png/Flores-09.png" alt="" style={{ top: 60, right: -40, width: 320, opacity: .08 }} />}
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow navy mark">Nosotros</span>
            <h2 className="display">Una casa pensada para <span className="it">cuidar de verdad.</span></h2>
          </div>
          <p className="lede">
            Solariega es una institución dedicada al cuidado integral de personas mayores. Combinamos atención
            asistencial profesional, contención emocional y un entorno cálido para que residentes y familias
            encuentren tranquilidad, dignidad y calidad de vida.
          </p>
        </div>

        <div className="col-2 reveal" style={{ alignItems: "stretch", gap: "clamp(28px, 4vw, 64px)" }}>
          <div style={{ position: "relative" }}>
            <div style={{ aspectRatio: "4/5", borderRadius: 20, overflow: "hidden", background: "var(--c-bg)" }}>
              <img src="assets/fotos/exterior.jpg" alt="Exterior Solariega" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div style={{
              position: "absolute", left: -24, bottom: -24, background: "var(--c-navy)", color: "#fff",
              padding: "22px 28px", borderRadius: 16, maxWidth: 280, boxShadow: "0 30px 60px -30px rgba(31,58,95,.6)"
            }}>
              <div className="display" style={{ fontSize: 32, lineHeight: 1.1 }}>“Acompañar es <span className="it">estar.</span>”</div>
              <div style={{ fontSize: 13, marginTop: 8, opacity: .8 }}>Filosofía Solariega</div>
            </div>
          </div>
          <div style={{ display: "flex", flexDirection: "column", justifyContent: "center" }}>
            <p style={{ fontSize: 18, lineHeight: 1.65, color: "var(--c-text)", margin: "0 0 20px" }}>
              Funcionamos como una comunidad: un equipo profesional estable, instalaciones confortables y un
              programa de actividades pensado para sostener la autonomía, el vínculo familiar y el bienestar
              cotidiano.
            </p>
            <p style={{ fontSize: 16, lineHeight: 1.65, color: "var(--c-text-soft)", margin: "0 0 32px" }}>
              No buscamos reemplazar al hogar, sino ofrecer un espacio donde cada residente sea reconocido,
              cuidado y acompañado con respeto y ternura.
            </p>

            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16, paddingTop: 28, borderTop: "1px solid var(--c-line)" }}>
              {stats.map((s, i) => (
                <div key={i}>
                  <div className="display" style={{ fontSize: 40, color: "var(--c-primary)", lineHeight: 1 }}>{s.n}</div>
                  <div style={{ fontSize: 13, color: "var(--c-text-soft)", marginTop: 8, lineHeight: 1.4 }}>{s.l}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="col-4 reveal" style={{ marginTop: "clamp(60px, 8vw, 100px)" }}>
          {diferenciales.map((d, i) => (
            <div key={i} style={{ borderTop: "1.5px solid var(--c-ink)", paddingTop: 20 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 14 }}>
                <span style={{ fontFamily: "var(--f-display)", fontSize: 14, color: "var(--c-primary)", fontStyle: "italic" }}>0{i+1}</span>
              </div>
              <h3 className="display" style={{ fontSize: 24, margin: "0 0 10px", color: "var(--c-ink)", lineHeight: 1.15 }}>{d.t}</h3>
              <p style={{ fontSize: 14.5, color: "var(--c-text-soft)", margin: 0, lineHeight: 1.55 }}>{d.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Servicios() {
  const grupos = [
    {
      n: "01",
      titulo: "Alojamiento",
      bajada: "Diferentes modalidades de estadía con acompañamiento profesional permanente.",
      img: "assets/fotos/galeria8.jpg",
      caption: "Acceso al jardín y áreas comunes",
      items: [
        "Estadía permanente",
        "Estadía temporal",
        "Estadía vacacional",
        "Convalecencia y rehabilitación",
        "Servicio especializado · atención de personas con Alzheimer y otras demencias",
        "Terapia ocupacional",
        "Programas de animación sociocultural",
        "Salidas al exterior",
      ],
    },
    {
      n: "02",
      titulo: "Residenciales",
      bajada: "Servicios diarios que sostienen la vida en la residencia con calidad y atención al detalle.",
      img: "assets/fotos/foto11.jpg",
      caption: "Comedor · pensión completa",
      items: [
        "Servicio de hotelería con pensión completa",
        "Dietas especiales según las necesidades de los residentes",
        "Seguimiento nutricional permanente por el departamento sanitario",
        "Menús para invitados con reserva previa",
        "Servicio diario de limpieza y lavandería",
      ],
    },
  ];

  return (
    <section id="servicios" data-screen-label="03 Servicios">
      <div className="wrap">
        <div className="section-head reveal">
          <div>
            <span className="eyebrow mark">Servicios y prestaciones</span>
            <h2 className="display">Cuidado integral, <span className="it">flexible y cercano.</span></h2>
          </div>
          <p className="lede">
            En Solariega ofrecemos un servicio integral, flexible y funcional a cada residente.
            Contamos con una gestión especializada acorde a la necesidad requerida por cada familia,
            especialmente para aquellos que precisan cuidados a largo plazo y bienestar.
          </p>
        </div>

        <div className="reveal" style={{ display: "grid", gap: "clamp(40px, 5vw, 72px)" }}>
          {grupos.map((g, i) => {
            const flip = i === 1;
            return (
              <article key={i} style={{
                display: "grid",
                gridTemplateColumns: "1.05fr 1.4fr",
                gap: "clamp(24px, 3.5vw, 56px)",
                alignItems: "center",
              }} className="srv-row">
                <div style={{
                  position: "relative",
                  borderRadius: 24,
                  overflow: "hidden",
                  minHeight: 360,
                  aspectRatio: "4 / 3",
                  order: flip ? 2 : 1,
                  boxShadow: "0 20px 50px -28px rgba(25,36,59,.35)",
                }}>
                  <img src={g.img} alt={g.titulo}
                    style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }} />
                  <div aria-hidden="true" style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%)" }} />
                  <div style={{ position: "absolute", left: 18, bottom: 16, color: "#fff", fontFamily: "var(--f-sans)", fontSize: 12, letterSpacing: ".08em", textTransform: "uppercase", opacity: .92 }}>
                    {g.caption}
                  </div>
                </div>

                <div style={{ order: flip ? 1 : 2, padding: "8px 0" }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 16, marginBottom: 14 }}>
                    <span style={{ fontFamily: "var(--f-sans)", fontSize: 13, letterSpacing: ".14em", color: "var(--c-primary)", fontWeight: 600 }}>
                      {g.n} / 02
                    </span>
                    <span style={{ flex: 1, height: 1, background: "var(--c-line)" }}></span>
                  </div>
                  <h3 className="display" style={{ fontSize: "clamp(34px, 4vw, 52px)", margin: "0 0 12px", color: "var(--c-ink)", lineHeight: 1.05 }}>
                    {g.titulo}<span className="it" style={{ color: "var(--c-primary)" }}>.</span>
                  </h3>
                  <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--c-text-soft)", margin: "0 0 24px", maxWidth: 520 }}>
                    {g.bajada}
                  </p>

                  <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gap: 12 }}>
                    {g.items.map((it, j) => (
                      <li key={j} style={{
                        display: "grid",
                        gridTemplateColumns: "auto 1fr",
                        gap: 14,
                        alignItems: "baseline",
                        paddingBottom: 12,
                        borderBottom: "1px solid var(--c-line-soft)",
                        fontFamily: "var(--f-sans)",
                        fontSize: 15.5,
                        color: "var(--c-ink)",
                        lineHeight: 1.5,
                      }}>
                        <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--c-primary)", transform: "translateY(-2px)" }}></span>
                        <span>{it}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </article>
            );
          })}
        </div>
      </div>

      <style>{`
        @media (max-width: 900px) {
          #servicios .srv-row { grid-template-columns: 1fr !important; }
          #servicios .srv-row > div:first-child { order: 1 !important; aspect-ratio: 16 / 10 !important; min-height: 220px !important; }
          #servicios .srv-row > div:last-child { order: 2 !important; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { Hero, Nosotros, Servicios });