/* Sections — BOTTOM
   Team · Gallery · Testimonials · Blog · Newsletter · Contact · Footer
*/

// ───────── TEAM ─────────
function Team() {
  const t = useT();
  const { lang } = useLang();
  const owner = GH_DATA.team.find((m) => m.owner);
  const rest = GH_DATA.team.filter((m) => !m.owner);

  return (
    <section id="team" className="section team-section">
      <div className="container">
        <Reveal style={{textAlign: 'center', marginBottom: 56}}>
          <div className="eyebrow" style={{justifyContent: 'center', display: 'flex'}}>{t('team_eyebrow')}</div>
          <h2 className="h-section" style={{marginTop: 16}}>
            {t('team_title')} <em>{t('team_title_em')}</em>
          </h2>
        </Reveal>

        {/* Owner highlight */}
        <Reveal className="owner-card">
          <div className="owner-img-wrap">
            <img src={owner.img} alt={owner.name} />
          </div>
          <div className="owner-text">
            <div className="eyebrow" style={{color: 'var(--gold)'}}>{owner[`role_${lang}`]}</div>
            <h3 className="h-section" style={{marginTop: 12, fontSize: 'clamp(32px,4vw,52px)'}}>{owner.name}</h3>
            <p className="lead" style={{marginTop: 24}}>{owner[`bio_${lang}`]}</p>
          </div>
        </Reveal>

        {/* Team grid */}
        <div className="team-grid">
          {rest.map((m, i) => (
            <Reveal key={m.id} delay={Math.min(4, (i % 5) + 1)} className="team-card">
              <div className="team-img-wrap">
                <img src={m.img} alt={m.name} />
              </div>
              <h4 className="serif team-name">{m.name}</h4>
              <div className="team-role">{m[`role_${lang}`]}</div>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .team-section { background: var(--bg-soft); }
        .owner-card {
          display: grid; grid-template-columns: 1fr 1.2fr;
          gap: clamp(32px, 5vw, 80px);
          background: var(--bg-card); padding: clamp(24px, 4vw, 56px);
          border: 1px solid var(--gold-soft);
          align-items: center;
          margin-bottom: 72px;
        }
        .owner-img-wrap {
          aspect-ratio: 3/4;
          overflow: hidden;
          position: relative;
        }
        .owner-img-wrap::after {
          content: '';
          position: absolute; inset: 0;
          border: 1px solid var(--gold-soft);
          pointer-events: none;
        }
        .owner-img-wrap img {
          width: 100%; height: 100%;
          object-fit: cover; object-position: center top;
        }
        .team-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
          max-width: 880px; margin: 0 auto;
        }
        .team-card { text-align: center; }
        .team-img-wrap {
          aspect-ratio: 3/4;
          overflow: hidden;
          background: var(--bg-card);
          position: relative;
          margin-bottom: 20px;
        }
        .team-img-wrap::after {
          content: '';
          position: absolute; inset: 0;
          border: 1px solid rgba(212,175,55,0.08);
          pointer-events: none;
          transition: border-color 0.4s ease;
        }
        .team-card:hover .team-img-wrap::after { border-color: var(--gold); }
        .team-img-wrap img {
          width: 100%; height: 100%;
          object-fit: cover; object-position: center top;
          transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
        }
        .team-card:hover .team-img-wrap img { transform: scale(1.04); }
        .team-name { font-size: 24px; margin: 0; color: var(--white); }
        .team-role { margin-top: 4px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
        @media (max-width: 1000px) {
          .team-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
          .owner-card { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

// ───────── GALLERY ─────────
function Gallery() {
  const t = useT();
  const { lang } = useLang();
  // 6 photos — masonry pattern
  const spans = [
    { col: 2, row: 2 }, // salon big
    { col: 1, row: 1 },
    { col: 1, row: 2 }, // facial room tall
    { col: 1, row: 1 },
    { col: 1, row: 1 },
    { col: 2, row: 1 }, // soraya wide
  ];
  return (
    <section id="gallery" className="section gallery-section">
      <div className="container">
        <Reveal style={{textAlign: 'center', marginBottom: 48}}>
          <div className="eyebrow" style={{justifyContent: 'center', display: 'flex'}}>{t('gal_eyebrow')}</div>
          <h2 className="h-section" style={{marginTop: 16}}>{t('gal_title')} <em>{t('gal_title_em')}</em></h2>
        </Reveal>

        <div className="gal-grid">
          {GH_DATA.gallery.map((g, i) => (
            <Reveal key={i} delay={Math.min(4, (i % 4) + 1)}
              className="gal-cell"
              style={{ gridColumn: `span ${spans[i]?.col || 1}`, gridRow: `span ${spans[i]?.row || 1}` }}>
              <img src={g.src} alt={g[`label_${lang}`]} />
              <div className="gal-label">{g[`label_${lang}`]}</div>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .gal-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          grid-auto-rows: 220px;
          gap: 12px;
        }
        .gal-cell {
          overflow: hidden;
          background: var(--bg-card);
          position: relative;
        }
        .gal-cell img {
          width: 100%; height: 100%;
          object-fit: cover;
          transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
        }
        .gal-cell:hover img { transform: scale(1.06); }
        .gal-label {
          position: absolute;
          bottom: 0; left: 0; right: 0;
          padding: 24px 20px 16px;
          background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
          color: var(--gold);
          font-size: 11px; letter-spacing: 0.2em;
          text-transform: uppercase;
          opacity: 0;
          transform: translateY(10px);
          transition: opacity 0.4s ease, transform 0.4s ease;
        }
        .gal-cell:hover .gal-label {
          opacity: 1;
          transform: translateY(0);
        }
        @media (max-width: 800px) {
          .gal-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
          .gal-cell { grid-column: span 1 !important; grid-row: span 1 !important; }
        }
      `}</style>
    </section>
  );
}

// ───────── TESTIMONIALS ─────────
function Testimonials() {
  const t = useT();
  const { lang } = useLang();
  const [idx, setIdx] = React.useState(0);
  const items = GH_DATA.testimonials;

  React.useEffect(() => {
    const id = setInterval(() => setIdx((i) => (i + 1) % items.length), 7000);
    return () => clearInterval(id);
  }, [items.length]);

  const current = items[idx];

  return (
    <section className="section testimonials-section">
      <div className="container">
        <Reveal style={{textAlign: 'center', marginBottom: 56}}>
          <div className="eyebrow" style={{justifyContent: 'center', display: 'flex'}}>{t('test_eyebrow')}</div>
          <h2 className="h-section" style={{marginTop: 16}}>
            {t('test_title')} <em>{t('test_title_em')}</em>
          </h2>
        </Reveal>

        <Reveal className="test-card">
          <div className="test-quote">"</div>
          <div className="test-stars">{'★'.repeat(current.stars)}</div>
          <p className="test-text serif" key={idx}>{current[lang]}</p>
          <div className="test-meta">
            <div className="test-name">— {current.name}</div>
            {current.staff && (
              <div className="test-service">{current[`service_${lang}`]} · con {current.staff}</div>
            )}
          </div>
        </Reveal>

        <Reveal style={{display: 'flex', justifyContent: 'center', gap: 12, marginTop: 32}}>
          {items.map((_, i) => (
            <button
              key={i}
              className={`test-dot ${idx === i ? 'on' : ''}`}
              onClick={() => setIdx(i)}
              aria-label={`Testimonial ${i+1}`}
            />
          ))}
        </Reveal>

        <Reveal style={{textAlign: 'center', marginTop: 40}}>
          <a href={GH_DATA.contact.booksy} target="_blank" rel="noreferrer" className="gold-link">
            {t('test_more')}
          </a>
        </Reveal>
      </div>

      <style>{`
        .testimonials-section { background: var(--bg); position: relative; }
        .test-card {
          max-width: 820px; margin: 0 auto;
          padding: clamp(32px, 5vw, 64px);
          border: 1px solid var(--gold-line);
          background: var(--bg-card);
          position: relative;
          text-align: center;
        }
        .test-quote {
          position: absolute; top: -36px; left: 50%; transform: translateX(-50%);
          width: 72px; height: 72px; border-radius: 99px;
          background: var(--bg); border: 1px solid var(--gold-line);
          display: flex; align-items: center; justify-content: center;
          color: var(--gold); font-family: var(--serif);
          font-size: 64px; line-height: 1.2;
        }
        .test-stars { color: var(--gold); font-size: 18px; letter-spacing: 4px; margin-bottom: 24px; }
        .test-text {
          font-size: clamp(20px, 2.4vw, 28px);
          font-style: italic; font-weight: 400;
          line-height: 1.45; color: var(--white);
          animation: fadeText 0.6s ease;
        }
        @keyframes fadeText {
          from { opacity: 0; transform: translateY(10px); }
          to { opacity: 1; transform: translateY(0); }
        }
        .test-meta { margin-top: 24px; }
        .test-name { color: var(--gold); letter-spacing: 0.2em; font-size: 12px; }
        .test-service { margin-top: 6px; color: rgba(250,250,250,0.5); font-size: 11px; letter-spacing: 0.1em; font-style: italic; font-family: var(--serif); }
        .test-dot {
          width: 8px; height: 8px; border-radius: 99px;
          background: transparent; border: 1px solid var(--gold);
          padding: 0; cursor: pointer;
          transition: all 0.3s ease;
        }
        .test-dot.on { background: var(--gold); width: 24px; }
      `}</style>
    </section>
  );
}

// ───────── BLOG ─────────
function Blog() {
  const t = useT();
  const { lang } = useLang();
  return (
    <section id="blog" className="section blog-section">
      <div className="container">
        <Reveal className="blog-head">
          <div>
            <div className="eyebrow">{t('blog_eyebrow')}</div>
            <h2 className="h-section" style={{marginTop: 16}}>
              {t('blog_title')} <em>{t('blog_title_em')}</em>
            </h2>
          </div>
          <a href="#" className="gold-link">{t('blog_all')}</a>
        </Reveal>

        <div className="blog-grid">
          {GH_DATA.blog.map((b, i) => (
            <Reveal key={i} delay={i + 1} className="blog-card">
              <div className="blog-img img-ph">
                <div>
                  <span className="icon">✦</span>
                  <span className="lbl">{b[`cat_${lang}`]}</span>
                </div>
              </div>
              <div className="blog-meta">
                <span className="blog-cat">{b[`cat_${lang}`]}</span>
                <span className="blog-sep">·</span>
                <span className="blog-date">{b.date}</span>
              </div>
              <h3 className="blog-title serif">{b[`title_${lang}`]}</h3>
              <p className="blog-excerpt">{b[`excerpt_${lang}`]}</p>
              <a href="#" className="gold-link" style={{marginTop: 16, fontSize: 11}}>{t('blog_more')}</a>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .blog-section { background: var(--bg-soft); }
        .blog-head {
          display: flex; justify-content: space-between; align-items: end;
          flex-wrap: wrap; gap: 24px;
          padding-bottom: 32px;
          border-bottom: 1px solid var(--gold-soft);
          margin-bottom: 48px;
        }
        .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
        .blog-card { display: flex; flex-direction: column; cursor: pointer; }
        .blog-img { aspect-ratio: 4/3; margin-bottom: 20px; transition: transform 0.4s ease; }
        .blog-card:hover .blog-img { transform: scale(1.02); }
        .blog-meta { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: flex; gap: 10px; align-items: center; }
        .blog-sep { color: var(--gold); }
        .blog-title { font-size: 28px; line-height: 1.2; color: var(--white); margin: 12px 0; }
        .blog-excerpt { color: rgba(250,250,250,0.7); font-size: 15px; }
        @media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }
      `}</style>
    </section>
  );
}

// ───────── NEWSLETTER ─────────
function Newsletter() {
  const t = useT();
  const [sent, setSent] = React.useState(false);
  return (
    <section className="section newsletter-section">
      <div className="container" style={{textAlign: 'center', maxWidth: 720}}>
        <Reveal>
          <div className="eyebrow" style={{justifyContent: 'center', display: 'flex'}}>{t('news_eyebrow')}</div>
          <h2 className="h-section" style={{marginTop: 16, fontStyle: 'italic'}}>
            {t('news_title')} <em style={{fontStyle: 'normal'}}>{t('news_title_em')}</em>
          </h2>
          <p className="lead" style={{marginTop: 16}}>{t('news_sub')}</p>
        </Reveal>

        <Reveal delay={1} className="news-form-wrap">
          {sent ? (
            <div className="news-ok">{t('news_ok')}</div>
          ) : (
            <form className="news-form" onSubmit={(e) => {
              e.preventDefault();
              const email = e.target.querySelector('input[type=email]').value;
              fetch('https://formsubmit.co/ajax/goldenhallformaciones@gmail.com', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                body: JSON.stringify({
                  email: email,
                  _subject: 'Nueva suscripción newsletter Golden Hall',
                  _template: 'table',
                  _captcha: 'false',
                  origen: 'Newsletter Golden Hall'
                })
              }).finally(() => setSent(true));
            }}>
              <input type="email" name="email" required placeholder={t('news_ph')} />
              <button type="submit" className="btn btn-solid">{t('news_btn')}</button>
            </form>
          )}
        </Reveal>
      </div>

      <style>{`
        .newsletter-section {
          background: linear-gradient(180deg, var(--bg) 0%, #050505 100%);
          border-top: 1px solid var(--gold-soft);
        }
        .news-form-wrap { margin-top: 40px; }
        .news-form {
          display: flex; gap: 0; max-width: 520px; margin: 0 auto;
          border: 1px solid var(--gold);
        }
        .news-form input {
          flex: 1; background: transparent; border: 0; padding: 18px 20px;
          color: var(--white); font: inherit; font-size: 14px;
          outline: none;
        }
        .news-form input::placeholder { color: var(--gray); }
        .news-form button { border: 0; }
        .news-ok {
          color: var(--gold); padding: 18px; border: 1px solid var(--gold);
          font-family: var(--serif); font-style: italic; font-size: 20px;
          max-width: 520px; margin: 0 auto;
        }
        @media (max-width: 600px) {
          .news-form { flex-direction: column; }
          .news-form button { padding: 16px; }
        }
      `}</style>
    </section>
  );
}

// ───────── CONTACT ─────────
function Contact() {
  const t = useT();
  const { lang } = useLang();
  const [sent, setSent] = React.useState(false);

  return (
    <section id="contact" className="section contact-section">
      <div className="container">
        <Reveal style={{textAlign: 'center', marginBottom: 64}}>
          <div className="eyebrow" style={{justifyContent: 'center', display: 'flex'}}>{t('cont_eyebrow')}</div>
          <h2 className="h-section" style={{marginTop: 16}}>{t('cont_title')}</h2>
        </Reveal>

        <div className="contact-grid">
          {/* Info */}
          <Reveal className="contact-info">
            <div className="info-block">
              <div className="info-label">{t('cont_address')}</div>
              <div className="info-value">{GH_DATA.contact.address}</div>
            </div>
            <div className="info-block">
              <div className="info-label">{t('cont_phone_l')}</div>
              <a className="info-value gold-text" href={`tel:${GH_DATA.contact.phoneRaw}`}>{GH_DATA.contact.phone}</a>
            </div>
            <div className="info-block">
              <div className="info-label">{t('cont_email_l')}</div>
              <a className="info-value gold-text" href={`mailto:${GH_DATA.contact.email}`}>{GH_DATA.contact.email}</a>
            </div>
            <div className="info-block">
              <div className="info-label">{t('cont_hours')}</div>
              <div className="info-value">{GH_DATA.contact.schedule[lang]}</div>
            </div>
            <div className="info-block">
              <div className="info-label">{t('cont_social')}</div>
              <div className="info-socials">
                <a href={`https://instagram.com/${GH_DATA.contact.instagram}`} target="_blank" rel="noreferrer" className="social-chip">
                  <SocialIcon kind="ig"/> Instagram
                </a>
                <a href={`https://tiktok.com/@${GH_DATA.contact.tiktok}`} target="_blank" rel="noreferrer" className="social-chip">
                  <SocialIcon kind="tt"/> TikTok
                </a>
                <a href={`https://wa.me/${GH_DATA.contact.phoneRaw}`} target="_blank" rel="noreferrer" className="social-chip">
                  <SocialIcon kind="wa"/> WhatsApp
                </a>
              </div>
            </div>

            {/* Google Maps embed */}
            <div className="info-map">
              <iframe
                src="https://www.google.com/maps?q=Avenida+de+la+Libertad+73,+Alhaur%C3%ADn+el+Grande,+M%C3%A1laga&output=embed"
                width="100%"
                height="100%"
                style={{border: 0}}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                title="Golden Hall ubicación"
              ></iframe>
            </div>
          </Reveal>

          {/* Form */}
          <Reveal delay={1} className="contact-form-wrap">
            <h3 className="serif" style={{fontSize: 32, margin: 0, marginBottom: 24, color: 'var(--white)'}}>{t('cont_form_t')}</h3>

            {sent ? (
              <div className="form-ok serif">{t('cont_ok')}</div>
            ) : (
              <form className="contact-form" onSubmit={(e) => {
                e.preventDefault();
                const fd = new FormData(e.target);
                const data = Object.fromEntries(fd.entries());
                data._subject = 'Mensaje desde la web Golden Hall · ' + (data.asunto || '');
                data._template = 'table';
                data._captcha = 'false';
                fetch('https://formsubmit.co/ajax/goldenhallformaciones@gmail.com', {
                  method: 'POST',
                  headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
                  body: JSON.stringify(data)
                }).finally(() => setSent(true));
              }}>
                <div className="form-row">
                  <label>
                    <span>{t('cont_name')}</span>
                    <input type="text" name="nombre" required />
                  </label>
                  <label>
                    <span>{t('cont_email')}</span>
                    <input type="email" name="email" required />
                  </label>
                </div>
                <div className="form-row">
                  <label>
                    <span>{t('cont_phone')}</span>
                    <input type="tel" name="telefono" />
                  </label>
                  <label>
                    <span>{t('cont_topic')}</span>
                    <select name="asunto">
                      <option>{lang === 'es' ? 'Reserva cita' : 'Book appointment'}</option>
                      <option>{lang === 'es' ? 'Información cursos' : 'Course info'}</option>
                      <option>{lang === 'es' ? 'Consulta general' : 'General inquiry'}</option>
                    </select>
                  </label>
                </div>
                <label>
                  <span>{t('cont_msg')}</span>
                  <textarea name="mensaje" rows="5" required></textarea>
                </label>
                <button type="submit" className="btn btn-solid btn-arrow" style={{alignSelf: 'flex-start'}}>
                  {t('cont_send')}
                </button>
              </form>
            )}
          </Reveal>
        </div>
      </div>

      <style>{`
        .contact-section { background: var(--bg); }
        .contact-grid {
          display: grid; grid-template-columns: 1fr 1.3fr;
          gap: clamp(32px, 5vw, 80px);
        }
        .info-block { padding: 20px 0; border-bottom: 1px solid rgba(212,175,55,0.12); }
        .info-block:first-child { padding-top: 0; }
        .info-label { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
        .info-value { font-family: var(--serif); font-size: 22px; color: var(--white); }
        .gold-text { color: var(--gold); }
        .info-socials { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
        .social-chip {
          display: inline-flex; align-items: center; gap: 8px;
          padding: 8px 14px; border: 1px solid var(--gold-line);
          border-radius: 999px;
          font-size: 12px; letter-spacing: 0.1em; color: var(--cream);
          transition: all 0.3s ease;
        }
        .social-chip:hover { background: var(--gold); color: var(--bg); border-color: var(--gold); }
        .social-chip svg { width: 14px; height: 14px; }
        .info-map { margin-top: 24px; aspect-ratio: 16/9; }

        .contact-form { display: flex; flex-direction: column; gap: 20px; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
        .contact-form label { display: flex; flex-direction: column; gap: 6px; }
        .contact-form label span { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
        .contact-form input,
        .contact-form select,
        .contact-form textarea {
          background: transparent; border: 0;
          border-bottom: 1px solid rgba(212,175,55,0.3);
          padding: 12px 0;
          color: var(--white); font: inherit; font-size: 15px;
          outline: none; transition: border-color 0.3s ease;
          font-family: var(--serif);
        }
        .contact-form input:focus,
        .contact-form select:focus,
        .contact-form textarea:focus { border-bottom-color: var(--gold); }
        .contact-form textarea { resize: vertical; min-height: 100px; }
        .contact-form select { color: var(--white); }
        .contact-form option { background: var(--bg); color: var(--white); }
        .form-ok {
          padding: 32px; border: 1px solid var(--gold);
          font-style: italic; font-size: 24px; color: var(--gold); text-align: center;
        }
        @media (max-width: 900px) {
          .contact-grid { grid-template-columns: 1fr; }
          .form-row { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

// ───────── SOCIAL ICONS ─────────
function SocialIcon({ kind }) {
  if (kind === 'ig') return (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="3" y="3" width="18" height="18" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="0.6" fill="currentColor"/>
    </svg>
  );
  if (kind === 'tt') return (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M19.5 6.5a4.5 4.5 0 0 1-3.5-1.7v9.7a5 5 0 1 1-5-5v2.5a2.5 2.5 0 1 0 2.5 2.5V3h2.5a4.5 4.5 0 0 0 3.5 3.5v0z"/>
    </svg>
  );
  if (kind === 'wa') return (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2a10 10 0 0 0-8.5 15.2L2 22l4.9-1.4A10 10 0 1 0 12 2zm5.3 14.3c-.2.6-1.3 1.2-1.8 1.2-.5.1-1.1.1-1.7-.1-.4-.1-.9-.3-1.5-.5-2.6-1.1-4.3-3.7-4.4-3.9-.1-.2-1-1.4-1-2.6 0-1.3.6-1.9.9-2.2.2-.2.5-.3.7-.3h.5c.2 0 .4 0 .6.4.2.5.7 1.7.8 1.8.1.1.1.3 0 .4-.1.2-.2.3-.3.4-.2.2-.3.4-.5.6-.1.1-.3.3-.1.6.2.3.9 1.5 1.9 2.4 1.3 1.1 2.4 1.5 2.7 1.6.3.1.5.1.7-.1l.8-.9c.2-.2.4-.2.6-.1.2.1 1.5.7 1.8.8.3.1.5.2.5.4.1.2.1 1-.2 1.6z"/>
    </svg>
  );
  return null;
}

// ───────── FOOTER ─────────
function Footer() {
  const t = useT();
  const { lang } = useLang();
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <div className="footer-logo">
              <img src="assets/logo.jpg" alt="Golden Hall" />
              <span className="footer-wordmark">GOLDEN HALL</span>
            </div>
            <p style={{marginTop: 20, maxWidth: 300, fontSize: 14, color: 'var(--gray)'}}>
              {t('foot_about')}
            </p>
            <div className="footer-socials">
              <a href={`https://instagram.com/${GH_DATA.contact.instagram}`} target="_blank" rel="noreferrer"><SocialIcon kind="ig"/></a>
              <a href={`https://tiktok.com/@${GH_DATA.contact.tiktok}`} target="_blank" rel="noreferrer"><SocialIcon kind="tt"/></a>
              <a href={`https://wa.me/${GH_DATA.contact.phoneRaw}`} target="_blank" rel="noreferrer"><SocialIcon kind="wa"/></a>
            </div>
          </div>

          <div className="footer-col">
            <div className="footer-label">{t('foot_salon')}</div>
            <a href="#services">{lang === 'es' ? 'Estética facial' : 'Facial'}</a>
            <a href="#services">{lang === 'es' ? 'Estética corporal' : 'Body'}</a>
            <a href="#services">{lang === 'es' ? 'Peluquería' : 'Hair'}</a>
            <a href="#team">{t('nav_team')}</a>
          </div>

          <div className="footer-col">
            <div className="footer-label">{t('foot_acad')}</div>
            <a href="#academy">{t('mode_in')}</a>
            <a href="#academy">{t('mode_on')}</a>
            <a href="#academy">{lang === 'es' ? 'Todos los cursos' : 'All courses'}</a>
            <a href="#contact">{lang === 'es' ? 'Información' : 'Information'}</a>
          </div>

          <div className="footer-col">
            <div className="footer-label">{t('foot_contact')}</div>
            <a href={`tel:${GH_DATA.contact.phoneRaw}`}>{GH_DATA.contact.phone}</a>
            <a href={`mailto:${GH_DATA.contact.email}`}>{GH_DATA.contact.email}</a>
            <a href={`https://instagram.com/${GH_DATA.contact.instagram}`} target="_blank" rel="noreferrer">@{GH_DATA.contact.instagram}</a>
            <a href={GH_DATA.contact.booksy} target="_blank" rel="noreferrer">{t('nav_book')}</a>
          </div>
        </div>

        <div className="footer-bottom">
          <div>© 2026 GOLDEN HALL · {t('foot_legal')}</div>
          <div>{lang === 'es' ? 'Hecho con ✦' : 'Made with ✦'}</div>
        </div>
      </div>

      <style>{`
        .footer {
          background: #050505;
          padding: 80px var(--pad-x) 32px;
          border-top: 1px solid var(--gold-soft);
        }
        .footer-logo {
          display: inline-flex; align-items: center; gap: 16px;
        }
        .footer-logo img {
          width: 52px; height: 52px; border-radius: 99px;
          object-fit: cover;
          border: 1px solid var(--gold);
        }
        .footer-wordmark {
          font-family: var(--serif); font-size: 28px;
          letter-spacing: 0.15em; color: var(--white);
        }
        .footer-grid {
          display: grid;
          grid-template-columns: 2fr 1fr 1fr 1fr;
          gap: 40px;
        }
        .footer-col { display: flex; flex-direction: column; gap: 12px; }
        .footer-label {
          font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase;
          color: var(--gold); margin-bottom: 8px;
        }
        .footer-col a {
          color: rgba(250,250,250,0.7); font-size: 14px;
          transition: color 0.25s ease;
        }
        .footer-col a:hover { color: var(--gold); }
        .footer-socials { display: flex; gap: 12px; margin-top: 24px; }
        .footer-socials a {
          width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
          border: 1px solid var(--gold-line); border-radius: 99px;
          color: var(--gold); transition: all 0.3s ease;
        }
        .footer-socials a:hover { background: var(--gold); color: var(--bg); }
        .footer-socials svg { width: 16px; height: 16px; }
        .footer-bottom {
          margin-top: 60px; padding-top: 24px;
          border-top: 1px solid rgba(255,255,255,0.06);
          display: flex; justify-content: space-between;
          font-size: 11px; letter-spacing: 0.15em; color: var(--gray);
          flex-wrap: wrap; gap: 12px;
        }
        @media (max-width: 800px) {
          .footer-grid { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 500px) {
          .footer-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </footer>
  );
}

window.Team = Team;
window.Gallery = Gallery;
window.Testimonials = Testimonials;
window.Blog = Blog;
window.Newsletter = Newsletter;
window.Contact = Contact;
window.Footer = Footer;
window.SocialIcon = SocialIcon;