// Octopak website — Products overview (/products)
const { Card, Button } = window.OctopakDesignSystem_bc06ed;
const { PH, ProductTile, ClosingCTA, WhatsAppGlyph, waLink, WA_DEFAULT } = window;
const { FAMILIES_VISIBLE } = window;

function ProductsView({ onNavigate }) {
  return (
    <div>
      <section className="page-head octo-kraft">
        <div className="octo-container">
          <p className="octo-eyebrow">Products</p>
          <h1 className="page-head__title">Customised packaging for F&amp;B brands in Singapore.</h1>
          <p className="page-head__lead">Customised lines for food and beverage brands. Pick your product below, or tell us what you're packaging and we'll point you to the right one.</p>
        </div>
      </section>

      <section className="section">
        <div className="octo-container">
          <div className="product-grid">
            {FAMILIES_VISIBLE.map((f) => (
              <ProductTile key={f.slug} family={f} onNavigate={onNavigate} />
            ))}
            <div className="octo-pcard octo-pcard--invite">
              <div className="octo-pcard__body">
                <h3 className="octo-pcard__title">Not seeing what you need?</h3>
                <p className="octo-pcard__desc">
                  If it's customised food &amp; beverage packaging, there's a good chance we can still make it, even if it's not listed here. Tell us what you're picturing and we'll say honestly whether we're the right fit.
                </p>
                <Button variant="secondary" onClick={() => onNavigate("contact")}>Tell us what you need</Button>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Not sure what you need? */}
      <section className="section section--tight">
        <div className="octo-container">
          <Card variant="ink">
            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "var(--space-5)", flexWrap: "wrap" }}>
              <div>
                <h3 style={{ color: "var(--kraft-50)", margin: "0 0 8px", fontSize: "var(--fs-h2)" }}>Not sure what you need?</h3>
                <p style={{ color: "var(--ink-200)", margin: 0, maxWidth: "48ch" }}>
                  Tell us what you're packaging and we'll point you to the right format.
                </p>
              </div>
              <Button as="a" href={waLink(WA_DEFAULT)} target="_blank" rel="noreferrer" size="lg" variant="kraft"
                iconLeft={<WhatsAppGlyph size={20} />}>Talk to us on WhatsApp</Button>
            </div>
          </Card>
        </div>
      </section>

      <ClosingCTA onNavigate={onNavigate} title="Tell us what you're packaging."
        sub="We'll reply within three business days, usually sooner, with what's possible at your quantity." />
    </div>
  );
}

Object.assign(window, { ProductsView });