/* ===== Growing Now — core components (nav, hero, squad, services) ===== */
(function () {
  const { useState, useEffect, useRef } = React;
  const Icon = window.Icon;

  // reveal-on-scroll wrapper
  function Reveal({ children, delay = 0, as = 'div', className = '', style = {} }) {
    const ref = useRef(null);
    useEffect(() => {
      const el = ref.current;
      const io = new IntersectionObserver((es) => {
        es.forEach(e => { if (e.isIntersecting) { setTimeout(() => el.classList.add('in'), delay); io.unobserve(el); } });
      }, { threshold: 0.15 });
      io.observe(el);
      return () => io.disconnect();
    }, []);
    return React.createElement(as, { ref, className: 'reveal ' + className, style }, children);
  }
  window.Reveal = Reveal;

  function SectionHead({ eyebrow, title, sub, color = 'var(--blue)', align = 'center' }) {
    return (
      <Reveal className="section-head" style={{ textAlign: align, maxWidth: 760, margin: align === 'center' ? '0 auto' : 0 }}>
        <div className="eyebrow" style={{ color, marginBottom: 14, display: 'flex', gap: 8, alignItems: 'center', justifyContent: align === 'center' ? 'center' : 'flex-start' }}>
          <Icon name="sparkles" size={16} color={color} /> {eyebrow}
        </div>
        <h2 style={{ fontSize: 'clamp(1.9rem,4.2vw,3.1rem)', margin: 0, color: 'var(--ink)' }}>{title}</h2>
        {sub && <p style={{ fontSize: 'clamp(1rem,1.5vw,1.18rem)', color: 'var(--ink-soft)', marginTop: 16, lineHeight: 1.6 }}>{sub}</p>}
      </Reveal>
    );
  }
  window.SectionHead = SectionHead;

  /* ---------- NAV ---------- */
  function Nav({ L, lang, setLang }) {
    const [scrolled, setScrolled] = useState(false);
    const [open, setOpen] = useState(false);
    useEffect(() => {
      const f = () => setScrolled(window.scrollY > 30);
      window.addEventListener('scroll', f); f(); return () => window.removeEventListener('scroll', f);
    }, []);
    const links = [['agents', L.nav_agents], ['services', L.nav_services], ['process', L.nav_process], ['about', L.nav_about], ['contact', L.nav_contact]];
    const go = (id) => { setOpen(false); const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth' }); };
    return (
      <nav style={{ position: 'fixed', top: 0, left: 0, right: 0, zIndex: 60, transition: 'all .35s', padding: scrolled ? '10px 0' : '18px 0' }}>
        <div className="container" style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <div className={scrolled ? 'glass' : ''} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: scrolled ? '8px 16px' : '4px 4px', borderRadius: 999, transition: 'all .35s' }}>
            <img src="assets/logo.png" alt="Growing Now" style={{ height: 34 }} />
          </div>
          <div className="glass" style={{ display: 'flex', alignItems: 'center', gap: 4, padding: 6, borderRadius: 999 }}>
            <div className="nav-links" style={{ display: 'flex', gap: 2 }}>
              {links.map(([id, label]) => (
                <button key={id} onClick={() => go(id)} className="nav-link" style={navLink}>{label}</button>
              ))}
            </div>
            <LangToggle lang={lang} setLang={setLang} />
            <a className="btn btn-orange" style={{ padding: '.6em 1.1em', fontSize: '.92rem' }}
              href={window.GN.bookingUrl('general', lang, 'nav')} target="_blank" rel="noopener">
              <Icon name="calendar" size={16} /> {L.nav_cta}
            </a>
            <button className="menu-btn" onClick={() => setOpen(!open)} style={{ ...navLink, display: 'none', padding: 8 }}>
              <Icon name={open ? 'x' : 'menu'} size={20} />
            </button>
          </div>
        </div>
        {open && (
          <div className="container" style={{ marginTop: 8 }}>
            <div className="glass mobile-menu" style={{ borderRadius: 20, padding: 12, display: 'flex', flexDirection: 'column', gap: 4 }}>
              {links.map(([id, label]) => <button key={id} onClick={() => go(id)} style={{ ...navLink, textAlign: 'left', padding: '12px 14px' }}>{label}</button>)}
            </div>
          </div>
        )}
      </nav>
    );
  }
  const navLink = { background: 'none', border: 'none', cursor: 'pointer', fontFamily: 'var(--font-display)', fontWeight: 500, fontSize: '.95rem', color: 'var(--ink)', padding: '8px 14px', borderRadius: 999, transition: 'background .2s' };

  function LangToggle({ lang, setLang }) {
    return (
      <button onClick={() => setLang(lang === 'es' ? 'en' : 'es')} title="Language" style={{ ...navLink, display: 'flex', alignItems: 'center', gap: 6, padding: '8px 12px' }}>
        <Icon name="globe" size={16} /> <span style={{ fontWeight: 700 }}>{lang.toUpperCase()}</span>
      </button>
    );
  }
  window.Nav = Nav;

  /* ---------- HERO ---------- */
  function Hero({ L, lang, onChat, onAgent }) {
    const agents = window.GN.agents;
    const go = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth' }); };
    // floating cluster positions
    const pos = [
      { t: '2%', l: '6%', s: 116, d: 0 }, { t: '0%', l: '54%', s: 96, d: .6 },
      { t: '34%', l: '78%', s: 134, d: 1.2 }, { t: '60%', l: '2%', s: 104, d: .9 },
      { t: '70%', l: '42%', s: 150, d: .3 }, { t: '40%', l: '30%', s: 88, d: 1.5 },
    ];
    return (
      <header style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', position: 'relative', paddingTop: 110, paddingBottom: 60 }}>
        <div className="container hero-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr .95fr', gap: 40, alignItems: 'center' }}>
          <div className="hero-pop">
            <div className="glass-soft" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '8px 16px', borderRadius: 999, marginBottom: 24, fontWeight: 700, fontSize: '.86rem', color: 'var(--blue)' }}>
              <span style={{ width: 8, height: 8, borderRadius: 99, background: 'var(--green)', boxShadow: '0 0 0 4px rgba(63,174,74,.2)' }}></span>
              {L.hero_eyebrow}
            </div>
            <h1 style={{ fontSize: 'clamp(2.5rem,6vw,4.6rem)', margin: 0, lineHeight: 1.02 }}>
              {L.hero_title_a} <span className="grad-text">{L.hero_title_b}</span>, {L.hero_title_c}
            </h1>
            <p style={{ fontSize: 'clamp(1.05rem,1.6vw,1.28rem)', color: 'var(--ink-soft)', maxWidth: 540, marginTop: 22, lineHeight: 1.6 }}>{L.hero_sub}</p>
            <div style={{ display: 'flex', gap: 14, marginTop: 32, flexWrap: 'wrap' }}>
              <a className="btn btn-primary" href={window.GN.bookingUrl('general', lang, 'hero')} target="_blank" rel="noopener">{L.hero_cta1} <Icon name="calendar" size={18} /></a>
              <button className="btn btn-ghost" onClick={onChat}><Icon name="message" size={18} /> {L.hero_cta2}</button>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 40, color: 'var(--ink-soft)', fontSize: '.9rem' }}>
              <div style={{ display: 'flex' }}>
                {agents.slice(0, 6).map((a, i) => (
                  <div key={a.id} className="portrait-clip" data-agent={a.id} style={{ width: 38, height: 38, border: '2px solid #fff', marginLeft: i ? -12 : 0, boxShadow: '0 4px 10px -4px rgba(0,0,0,.3)' }}>
                    <img src={a.portrait} alt={a.name} />
                  </div>
                ))}
              </div>
              <span>{L.hero_scroll}</span>
            </div>
          </div>
          <div className="hero-cluster" style={{ position: 'relative', height: 460 }}>
            {agents.map((a, i) => {
              const p = pos[i];
              return (
                <button key={a.id} className="floaty" onClick={() => onAgent(a)} title={a.name}
                  style={{ position: 'absolute', top: p.t, left: p.l, width: p.s, height: p.s, animationDelay: p.d + 's', border: 'none', background: 'none', cursor: 'pointer', padding: 0, boxShadow: '0 16px 34px -14px rgba(0,0,0,.4)', borderRadius: 99 }}>
                  <span style={{ position: 'absolute', inset: -6, borderRadius: 99, background: `radial-gradient(circle,${a.accent}55,transparent 70%)`, filter: 'blur(6px)' }}></span>
                  <div className="portrait-clip" data-agent={a.id} style={{ position: 'absolute', inset: 0, border: `3px solid ${a.accent}`, background: a.tint }}>
                    <img src={a.portrait} alt={a.name} />
                  </div>
                </button>
              );
            })}
          </div>
        </div>
      </header>
    );
  }
  window.Hero = Hero;

  /* ---------- AGENT CARD + SQUAD ---------- */
  function AgentCard({ a, lang, onOpen, delay, cardStyle = 'retrato' }) {
    const more = window.I18N.STR[lang].card_more;
    const hov = e => e.currentTarget.style.boxShadow = `0 28px 60px -22px ${a.accent}99`;
    const out = e => e.currentTarget.style.boxShadow = '';

    if (cardStyle === 'poster') {
      return (
        <Reveal delay={delay}>
          <div className="agent-card" style={{ borderRadius: 24, overflow: 'hidden', border: `3px solid ${a.accent}`, boxShadow: '0 18px 44px -20px rgba(0,0,0,.45)' }} onClick={() => onOpen(a)} onMouseEnter={hov} onMouseLeave={out}>
            <div style={{ position: 'relative' }}>
              <img src={a.poster} alt={a.name} style={{ width: '100%', display: 'block' }} />
              <div style={{ position: 'absolute', inset: 0, background: `linear-gradient(0deg, ${a.accent2}ee, transparent 38%)` }}></div>
              <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, padding: '18px 20px', color: '#fff' }}>
                <div style={{ fontSize: '.82rem', opacity: .9, fontWeight: 700 }}>{a.role[lang]}</div>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                  <h3 style={{ fontSize: '1.7rem', margin: 0, color: '#fff' }}>{a.name}</h3>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontWeight: 700, fontFamily: 'var(--font-display)', fontSize: '.9rem' }}>{more} <Icon name="arrow" size={15} color="#fff" /></span>
                </div>
              </div>
            </div>
          </div>
        </Reveal>
      );
    }

    if (cardStyle === 'compacto') {
      return (
        <Reveal delay={delay}>
          <div className="agent-card glass" style={{ padding: 22, display: 'flex', alignItems: 'center', gap: 16, textAlign: 'left' }} onClick={() => onOpen(a)} onMouseEnter={hov} onMouseLeave={out}>
            <div style={{ position: 'relative', width: 78, height: 78, flex: '0 0 auto' }}>
              <span style={{ position: 'absolute', inset: -5, borderRadius: 99, background: `radial-gradient(circle,${a.accent}55,transparent 70%)`, filter: 'blur(6px)' }}></span>
              <div className="portrait-clip" data-agent={a.id} style={{ position: 'absolute', inset: 0, border: `3px solid ${a.accent}`, background: a.tint }}>
                <img src={a.portrait} alt={a.name} />
              </div>
            </div>
            <div>
              <h3 style={{ fontSize: '1.5rem', margin: '0 0 2px', color: a.accent2 }}>{a.name}</h3>
              <div style={{ fontSize: '.82rem', color: a.accent, fontWeight: 700, marginBottom: 6 }}>{a.role[lang]}</div>
              <p style={{ color: 'var(--ink-soft)', fontSize: '.9rem', margin: 0, lineHeight: 1.45 }}>{a.tagline[lang]}</p>
            </div>
          </div>
        </Reveal>
      );
    }

    // default: retrato
    return (
      <Reveal delay={delay}>
        <div className="agent-card glass" style={{ padding: '30px 26px 26px', textAlign: 'center' }} onClick={() => onOpen(a)} onMouseEnter={hov} onMouseLeave={out}>
          <div style={{ position: 'relative', width: 150, height: 150, margin: '0 auto 18px' }}>
            <span style={{ position: 'absolute', inset: -8, borderRadius: 99, background: `radial-gradient(circle,${a.accent}66,transparent 70%)`, filter: 'blur(8px)' }}></span>
            <div className="portrait-clip" data-agent={a.id} style={{ position: 'absolute', inset: 0, border: `4px solid ${a.accent}`, background: a.tint }}>
              <img className="agent-portrait" src={a.portrait} alt={a.name} />
            </div>
          </div>
          <div className="chip" style={{ background: a.tint, color: a.accent2, marginBottom: 10 }}>{a.role[lang]}</div>
          <h3 style={{ fontSize: '2rem', margin: '0 0 6px', color: a.accent2 }}>{a.name}</h3>
          <p style={{ color: 'var(--ink-soft)', fontSize: '.96rem', margin: '0 0 16px', minHeight: 44 }}>{a.tagline[lang]}</p>
          <p style={{ fontStyle: 'italic', color: 'var(--ink)', fontWeight: 600, fontSize: '1.02rem', margin: '0 0 18px' }}>“{a.quote[lang]}”</p>
          <span className="card-cta" style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: a.accent, fontWeight: 700, fontFamily: 'var(--font-display)' }}>
            {more} <Icon name="arrow" size={16} color={a.accent} />
          </span>
        </div>
      </Reveal>
    );
  }

  function Squad({ L, lang, onOpen, cardStyle }) {
    const cols = cardStyle === 'compacto' ? 'repeat(2,1fr)' : 'repeat(3,1fr)';
    return (
      <section id="agents" className="section">
        <div className="container">
          <SectionHead eyebrow={L.squad_eyebrow} title={L.squad_title} sub={L.squad_sub} color="var(--green-d)" />
          <div className="squad-grid" style={{ display: 'grid', gridTemplateColumns: cols, gap: 28, marginTop: 56 }}>
            {window.GN.agents.map((a, i) => <AgentCard key={a.id} a={a} lang={lang} onOpen={onOpen} delay={(i % 3) * 90} cardStyle={cardStyle} />)}
          </div>
        </div>
      </section>
    );
  }
  window.Squad = Squad;

  /* ---------- AGENT MODAL ---------- */
  function AgentModal({ a, lang, onClose, onChat, onAgentChat }) {
    const L = window.I18N.STR[lang];
    useEffect(() => {
      document.body.classList.add('no-scroll');
      const k = (e) => e.key === 'Escape' && onClose();
      window.addEventListener('keydown', k);
      return () => { document.body.classList.remove('no-scroll'); window.removeEventListener('keydown', k); };
    }, []);
    if (!a) return null;
    return (
      <div className="modal-back" onClick={onClose}>
        <div className="modal-card glass scroll-thin" onClick={e => e.stopPropagation()}
          style={{ maxWidth: 940, width: '100%', maxHeight: '90vh', overflowY: 'auto', borderRadius: 30, padding: 0, background: `linear-gradient(160deg,${a.tint},#fff 60%)` }}>
          <div className="modal-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1.05fr', gap: 0 }}>
            <div style={{ position: 'relative', background: `linear-gradient(160deg,${a.accent}22,${a.accent}05)`, padding: 24, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <img src={a.poster} alt={a.name} style={{ width: '100%', borderRadius: 18, boxShadow: '0 20px 50px -20px rgba(0,0,0,.5)' }} />
            </div>
            <div style={{ padding: '36px 36px 32px' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                <div className="chip" style={{ background: a.tint, color: a.accent2 }}>{a.role[lang]} · {a.animal[lang]}</div>
                <button onClick={onClose} className="glass-soft" style={{ border: 'none', borderRadius: 99, width: 40, height: 40, cursor: 'pointer', display: 'grid', placeItems: 'center' }}><Icon name="x" size={18} /></button>
              </div>
              <h2 style={{ fontSize: '3rem', margin: '14px 0 4px', color: a.accent2 }}>{a.name}</h2>
              <p style={{ color: 'var(--ink-soft)', margin: '0 0 14px' }}>{a.tagline[lang]}</p>
              <p style={{ fontStyle: 'italic', fontWeight: 700, fontSize: '1.2rem', color: a.accent2, margin: '0 0 22px' }}>“{a.quote[lang]}”</p>
              <div className="eyebrow" style={{ color: a.accent, marginBottom: 12 }}>{L.helps_title}</div>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {a.helps.map((h, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                    <span style={{ flex: '0 0 auto', width: 40, height: 40, borderRadius: 12, background: a.tint, display: 'grid', placeItems: 'center', color: a.accent2 }}><Icon name={h.icon} size={20} color={a.accent2} /></span>
                    <span style={{ fontWeight: 600 }}>{h[lang]}</span>
                  </div>
                ))}
              </div>
              <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginTop: 22 }}>
                {a.tags[lang].map(t => <span key={t} className="chip" style={{ background: '#fff', border: `1px solid ${a.accent}33`, color: a.accent2 }}>{t}</span>)}
              </div>
              <button className="btn" style={{ marginTop: 26, background: `linear-gradient(135deg,${a.accent},${a.accent2})`, color: '#fff', width: '100%', justifyContent: 'center' }} onClick={() => { onClose(); (onAgentChat || onChat)(a); }}>
                <Icon name="message" size={18} /> {L.talk_to} {a.name}
              </button>
            </div>
          </div>
        </div>
      </div>
    );
  }
  window.AgentModal = AgentModal;

  /* ---------- SERVICES ---------- */
  function Services({ L, lang, onOpen }) {
    const byId = window.GN.byId;
    return (
      <section id="services" className="section" style={{ background: 'linear-gradient(180deg,transparent, rgba(255,255,255,.5) 30%, rgba(255,255,255,.5) 70%, transparent)' }}>
        <div className="container">
          <SectionHead eyebrow={L.services_eyebrow} title={L.services_title} sub={L.services_sub} color="var(--orange-d)" />
          <div className="svc-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 22, marginTop: 56 }}>
            {window.GN.services.map((s, i) => {
              const a = byId[s.agent];
              return (
                <Reveal key={i} delay={(i % 3) * 80}>
                  <div className="glass svc-card" style={{ borderRadius: 24, padding: 28, height: '100%', transition: 'transform .3s', cursor: 'pointer' }}
                    onClick={() => onOpen(a)}
                    onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-8px)'; }}
                    onMouseLeave={e => { e.currentTarget.style.transform = ''; }}>
                    <div style={{ width: 56, height: 56, borderRadius: 16, background: `linear-gradient(135deg,${a.accent},${a.accent2})`, display: 'grid', placeItems: 'center', marginBottom: 18, boxShadow: `0 12px 24px -10px ${a.accent}` }}>
                      <Icon name={s.icon} size={26} color="#fff" />
                    </div>
                    <h3 style={{ fontSize: '1.4rem', margin: '0 0 8px' }}>{s.t[lang]}</h3>
                    <p style={{ color: 'var(--ink-soft)', margin: '0 0 16px', lineHeight: 1.55 }}>{s.d[lang]}</p>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: '.85rem', color: a.accent2, fontWeight: 700 }}>
                      <div className="portrait-clip" data-agent={a.id} style={{ width: 26, height: 26, border: `2px solid ${a.accent}` }}>
                        <img src={a.portrait} alt={a.name} />
                      </div>
                      {L.led_by} {a.name}
                    </div>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>
    );
  }
  window.Services = Services;
})();
