// Octopak website — About (/about)
const { Badge } = window.OctopakDesignSystem_bc06ed;
const { SectionHead, MediaSlot, ClosingCTA, LogoWall } = window;

// Copied from the live site (octopak.com/about) — its three stated values.
const PILLARS = [
  {
    title: "Sustainability", icon: "leaf",
    body: "From sourcing to logistics and warehousing, sustainability is at the heart of everything we do. We trust that businesses can do their part in creating a future for all, when sharing common values as customers.",
  },
  {
    title: "Low minimum order", icon: "sliders",
    body: "Octopak started with small businesses in mind. We believe in increasing the competitiveness of small businesses by providing customised solutions typically made available only to larger enterprises. You order only what your organisation truly needs, without the pressure of hitting a large minimum order quantity.",
  },
  {
    title: "Fully customisable", icon: "palette",
    body: "No organisation or brand is alike. We offer fully customisable packaging solutions at affordable prices. From coffee cups to paper bags and cake boxes, we'll find a tailor-made solution to fit your need.",
  },
];

function AboutView({ onNavigate }) {
  return (
    <div>
      <section className="page-head">
        <div className="octo-container">
          <p className="octo-eyebrow">About Octopak</p>
          <h1 className="page-head__title">Eco packaging solutions that <em>elevate</em> your brand.</h1>
          <p className="page-head__lead">Octopak provides customised eco packaging for food and beverage brands, using high-quality, sustainably sourced materials.</p>
        </div>
      </section>

      {/* Wedge restated, longer */}
      <section className="section section--tight">
        <div className="octo-container about-intro__grid">
          <MediaSlot id="about-media" src="assets/photos/about.webp" placeholder="Brand / studio photography" radius={14} style={{ aspectRatio: "4 / 5" }} />
          <div>
            <Badge variant="clay">Food &amp; Beverage · Singapore</Badge>
            <p style={{ marginTop: "var(--space-4)", color: "var(--text-muted)", lineHeight: 1.65 }}>
              We handle custom sizing and printing across coffee and paper cups, paper bags, tote bags, cake and pastry boxes, greaseproof paper, burger wrappers, corrugated boxes, coasters, and napkins, built to bring your brand messaging to life.
            </p>
            <p style={{ color: "var(--text-muted)", lineHeight: 1.65 }}>
              Bring your logo and background colour, and we turn it into print-ready files, checking artwork and advising on print method, paper, colour, and finishes along the way. Minimums stay sensible too: paper bags from 1,000, coffee cups and pouches from 5,000, and other customised lines generally from 10,000, with higher quantities lowering the unit price.
            </p>
          </div>
        </div>
      </section>

      {/* Three pillars (from the live site's stated values) */}
      <section className="section section--sunken">
        <div className="octo-container">
          <SectionHead eyebrow="What we stand for" title="Three things we hold to." center />
          <div className="grid-3">
            {PILLARS.map((p, i) => (
              <div className="pillar" key={p.title}>
                <span className="pillar__num">0{i + 1}</span>
                <h3 className="pillar__title">{p.title}</h3>
                <p className="pillar__body">{p.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* The roster */}
      <LogoWall full label="Some of the brands we've customised for" />

      <ClosingCTA onNavigate={onNavigate} title="Want to see what we'd make for you?"
        sub="Tell us what you're packaging and we'll show you what's possible at your quantity." />
    </div>
  );
}

Object.assign(window, { AboutView });