// Octopak website — Home (/)
const { Button } = window.OctopakDesignSystem_bc06ed;
const { PH, PHBlock, Flag, SectionHead, MediaSlot, ProductTile, ClosingCTA, Icon, WhatsAppGlyph, waLink, WA_DEFAULT, routeToHref, LogoWall } = window;
const { FAMILIES_VISIBLE, CASE_STUDIES } = window;

const WEDGE = [
  { icon: "users", title: "One accountable team", body: "One team owns your order from the first message to the delivered pallet. One point of contact, no time-zone tag, no guessing whose problem it is.", to: "process", linkLabel: "Discover" },
  { icon: "palette", title: "Packaging partner", body: "Send print-ready artwork (or close to it). We check files, advise on paper, print method, colour, and finishes, and make sure your artwork prints the way you meant.", to: "process", linkLabel: "Discover" },
  { icon: "sliders", title: "Honest minimums, in plain sight", body: "Paper bags from 1,000. Coffee cups from 5,000. Higher quantities lower the unit price. No bait-and-switch.", to: "products", linkLabel: "Discover" },
];

function HomeView({ onNavigate }) {
  return (
    <div>
      {/* 1. Hero */}
      <section className="hero">
        <div className="octo-container hero__grid">
          <div>
            <p className="octo-eyebrow">Customised packaging · Singapore</p>
            <h1 className="hero__title">Customised packaging that takes your brand as seriously as you do.</h1>
            <p className="hero__lead">The local, accountable alternative to ordering blind from an overseas factory. Send us your artwork, we will guide you through the print decisions and own the job from sign-off to delivered pallet.</p>
            <div className="hero__cta">
              <Button size="lg" variant="primary" onClick={() => onNavigate("contact")}>Start an enquiry</Button>
              <Button as="a" href={waLink(WA_DEFAULT)} target="_blank" rel="noreferrer" size="lg" variant="secondary"
                iconLeft={<WhatsAppGlyph size={20} />}>Talk to us on WhatsApp</Button>
            </div>
          </div>
          <MediaSlot id="home-hero" src="assets/photos/folkyard-cup-held-latte-landscape.jpg" placeholder="Real photo of customised packaging in use (not a render)" radius={18} style={{ aspectRatio: "5 / 4" }} />
        </div>
      </section>

      {/* 2. Logo wall */}
      <LogoWall label="Singapore brands that trust Octopak with how they show up in a customer's hand." />

      {/* 3. The wedge */}
      <section className="section">
        <div className="octo-container">
          <SectionHead eyebrow="Why Octopak" title="What you get when you work with us." center
            intro={"No catalogue packaging. One team to deal with. Numbers up front, on every line we run."} />
          <div className="grid-3 wedge-grid--feature">
            {WEDGE.map((w) => (
              <a key={w.title} className="wedge-card wedge-card--feature" href={routeToHref(w.to)}
                onClick={(e) => { e.preventDefault(); onNavigate(w.to); }} style={{ textDecoration: "none" }}>
                <span className="wedge-card__icon"><Icon name={w.icon} size={26} /></span>
                <h3 className="wedge-card__title">{w.title}</h3>
                <p className="wedge-card__body">{w.body}</p>
                <span className="wedge-card__link">{w.linkLabel}</span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* 4. Product overview */}
      <section className="section section--sunken">
        <div className="octo-container">
          <SectionHead eyebrow="The range" title="Customised packaging, one accountable team."
            action={<Button variant="ghost" onClick={() => onNavigate("products")}>See all products →</Button>} />
          <div className="product-grid">
            {FAMILIES_VISIBLE.map((f) => (
              <ProductTile key={f.slug} family={f} onNavigate={onNavigate} />
            ))}
          </div>
        </div>
      </section>

      {/* 5. Selected work strip */}
      <section className="section">
        <div className="octo-container">
          <SectionHead eyebrow="Selected work" title="Proof, not promises."
            intro={"A small slice of the brands Octopak customises for, with the work that earned its place on the counter."}
            action={<Button variant="ghost" onClick={() => onNavigate("work")}>See all work →</Button>} />
          <div className="work-grid">
            {CASE_STUDIES.slice(0, 3).map((c, i) => (
              <a key={c.slug} className="case-card" href={routeToHref("work")}
                onClick={(e) => { e.preventDefault(); onNavigate("work"); }} style={{ textDecoration: "none" }}>
                <MediaSlot id={`home-work-${i}`} src={c.photos?.[0]?.src || `assets/photos/home-work-${i + 1}.webp`} placeholder="Customised work photo" radius={0} shape="rect" style={{ aspectRatio: "4 / 3" }} />
                <div className="case-card__body">
                  <p className="case-card__brand">{c.brand}</p>
                  <h3 className="case-card__headline">{c.headline ? c.headline : <PH>One-line case study headline. TBD.</PH>}</h3>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* 6. Honest comparison teaser */}
      <section className="section--tight section">
        <div className="octo-container">
          <div className="compare-teaser">
            <div>
              <h2 className="compare-teaser__q">Could you get this cheaper? Probably.</h2>
              <p className="compare-teaser__sub">Alibaba, Taobao, direct from a factory online. Here is what changes when you take that path, laid out plainly.</p>
            </div>
            <Button size="lg" variant="ink" onClick={() => onNavigate("compare")}>See the comparison</Button>
          </div>
        </div>
      </section>

      {/* 7. How we work, three steps */}
      <section className="section section--sunken">
        <div className="octo-container">
          <SectionHead eyebrow="How we work" title="From first message to delivery." center
            action={<Button variant="ghost" onClick={() => onNavigate("process")}>See how we work →</Button>} />
          <div className="steps steps--3">
            {[
              { n: "01", icon: "message", t: "Talk to us", b: "Tell us what you are packaging, by form or WhatsApp. We reply within three business days, usually sooner." },
              { n: "02", icon: "pen", t: "Send artwork, sign off", b: "Send us your artwork. We check files, walk you through paper, print method, and finishes, and send a digital mockup before anything prints." },
              { n: "03", icon: "truck", t: "Produce and deliver", b: "Six to eight weeks from sign-off, all in. One team owns the run to your door." },
            ].map((s) => (
              <div className="step" key={s.n}>
                <span className="step__num">{s.n}</span>
                <span className="step__icon"><Icon name={s.icon} size={28} /></span>
                <h3 className="step__title">{s.t}</h3>
                <p className="step__body">{s.b}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* 7.5 Print & Materials Guide teaser */}
      <section className="section">
        <div className="octo-container">
          <div className="guide-teaser">
            <div className="guide-teaser__text">
              <p className="octo-eyebrow">Print &amp; Materials Guide</p>
              <h2 className="guide-teaser__title">New to customised packaging? Start here.</h2>
              <p className="guide-teaser__body">A short walk through the choices behind your packaging. Materials, print methods, finishes, file formats. Everything you need to make the calls, before you ask us a thing.</p>
              <Button size="lg" variant="primary" onClick={() => onNavigate("guide")}>Read the guide</Button>
            </div>
            <figure className="guide-teaser__media">
              <MediaSlot id="home-guide-teaser" src="assets/photos/guide-foil.webp" placeholder="Foil stamping detail" radius={16} style={{ aspectRatio: "4 / 3" }} />
            </figure>
          </div>
        </div>
      </section>

      {/* 8. Closing CTA */}
      <ClosingCTA onNavigate={onNavigate} title="Tell us what you are packaging."
        sub="We come back to you within three business days, usually sooner." />
    </div>
  );
}

Object.assign(window, { HomeView });