/* global React, Section, Eyebrow, Icon */
// Content.jsx — emotional block, "when to ask for help", service cards, day-in-the-life, country calm

// 2 · Emotional opening + 7 · pull quote band
function EmotionalBlock() {
  return (
    <Section id="hogar" bg="sand" narrow>
      <Eyebrow>Sabemos cómo se siente</Eyebrow>
      <h2 className="mr-h2">Sabemos que no es solo una decisión práctica</h2>
      <div className="mr-prose">
        <p className="mr-body">
          Muchas familias llegan a este momento después de haber cuidado durante años. A veces
          aparece el cansancio, la culpa, el miedo a equivocarse o la duda de si un hogar será
          realmente el lugar correcto.
        </p>
        <p className="mr-body">En Mi Refugio en el Campo entendemos esa carga emocional.</p>
        <p className="mr-body">
          Por eso no queremos que tomes una decisión apurada. Queremos conversar, mostrarte el
          lugar, responder tus dudas y ayudarte a evaluar si este hogar es adecuado para tu ser querido.
        </p>
      </div>
      <figure className="mr-band">
        <p className="mr-quote">Pedir apoyo no significa dejar de cuidar.</p>
      </figure>
    </Section>
  );
}

// 3 · When to ask for help
const SIGNALS = [
  { icon: 'users', tone: 'olive', text: 'Cuando necesita más compañía durante el día.' },
  { icon: 'sun', tone: 'gold', text: 'Cuando mantener una rutina se vuelve difícil.' },
  { icon: 'heart-handshake', tone: 'coral', text: 'Cuando la familia cuidadora está cansada.' },
  { icon: 'shield-check', tone: 'teal', text: 'Cuando se busca un entorno más seguro y acompañado.' },
];

function WhenToAsk() {
  return (
    <Section id="apoyo" bg="cream">
      <div className="mr-sectionhead">
        <Eyebrow>Reconocer el momento</Eyebrow>
        <h2 className="mr-h2">¿Cuándo puede ser momento de pedir apoyo?</h2>
        <p className="mr-lead" style={{ marginTop: 16, maxWidth: '60ch' }}>
          A veces la familia comienza a notar pequeños cambios: más necesidad de compañía,
          dificultad para mantener rutinas, riesgo de caídas, soledad durante el día o cansancio
          en quienes cuidan. Pedir apoyo no significa abandonar.
        </p>
      </div>
      <div className="mr-grid mr-grid--2" style={{ marginTop: 40 }}>
        {SIGNALS.map((s, i) => (
          <div key={i} className="mr-signal mr-card mr-card--hover">
            <div className={`mr-card__ic ic-${s.tone}`}><Icon name={s.icon} size={24} /></div>
            <p className="mr-h3" style={{ fontSize: 'var(--step-1)' }}>{s.text}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

// 5 · What your loved one finds here
const OFFERINGS = [
  { icon: 'hand-heart', tone: 'olive', title: 'Acompañamiento diario', text: 'Compañía y trato cercano durante todo el día.' },
  { icon: 'utensils', tone: 'gold', title: 'Alimentación y rutinas', text: 'Comidas diarias y horarios estables que dan orden.' },
  { icon: 'shield-check', tone: 'teal', title: 'Supervisión y seguridad', text: 'Un entorno ordenado y atento, pensado para cuidar.' },
  { icon: 'armchair', tone: 'coral', title: 'Espacios comunes', text: 'Lugares para compartir, conversar y descansar.' },
  { icon: 'message-circle', tone: 'olive', title: 'Trato cercano', text: 'Cada persona conserva su dignidad y su forma de ser.' },
  { icon: 'leaf', tone: 'teal', title: 'Vida cotidiana con calma', text: 'Días con ritmo, pausa y sentido en el campo.' },
];

function Offerings() {
  return (
    <Section id="hogar-cuidado" bg="white">
      <div className="mr-sectionhead">
        <Eyebrow>Qué encontrará aquí</Eyebrow>
        <h2 className="mr-h2">Un hogar con cuidado cotidiano y compañía</h2>
        <p className="mr-lead" style={{ marginTop: 16, maxWidth: '58ch' }}>
          Nos importa que cada persona conserve su dignidad, su historia y su forma de ser.
          El cuidado no debe sentirse frío ni automático. Debe sentirse humano.
        </p>
      </div>
      <div className="mr-grid mr-grid--3" style={{ marginTop: 44 }}>
        {OFFERINGS.map((o, i) => (
          <div key={i} className="mr-card mr-card--hover">
            <div className={`mr-card__ic ic-${o.tone}`}><Icon name={o.icon} size={24} /></div>
            <h3 className="mr-h3" style={{ fontSize: 'var(--step-2)' }}>{o.title}</h3>
            <p className="mr-body mr-muted" style={{ marginTop: 8, fontSize: 'var(--step-0)' }}>{o.text}</p>
          </div>
        ))}
      </div>
    </Section>
  );
}

// 7 · Country calm — deep band with media
function CountryCalm() {
  return (
    <Section id="dia" bg="deep">
      <div className="mr-calm">
        <div className="mr-calm__copy">
          <Eyebrow color="var(--accent-gold)">La calma del campo</Eyebrow>
          <h2 className="mr-h2" style={{ color: 'var(--crema-calido)' }}>La calma del campo como parte del cuidado</h2>
          <p className="mr-body" style={{ color: 'var(--fg-on-deep-muted)', marginTop: 18 }}>
            El campo no es solo paisaje. Es ritmo, silencio, luz natural, espacios abiertos y una
            forma más serena de habitar el día.
          </p>
          <p className="mr-quote" style={{ marginTop: 28 }}>Aquí el entorno también acompaña.</p>
        </div>
        <div className="mr-calm__media">
          <img
            src="assets/photos/arbol-quincho-otono.jpeg"
            alt="Árbol otoñal y quincho rodeados de vegetación en Mi Refugio en el Campo"
            style={{ width: '100%', aspectRatio: '3 / 4', objectFit: 'cover', borderRadius: 'var(--radius-lg)', border: '1px solid rgba(251,247,239,0.15)' }}
          />
        </div>
      </div>
    </Section>
  );
}

Object.assign(window, { EmotionalBlock, WhenToAsk, Offerings, CountryCalm });