/* global React */

// Hook local: re-render quando idioma muda (i18n.js dispara 'limify-lang-changed')
function useLangMid() {
  const [, setTick] = React.useState(0);
  React.useEffect(() => {
    const h = () => setTick(x => x + 1);
    window.addEventListener('limify-lang-changed', h);
    return () => window.removeEventListener('limify-lang-changed', h);
  }, []);
  return (typeof window !== 'undefined' && window.LIMIFY_LANG) || 'pt';
}

// =============================================================
// BENEFITS, explicação do produto
// =============================================================
function Benefits() {
  useLangMid();
  const t = window.t || ((k) => k);
  const [active, setActive] = React.useState(1);
  const items = [
    {
      title: t('benefits_1_t'),
      body: t('benefits_1_b'),
      icon:
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="4" y="3" width="16" height="18" rx="2" />
          <path d="M8 7h8M8 11h3M13 11h3M8 15h3M13 15h3M8 19h3" />
        </svg>
    },
    {
      title: t('benefits_2_t'),
      body: t('benefits_2_b'),
      icon:
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <circle cx="12" cy="12" r="9" />
          <circle cx="12" cy="12" r="4" />
          <path d="M12 3v3M12 18v3M3 12h3M18 12h3" />
        </svg>
    },
    {
      title: t('benefits_3_t'),
      body: t('benefits_3_b'),
      icon:
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
          <rect x="3" y="4" width="18" height="12" rx="1.5" />
          <path d="M8 20h8M12 16v4" />
          <path d="M7 11l3-3 2.5 2.5L17 6" />
        </svg>
    }
  ];

  return (
    <section className="benefits tone-dark" id="beneficios">
      <div className="container">
        <div className="benefits-head" style={{ textAlign: "center", maxWidth: 720, margin: "0 auto" }}>
          <span className="eyebrow">{t('benefits_eyebrow')}</span>
          <h2 className="mt-16 benefits-headline">
            <span className="grad-text">
              {t('benefits_title_1')} <br />
              {t('benefits_title_2')}
            </span>
          </h2>
        </div>

        <div className="benefits-row mt-72">
          {items.map((it, i) =>
            <button
              key={i}
              type="button"
              className={`benefit-step ${active === i ? "is-active" : ""}`}
              onMouseEnter={() => setActive(i)}
              onFocus={() => setActive(i)}
              onClick={() => setActive(i)}>
              <div className="benefit-step-icon" aria-hidden="true">{it.icon}</div>
              <h3 className="benefit-step-title">{it.title}</h3>
              <p className="benefit-step-body">{it.body}</p>
              <span className="benefit-step-rule" aria-hidden="true"></span>
            </button>
          )}
        </div>
      </div>
    </section>);
}

// =============================================================
// MODEL ILLUSTRATIONS, imagens exportadas do Figma (assets/m*.png)
// =============================================================
function BmodIllustration({ index }) {
  const srcs = ['assets/m-1.png', 'assets/m2.png', 'assets/m3.png', 'assets/m4.png'];
  return (
    <img className="bmod-art-img" src={srcs[index]} alt="" aria-hidden="true" />
  );
}

// =============================================================
// BENTO GRID. Funcionalidades
// =============================================================
function Features() {
  useLangMid();
  const t = window.t || ((k) => k);
  const ftoolsRef = React.useRef(null);

  // S3, animações ScrollTrigger + hover (roda uma vez no mount)
  React.useEffect(() => {
    if (typeof gsap === 'undefined' || typeof ScrollTrigger === 'undefined') return;
    gsap.registerPlugin(ScrollTrigger);

    const ctx = gsap.context(() => {

      // ── Entrada dos 4 quadrantes em stagger ──────────────────────
      gsap.from('.fq', {
        scrollTrigger: { trigger: '.ftools-quad', start: 'top 82%' },
        y: 32,
        autoAlpha: 0,
        duration: 0.6,
        stagger: 0.12,
        ease: 'power2.out'
      });

      // Q1, bolhas do chat aparecem em sequência
      gsap.from('.fq--tl .fq-bubble', {
        scrollTrigger: { trigger: '.fq--tl', start: 'top 78%' },
        y: 10,
        autoAlpha: 0,
        duration: 0.35,
        stagger: 0.3,
        ease: 'power2.out',
        delay: 0.5
      });

      // Q2, slides do deck entram como baralho
      ['.fq-deck-page--1', '.fq-deck-page--2', '.fq-deck-page--3'].forEach((sel, i) => {
        gsap.from(sel, {
          scrollTrigger: { trigger: '.fq--tr', start: 'top 78%' },
          rotation: [-8, -2, 4][i],
          x: [-18, -6, 8][i],
          autoAlpha: 0,
          duration: 0.5,
          ease: 'back.out(1.4)',
          delay: 0.3 + i * 0.15
        });
      });

      // Q3, linhas da equipe deslizam da esquerda
      gsap.from('.fq--bl .fq-team-row', {
        scrollTrigger: { trigger: '.fq--bl', start: 'top 78%' },
        x: -18,
        autoAlpha: 0,
        duration: 0.4,
        stagger: 0.14,
        ease: 'power2.out',
        delay: 0.4
      });

      // Q4, barras crescem de baixo para cima
      gsap.from('.fq-bar > span', {
        scrollTrigger: { trigger: '.fq--br', start: 'top 78%' },
        scaleY: 0,
        duration: 0.7,
        ease: 'power2.out',
        stagger: 0.08,
        transformOrigin: 'bottom center',
        delay: 0.4
      });

    }, ftoolsRef);

    // ── Hover listeners ───────────────────────────────────────────
    const listeners = [];
    function on(el, type, fn) {
      if (!el) return;
      el.addEventListener(type, fn);
      listeners.push({ el, type, fn });
    }

    // Q1. AI bubble sobe levemente ao hover
    const fqTl = document.querySelector('.fq--tl');
    const aiBubble = fqTl && fqTl.querySelector('.fq-bubble--ai:not(.fq-bubble--typing)');
    on(fqTl, 'mouseenter', () => {
      if (aiBubble) gsap.to(aiBubble, { y: -4, scale: 1.02, duration: 0.22, ease: 'power1.out' });
    });
    on(fqTl, 'mouseleave', () => {
      if (aiBubble) gsap.to(aiBubble, { y: 0, scale: 1, duration: 0.28, ease: 'power1.inOut' });
    });

    // Q2, deck pages abrem como baralho no hover
    const fqTr = document.querySelector('.fq--tr');
    const p1 = fqTr && fqTr.querySelector('.fq-deck-page--1');
    const p2 = fqTr && fqTr.querySelector('.fq-deck-page--2');
    const p3 = fqTr && fqTr.querySelector('.fq-deck-page--3');
    on(fqTr, 'mouseenter', () => {
      gsap.to(p1, { rotation: -10, x: -22, duration: 0.35, ease: 'power2.out' });
      gsap.to(p2, { rotation: -3, x: -8, y: -5, duration: 0.35, ease: 'power2.out' });
      gsap.to(p3, { rotation: 6, x: 16, y: -3, duration: 0.35, ease: 'power2.out' });
    });
    on(fqTr, 'mouseleave', () => {
      gsap.to([p1, p2, p3], { rotation: 0, x: 0, y: 0, duration: 0.4, ease: 'power2.inOut' });
    });

    // Q3, team card flutua para cima
    const fqBl = document.querySelector('.fq--bl');
    const teamCard = fqBl && fqBl.querySelector('.fq-team-card');
    on(fqBl, 'mouseenter', () => {
      if (teamCard) gsap.to(teamCard, { y: -8, duration: 0.3, ease: 'power2.out' });
    });
    on(fqBl, 'mouseleave', () => {
      if (teamCard) gsap.to(teamCard, { y: 0, duration: 0.4, ease: 'power2.inOut' });
    });

    // Q4, barras fazem bounce no hover
    const fqBr = document.querySelector('.fq--br');
    let hoverBarTween = null;
    on(fqBr, 'mouseenter', () => {
      if (hoverBarTween) hoverBarTween.kill();
      hoverBarTween = gsap.to('.fq-bar > span', {
        scaleY: 1.14,
        duration: 0.22,
        ease: 'power1.out',
        stagger: 0.05,
        yoyo: true,
        repeat: 1,
        transformOrigin: 'bottom center'
      });
    });
    on(fqBr, 'mouseleave', () => {
      if (hoverBarTween) hoverBarTween.kill();
      gsap.to('.fq-bar > span', { scaleY: 1, duration: 0.3, ease: 'power2.inOut', transformOrigin: 'bottom center' });
    });

    return () => {
      ctx.revert();
      listeners.forEach(({ el, type, fn }) => el.removeEventListener(type, fn));
    };
  }, []);

  const models = [
    { tag: t('model_01_tag'), title: t('model_01_t'), body: t('model_01_b'), cta: t('model_01_cta'), accent: "#1F46E0", placeholder: t('model_01_ph'), side: "right" },
    { tag: t('model_02_tag'), title: t('model_02_t'), body: t('model_02_b'), cta: t('model_02_cta'), accent: "#4A6FF5", placeholder: t('model_02_ph'), side: "left" },
    { tag: t('model_03_tag'), title: t('model_03_t'), body: t('model_03_b'), cta: t('model_03_cta'), accent: "#7A99FF", placeholder: t('model_03_ph'), side: "right" },
    { tag: t('model_04_tag'), title: t('model_04_t'), body: t('model_04_b'), cta: t('model_04_cta'), accent: "#A8BEFF", placeholder: t('model_04_ph'), side: "left" }
  ];

  return (
    <React.Fragment>
      <section className="bmods tone-light" id="modelos">
        <div className="container">
          <div className="bmods-head">
            <span className="eyebrow" style={{ color: "var(--brand)" }}>{t('bmods_eyebrow')}</span>
            <h2 className="mt-16">
              {t('bmods_title_1')}<br />
              <span style={{ color: "var(--ink-6)" }}>{t('bmods_title_2')}</span>
            </h2>
          </div>

          <div className="bmods-stack mt-64">
            {models.map((m, i) =>
              <article className={`bmod-card bmod-card--${m.side}`} key={i}>
                <div className="bmod-progress" aria-hidden="true">
                  {models.map((_, j) =>
                    <span
                      key={j}
                      className={`bmod-bar ${j <= i ? "is-on" : ""}`}
                      style={j <= i ? { background: m.accent } : null}>
                    </span>
                  )}
                </div>
                <div className="bmod-body">
                  <div className="bmod-text">
                    <span className="bmod-tag" style={{ color: m.accent }}>{m.tag.toUpperCase()}</span>
                    <h3 className="bmod-title">{m.title}</h3>
                    <p className="bmod-desc">{m.body}</p>
                    <a href="https://app.limify.pro/signup" className="bmod-link">{m.cta} →</a>
                  </div>
                  <div className="bmod-art">
                    <div className="bmod-art-frame" style={{ "--accent": m.accent }}>
                      <BmodIllustration index={i} />
                      <div className="bmod-art-chip" style={{ background: m.accent }}>
                        <span>{m.tag}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </article>
            )}
          </div>

          <div className="features-cta center mt-64">
            <a href="https://app.limify.pro/signup" className="btn btn-primary">{t('bmods_cta')}</a>
          </div>
        </div>
      </section>

      {/* Funcionalidades complementares. Lemni-style editorial grid */}
      <section className="ftools tone-light" id="funcionalidades" ref={ftoolsRef}>
        <div className="ftools-intro">
          <span className="eyebrow">{t('ftools_eyebrow')}</span>
          <h2 className="mt-16">
            {t('ftools_title_1')}<br />
            <span className="grad-text">{t('ftools_title_2')}</span>
          </h2>
        </div>

        <div className="ftools-quad">
          {/* Quadrante 1. IA */}
          <article className="fq fq--tl">
            <h3 className="fq-title">
              <span className="fq-soft">{t('ftools_q1_soft1')}</span> <span className="fq-bold">{t('ftools_q1_bold')}</span> <span className="fq-soft">{t('ftools_q1_soft2')}</span>
            </h3>
            <div className="fq-art fq-art--ia" aria-hidden="true">
              <div className="fq-chat">
                <div className="fq-chat-head">
                  <span className="fq-chat-avatar">
                    <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M8 1.5L9.8 6L14 8L9.8 10L8 14.5L6.2 10L2 8L6.2 6L8 1.5Z" fill="currentColor" /></svg>
                  </span>
                  <span className="fq-chat-name">LimIA</span>
                  <span className="fq-chat-status">{t('ftools_q1_chat_status')}</span>
                </div>
                <div className="fq-bubble fq-bubble--user">{t('ftools_q1_chat_user')}</div>
                <div className="fq-bubble fq-bubble--ai" dangerouslySetInnerHTML={{ __html: t('ftools_q1_chat_ai_html') }}></div>
                <div className="fq-bubble fq-bubble--ai fq-bubble--typing">
                  <span className="fq-dot"></span>
                  <span className="fq-dot"></span>
                  <span className="fq-dot"></span>
                </div>
              </div>
            </div>
          </article>

          {/* Quadrante 2. Apresentação */}
          <article className="fq fq--tr">
            <h3 className="fq-title">
              <span className="fq-bold">{t('ftools_q2_bold')}</span> <span className="fq-soft">{t('ftools_q2_soft')}</span>
            </h3>
            <div className="fq-art fq-art--present" aria-hidden="true">
              <div className="fq-deck">
                <div className="fq-deck-page fq-deck-page--1">
                  <div className="fq-deck-thumb"></div>
                  <span className="fq-deck-tag">{t('ftools_q2_tag_cover')}</span>
                </div>
                <div className="fq-deck-page fq-deck-page--2">
                  <div className="fq-deck-grid">
                    <div></div><div></div><div></div><div></div>
                  </div>
                  <div className="fq-deck-line"></div>
                  <div className="fq-deck-line fq-deck-line--sm"></div>
                  <span className="fq-deck-tag">{t('ftools_q2_tag_proj')}</span>
                </div>
                <div className="fq-deck-page fq-deck-page--3">
                  <div className="fq-deck-price">R$ 84.500</div>
                  <div className="fq-deck-line"></div>
                  <div className="fq-deck-line fq-deck-line--sm"></div>
                  <span className="fq-deck-tag">{t('ftools_q2_tag_value')}</span>
                </div>
              </div>
            </div>
          </article>

          {/* Quadrante 3. Equipe */}
          <article className="fq fq--bl">
            <h3 className="fq-title">
              <span className="fq-soft">{t('ftools_q3_soft1')}</span> <span className="fq-bold">{t('ftools_q3_bold')}</span> <span className="fq-soft">{t('ftools_q3_soft2')}</span>
            </h3>
            <div className="fq-art fq-art--team" aria-hidden="true">
              <div className="fq-team-card">
                <div className="fq-team-row">
                  <div className="fq-team-avatar fq-team-avatar--a">MS</div>
                  <div className="fq-team-info">
                    <span className="fq-team-name">Marina Silva</span>
                    <span className="fq-team-role">{t('ftools_q3_role_senior')}</span>
                  </div>
                  <span className="fq-team-badge">{t('ftools_q3_badge_admin')}</span>
                </div>
                <div className="fq-team-row">
                  <div className="fq-team-avatar fq-team-avatar--b">RC</div>
                  <div className="fq-team-info">
                    <span className="fq-team-name">Rafael Costa</span>
                    <span className="fq-team-role">{t('ftools_q3_role_pleno')}</span>
                  </div>
                  <span className="fq-team-badge fq-team-badge--soft">{t('ftools_q3_badge_editor')}</span>
                </div>
                <div className="fq-team-row">
                  <div className="fq-team-avatar fq-team-avatar--c">JP</div>
                  <div className="fq-team-info">
                    <span className="fq-team-name">Júlia Pereira</span>
                    <span className="fq-team-role">{t('ftools_q3_role_intern')}</span>
                  </div>
                  <span className="fq-team-badge fq-team-badge--soft">{t('ftools_q3_badge_view')}</span>
                </div>
              </div>
              <div className="fq-template-card">
                <span className="fq-template-tag">{t('ftools_q3_template_tag')}</span>
                <span className="fq-template-name">{t('ftools_q3_template_name')}</span>
              </div>
            </div>
          </article>

          {/* Quadrante 4. Gestão */}
          <article className="fq fq--br">
            <h3 className="fq-title">
              <span className="fq-bold">{t('ftools_q4_bold')}</span> <span className="fq-soft">{t('ftools_q4_soft')}</span>
            </h3>
            <div className="fq-art fq-art--gestao" aria-hidden="true">
              <div className="fq-stat-card">
                <div className="fq-stat-row">
                  <div className="fq-stat-block">
                    <span className="fq-stat-label">{t('ftools_q4_stat1')}</span>
                    <span className="fq-stat-val">+38%</span>
                    <span className="fq-stat-trend fq-stat-trend--up">{t('ftools_q4_stat1_trend')}</span>
                  </div>
                  <div className="fq-stat-block">
                    <span className="fq-stat-label">{t('ftools_q4_stat2')}</span>
                    <span className="fq-stat-val">14</span>
                    <span className="fq-stat-trend">{t('ftools_q4_stat2_trend')}</span>
                  </div>
                </div>
                <div className="fq-bars">
                  <div className="fq-bar"><span style={{ height: "42%" }}></span></div>
                  <div className="fq-bar"><span style={{ height: "65%" }}></span></div>
                  <div className="fq-bar"><span style={{ height: "38%" }}></span></div>
                  <div className="fq-bar"><span style={{ height: "78%" }}></span></div>
                  <div className="fq-bar"><span style={{ height: "55%" }}></span></div>
                  <div className="fq-bar"><span style={{ height: "82%" }}></span></div>
                  <div className="fq-bar fq-bar--accent"><span style={{ height: "100%" }}></span></div>
                </div>
              </div>
            </div>
          </article>
        </div>
      </section>
    </React.Fragment>);
}

// =============================================================
// PERSONAS. Para quem é
// =============================================================
function Personas() {
  useLangMid();
  const t = window.t || ((k) => k);
  const personas = [
    { key: "arq", tag: t('persona_arq_tag'), img: "assets/personas/arquiteto.png",  title: t('persona_arq_t'), pain: t('persona_arq_p'), gain: t('persona_arq_g'), stat: { value: t('persona_arq_stat_v'), label: t('persona_arq_stat_l') } },
    { key: "eng", tag: t('persona_eng_tag'), img: "assets/personas/engenheiro.png", title: t('persona_eng_t'), pain: t('persona_eng_p'), gain: t('persona_eng_g'), stat: { value: t('persona_eng_stat_v'), label: t('persona_eng_stat_l') } },
    { key: "avz", tag: t('persona_avz_tag'), img: "assets/personas/archiviz.png",   title: t('persona_avz_t'), pain: t('persona_avz_p'), gain: t('persona_avz_g'), stat: { value: t('persona_avz_stat_v'), label: t('persona_avz_stat_l') } },
    { key: "esc", tag: t('persona_esc_tag'), img: "assets/personas/escritorio.png", title: t('persona_esc_t'), pain: t('persona_esc_p'), gain: t('persona_esc_g'), stat: { value: t('persona_esc_stat_v'), label: t('persona_esc_stat_l') } }
  ];

  const [active, setActive] = React.useState(0);
  const p = personas[active];

  return (
    <section className="personas tone-light" id="para-quem">
      <div className="container">
        <div className="personas-head" style={{ textAlign: "center", maxWidth: 760, margin: "0 auto" }}>
          <span className="eyebrow">{t('personas_eyebrow')}</span>
          <h2 className="mt-16">
            {t('personas_title_1')} <br />
            <span className="grad-text">{t('personas_title_2')}</span>
          </h2>
        </div>

        <div className="prs-stage mt-72">
          {/* LEFT: spotlight */}
          <div className="prs-spotlight" key={p.key}>
            <div className="prs-portrait" aria-hidden="true">
              <div className="prs-portrait-tag">{p.tag.toUpperCase()}</div>
              <div className="prs-portrait-grid"></div>
              <img className="prs-portrait-photo" src={p.img} alt="" />
            </div>
            <div className="prs-content">
              <div className="prs-eyebrow">
                <span className="prs-tag">{p.tag}</span>
              </div>
              <h3 className="prs-title">{p.title}</h3>
              <div className="prs-block">
                <span className="prs-block-label">{t('personas_pain_label')}</span>
                <p>{p.pain}</p>
              </div>
              <div className="prs-block prs-block--gain">
                <span className="prs-block-label">{t('personas_gain_label')}</span>
                <p>{p.gain}</p>
              </div>
              <div className="prs-stat">
                <span className="prs-stat-value">{p.stat.value}</span>
                <span className="prs-stat-label">{p.stat.label}</span>
              </div>
            </div>
          </div>

          {/* RIGHT: list selector */}
          <div className="prs-list" role="tablist" aria-label="Personas">
            {personas.map((pp, i) =>
              <button
                key={pp.key}
                type="button"
                role="tab"
                aria-selected={i === active}
                className={`prs-item ${i === active ? "is-active" : ""}`}
                onClick={() => setActive(i)}
                onMouseEnter={() => setActive(i)}>
                <span className="prs-item-label">{pp.tag}</span>
                <span className="prs-item-arrow" aria-hidden="true">←</span>
              </button>
            )}
          </div>
        </div>

        <div className="center mt-64">
          <a href="https://app.limify.pro/signup" className="btn btn-primary">{t('personas_cta')}</a>
        </div>
      </div>
    </section>);
}

window.Benefits = Benefits;
window.Features = Features;
window.Personas = Personas;