/* global React */
const { useState: useState2, useEffect: useEffect2 } = React;

// Hook idiomático local, re-render quando idioma muda (window.setLimifyLang)
function useLang2() {
  const [, setTick] = useState2(0);
  useEffect2(() => {
    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';
}

// =============================================================
// PITCH. Vamos começar?
// =============================================================
function Pitch() {
  useLang2();
  const t = window.t || ((k) => k);
  return (
    <section className="pitch" id="pitch">
      <div className="pitch-card">
        <div className="pitch-rings" aria-hidden="true">
          <div className="pitch-ring pitch-ring--1"></div>
          <div className="pitch-ring pitch-ring--2"></div>
          <div className="pitch-ring pitch-ring--3"></div>
        </div>

        <div className="pitch-content center">
          <span className="pitch-eyebrow">{t('pitch_eyebrow')}</span>
          <h2 className="pitch-title">
            {t('pitch_title_1')}<br />
            <span className="pitch-grad">{t('pitch_title_2')}</span>
          </h2>

          <div className="pitch-pills">
            <span className="pitch-pill">{t('pitch_pill_1')}</span>
            <span className="pitch-pill">{t('pitch_pill_2')}</span>
            <span className="pitch-pill">{t('pitch_pill_3')}</span>
            <span className="pitch-pill pitch-pill--brand">
              <span className="pitch-pill-dot"></span>
              {t('pitch_pill_4')}
            </span>
          </div>

          <div className="pitch-ctas">
            <a href="https://app.limify.pro/signup" className="pitch-btn pitch-btn--primary">
              {t('pitch_cta')}
              <svg width="14" height="14" viewBox="0 0 16 16" fill="none"><path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" /></svg>
            </a>
          </div>
          <p className="pitch-subline">{t('pitch_subline')}</p>
        </div>
      </div>
    </section>);

}

// =============================================================
// PLANS, 4 cards, anual/mensal toggle com economia clara
// =============================================================
function Plans() {
  useLang2(); // re-render on language change
  const t = window.t || ((k) => k);
  const [period, setPeriod] = useState2("annual");

  // Real numbers, monthly is "list price", annual is monthly equivalent
  // when paid yearly (≈ 17% off / 2 meses grátis). totalAnnual = annual * 12.
  const plans = [
    {
      key: "free",
      name: t('plan_free_name'),
      tag: t('plan_free_tag'),
      ideal: t('plan_free_ideal'),
      monthly: 0,
      annual: 0,
      cta: t('plan_free_cta'),
      ctaStyle: "secondary",
      featured: false,
      featuresLabel: t('plans_features_label_free'),
      features: [
        { strong: t('pf_quotes_1_s'),         rest: t('pf_quotes_1_r') },
        { strong: t('pf_user_1_s'),           rest: t('pf_user_1_r') },
        { strong: t('pf_clients_2_s'),        rest: t('pf_clients_2_r') },
        { strong: t('pf_portfolio_default_s'),rest: t('pf_portfolio_default_r') },
        { strong: t('pf_no_changes_s'),       rest: t('pf_no_changes_r') }
      ]
    },
    {
      key: "basic",
      name: t('plan_basic_name'),
      tag: t('plan_basic_tag'),
      ideal: t('plan_basic_ideal'),
      monthly: 97,
      annual: 83,
      cta: t('plan_basic_cta'),
      ctaStyle: "secondary",
      featured: false,
      featuresLabel: t('plans_features_label_basic'),
      features: [
        { strong: t('pf_quotes_10_s'),    rest: t('pf_quotes_10_r') },
        { strong: t('pf_changes_4_s'),    rest: t('pf_changes_4_r') },
        { strong: t('pf_users_2_s'),      rest: t('pf_users_2_r') },
        { strong: t('pf_clients_10_s'),   rest: t('pf_clients_10_r') },
        { strong: t('pf_portfolio_2_s'),  rest: t('pf_portfolio_2_r') },
        { strong: t('pf_reports_s'),      rest: t('pf_reports_r') },
        { strong: t('pf_tokens_10_s'),    rest: t('pf_tokens_10_r') }
      ]
    },
    {
      key: "expert",
      name: t('plan_expert_name'),
      tag: t('plan_expert_tag'),
      ideal: t('plan_expert_ideal'),
      monthly: 197,
      annual: 166,
      cta: t('plan_expert_cta'),
      ctaStyle: "primary",
      featured: true,
      featuresLabel: t('plans_features_label_expert'),
      features: [
        { strong: t('pf_quotes_30_s'),    rest: t('pf_quotes_30_r') },
        { strong: t('pf_changes_unl_s'),  rest: t('pf_changes_unl_r') },
        { strong: t('pf_users_3_s'),      rest: t('pf_users_3_r') },
        { strong: t('pf_clients_50_s'),   rest: t('pf_clients_50_r') },
        { strong: t('pf_portfolio_4_s'),  rest: t('pf_portfolio_4_r') },
        { strong: t('pf_reports_s'),      rest: t('pf_reports_r') },
        { strong: t('pf_tokens_50_s'),    rest: t('pf_tokens_50_r') }
      ]
    },
    {
      key: "business",
      name: t('plan_business_name'),
      tag: t('plan_business_tag'),
      ideal: t('plan_business_ideal'),
      monthly: 597,
      annual: 499,
      cta: t('plan_business_cta'),
      ctaStyle: "secondary",
      featured: false,
      featuresLabel: t('plans_features_label_business'),
      features: [
        { strong: t('pf_quotes_unl_s'),     rest: t('pf_quotes_unl_r') },
        { strong: t('pf_changes_unl_s'),    rest: t('pf_changes_unl_r') },
        { strong: t('pf_users_10_s'),       rest: t('pf_users_10_r') },
        { strong: t('pf_clients_unl_s'),    rest: t('pf_clients_unl_r') },
        { strong: t('pf_portfolio_edit_s'), rest: t('pf_portfolio_edit_r') },
        { strong: t('pf_reports_s'),        rest: t('pf_reports_r') },
        { strong: t('pf_tokens_200_s'),     rest: t('pf_tokens_200_r') }
      ]
    }
  ];


  return (
    <section className="plans tone-light" id="planos">
      <div className="container">
        <div className="plans-head center">
          <div className="plans-toggle">
            <button
              className={period === "monthly" ? "is-on" : ""}
              onClick={() => setPeriod("monthly")}>
              {t('plans_monthly')}
            </button>
            <button
              className={period === "annual" ? "is-on" : ""}
              onClick={() => setPeriod("annual")}>
              {t('plans_annual')}
              <span className="pt-save">{t('plans_save_label')}</span>
            </button>
          </div>
        </div>

        <div className="plans-grid mt-48">
          {plans.map((p) =>
          <PlanCard key={p.key} plan={p} period={period} />
          )}
        </div>

        <div className="plans-trust">
          <div className="plans-trust-item">
            <span className="plans-trust-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 12l2 2 4-4" /><path d="M12 3l8 4v5c0 5-3.5 8-8 9-4.5-1-8-4-8-9V7l8-4z" /></svg>
            </span>
            <div>
              <div className="plans-trust-title">{t('plans_trust_warranty_t')}</div>
              <div className="plans-trust-sub">{t('plans_trust_warranty_s')}</div>
            </div>
          </div>
          <div className="plans-trust-item">
            <span className="plans-trust-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="5" width="18" height="14" rx="2" /><path d="M3 10h18" /></svg>
            </span>
            <div>
              <div className="plans-trust-title">{t('plans_trust_pay_t')}</div>
              <div className="plans-trust-sub">{t('plans_trust_pay_s')}</div>
            </div>
          </div>
          <div className="plans-trust-item">
            <span className="plans-trust-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v4" /><path d="M12 18v4" /><path d="M4.93 4.93l2.83 2.83" /><path d="M16.24 16.24l2.83 2.83" /><path d="M2 12h4" /><path d="M18 12h4" /><path d="M4.93 19.07l2.83-2.83" /><path d="M16.24 7.76l2.83-2.83" /></svg>
            </span>
            <div>
              <div className="plans-trust-title">{t('plans_trust_support_t')}</div>
              <div className="plans-trust-sub">{t('plans_trust_support_s')}</div>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function PlanCard({ plan, period }) {
  useLang2(); // re-render on language change
  const t = window.t || ((k) => k);
  const isFree = plan.monthly === 0;
  const showAnnual = period === "annual";
  const displayValue = showAnnual ? plan.annual : plan.monthly;
  const yearlySavings = (plan.monthly - plan.annual) * 12;
  const totalAnnual = plan.annual * 12;

  const fmt = (n) => n.toLocaleString("pt-BR", { minimumFractionDigits: 0, maximumFractionDigits: 0 });

  return (
    <div className={`plan-card ${plan.featured ? "is-featured" : ""}`}>
      {plan.featured && <div className="plan-ribbon">{t('plans_ribbon_featured')}</div>}

      <div className="plan-tag">{plan.tag}</div>
      <div className="plan-name">{plan.name}</div>
      <div className="plan-ideal">{plan.ideal}</div>

      <div className="plan-price">
        {isFree ?
        <React.Fragment>
            <div className="pp-strike pp-strike-empty">&nbsp;</div>
            <div className="pp-row">
              <span className="pp-value">{t('plan_free_value')}</span>
            </div>
            <div className="pp-meta">{t('plans_meta_free')}</div>
            <span className="pp-save pp-save-empty">&nbsp;</span>
          </React.Fragment> :

        <React.Fragment>
            <div className={showAnnual ? "pp-strike" : "pp-strike pp-strike-empty"}>
              {showAnnual ? `de R$ ${fmt(plan.monthly)}/mês` : "—"}
            </div>
            <div className="pp-row">
              <span className="pp-currency">R$</span>
              <span className="pp-value">{fmt(displayValue)}</span>
              <span className="pp-period">/mês</span>
            </div>
            <div className="pp-meta">
              {showAnnual ?
            t('plans_meta_annual', { total: 'R$ ' + fmt(totalAnnual) }) :
            t('plans_meta_monthly', { monthly: 'R$ ' + fmt(plan.monthly) })}
            </div>
            <div className="pp-iof">{t('plans_iof_note')}</div>
            {showAnnual && yearlySavings > 0 ?
          <span className="pp-save">
                <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8l3 3 7-7" /></svg>
                {t('plans_save_per_year', { amount: 'R$ ' + fmt(yearlySavings) })}
              </span> :

          <span className="pp-save pp-save-empty">&nbsp;</span>
          }
          </React.Fragment>
        }
      </div>

      <a
        href="https://app.limify.pro/signup"
        className={`btn ${plan.ctaStyle === "primary" ? "btn-primary" : "btn-secondary"} plan-cta`}>
        
        {plan.cta}
      </a>

      <div className="plan-features-label">{plan.featuresLabel}</div>
      <ul className="plan-features">
        {plan.features.map((f, i) =>
        <li key={i}>
            <span className="pf-check">
              <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M3 8l3 3 7-7" /></svg>
            </span>
            <span>
              <span className="pf-strong">{f.strong}</span>
              {f.rest}
            </span>
          </li>
        )}
      </ul>
    </div>);

}

// =============================================================
// GUARANTEE
// =============================================================
function Guarantee() {
  useLang2();
  const t = window.t || ((k) => k);
  return (
    <section className="guarantee tone-light">
      <div className="container">
        <div className="guarantee-card">
          <div className="g-seal">
            <div className="g-seal-inner">
              <div className="g-seal-num">{t('guarantee_seal_num')}</div>
              <div className="g-seal-label">{t('guarantee_seal_label')}</div>
            </div>
          </div>
          <div className="g-copy">
            <span className="eyebrow">{t('guarantee_eyebrow')}</span>
            <h3 className="mt-16">{t('guarantee_title')}</h3>
            <p className="lead mt-16">{t('guarantee_lead')}</p>
          </div>
        </div>
      </div>
    </section>);

}

// =============================================================
// FAQ
// =============================================================
function FAQ() {
  useLang2();
  const t = window.t || ((k) => k);
  const items = [
    { q: t('faq_q1'), a: t('faq_a1') },
    { q: t('faq_q2'), a: t('faq_a2') },
    { q: t('faq_q3'), a: t('faq_a3') },
    { q: t('faq_q4'), a: t('faq_a4') },
    { q: t('faq_q5'), a: t('faq_a5') },
    { q: t('faq_q6'), a: t('faq_a6') },
    { q: t('faq_q7'), a: t('faq_a7') },
    { q: t('faq_q8'), a: t('faq_a8') }
  ];

  const [open, setOpen] = useState2(0);

  return (
    <section className="faq tone-light" id="faq">
      <div className="container">
        <div className="faq-head center">
          <span className="eyebrow">{t('faq_eyebrow')}</span>
          <h2 className="mt-16">
            {t('faq_title_1')} <span className="grad-text">{t('faq_title_2')}</span>
          </h2>
        </div>

        <div className="faq-list mt-48">
          {items.map((it, i) =>
          <div
            className={`faq-item ${open === i ? "is-open" : ""}`}
            key={i}>
            
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{it.q}</span>
                <span className="faq-icon" aria-hidden="true">+</span>
              </button>
              <div className="faq-a">
                <p>{it.a}</p>
              </div>
            </div>
          )}
        </div>

        <div className="contact-block" id="suporte">
          <h3 className="contact-title">
            {t('contact_title_1')}{" "}
            <span className="contact-title-grad">{t('contact_title_2')}</span>
          </h3>

          <div className="contact-channels">
            <a
              href="#chat"
              className="contact-channel contact-channel--primary"
              onClick={(e) => {
                e.preventDefault();
                if (window.$crisp) {
                  window.$crisp.push(['do', 'chat:show']);
                  window.$crisp.push(['do', 'chat:open']);
                } else {
                  // Fallback: Crisp ainda nao carregou — abre email
                  window.location.href = 'mailto:suporte@limify.pro';
                }
              }}
            >
              <div className="contact-channel-ico">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"></path>
                </svg>
              </div>
              <div className="contact-channel-body">
                <h4 className="contact-channel-title">{t('contact_chat_t')}</h4>
                <p className="contact-channel-desc">{t('contact_chat_s')}</p>
              </div>
              <div className="contact-channel-cta">
                {t('contact_chat_cta')}
                <span className="contact-channel-arrow">→</span>
              </div>
            </a>

            <a href="mailto:suporte@limify.pro" className="contact-channel">
              <div className="contact-channel-ico contact-channel-ico--alt">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
                  <rect x="3" y="5" width="18" height="14" rx="2"></rect>
                  <path d="M3 7l9 6 9-6"></path>
                </svg>
              </div>
              <div className="contact-channel-body">
                <h4 className="contact-channel-title">suporte@limify.pro</h4>
                <p className="contact-channel-desc">{t('contact_email_s')}</p>
              </div>
              <div className="contact-channel-cta">
                {t('contact_email_cta')}
                <span className="contact-channel-arrow">→</span>
              </div>
            </a>
          </div>
        </div>
      </div>
    </section>);

}

// =============================================================
// FINAL CTA
// =============================================================
function FinalCTA() {
  useLang2();
  const t = window.t || ((k) => k);
  return (
    <div className="fc-content">
      <span className="fc-eyebrow">
        <span className="fc-eyebrow-dot"></span>
        {t('fc_eyebrow')}
      </span>
      <h2 className="fc-title">
        {t('fc_title_1')}<br />
        <span className="fc-title-grad">{t('fc_title_2')}</span>
      </h2>
      <p className="fc-lead">{t('fc_lead')}</p>
      <div className="fc-cta-wrap">
        <a href="https://app.limify.pro/signup" className="fc-cta">
          <span className="fc-cta-label">{t('fc_cta')}</span>
          <span className="fc-cta-arrow">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
              <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
            </svg>
          </span>
        </a>
        <span className="fc-microcopy">{t('fc_microcopy')}</span>
      </div>
    </div>);

}

// =============================================================
// DARK TAIL, single elevated card containing FinalCTA + Footer
// =============================================================
function DarkTail() {
  useLang2();
  const t = window.t || ((k) => k);
  return (
    <section className="dark-tail" aria-label="Limify">
      <div className="dt-card">
        <div className="dt-glow" aria-hidden="true">
          <div className="dt-glow-a"></div>
          <div className="dt-glow-b"></div>
          <div className="dt-glow-c"></div>
        </div>
        <div className="dt-grid" aria-hidden="true"></div>
        <div className="dt-noise" aria-hidden="true"></div>

        <div className="dt-cta">
          <span className="fc-eyebrow">
            <span className="fc-eyebrow-dot"></span>
            {t('fc_eyebrow')}
          </span>
          <h2 className="fc-title">
            {t('fc_title_1')}{" "}
            <span className="fc-title-grad">{t('fc_title_2')}</span>
          </h2>
          <p className="fc-lead">{t('fc_lead')}</p>
          <div className="dt-cta-actions">
            <a href="https://app.limify.pro/signup" className="fc-cta">
              <span className="fc-cta-label">{t('fc_cta')}</span>
              <span className="fc-cta-arrow">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </span>
            </a>
            <span className="fc-microcopy">{t('fc_microcopy')}</span>
          </div>
        </div>

        <div className="dt-divider" aria-hidden="true"></div>

        <Footer />
      </div>
    </section>);

}

// =============================================================
// FOOTER
// =============================================================
function Footer() {
  useLang2();
  const t = window.t || ((k) => k);
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-brand">
            <img src="assets/limify-logotipo-branco.png" alt="Limify" className="footer-logo" style={{ width: "177px", height: "55px" }} />
            <p className="footer-tag mt-16">{t('footer_tag')}</p>
            <p className="footer-addr mt-24">
              30 N Gould St, Ste R<br />
              Sheridan, WY 82801, USA<br />
              EIN: 99-2852523
            </p>
          </div>

          <div className="footer-col">
            <div className="footer-title">{t('footer_col_models')}</div>
            <a href="funcionalidades/orcamento-m2.html">{t('nav_sub_m2_t')}</a>
            <a href="funcionalidades/projeto-completo.html">{t('nav_sub_proj_t')}</a>
            <a href="funcionalidades/render-3d.html">{t('nav_sub_render_t')}</a>
            <a href="funcionalidades/valor-real.html">{t('nav_sub_real_t')}</a>
          </div>

          <div className="footer-col">
            <div className="footer-title">{t('footer_col_product')}</div>
            <a href="planos.html">{t('footer_planos')}</a>
            <a href="index.html#faq">{t('footer_faq')}</a>
          </div>

          <div className="footer-col">
            <div className="footer-title">{t('footer_col_company')}</div>
            <a href="blog/index.html">{t('footer_blog')}</a>
            <a href="#suporte">{t('footer_support')}</a>
            <a href="#afiliados">{t('footer_affiliates')}</a>
          </div>

          <div className="footer-col">
            <div className="footer-title">{t('footer_col_legal')}</div>
            <a href="termos-e-condicoes.html">{t('footer_terms')}</a>
            <a href="politica-de-privacidade.html">{t('footer_privacy')}</a>
            <a href="politica-de-exclusao-de-contas-e-dados.html">{t('footer_data')}</a>
            <a href="dmca.html">{t('footer_dmca')}</a>
          </div>

          <div className="footer-col">
            <div className="footer-title">{t('footer_col_social')}</div>
            <a href="https://www.instagram.com/limify.pro" target="_blank" rel="noopener noreferrer">Instagram</a>
            <a href="https://www.youtube.com/@limifypro" target="_blank" rel="noopener noreferrer">YouTube</a>
          </div>
        </div>

        <div className="footer-bottom">
          <span>{t('footer_copyright')}</span>
        </div>
      </div>
    </footer>);

}

window.Pitch = Pitch;
window.Plans = Plans;
window.Guarantee = Guarantee;
window.FAQ = FAQ;
window.FinalCTA = FinalCTA;
window.DarkTail = DarkTail;
window.Footer = Footer;