/* eslint-disable */
/* global React, ReactDOM, useLang, LangProvider, NavBar, Footer */
/* pricing.jsx — Teramot pricing page. 4 tiers + concepts + compare + FAQ. */

const PricingHero = () => {
  const { c } = useLang();
  const p = c.pricing;
  return (
    <section className="tm-pricing-hero">
      <div className="tm-container">
        <span className="tm-pricing-eyebrow">{p.heroEyebrow}</span>
        <h1 className="tm-pricing-h1">{p.heroH1}</h1>
        <p className="tm-pricing-sub">{p.heroSub}</p>
      </div>
    </section>
  );
};

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

  return (
    <section className="tm-tiers">
      <div className="tm-container">
        <div className="tm-tiers-grid">
          {p.tiers.map((tier, i) => {
            const isCustom = tier.price === 'custom';
            return (
              <article
                key={i}
                className={`tm-tier ${tier.highlight ? 'is-highlighted' : ''}`}
              >
                {tier.highlight && (
                  <span className="tm-tier-badge">{p.mostPopular}</span>
                )}
                <header className="tm-tier-head">
                  <h2 className="tm-tier-name">{tier.name}</h2>
                  <p className="tm-tier-tagline">{tier.tagline}</p>
                </header>

                <div className="tm-tier-price-row">
                  <span className={`tm-tier-price-amount ${isCustom ? 'is-custom' : ''}`}>
                    {isCustom ? p.custom : tier.price}
                  </span>
                  {!isCustom && tier.priceSuffix && (
                    <span className="tm-tier-price-suffix">{tier.priceSuffix}</span>
                  )}
                </div>

                <a
                  className={`tm-btn tm-btn-lg ${tier.highlight ? 'tm-btn-primary' : 'tm-btn-dark'}`}
                  href="mailto:info@teramot.com"
                >
                  {tier.cta}
                </a>

                <div className="tm-tier-includes">{p.includes}</div>
                <ul className="tm-tier-features">
                  {tier.features.map((f, j) => (
                    <li key={j}>
                      <i className="ph-bold ph-check-circle"></i>
                      <span>{f}</span>
                    </li>
                  ))}
                </ul>
              </article>
            );
          })}
        </div>
      </div>
    </section>
  );
};

const PricingConcepts = () => {
  const { c } = useLang();
  const k = c.pricing.concepts;
  return (
    <section className="tm-concepts">
      <div className="tm-container">
        <h2 className="tm-concepts-h2">{k.h2}</h2>
        <div className="tm-concepts-grid">
          {k.items.map((it, i) => (
            <div key={i} className={`tm-concept ${i === k.items.length - 1 && k.items.length % 2 === 1 ? 'is-full' : ''}`}>
              <h3 className="tm-concept-title">{it.title}</h3>
              <p className="tm-concept-body">{it.body}</p>
            </div>
          ))}
        </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-compare-section">
      <div className="tm-container">
        <h2 className="tm-h2">{p.h2}</h2>
        <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-dark 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;
  return (
    <section className="tm-faq-section">
      <div className="tm-container">
        <h2 className="tm-h2">{f.h2}</h2>
        <div className="tm-faq-list">
          {f.items.map((it, i) => (
            <details key={i} className="tm-faq-item" {...(i === 0 ? { open: true } : {})}>
              <summary className="tm-faq-summary">
                <span>{it.q}</span>
                <span className="tm-faq-caret" aria-hidden="true">
                  <i className="ph-bold ph-plus"></i>
                </span>
              </summary>
              <p className="tm-faq-answer">{it.a}</p>
            </details>
          ))}
        </div>
      </div>
    </section>
  );
};

const PricingFinalCta = () => {
  const { c } = useLang();
  const f = c.pricing.finalCta;
  return (
    <section className="tm-cta">
      <div className="tm-container">
        <h2 className="tm-cta-h2">{f.h2}</h2>
        <p className="tm-cta-sub">{f.sub}</p>
        <div className="tm-cta-actions">
          <a className="tm-btn tm-btn-dark tm-btn-lg" href={c.links.app}>
            {f.button}
            <i className="ph-bold ph-arrow-right tm-arrow"></i>
          </a>
          <a className="tm-btn tm-btn-ghost tm-btn-lg" href={c.links.call} target="_blank" rel="noopener noreferrer">
            {c.callCta}
            <i className="ph-bold ph-calendar-blank"></i>
          </a>
        </div>
      </div>
    </section>
  );
};

const PricingApp = () => (
  <LangProvider>
    <NavBar current="pricing" />
    <main>
      <PricingHero />
      <PricingTiers />
      <PricingConcepts />
      <PricingCompare />
      <PricingAddon />
      <PricingFAQ />
      <PricingFinalCta />
    </main>
    <Footer />
  </LangProvider>
);

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