// contacto.jsx — Contacto screen

const SEDES = [
  {
    name: 'Sede Centro Ki',
    tag: 'Detección · Talleres · Academia Ki',
    address: 'Vasco Núñez de Balboa 1243',
    district: 'Las Condes, Santiago',
    phone: '+56 9 5782 6862',
    email: 'clara@centroki.cl',
    color: 'var(--c-primary)',
    bg: 'var(--c-sage)',
  },
  {
    name: 'Sede Terapéutica',
    tag: 'Psicología · Terapia ocupacional',
    address: 'Tobalaba 1455 · Timbre 5',
    district: 'Providencia, Santiago',
    phone: '+56 9 2830 4569',
    email: 'daniela@centroki.cl',
    color: 'var(--c-accent)',
    bg: 'var(--c-pink)',
  },
];

const SedeCard = ({ sede }) => (
  <div style={{
    background: 'var(--paper)',
    border: '1px solid var(--line)',
    borderRadius: 'var(--radius-md)',
    padding: '22px 24px',
    display: 'flex',
    flexDirection: 'column',
    gap: 14,
    position: 'relative',
    overflow: 'hidden',
  }}>
    <div style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 4, background: sede.color }}></div>
    <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 12, marginTop: 4 }}>
      <div>
        <h3 style={{ fontSize: 20, margin: 0, letterSpacing: '-0.01em' }}>{sede.name}</h3>
        <div style={{ fontSize: 11, color: sede.color, fontWeight: 600, textTransform: 'uppercase', letterSpacing: '0.06em', marginTop: 4 }}>{sede.tag}</div>
      </div>
      <div style={{ width: 40, height: 40, borderRadius: 12, background: sede.color, display: 'grid', placeItems: 'center', flexShrink: 0 }}>
        <IconMap size={20} color="white" />
      </div>
    </div>
    <div style={{ display: 'grid', gridTemplateColumns: '20px 1fr', columnGap: 12, rowGap: 10, alignItems: 'start', fontSize: 14.5, color: 'var(--ink-soft)', lineHeight: 1.5 }}>
      <div style={{ marginTop: 2, color: sede.color }}><IconMap size={16} color="currentColor" /></div>
      <div>
        {sede.address}<br />
        <span style={{ color: 'var(--ink-mute)', fontSize: 13 }}>{sede.district}</span>
      </div>
      <div style={{ marginTop: 2, color: sede.color }}><IconPhone size={16} color="currentColor" /></div>
      <div>
        <a style={{ color: 'var(--ink)', textDecoration: 'none' }}>{sede.phone}</a>
      </div>
      <div style={{ marginTop: 2, color: sede.color }}><IconMail size={16} color="currentColor" /></div>
      <div>
        <a style={{ color: 'var(--ink)', textDecoration: 'none' }}>{sede.email}</a>
      </div>
    </div>
  </div>
);

const ContactoHero = () =>
<section className="hero" style={{ paddingBottom: 40 }}>
    <div className="container">
      <div style={{ maxWidth: 760, display: 'flex', flexDirection: 'column', gap: 22, position: 'relative' }}>
        <div className="eyebrow"><span className="dot"></span> Contacto</div>
        <h1>Hablemos. Estamos<br />para <span className="hand" style={{ color: 'var(--c-accent)', fontSize: '1.1em' }}>escucharte</span>.</h1>
        <p className="hero-sub">
          Si tienes dudas, prefieres una primera conversación o quieres saber más antes de agendar, contáctanos. Te respondemos en menos de 24 horas hábiles.
        </p>
        <div style={{ position: 'absolute', top: -20, right: 20, color: 'var(--c-sage-ink)' }}><Rainbow size={100} /></div>
      </div>
    </div>
  </section>;


const ContactoMain = ({ onNavigate }) => {
  const [form, setForm] = React.useState({ name: '', email: '', phone: '', message: '' });
  const [sent, setSent] = React.useState(false);
  const onSubmit = (e) => {
    e.preventDefault();
    const subject = `Contacto web · ${form.name}`;
    const body =
      `Nombre: ${form.name}\n` +
      `Correo: ${form.email}\n` +
      `Teléfono: ${form.phone || '—'}\n\n` +
      `Mensaje:\n${form.message}`;
    window.location.href =
      `mailto:clara@centroki.cl?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    setSent(true);
  };
  return (
    <section style={{ paddingTop: 20 }}>
      <div className="container">
        <div className="contact-grid">
          <div>
            <h2 style={{ fontSize: 32, marginBottom: 8 }}>Nuestras sedes</h2>
            <p style={{ color: 'var(--ink-soft)', fontSize: 14.5, marginBottom: 24, maxWidth: 460 }}>
              Tenemos dos espacios pensados para acompañarte: uno para detección, talleres y la Academia Ki; otro dedicado al área terapéutica.
            </p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              {SEDES.map((sede) => <SedeCard key={sede.name} sede={sede} />)}
            </div>

          </div>
          <div className="contact-card">
            {!sent ?
            <form onSubmit={onSubmit}>
                <h3 style={{ marginBottom: 8 }}>Escríbenos</h3>
                <p style={{ color: 'var(--ink-soft)', fontSize: 14.5, marginBottom: 24 }}>
                  Cuéntanos brevemente cómo podemos ayudarte. Te respondemos en menos de 24h hábiles.
                </p>
                <div className="form-row">
                  <label>Tu nombre</label>
                  <input value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} required placeholder="Tu nombre completo" />
                </div>
                <div className="form-grid">
                  <div className="form-row">
                    <label>Correo</label>
                    <input type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} required placeholder="tu@correo.cl" />
                  </div>
                  <div className="form-row">
                    <label>Teléfono</label>
                    <input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} placeholder="+56 9 ..." />
                  </div>
                </div>
                <div className="form-row">
                  <label>¿En qué te ayudamos?</label>
                  <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} required placeholder="Cuéntanos un poco sobre tu hijo/a o lo que estás buscando." style={{ minHeight: 120 }} />
                </div>
                <button type="submit" className="btn btn-accent" style={{ marginTop: 8, width: '100%', justifyContent: 'center' }}>
                  Enviar mensaje <IconArrowRight />
                </button>
                {isAgendarVisible() &&
                <p style={{ fontSize: 12, color: 'var(--ink-mute)', textAlign: 'center', marginTop: 14 }}>
                  O si prefieres, <a onClick={() => onNavigate('agendar')} style={{ color: 'var(--c-accent-ink)', cursor: 'pointer', fontWeight: 600 }}>agenda directo</a> una conversación gratuita.
                </p>
                }
              </form> :

            <div style={{ textAlign: 'center', padding: '32px 16px' }}>
                <div style={{ width: 72, height: 72, borderRadius: '50%', background: 'var(--c-sage)', display: 'grid', placeItems: 'center', margin: '0 auto 18px' }}>
                  <IconCheck size={36} color="white" />
                </div>
                <h3 style={{ marginBottom: 8 }}>¡Mensaje enviado!</h3>
                <p style={{ color: 'var(--ink-soft)', fontSize: 15, lineHeight: 1.6 }}>
                  Gracias por escribirnos. Te respondemos pronto al correo que nos dejaste.
                </p>
              </div>
            }
          </div>
        </div>
      </div>
    </section>);

};

const ContactoScreen = ({ onNavigate }) =>
<div data-screen-label="Contacto">
    <ContactoHero />
    <ContactoMain onNavigate={onNavigate} />
    <div style={{ height: 80 }} />
  </div>;


Object.assign(window, { ContactoScreen, SEDES });