/* Nueva Umbría — secciones (parte 1) */
const NU = window.NuevaUmbrADesignSystem_eab2ff;
const { Button, Badge, Card, ServiceCard, ProcessStep, TestimonialCard, Logo } = NU;
const { useState, useEffect } = React;

const WA_LINK = "https://wa.me/34601300522";

/* Icono Lucide (se materializa tras el montaje) */
function Icon({ name, size = 24, stroke = 1.75, style }) {
  return <i data-lucide={name} style={{ width: size, height: size, ...style }}></i>;
}
function refreshIcons() {
  if (window.lucide && window.lucide.createIcons) {
    window.lucide.createIcons({ attrs: { "stroke-width": 1.75 } });
  }
}

/* Tile de icono verde sobre menta */
function IconTile({ name, size = 26 }) {
  return (
    <div style={{
      width: 52, height: 52, flex: "none", borderRadius: "var(--radius-md)",
      background: "var(--menta)", color: "var(--verde-umbria)",
      display: "flex", alignItems: "center", justifyContent: "center",
    }}>
      <Icon name={name} size={size} />
    </div>
  );
}

/* Foto real (generada). Si falta src, marcador honesto. */
function Photo({ label, height = 420, icon = "image", src }) {
  if (src) {
    return (
      <img
        src={src}
        alt={label}
        loading="lazy"
        style={{
          width: "100%", height, objectFit: "cover", display: "block",
          borderRadius: "var(--radius-lg)", border: "1px solid var(--borde)",
        }}
      />
    );
  }
  return (
    <div className="nu-photo" style={{ height, position: "relative" }}>
      <span className="nu-photo-tag">Sustituir por foto real</span>
      <Icon name={icon} size={30} />
      <span>{label}</span>
    </div>
  );
}

/* ── Cabecera sticky ───────────────────────────────────────────── */
const NAV = [
  ["Servicios", "#servicios"],
  ["Cómo trabajamos", "#proceso"],
  ["Sobre nosotros", "#nosotros"],
  ["Opiniones", "#opiniones"],
  ["Contacto", "#contacto"],
];

function Header({ onQuote }) {
  const [open, setOpen] = useState(false);
  const go = (e, href) => { setOpen(false); };
  return (
    <header className="nu-header">
      <div className="nu-container nu-header-inner">
        <a href="#inicio" style={{ textDecoration: "none" }}><Logo size={30} /></a>
        <nav className="nu-nav">
          {NAV.map(([label, href]) => (
            <a key={href} href={href}>{label}</a>
          ))}
        </nav>
        <div className="nu-header-right">
          <Button variant="accent" size="md" onClick={onQuote}>Pide presupuesto</Button>
          <button className="nu-burger" aria-label="Menú" onClick={() => setOpen(!open)}>
            <Icon name={open ? "x" : "menu"} size={22} />
          </button>
        </div>
      </div>
      {open && (
        <div className="nu-container" style={{ paddingBottom: 16 }}>
          <div style={{ display: "flex", flexDirection: "column", gap: 4, borderTop: "1px solid var(--borde)", paddingTop: 12 }}>
            {NAV.map(([label, href]) => (
              <a key={href} href={href} onClick={(e) => go(e, href)}
                 style={{ textDecoration: "none", color: "var(--carbon)", fontSize: 16, padding: "10px 4px", fontWeight: 500 }}>
                {label}
              </a>
            ))}
          </div>
        </div>
      )}
    </header>
  );
}

/* ── Héroe ─────────────────────────────────────────────────────── */
function Hero({ onQuote }) {
  return (
    <section id="inicio" style={{ padding: "64px 0 76px" }}>
      <div className="nu-container hero-grid">
        <div>
          <Badge variant="menta">Empresa familiar · Huelva y Sevilla</Badge>
          <h1 style={{
            fontFamily: "var(--font-heading)", fontWeight: 600,
            fontSize: 52, lineHeight: "60px", letterSpacing: "-0.02em",
            margin: "20px 0 0", textWrap: "balance",
          }}>
            Donde se nota<br /><span style={{ color: "var(--verde-umbria)" }}>el cuidado</span>
          </h1>
          <p style={{ fontSize: 18, lineHeight: "30px", color: "var(--gris-piedra)", margin: "20px 0 0", maxWidth: 480, textWrap: "pretty" }}>
            Empresa familiar de limpieza en Huelva. Cuidamos tu espacio como si fuera nuestro,
            con la tranquilidad de un servicio cercano y fiable que cumple siempre.
          </p>
          <div style={{ display: "flex", gap: 14, marginTop: 30, flexWrap: "wrap" }}>
            <Button variant="accent" size="lg" onClick={onQuote}>Pide presupuesto</Button>
            <Button variant="secondary" size="lg" as="a" href="#servicios">Ver servicios</Button>
          </div>
          <p style={{ fontSize: 14, lineHeight: "22px", color: "var(--gris-piedra)", margin: "22px 0 0", display: "flex", flexWrap: "wrap", gap: "6px 14px" }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="leaf" size={16} style={{ color: "var(--verde-umbria)" }} />Más de 10 años cuidando hogares y empresas</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="zap" size={16} style={{ color: "var(--verde-umbria)" }} />Respuesta rápida</span>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}><Icon name="check" size={16} style={{ color: "var(--verde-umbria)" }} />Sin compromiso</span>
          </p>
        </div>
        <Photo src="assets/hero.png" label="Profesional de Nueva Umbría limpiando un cristal en un espacio luminoso y cuidado" height={440} icon="sun" />
      </div>
    </section>
  );
}

/* ── Confianza rápida ──────────────────────────────────────────── */
const TRUST = [
  ["heart-handshake", "Empresa familiar", "Más de diez años en Huelva. Tratamos cada espacio como si fuera nuestro."],
  ["calendar-check", "Cumplimos siempre", "El día, la hora y el detalle. Lo que prometemos, se cumple."],
  ["users", "Trato cercano", "Hablas con personas, no con un número. Atención directa y humana."],
  ["smile", "Sin preocupaciones", "Nosotros nos encargamos del cuidado. Tú te despreocupas."],
];

function Trust() {
  return (
    <section style={{ background: "var(--arena)", padding: "48px 0" }}>
      <div className="nu-container trust-grid">
        {TRUST.map(([icon, title, text]) => (
          <div key={title} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <IconTile name={icon} />
            <h3 style={{ fontFamily: "var(--font-heading)", fontWeight: 600, fontSize: 18, lineHeight: "26px", margin: 0 }}>{title}</h3>
            <p style={{ fontSize: 15, lineHeight: "24px", color: "var(--gris-piedra)", margin: 0 }}>{text}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ── Servicios ─────────────────────────────────────────────────── */
const SERVICES = [
  ["users", "Comunidades de propietarios", "Portales, escaleras y zonas comunes siempre impecables, con la constancia que una comunidad necesita."],
  ["building-2", "Oficinas y empresas", "Un espacio de trabajo limpio y cuidado, sin que tengas que estar pendiente. La imagen de tu negocio empieza por su limpieza."],
  ["store", "Comercios y locales", "Limpieza adaptada a tu horario para que tu local esté siempre listo para recibir a tus clientes."],
  ["landmark", "Entidades públicas", "Servicio fiable y continuo para espacios de uso público, con el rigor y la responsabilidad que requieren."],
  ["home", "Hogares y particulares", "Vuelve a un hogar que da gusto. Cuidamos tu casa como si fuera la nuestra, para que tú descanses."],
  ["sparkles", "Limpieza de cristales", "Cristales, ventanales y escaparates relucientes. La luz entra mejor y tu espacio se ve cuidado por dentro y por fuera."],
  ["calendar-clock", "Limpiezas puntuales", "Mudanzas, fin de obra, antes o después de un evento… Cuando necesites una limpieza a fondo en un momento concreto."],
];

function Services({ onQuote }) {
  return (
    <section id="servicios" style={{ padding: "80px 0" }}>
      <div className="nu-container">
        <div style={{ textAlign: "center", maxWidth: 660, margin: "0 auto" }}>
          <p className="nu-kicker">Servicios</p>
          <h2 className="nu-h2">Cuidamos todo tipo de espacios</h2>
          <p className="nu-lead">Damos servicio a comunidades, empresas, entidades públicas y particulares. Cada espacio es distinto, así que adaptamos la frecuencia y el servicio a lo que necesitas.</p>
        </div>
        <div className="services-grid" style={{ marginTop: 48 }}>
          {SERVICES.map(([icon, title, desc]) => (
            <ServiceCard key={title} icon={<Icon name={icon} size={26} />} title={title} description={desc}
              linkLabel="Pedir presupuesto" href="#contacto" onClick={onQuote} />
          ))}
        </div>
        <p style={{ textAlign: "center", fontSize: 15, lineHeight: "24px", color: "var(--gris-piedra)", margin: "36px auto 0", maxWidth: 720 }}>
          Los materiales y productos los ponemos siempre nosotros. Si el servicio necesita desplazamiento, te lo decimos claro desde el principio.
        </p>
        <div style={{ textAlign: "center", marginTop: 24 }}>
          <Button variant="accent" size="lg" onClick={onQuote}>Pide tu presupuesto sin compromiso</Button>
        </div>
      </div>
    </section>
  );
}

/* ── Para empresas y particulares ──────────────────────────────── */
function AudienceBlock({ photoLabel, photoIcon, photoSrc, kicker, title, text, advantages, cta, onCta, reverse }) {
  const photo = <Photo src={photoSrc} label={photoLabel} icon={photoIcon} height={340} />;
  const body = (
    <div>
      <p className="nu-kicker">{kicker}</p>
      <h3 style={{ fontFamily: "var(--font-heading)", fontWeight: 600, fontSize: 26, lineHeight: "34px", margin: "10px 0 0" }}>{title}</h3>
      <p style={{ fontSize: 16, lineHeight: "26px", color: "var(--gris-piedra)", margin: "14px 0 0" }}>{text}</p>
      <ul style={{ listStyle: "none", margin: "18px 0 0", padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {advantages.map((a) => (
          <li key={a} style={{ display: "flex", gap: 10, fontSize: 15, lineHeight: "24px" }}>
            <span className="nu-check"><Icon name="check" size={20} /></span>{a}
          </li>
        ))}
      </ul>
      <div style={{ marginTop: 24 }}>
        <Button variant="primary" size="md" onClick={onCta}>{cta}</Button>
      </div>
    </div>
  );
  return (
    <Card variant="surface" padding="lg" style={{ overflow: "hidden" }}>
      <div className="audience-grid">
        {reverse ? <>{body}{photo}</> : <>{photo}{body}</>}
      </div>
    </Card>
  );
}

function Audiences({ onQuoteType }) {
  return (
    <section style={{ background: "var(--arena)", padding: "72px 0" }}>
      <div className="nu-container" style={{ display: "flex", flexDirection: "column", gap: 28 }}>
        <AudienceBlock
          kicker="Para empresas"
          title="Un espacio impecable, sin estar pendiente"
          text="Cumplimos siempre: el día, la hora y el detalle. La imagen de tu negocio empieza por su limpieza."
          advantages={["Fiabilidad y continuidad en cada servicio", "Un único interlocutor cercano para todo", "Adaptamos frecuencia y horario a tu actividad"]}
          cta="Quiero presupuesto para mi empresa"
          onCta={() => onQuoteType("Una empresa")}
          photoSrc="assets/oficina.png"
          photoLabel="Oficina luminosa y ordenada lista para empezar el día"
          photoIcon="building-2"
        />
        <AudienceBlock
          reverse
          kicker="Para tu hogar"
          title="Vuelve a un hogar que da gusto"
          text="Cuidamos tu casa como si fuera la nuestra. Tú descansa; del cuidado nos encargamos nosotros."
          advantages={["Trato cercano y de confianza", "Recupera tu tiempo y tu tranquilidad", "Tu casa siempre en buenas manos"]}
          cta="Quiero presupuesto para mi hogar"
          onCta={() => onQuoteType("Un particular / hogar")}
          photoSrc="assets/hogar.png"
          photoLabel="Salón de un hogar cálido, limpio y acogedor"
          photoIcon="home"
        />
      </div>
    </section>
  );
}

/* ── Cómo trabajamos ───────────────────────────────────────────── */
const STEPS = [
  ["Nos cuentas qué necesitas", "Por teléfono, WhatsApp o el formulario. Sin compromiso y sin complicaciones."],
  ["Te preparamos un presupuesto claro", "Te lo damos rápido, transparente y sin sorpresas ni letra pequeña."],
  ["Organizamos el servicio", "Acordamos día, hora y detalles. Llevamos nosotros los materiales y productos."],
  ["Cuidamos tu espacio, siempre", "Cumplimos lo acordado y estamos pendientes. Si algo no sale perfecto, lo resolvemos."],
];

function Process() {
  return (
    <section id="proceso" style={{ background: "var(--menta)", padding: "80px 0" }}>
      <div className="nu-container">
        <div style={{ maxWidth: 660 }}>
          <p className="nu-kicker">Cómo trabajamos</p>
          <h2 className="nu-h2">Así de fácil empezamos</h2>
          <p className="nu-lead" style={{ color: "var(--carbon)", opacity: 0.78 }}>Sin trámites ni esperas. Desde el primer contacto hasta el día a día, lo ponemos fácil.</p>
        </div>
        <div className="process-grid" style={{ marginTop: 44 }}>
          {STEPS.map(([title, desc], i) => (
            <ProcessStep key={title} number={i + 1} title={title} description={desc} last={true} />
          ))}
        </div>
        <div style={{ marginTop: 8, background: "var(--verde-umbria)", color: "#fff", borderRadius: "var(--radius-lg)", padding: "20px 26px", display: "flex", alignItems: "center", gap: 14 }}>
          <Icon name="shield-check" size={24} style={{ flex: "none" }} />
          <p style={{ margin: 0, fontFamily: "var(--font-heading)", fontWeight: 500, fontSize: 18, lineHeight: "26px" }}>
            Nuestro compromiso: cercanía, fiabilidad y cuidado en cada visita.
          </p>
        </div>
      </div>
    </section>
  );
}

/* ── Sobre nosotros ────────────────────────────────────────────── */
const VALUES = [
  ["heart", "Cuidado", "Atención y mimo en cada detalle."],
  ["message-circle", "Cercanía", "Trato humano y comunicación directa."],
  ["shield-check", "Fiabilidad", "Cumplimos con responsabilidad y puntualidad."],
  ["handshake", "Respeto", "Relaciones justas, honestas y duraderas."],
  ["sparkles", "Trabajo bien hecho", "El cuidado deja huella."],
];

function About() {
  return (
    <section id="nosotros" style={{ padding: "80px 0" }}>
      <div className="nu-container about-grid">
        <Photo src="assets/equipo.png" label="El equipo de Nueva Umbría, una empresa familiar de Huelva" icon="users" height={420} />
        <div>
          <p className="nu-kicker">Sobre nosotros</p>
          <h2 className="nu-h2">Una empresa familiar que cuida de verdad</h2>
          <p style={{ fontSize: 16, lineHeight: "27px", color: "var(--gris-piedra)", margin: "16px 0 0" }}>
            Nueva Umbría nació en Huelva hace más de diez años como una empresa familiar, para cubrir una necesidad
            tan sencilla como real: que las empresas y las personas pudieran mantener sus espacios limpios y cuidados,
            lugares donde trabajar y vivir con comodidad. Lo que empezó como un proyecto familiar se ha consolidado con
            los años, y hoy vive un relevo generacional que mantiene intactos sus valores: cercanía, fiabilidad y cuidado.
            Esa raíz familiar nos diferencia de las grandes empresas impersonales: por eso tratamos cada espacio como si
            fuera nuestro y ponemos la confianza en el centro de todo lo que hacemos.
          </p>
        </div>
      </div>
      <div className="nu-container" style={{ marginTop: 44 }}>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 16 }}>
          {VALUES.map(([icon, word, micro]) => (
            <div key={word} style={{ flex: "1 1 180px", minWidth: 170, display: "flex", flexDirection: "column", gap: 8, padding: "20px", background: "var(--arena)", borderRadius: "var(--radius-lg)", border: "1px solid var(--borde)" }}>
              <Icon name={icon} size={24} style={{ color: "var(--verde-umbria)" }} />
              <span style={{ fontFamily: "var(--font-heading)", fontWeight: 600, fontSize: 17 }}>{word}</span>
              <span style={{ fontSize: 14, lineHeight: "21px", color: "var(--gris-piedra)" }}>{micro}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Opiniones ─────────────────────────────────────────────────── */
const TESTIMONIALS = [
  ["Llevan años con la limpieza de nuestra comunidad y siempre cumplen. Da gusto el trato.", "Comunidad de propietarios", "Particular"],
  ["Tengo la oficina impecable y no tengo que estar pendiente de nada. Muy fiables.", "Empresa de Huelva", "Empresa"],
  ["Vuelvo a casa y todo está cuidado al detalle. Son cercanos y de total confianza.", "Particular", "Particular"],
];

function Stars() {
  return (
    <div style={{ display: "flex", gap: 2, color: "var(--coral)" }}>
      {[0,1,2,3,4].map(i => <Icon key={i} name="star" size={16} style={{ fill: "var(--coral)" }} />)}
    </div>
  );
}

function Testimonials() {
  return (
    <section id="opiniones" style={{ background: "var(--arena)", padding: "80px 0" }}>
      <div className="nu-container">
        <div style={{ textAlign: "center", maxWidth: 640, margin: "0 auto" }}>
          <p className="nu-kicker">Opiniones</p>
          <h2 className="nu-h2">Lo que dicen nuestros clientes</h2>
          <p className="nu-lead">Opiniones de ejemplo. Sustituir por testimonios reales de clientes.</p>
        </div>
        <div className="testi-grid" style={{ marginTop: 44 }}>
          {TESTIMONIALS.map(([quote, name, type]) => (
            <div key={name} style={{ position: "relative" }}>
              <TestimonialCard quote={quote} name={name} type={type} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Icon, IconTile, Photo, refreshIcons, Header, Hero, Trust, Services, Audiences, Process, About, Testimonials, Stars, WA_LINK });