/* Sections — TOP
   Nav · Hero · Stats · Pillars · About
*/

// ───────── NAV ─────────
function Nav() {
  const t = useT();
  const { lang, setLang } = useLang();
  const [scrolled, setScrolled] = React.useState(false);
  const [mobileOpen, setMobileOpen] = React.useState(false);

  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const links = [
    ['#about',    t('nav_about')],
    ['#services', t('nav_services')],
    ['#academy',  t('nav_academy')],
    ['#team',     t('nav_team')],
    ['#gallery',  t('nav_gallery')],
    ['#contact',  t('nav_contact')],
  ];

  return (
    <header className={`nav ${scrolled ? 'is-scrolled' : ''} ${mobileOpen ? 'mobile-open' : ''}`}>
      <a href="#top" className="nav-logo">
        <img className="nav-logo-mark" src="assets/logo.jpg" alt="Golden Hall" />
        <span className="wordmark">
          <span className="word">GOLDEN</span>
          <span className="word">HALL</span>
        </span>
      </a>

      <nav className="nav-links hide-mobile">
        {links.map(([href, label]) => (
          <a key={href} href={href}>{label}</a>
        ))}
      </nav>

      <div className="nav-actions">
        <div className="lang-switch hide-mobile">
          <button className={lang === 'es' ? 'on' : ''} onClick={() => setLang('es')}>ES</button>
          <span>/</span>
          <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
        <a href={GH_DATA.contact.booksy} target="_blank" rel="noreferrer" className="btn btn-solid nav-cta">
          {t('nav_book')}
        </a>
        <button
          className="nav-burger only-mobile"
          onClick={() => setMobileOpen((v) => !v)}
          aria-label="Menu"
        >
          <span></span><span></span><span></span>
        </button>
      </div>

      {/* mobile drawer */}
      <div className="nav-drawer only-mobile">
        {links.map(([href, label]) => (
          <a key={href} href={href} onClick={() => setMobileOpen(false)}>{label}</a>
        ))}
        <div className="drawer-lang">
          <button className={lang === 'es' ? 'on' : ''} onClick={() => setLang('es')}>ES</button>
          <span>/</span>
          <button className={lang === 'en' ? 'on' : ''} onClick={() => setLang('en')}>EN</button>
        </div>
      </div>

      <style>{`
        .nav {
          position: fixed; top: 0; left: 0; right: 0; z-index: 50;
          display: flex; align-items: center; justify-content: space-between;
          padding: 24px var(--pad-x);
          background: transparent;
          transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s;
          border-bottom: 1px solid transparent;
        }
        .nav.is-scrolled {
          background: rgba(10,10,10,0.92);
          backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
          padding-block: 16px;
          border-color: var(--gold-soft);
        }
        .nav-logo {
          display: inline-flex; align-items: center; gap: 14px;
          color: var(--white);
        }
        .nav-logo-mark {
          width: 44px; height: 44px;
          border-radius: 99px;
          object-fit: cover;
          border: 1px solid var(--gold);
          box-shadow: 0 0 0 1px rgba(212,175,55,0.15);
          flex-shrink: 0;
        }
        .nav-logo .wordmark {
          font-family: var(--serif); font-weight: 500;
          font-size: 22px; letter-spacing: 0.18em;
          display: flex; gap: 8px;
        }
        .nav-links {
          display: flex; gap: 32px;
          font-family: var(--sans); font-size: 12px; font-weight: 500;
          letter-spacing: 0.18em; text-transform: uppercase;
        }
        .nav-links a {
          color: rgba(250,250,250,0.85); position: relative; padding: 6px 0;
          transition: color 0.25s ease;
        }
        .nav-links a::after {
          content: ''; position: absolute; left: 50%; right: 50%; bottom: 0;
          height: 1px; background: var(--gold); transition: left .3s, right .3s;
        }
        .nav-links a:hover { color: var(--gold); }
        .nav-links a:hover::after { left: 0; right: 0; }
        .nav-actions { display: flex; align-items: center; gap: 24px; }
        .lang-switch {
          display: flex; align-items: center; gap: 6px;
          font-size: 12px; letter-spacing: 0.18em; font-weight: 500;
          color: var(--gray);
        }
        .lang-switch button {
          background: none; border: 0; padding: 4px 2px; cursor: pointer;
          font: inherit; color: inherit; letter-spacing: inherit;
        }
        .lang-switch button.on { color: var(--gold); }
        .nav-cta { padding: 12px 22px; font-size: 11px; }
        .nav-burger {
          width: 32px; height: 32px; background: none; border: 0; padding: 0;
          display: flex; flex-direction: column; gap: 5px; cursor: pointer;
          align-items: stretch; justify-content: center;
        }
        .nav-burger span { display: block; height: 1.5px; background: var(--gold); transition: transform .3s, opacity .3s; }
        .mobile-open .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
        .mobile-open .nav-burger span:nth-child(2) { opacity: 0; }
        .mobile-open .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

        .nav-drawer {
          position: fixed; top: 0; left: 0; right: 0;
          background: var(--bg);
          padding: 90px 32px 40px;
          display: flex; flex-direction: column; gap: 4px;
          font-family: var(--serif); font-size: 28px;
          transform: translateY(-100%); transition: transform .45s cubic-bezier(.5,0,.2,1);
          z-index: -1;
          border-bottom: 1px solid var(--gold-line);
        }
        .nav-drawer a { color: var(--white); padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
        .mobile-open .nav-drawer { transform: translateY(0); }
        .drawer-lang { display: flex; gap: 12px; align-items: center; margin-top: 24px; font-size: 14px; letter-spacing: 0.2em; }
        .drawer-lang button { background: none; border: 0; color: var(--gray); cursor: pointer; font: inherit; letter-spacing: inherit; }
        .drawer-lang button.on { color: var(--gold); }

        @media (max-width: 800px) {
          .nav { padding-inline: 20px; }
          .nav-logo .wordmark { font-size: 16px; }
          .nav-logo-mark { width: 36px; height: 36px; }
          .nav-cta { display: none; }
        }
      `}</style>
    </header>
  );
}

// ───────── HERO ─────────
function Hero() {
  const t = useT();
  return (
    <section id="top" className="hero">
      {/* Foto real del salón como backdrop */}
      <img className="hero-bg" src="assets/salon.jpg" alt="Golden Hall salón" />
      <div className="hero-overlay"></div>

      <Reveal className="hero-content">
        <div className="eyebrow" style={{justifyContent: 'center'}}>{t('hero_eyebrow')}</div>
        <h1 className="h-hero" style={{margin: '24px 0', textAlign: 'center'}}>
          {t('hero_title_1')}<br/><em>{t('hero_title_em')}</em>
        </h1>
        <p className="lead" style={{maxWidth: 620, margin: '0 auto', textAlign: 'center'}}>
          {t('hero_sub')}
        </p>
        <div className="hero-ctas">
          <a href={GH_DATA.contact.booksy} target="_blank" rel="noreferrer" className="btn btn-solid btn-arrow">{t('hero_cta_book')}</a>
          <a href="#academy" className="btn btn-light btn-arrow">{t('hero_cta_acad')}</a>
        </div>
      </Reveal>

      <div className="hero-scroll">
        <span>SCROLL</span>
        <span className="line"></span>
      </div>

      <style>{`
        .hero {
          position: relative;
          min-height: 100vh;
          display: flex; align-items: center; justify-content: center;
          padding: 120px var(--pad-x) 80px;
          overflow: hidden;
        }
        .hero-bg {
          position: absolute; inset: 0; z-index: 0;
          width: 100%; height: 100%;
          object-fit: cover; object-position: center;
        }
        .hero-overlay {
          position: absolute; inset: 0; z-index: 1;
          background:
            radial-gradient(ellipse at center, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.7) 60%, rgba(10,10,10,0.95) 100%),
            linear-gradient(to bottom, rgba(10,10,10,0.55), rgba(10,10,10,0.85));
        }
        .hero-content {
          position: relative; z-index: 2;
          max-width: 900px;
          width: 100%;
          text-align: center;
        }
        .hero-ctas {
          display: flex; gap: 16px; justify-content: center;
          margin-top: 48px; flex-wrap: wrap;
        }
        .hero-scroll {
          position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2;
          display: flex; flex-direction: column; align-items: center; gap: 12px;
          font-family: var(--sans); font-size: 11px; letter-spacing: 0.3em; color: var(--gold);
        }
        .hero-scroll .line {
          width: 1px; height: 56px; background: var(--gold);
          animation: scrollPulse 2.4s infinite ease-in-out;
          transform-origin: top;
        }
        @keyframes scrollPulse {
          0%, 100% { transform: scaleY(0.4); opacity: 0.4; }
          50% { transform: scaleY(1); opacity: 1; }
        }
        @media (max-width: 800px) {
          .hero { min-height: 88vh; padding-top: 100px; }
          .hero-scroll { display: none; }
        }
      `}</style>
    </section>
  );
}

// ───────── STATS ─────────
function Stats() {
  const { lang } = useLang();
  return (
    <section className="stats-section section tight">
      <div className="container stats-grid">
        {GH_DATA.stats.map((s, i) => (
          <Reveal key={i} delay={(i % 4) + 1} className="stat">
            <div className="stat-num"><Counter to={s.value} suffix={s.suffix} decimals={s.decimal || 0} /></div>
            <div className="stat-label">{s[`label_${lang}`]}</div>
          </Reveal>
        ))}
      </div>

      <style>{`
        .stats-section {
          background: var(--bg-soft);
          border-block: 1px solid var(--gold-soft);
        }
        .stats-grid {
          display: grid; grid-template-columns: repeat(4, 1fr);
          gap: 24px; text-align: center;
        }
        .stat-num {
          font-family: var(--serif); font-weight: 400;
          font-size: clamp(48px, 6vw, 76px);
          line-height: 1; color: var(--gold);
          letter-spacing: -0.02em;
        }
        .stat-label {
          margin-top: 12px; font-size: 11px;
          letter-spacing: 0.28em; text-transform: uppercase;
          color: rgba(250,250,250,0.6);
        }
        @media (max-width: 700px) {
          .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
        }
      `}</style>
    </section>
  );
}

// ───────── PILLARS — 3 áreas ─────────
function Pillars() {
  const t = useT();
  const pillars = [
    { num: '01', t: t('pillar_clinic_t'), d: t('pillar_clinic_d'), img: 'assets/p-estetica.png', anchor: '#services' },
    { num: '02', t: t('pillar_hair_t'),   d: t('pillar_hair_d'),   img: 'assets/p-soraya-maquillaje.png', anchor: '#services' },
    { num: '03', t: t('pillar_acad_t'),   d: t('pillar_acad_d'),   img: 'assets/p-aparatologia.png', anchor: '#academy' },
  ];
  return (
    <section className="section pillars-section">
      <div className="container">
        <Reveal>
          <div className="eyebrow" style={{justifyContent: 'center', display: 'flex'}}>Golden Hall</div>
          <h2 className="h-section" style={{textAlign: 'center', marginTop: 16, marginBottom: 64}}>
            Tres mundos, <em>un mismo salón.</em>
          </h2>
        </Reveal>

        <div className="pillars-grid">
          {pillars.map((p, i) => (
            <Reveal key={p.num} delay={i + 1} className="pillar">
              <div className="pillar-img-wrap">
                <img className="pillar-img" src={p.img} alt={p.t} />
              </div>
              <div className="pillar-num">{p.num}</div>
              <h3 className="h-sub">{p.t}</h3>
              <p className="lead" style={{fontSize: 15, marginTop: 12}}>{p.d}</p>
              <a href={p.anchor} className="gold-link" style={{marginTop: 16}}>
                {i === 2 ? 'Ver cursos' : 'Saber más'}
              </a>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        .pillars-grid {
          display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
        }
        .pillar { display: flex; flex-direction: column; }
        .pillar-img-wrap {
          width: 100%; aspect-ratio: 4/5;
          margin-bottom: 32px;
          overflow: hidden;
          background: var(--bg-card);
        }
        .pillar-img {
          width: 100%; height: 100%;
          object-fit: cover;
          transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
        }
        .pillar:hover .pillar-img { transform: scale(1.04); }
        .pillar-num {
          font-family: var(--serif); font-style: italic;
          color: var(--gold); font-size: 18px; margin-bottom: 6px;
          letter-spacing: 0.1em;
        }
        @media (max-width: 800px) {
          .pillars-grid { grid-template-columns: 1fr; gap: 56px; }
          .pillar-img-wrap { aspect-ratio: 4/3; margin-bottom: 24px; }
        }
      `}</style>
    </section>
  );
}

// ───────── ABOUT ─────────
function About() {
  const t = useT();
  return (
    <section id="about" className="section about-section">
      <div className="container about-grid">
        <Reveal className="about-img">
          <div className="about-img-wrap">
            <img src="assets/andrea.png" alt="Andrea — fundadora de Golden Hall" />
          </div>
        </Reveal>

        <div className="about-text">
          <Reveal>
            <div className="eyebrow">{t('about_eyebrow')}</div>
            <h2 className="h-section" style={{marginTop: 16}}>
              {t('about_title_1')}<br/><em>{t('about_title_em')}</em>
            </h2>
          </Reveal>
          <Reveal delay={1}>
            <p className="lead" style={{marginTop: 32}}>{t('about_p1')}</p>
            <p className="lead">{t('about_p2')}</p>
          </Reveal>
          <Reveal delay={2}>
            <div className="about-signature">
              <span className="signature-line"></span>
              <span className="serif" style={{fontStyle: 'italic', fontSize: 22}}>{t('about_signature')}</span>
            </div>
          </Reveal>
        </div>
      </div>

      <style>{`
        .about-section { position: relative; }
        .about-section::before {
          content: ''; position: absolute; top: 0; left: 50%;
          width: 1px; height: 80px; background: var(--gold);
        }
        .about-grid {
          display: grid; grid-template-columns: 1fr 1.2fr;
          gap: clamp(40px, 6vw, 100px);
          align-items: center;
        }
        .about-img-wrap {
          aspect-ratio: 3/4;
          overflow: hidden;
          background: var(--bg-card);
          position: relative;
        }
        .about-img-wrap::after {
          content: '';
          position: absolute; inset: 0;
          border: 1px solid var(--gold-soft);
          pointer-events: none;
        }
        .about-img-wrap img {
          width: 100%; height: 100%;
          object-fit: cover;
          transition: transform 0.8s cubic-bezier(.2,.7,.2,1);
        }
        .about-img-wrap:hover img { transform: scale(1.03); }
        .about-signature { display: flex; align-items: center; gap: 16px; margin-top: 32px; color: var(--gold); }
        .signature-line { display: inline-block; width: 48px; height: 1px; background: var(--gold); }
        @media (max-width: 800px) {
          .about-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
}

window.Nav = Nav;
window.Hero = Hero;
window.Stats = Stats;
window.Pillars = Pillars;
window.About = About;