// Octopak website — Octopak vs cheaper alternatives (/compare)
const { Button } = window.OctopakDesignSystem_bc06ed;
const { ClosingCTA } = window;
const { COMPARE_ROWS } = window;
const { useEffect } = React;

function CompareView({ onNavigate }) {
  // FAQPage schema: one Question per row, answered with the Octopak cell so AI
  // engines quote our side. Matches the GuideView inline-schema pattern.
  useEffect(() => {
    const block = {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      mainEntity: COMPARE_ROWS.map((r) => ({
        "@type": "Question",
        name: `What about ${r.label.toLowerCase()}?`,
        acceptedAnswer: { "@type": "Answer", text: r.octopak },
      })),
    };
    const s = document.createElement("script");
    s.type = "application/ld+json";
    s.setAttribute("data-compare-schema", "");
    s.textContent = JSON.stringify(block);
    document.head.appendChild(s);
    return () => s.remove();
  }, []);

  return (
    <div>
      <section className="page-head">
        <div className="octo-container">
          <p className="octo-eyebrow">An honest comparison</p>
          <h1 className="page-head__title">Cheaper alternatives, honestly compared.</h1>
          <p className="page-head__lead">
            The cheapest option exists. This is what you trade off when you take it, laid out plainly. No bashing the alternative, no overpromising on our side.
          </p>
        </div>
      </section>

      {/* Comparison table (desktop) */}
      <section className="section section--tight">
        <div className="octo-container">
          <table className="compare-table">
            <thead>
              <tr>
                <th></th>
                <th>Cheaper online alternatives</th>
                <th className="is-octo">Octopak</th>
              </tr>
            </thead>
            <tbody>
              {COMPARE_ROWS.map((row) => (
                <tr key={row.label}>
                  <th scope="row">{row.label}</th>
                  <td>{row.alt}</td>
                  <td className="is-octo">{row.octopak}</td>
                </tr>
              ))}
            </tbody>
          </table>

          {/* Comparison cards (mobile) */}
          <div className="compare-cards">
            {COMPARE_ROWS.map((row) => (
              <div className="compare-card" key={row.label}>
                <div className="compare-card__row">
                  <p className="compare-card__label">{row.label}</p>
                  <div className="compare-card__pair">
                    <span className="compare-card__cell"><b>Cheaper online alternatives</b>{row.alt}</span>
                    <span className="compare-card__cell is-octo"><b>Octopak</b>{row.octopak}</span>
                  </div>
                </div>
              </div>
            ))}
          </div>
          <p style={{ marginTop: "var(--space-4)", fontSize: "var(--fs-sm)", color: "var(--text-muted)", fontStyle: "italic" }}>
            The cheapest option is real. So is the cost of running it yourself.
          </p>
        </div>
      </section>

      {/* When each is right */}
      <section className="section">
        <div className="octo-container">
          <div className="when-grid">
            <article className="when-card">
              <h3>When cheaper online alternatives are the right call</h3>
              <p>If you already have print-ready artwork, a designer on call, the time to manage a factory in another time zone, and the volume to justify a full production run, going direct can genuinely save money. Some F&amp;B operators are set up for this. If that is you, the trade-off probably makes sense.</p>
            </article>
            <article className="when-card when-card--octo">
              <h3>When Octopak is the right call</h3>
              <p>If you want one accountable team and packaging your brand can trust without having to project-manage a factory yourself, Octopak is built for that. You pay more on the unit; you spend a lot less of your week on packaging.</p>
            </article>
          </div>
        </div>
      </section>

      <ClosingCTA onNavigate={onNavigate} title="Want to talk through which path fits your brand?"
        sub="Tell us what you're packaging and we'll give you an honest read on whether going direct or working with us makes more sense." />
    </div>
  );
}

Object.assign(window, { CompareView });