/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, HeroNav, Footer, useJsonLd */
/* precios.jsx — Teramot pricing page. 4 tiers + concepts + compare + FAQ.
   Pase de consistencia con el resto del sitio (2026-09): hero, tiers,
   concepts, FAQ y CTA final reusan los mismos bloques compartidos que
   cierre-mensual.jsx, rentabilidad.jsx, etc: HeroNav + hero-gradient del
   hero-nav.css, y las clases de product.css (secciones, cards, FAQ,
   CTA final), en vez de las clases propias de esta página que existían
   antes (hero, tiers, concepts, faq, cta). La tabla comparativa no
   tiene equivalente en ninguna otra página — mantiene su propio CSS,
   solo con tipografía y color de encabezado alineados al resto. */

const PricingHero = () => {
  const { c } = useLang();
  const p = c.pricing;
  return (
    <section className="tm-hero-gradient">
      <HeroNav current="precios" />
      <div style={{ position: 'relative', maxWidth: 1320, margin: '0 auto', padding: '56px 40px 96px', textAlign: 'center' }}>
        <div style={{ maxWidth: 680, margin: '0 auto' }}>
          <p className="tm-prod-hero-eyebrow">{p.heroEyebrow}</p>
          <h1 style={{ marginTop: 18, fontSize: 'clamp(32px,3.4vw,46px)', lineHeight: 1.12, fontWeight: 600, letterSpacing: '-.035em', color: '#fff', textWrap: 'balance' }}>{p.heroH1}</h1>
          <p style={{ marginTop: 20, fontSize: 16.5, lineHeight: 1.6, color: 'rgba(255,255,255,.82)' }}>{p.heroSub}</p>
        </div>
      </div>
    </section>
  );
};

const PricingTiers = () => {
  const { c } = useLang();
  const p = c.pricing;

  return (
    <section className="tm-prod-section tm-prod-section-paper">
      <div className="tm-container">
        <div className="tm-prod-cards" style={{ gridTemplateColumns: 'repeat(auto-fit, minmax(230px,1fr))' }}>
          {p.tiers.map((tier, i) => {
            const isCustom = tier.price === 'custom';
            return (
              <article
                className="tm-prod-card"
                key={i}
                style={{ position: 'relative', display: 'flex', flexDirection: 'column', ...(tier.highlight ? { border: '2px solid #253DE5' } : null) }}
              >
                {tier.highlight && (
                  <span style={{ position: 'absolute', top: -14, left: '50%', transform: 'translateX(-50%)', display: 'inline-flex', alignItems: 'center', height: 26, padding: '0 12px', borderRadius: 9999, background: '#253DE5', color: '#fff', fontSize: 11, fontWeight: 600, whiteSpace: 'nowrap' }}>{p.mostPopular}</span>
                )}
                <h3 style={{ fontSize: 20, color: '#1C2536' }}>{tier.name}</h3>
                <p style={{ marginTop: 6, fontSize: 13.5, lineHeight: 1.5, color: '#4B5563', minHeight: '3em' }}>{tier.tagline}</p>

                <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginTop: 14 }}>
                  <span style={{ fontSize: isCustom ? 24 : 38, fontWeight: 700, letterSpacing: '-.03em', color: '#1C2536' }}>
                    {isCustom ? p.custom : `$${tier.price}`}
                  </span>
                  {!isCustom && tier.priceSuffix && (
                    <span style={{ fontSize: 13, fontWeight: 500, color: '#9CA3AF' }}>{tier.priceSuffix}</span>
                  )}
                </div>

                {/* Cada tier lleva su propio destino en i18n (`ctaHref`).
                    Mientras Starter y Professional no tengan su payment
                    link de Stripe cargado, caen al mail de siempre en vez
                    de a un href vacío. */}
                <a
                  className="tm-btn tm-btn-lg tm-btn-primary"
                  href={tier.ctaHref || 'mailto:info@teramot.com'}
                  {...(/^https?:/.test(tier.ctaHref || '')
                    ? { target: '_blank', rel: 'noopener noreferrer' }
                    : null)}
                  style={{ marginTop: 18, width: '100%', justifyContent: 'center' }}
                >
                  {tier.cta}
                </a>

                <div style={{ marginTop: 20, fontSize: 12.5, fontWeight: 600, letterSpacing: '.06em', textTransform: 'uppercase', color: '#9CA3AF' }}>{p.includes}</div>
                <ul style={{ listStyle: 'none', margin: '10px 0 0', padding: 0, display: 'flex', flexDirection: 'column', gap: 10 }}>
                  {tier.features.map((f, j) => (
                    <li key={j} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 13.5, lineHeight: 1.5, color: '#374151' }}>
                      <i className="ph-bold ph-check-circle" style={{ flex: 'none', marginTop: 2, color: '#253DE5', fontSize: 15 }} />
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const PricingConcepts = () => {
  const { c } = useLang();
  const k = c.pricing.concepts;
  return (
    <section className="tm-prod-section tm-prod-section-white">
      <div className="tm-container">
        <div className="tm-prod-head">
          <h2>{k.h2}</h2>
        </div>
        <div className="tm-prod-cards">
          {k.items.map((it, i) => (
            <article
              className="tm-prod-card"
              key={i}
              style={i === k.items.length - 1 && k.items.length % 2 === 1 ? { gridColumn: '1 / -1' } : undefined}
            >
              <h3>{it.title}</h3>
              <p>{it.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

const PricingCompare = () => {
  const { c } = useLang();
  const p = c.pricing.compare;

  const renderCell = (v, isHighlighted) => {
    if (v === '✓') return <td className={`tm-compare-mark tm-compare-cell-yes ${isHighlighted ? 'is-h' : ''}`}>✓</td>;
    if (v === '—' || v === '-') return <td className="tm-compare-mark tm-compare-cell-no">—</td>;
    return <td className={`tm-compare-mark ${isHighlighted ? 'is-h' : ''}`}>{v}</td>;
  };

  return (
    <section className="tm-prod-section tm-prod-section-paper">
      <div className="tm-container">
        <div className="tm-prod-head">
          <h2>{p.h2}</h2>
        </div>
        <div className="tm-compare-wrap">
          <table className="tm-compare-table">
            <thead>
              <tr>
                <th></th>
                <th>{p.cols[0]}</th>
                <th className="is-highlighted">{p.cols[1]}</th>
                <th>{p.cols[2]}</th>
                <th>{p.cols[3]}</th>
              </tr>
            </thead>
            <tbody>
              {p.groups.map((g, gi) => (
                <React.Fragment key={gi}>
                  <tr>
                    <td colSpan="5" className="tm-compare-group">{g.label}</td>
                  </tr>
                  {g.rows.map((row, ri) => (
                    <tr key={ri}>
                      <td>{row[0]}</td>
                      {renderCell(row[1])}
                      {renderCell(row[2], true)}
                      {renderCell(row[3])}
                      {renderCell(row[4])}
                    </tr>
                  ))}
                </React.Fragment>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </section>
  );
};

const PricingAddon = () => {
  const { c } = useLang();
  const a = c.pricing.addon;
  return (
    <section className="tm-addon">
      <div className="tm-container tm-addon-inner">
        <div className="tm-addon-text">
          <h2 className="tm-addon-h2">{a.h2}</h2>
          <p className="tm-addon-sub">{a.sub}</p>
        </div>
        <a className="tm-btn tm-btn-primary tm-btn-lg" href="mailto:info@teramot.com">
          {a.cta}
          <i className="ph-bold ph-arrow-right tm-arrow"></i>
        </a>
      </div>
    </section>
  );
};

const PricingFAQ = () => {
  const { c } = useLang();
  const f = c.pricing.faq;
  useJsonLd({
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: f.items.map((it) => ({
      '@type': 'Question',
      name: it.q,
      acceptedAnswer: { '@type': 'Answer', text: it.a },
    })),
  });
  return (
    <section className="tm-prod-section tm-prod-section-white">
      <div className="tm-container">
        <div className="tm-prod-faq-grid">
          <aside className="tm-prod-faq-aside">
            <span className="tm-prod-faq-eyebrow"><span className="tm-prod-faq-eyebrow-dot" /> Preguntas frecuentes</span>
            <h2>{f.h2}</h2>
          </aside>
          <div className="tm-prod-faq-list">
            {f.items.map((it, i) => (
              <details className="tm-prod-faq-item" key={it.q} open={i === 0 ? true : undefined}>
                <summary>
                  <span className="tm-prod-faq-q">{it.q}</span>
                  <span className="tm-prod-faq-icon"><i className="ph-bold ph-plus" /></span>
                </summary>
                <p className="tm-prod-faq-a">{it.a}</p>
              </details>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

const PricingFinalCta = () => {
  const { c } = useLang();
  const f = c.pricing.finalCta;
  return (
    <section id="demo" className="tm-prod-cta">
      <div className="tm-prod-cta-inner">
        <p className="tm-prod-cta-kicker">Empezá ahora</p>
        <h2>{f.h2}</h2>
        <p className="tm-prod-cta-sub">{f.sub}</p>
        <div className="tm-prod-cta-actions">
          <a className="tm-btn tm-btn-lg" href={c.links.app} style={{ background: '#fff', color: '#253DE5', borderColor: 'transparent', borderRadius: 9999, fontWeight: 600 }}>
            {f.button}
            <i className="ph-bold ph-arrow-right" />
          </a>
          <a className="tm-btn tm-btn-lg" href={c.links.call} target="_blank" rel="noopener noreferrer" style={{ background: 'transparent', color: '#fff', border: '1px solid rgba(255,255,255,.5)', borderRadius: 9999, fontWeight: 600 }}>
            {c.callCta}
            <i className="ph-bold ph-calendar-blank" />
          </a>
        </div>
      </div>
    </section>
  );
};

const PricingApp = () => (
  <LangProvider>
    <main className="tm-prod tm-pricing-page">
      <PricingHero />
      <PricingTiers />
      <PricingConcepts />
      <PricingCompare />
      <PricingAddon />
      <PricingFAQ />
      <PricingFinalCta />
    </main>
    <Footer />
  </LangProvider>
);

ReactDOM.createRoot(document.getElementById('root')).render(<PricingApp />);