/* ===== Growing Now — sections (process, about, cta, footer) ===== */
(function () {
  const { useEffect, useRef, useState } = React;
  const Icon = window.Icon;
  const Reveal = window.Reveal;
  const SectionHead = window.SectionHead;

  /* ---------- PROCESS ---------- */
  function Process({ L, lang }) {
    const byId = window.GN.byId;
    return (
      <section id="process" className="section">
        <div className="container">
          <SectionHead eyebrow={L.process_eyebrow} title={L.process_title} color="var(--blue)" />
          <div className="proc-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 20, marginTop: 56 }}>
            {window.GN.process.map((p, i) => {
              const a = byId[p.agent];
              return (
                <Reveal key={i} delay={i * 90}>
                  <div className="glass" style={{ borderRadius: 24, padding: 26, height: '100%', position: 'relative', overflow: 'hidden' }}>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: '3.4rem', lineHeight: 1, color: a.accent, opacity: .22 }}>{p.n}</div>
                    <div className="portrait-clip" data-agent={a.id} style={{ width: 54, height: 54, border: `3px solid ${a.accent}`, margin: '6px 0 14px', background: a.tint }}><img src={a.portrait} alt={a.name} /></div>
                    <h3 style={{ fontSize: '1.3rem', margin: '0 0 8px' }}>{p.t[lang]}</h3>
                    <p style={{ color: 'var(--ink-soft)', margin: 0, lineHeight: 1.55, fontSize: '.96rem' }}>{p.d[lang]}</p>
                  </div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </section>
    );
  }
  window.Process = Process;

  /* ---------- ABOUT ---------- */
  function About({ L, lang }) {
    return (
      <section id="about" className="section" style={{ background: 'linear-gradient(180deg,transparent, rgba(255,255,255,.5) 30%, rgba(255,255,255,.5) 70%, transparent)' }}>
        <div className="container about-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 50, alignItems: 'center' }}>
          <Reveal>
            <div className="eyebrow" style={{ color: 'var(--green-d)', marginBottom: 14, display: 'flex', gap: 8, alignItems: 'center' }}><Icon name="sparkles" size={16} color="var(--green-d)" /> {L.about_eyebrow}</div>
            <h2 style={{ fontSize: 'clamp(1.9rem,4vw,3rem)', margin: '0 0 18px' }}>{L.about_title}</h2>
            <p style={{ color: 'var(--ink-soft)', fontSize: '1.1rem', lineHeight: 1.7, marginBottom: 30 }}>{L.about_p}</p>
            <p style={{ color: 'var(--ink-soft)', lineHeight: 1.65, margin: 0, fontWeight: 700 }}>
              {lang === 'es' ? 'Atendemos negocios en Naples, Southwest Florida y de forma remota en Estados Unidos.' : 'We serve businesses in Naples, Southwest Florida, and remotely across the United States.'}
            </p>
          </Reveal>
          <Reveal delay={120}>
            <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
              {window.GN.agents.map((a, i) => (
                <div key={a.id} className="glass" style={{ borderRadius: 20, padding: 16, display: 'flex', alignItems: 'center', gap: 12, transform: i % 2 ? 'translateY(18px)' : 'none' }}>
                  <div className="portrait-clip" data-agent={a.id} style={{ width: 48, height: 48, border: `2.5px solid ${a.accent}`, background: a.tint }}><img src={a.portrait} alt={a.name} /></div>
                  <div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, color: a.accent2 }}>{a.name}</div>
                    <div style={{ fontSize: '.78rem', color: 'var(--ink-soft)' }}>{a.role[lang]}</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </section>
    );
  }
  window.About = About;

  /* ---------- CTA ---------- */
  function CTA({ L, lang, onStart, onChat }) {
    const zuki = window.GN.byId.zuki;
    return (
      <section id="contact" className="section">
        <div className="container">
          <Reveal>
            <div className="glass" style={{ borderRadius: 36, padding: 'clamp(34px,5vw,64px)', textAlign: 'center', position: 'relative', overflow: 'hidden', background: 'linear-gradient(150deg, rgba(254,241,222,.85), rgba(255,255,255,.6))' }}>
              <div style={{ position: 'relative', width: 120, height: 120, margin: '0 auto 22px' }}>
                <span className="floaty" style={{ position: 'absolute', inset: -10, borderRadius: 99, background: `radial-gradient(circle,${zuki.accent}66,transparent 70%)`, filter: 'blur(10px)' }}></span>
                <div className="portrait-clip floaty" data-agent="zuki" style={{ position: 'absolute', inset: 0, border: `4px solid ${zuki.accent}`, background: zuki.tint }}>
                  <img src={zuki.portrait} alt="Zuki" />
                </div>
              </div>
              <div className="eyebrow" style={{ color: 'var(--orange-d)', marginBottom: 12 }}>{L.cta_eyebrow}</div>
              <h2 style={{ fontSize: 'clamp(2rem,4.5vw,3.2rem)', margin: '0 auto 16px', maxWidth: 720 }}>{L.cta_title}</h2>
              <p style={{ color: 'var(--ink-soft)', fontSize: '1.12rem', maxWidth: 580, margin: '0 auto 30px', lineHeight: 1.6 }}>{L.cta_sub}</p>
              <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
                <button className="btn btn-orange" style={{ fontSize: '1.1rem', padding: '1em 1.8em' }} onClick={onStart}><Icon name="sparkles" size={20} /> {L.cta_start}</button>
                <button className="btn btn-ghost" onClick={onChat}><Icon name="message" size={18} /> {L.cta_chat}</button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    );
  }
  window.CTA = CTA;

  /* ---------- FOOTER ---------- */
  function Footer({ L, lang }) {
    const go = (id) => { const el = document.getElementById(id); if (el) el.scrollIntoView({ behavior: 'smooth' }); };
    const links = [['agents', L.nav_agents], ['services', L.nav_services], ['process', L.nav_process], ['about', L.nav_about], ['contact', L.nav_contact]];

    const SocialBtn = ({ href, icon }) => (
      <a href={href} target="_blank" rel="noopener noreferrer" className="glass-soft"
        style={{ width: 40, height: 40, borderRadius: 12, display: 'grid', placeItems: 'center', color: 'var(--blue)', textDecoration: 'none', transition: 'transform .2s, color .2s' }}
        onMouseEnter={e => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.color = 'var(--green-d)'; }}
        onMouseLeave={e => { e.currentTarget.style.transform = ''; e.currentTarget.style.color = 'var(--blue)'; }}>
        <Icon name={icon} size={18} color="currentColor" />
      </a>
    );

    return (
      <footer style={{ paddingTop: 40, paddingBottom: 40, position: 'relative' }}>
        <div className="container">
          <div className="glass" style={{ borderRadius: 30, padding: 'clamp(28px,4vw,46px)' }}>
            <div className="foot-grid" style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr 1fr', gap: 30, alignItems: 'start' }}>

              {/* Col 1 — Marca */}
              <div>
                <img src="assets/logo.png" alt="Growing Now — Marketing e Inteligencia Artificial" style={{ height: 42, marginBottom: 14 }} />
                <p style={{ color: 'var(--ink-soft)', maxWidth: 320, lineHeight: 1.6, margin: '0 0 14px' }}>{L.footer_made}</p>
                <div style={{ display: 'flex', marginBottom: 14 }}>
                  {window.GN.agents.map((a, i) => (
                    <div key={a.id} className="portrait-clip" data-agent={a.id} style={{ width: 34, height: 34, border: '2px solid #fff', marginLeft: i ? -10 : 0 }}>
                      <img src={a.portrait} alt={a.name} title={a.name} />
                    </div>
                  ))}
                </div>
                <p style={{ color: 'var(--ink-soft)', fontSize: '.88rem', lineHeight: 1.55, margin: 0, fontStyle: 'italic' }}>{L.footer_tagline}</p>
              </div>

              {/* Col 2 — Navegación */}
              <div>
                <div className="eyebrow" style={{ color: 'var(--blue)', marginBottom: 14 }}>{L.footer_nav}</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {links.map(([id, label]) => (
                    <button key={id} onClick={() => go(id)} style={{ background: 'none', border: 'none', textAlign: 'left', cursor: 'pointer', color: 'var(--ink-soft)', fontFamily: 'var(--font-body)', fontSize: '.98rem', padding: 0 }}>
                      {label}
                    </button>
                  ))}
                </div>
              </div>

              {/* Col 3 — Contacto */}
              <div>
                <div className="eyebrow" style={{ color: 'var(--green-d)', marginBottom: 14 }}>{L.footer_contact_head}</div>
                <p style={{ color: 'var(--ink-soft)', lineHeight: 1.6, margin: '0 0 16px' }}>{L.footer_contact_text}</p>
                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                  <SocialBtn href="mailto:growingnowai@gmail.com" icon="mail" />
                  <SocialBtn href="tel:+12395447524" icon="phone" />
                </div>
              </div>

            </div>
            <div style={{ borderTop: '1px solid rgba(0,0,0,.08)', marginTop: 30, paddingTop: 20, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 10, color: 'var(--ink-soft)', fontSize: '.86rem' }}>
              <span>© {new Date().getFullYear()} Growing Now · {L.footer_tag}</span>
              <span style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
                <a href="/privacy.html" style={{ color: 'inherit' }}>{lang === 'es' ? 'Privacidad' : 'Privacy'}</a>
                <a href="/terms.html" style={{ color: 'inherit' }}>{lang === 'es' ? 'Términos' : 'Terms'}</a>
                <a href="/ai-notice.html" style={{ color: 'inherit' }}>{lang === 'es' ? 'Aviso de IA' : 'AI notice'}</a>
              </span>
            </div>
          </div>
        </div>
      </footer>
    );
  }
  window.Footer = Footer;
})();
