/* ------------------------------------------------------------------ *
 * Private Label · Sections 1–4
 * Hero · Why PL · What you can launch · Packaging & design
 * ------------------------------------------------------------------ */

/* Tiny packaging bag silhouette for hero composition */
const PlBag = ({ color, label, sub = 'PRIVATE LABEL' }) => (
  <svg viewBox="0 0 100 130" xmlns="http://www.w3.org/2000/svg" aria-hidden>
    <defs>
      <linearGradient id={'pl-bag-' + label} x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor={color} stopOpacity="1" />
        <stop offset="1" stopColor="#000" stopOpacity="0.3" />
      </linearGradient>
    </defs>
    <path d="M22 14 Q22 10 28 10 L72 10 Q78 10 78 14 L82 26 Q90 36 90 52 L90 116 Q90 122 84 122 L16 122 Q10 122 10 116 L10 52 Q10 36 18 26 Z"
      fill={`url(#pl-bag-${label})`} />
    <path d="M26 12 L74 12 L72 20 L28 20 Z" fill={color} opacity="0.65" />
    <text x="50" y="56" textAnchor="middle"
      fontFamily="Inter, sans-serif" fontWeight="700"
      fontSize="6" fill="#fff" opacity="0.78" letterSpacing="0.2em">YOUR BRAND</text>
    <text x="50" y="78" textAnchor="middle"
      fontFamily="Inter, sans-serif" fontWeight="800"
      fontSize="11" fill="#fff" letterSpacing="-0.02em">{label}</text>
    <line x1="34" y1="86" x2="66" y2="86" stroke="#fff" strokeOpacity="0.5" strokeWidth="0.7" />
    <text x="50" y="96" textAnchor="middle"
      fontFamily="Inter, sans-serif" fontWeight="600"
      fontSize="5" fill="#fff" opacity="0.7" letterSpacing="0.16em">{sub}</text>
  </svg>
);

/* Pouch dieline — flat technical layout for packaging visual */
const PouchDieline = () => (
  <svg viewBox="0 0 600 460" xmlns="http://www.w3.org/2000/svg" aria-hidden className="slm-pl-dieline">
    <defs>
      <linearGradient id="pouch-fill" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0" stopColor="#FCFAF0" />
        <stop offset="1" stopColor="#F0EAD2" />
      </linearGradient>
    </defs>
    {/* Pouch silhouette — stand-up doy-pack flat */}
    <path d="M 80 30 Q 80 20 95 20 L 505 20 Q 520 20 520 30 L 540 70 L 540 410 Q 540 425 525 425 L 75 425 Q 60 425 60 410 L 60 70 Z"
      fill="url(#pouch-fill)" stroke="#5F6F52" strokeWidth="1.4" />

    {/* Top seal pattern */}
    <pattern id="seal" width="6" height="4" patternUnits="userSpaceOnUse">
      <line x1="0" y1="2" x2="6" y2="2" stroke="#5F6F52" strokeWidth="0.7" />
    </pattern>
    <rect x="60" y="20" width="480" height="22" fill="url(#seal)" opacity="0.6" />
    <rect x="60" y="405" width="480" height="20" fill="url(#seal)" opacity="0.5" />

    {/* Centre brand block */}
    <rect x="180" y="120" width="240" height="6" fill="#2E5C30" />
    <text x="300" y="170" textAnchor="middle"
      fontFamily="Inter, sans-serif" fontWeight="800" fontSize="38" letterSpacing="-0.025em" fill="#1A1A18">YOUR BRAND</text>
    <text x="300" y="200" textAnchor="middle"
      fontFamily="Inter, sans-serif" fontWeight="500" fontSize="13" letterSpacing="0.2em" fill="#6F6C62" textLength="200">PREMIUM ROASTED · 200g</text>
    <rect x="180" y="220" width="240" height="6" fill="#2E5C30" />

    {/* Bottom info zone */}
    <rect x="80" y="320" width="200" height="60" fill="#fff" stroke="#5F6F52" strokeWidth="0.6" rx="3" />
    <text x="92" y="338" fontFamily="Inter, sans-serif" fontWeight="700" fontSize="9" fill="#1A1A18" letterSpacing="0.06em">NUTRITION</text>
    {[0, 1, 2, 3].map(i => (
      <g key={i}>
        <line x1="92" y1={350 + i * 7} x2="200" y2={350 + i * 7} stroke="#D8CDB0" strokeWidth="0.5" />
      </g>
    ))}

    {/* Barcode zone */}
    <rect x="320" y="320" width="200" height="60" fill="#fff" stroke="#5F6F52" strokeWidth="0.6" rx="3" />
    <g transform="translate(335, 332)" fill="#1A1A18">
      {Array.from({ length: 28 }).map((_, i) => {
        const w = (i % 3 === 0 ? 2.4 : i % 4 === 0 ? 1 : i % 5 === 0 ? 1.4 : 0.8);
        return <rect key={i} x={i * 4.5} y="0" width={w} height="28" />;
      })}
    </g>
    <text x="420" y="375" textAnchor="middle" fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#1A1A18" letterSpacing="0.16em">4 056123 789012</text>

    {/* Dimension callouts */}
    <g fontFamily="JetBrains Mono, monospace" fontSize="9" fill="#6F6C62" letterSpacing="0.04em">
      <line x1="60" y1="445" x2="540" y2="445" stroke="#5F6F52" strokeWidth="0.4" strokeDasharray="3 3" />
      <line x1="60" y1="441" x2="60" y2="449" stroke="#5F6F52" strokeWidth="0.5" />
      <line x1="540" y1="441" x2="540" y2="449" stroke="#5F6F52" strokeWidth="0.5" />
      <text x="300" y="458" textAnchor="middle" fontWeight="500">180 MM</text>

      <line x1="555" y1="20" x2="555" y2="425" stroke="#5F6F52" strokeWidth="0.4" strokeDasharray="3 3" />
      <text x="563" y="225" textAnchor="middle" fontWeight="500" transform="rotate(90 563 225)">240 MM</text>
    </g>

    {/* Annotation labels */}
    <g fontFamily="JetBrains Mono, monospace" fontSize="8" fill="#5F6F52" letterSpacing="0.08em">
      <line x1="30" y1="31" x2="58" y2="31" stroke="#5F6F52" strokeWidth="0.5" />
      <text x="28" y="34" textAnchor="end">TOP SEAL</text>

      <line x1="30" y1="178" x2="178" y2="178" stroke="#5F6F52" strokeWidth="0.5" />
      <text x="28" y="181" textAnchor="end">BRAND ZONE</text>

      <line x1="30" y1="350" x2="78" y2="350" stroke="#5F6F52" strokeWidth="0.5" />
      <text x="28" y="353" textAnchor="end">NUTRITION</text>
    </g>
  </svg>
);

/* ── 1. HERO ─────────────────────────────────────────────────────── */
const Hero = () => (
  <section className="slm-pl-hero" id="top" data-screen-label="01 Hero">
    <div className="slm-shell">
      <div className="slm-pl-hero-grid slm-fade">
        <div>
          <div className="slm-pl-hero-eyebrow">Private Label Snack Manufacturing for Retail &amp; E-commerce</div>
          <h1 className="slm-pl-hero-title">
            Launch your snack brand <em>with a production partner</em> built for retail and e-commerce.
          </h1>
          <ul className="slm-pl-hero-points">
            <li><span className="slm-pl-hero-points-mark">➲</span>Flexible formulations, full quality control, and retail/e-commerce compliance at every stage.</li>
            <li><span className="slm-pl-hero-points-mark">➲</span>We produce sunflower seeds, peanuts, and pistachios under your brand — from sampling and approval to launch.</li>
            <li><span className="slm-pl-hero-points-mark">➲</span>Custom flavors, packaging, and cost structure for your channel. From pilot batches to retail-scale volumes, on time.</li>
          </ul>

          <div className="slm-pl-hero-ctas">
            <a className="slm-btn slm-btn-primary slm-btn-lg slm-pl-hero-cta-full" href="#contact">
              Request a Private Label proposal <Icon name="arrow" size={16} strokeWidth={2} />
            </a>
          </div>

          <div className="slm-pl-hero-meta">
            <span className="slm-pl-hero-meta-dot" />
            Reply within 1–2 business days with project scope &amp; next step
          </div>

        </div>

        <div className="slm-pl-hero-photo slm-fade">
          <img src={window.PL_HERO_IMG || "/page-resources/assets/private-label-hero.png"} alt="Private label packaging formats ready for a custom brand" />
        </div>
      </div>

      <div className="slm-pl-hero-badges slm-fade">
        <div className="slm-pl-hero-badge">
          <span className="slm-pl-hero-badge-ic"><Icon name="shield" size={18} /></span>
          <span className="slm-pl-hero-badge-text">HACCP /<br/>ISO 22000:2018</span>
        </div>
        <div className="slm-pl-hero-badge">
          <span className="slm-pl-hero-badge-ic"><Icon name="factory" size={18} /></span>
          <span className="slm-pl-hero-badge-text">Czech Republic<br/>production</span>
        </div>
        <div className="slm-pl-hero-badge">
          <span className="slm-pl-hero-badge-ic"><Icon name="box" size={18} /></span>
          <span className="slm-pl-hero-badge-text">Barrier<br/>packaging</span>
        </div>
        <div className="slm-pl-hero-badge">
          <span className="slm-pl-hero-badge-ic"><Icon name="lock" size={18} /></span>
          <span className="slm-pl-hero-badge-text">Confidentiality<br/>by default</span>
        </div>
      </div>
    </div>
  </section>
);

/* ── 2. WHY PL · numbered 01–04 rows (matches mockup) ────────────── */
const WhyPL = () => {
  const rows = [
    {
      icon: 'pie-chart', num: '01',
      title: 'Financial benefits: higher margins, lower risk',
      bullets: [
        ['Flexible pricing policy', 'Competitive production pricing with transparent costing.'],
        ['Lower capital exposure', 'No investment in lines, staff, energy, or QC.'],
        ['Practical MOQs', 'Pilot runs without tying up working capital.'],
        ['Indexation by agreement', 'Clear rules for price revision based on costs.'],
      ],
    },
    {
      icon: 'flame', num: '02',
      title: 'Manufacturing advantages: differentiated product, reliable quality',
      bullets: [
        ['European roasting lines', 'Full profile control and consistency.'],
        ['Vacuum salting (optional)', 'Even taste without salt dust.'],
        ['Category-fit assortment', 'Proven products with stable demand.'],
        ['Recipe configuration', 'Roast level, salt, and size adjustments.'],
        ['Quality control', 'Compliance with HACCP / ISO standards.'],
      ],
    },
    {
      icon: 'cog-truck', num: '03',
      title: 'Logistics and service: reliability, simplicity',
      bullets: [
        ['Incoterms by channel', 'Suitable choices based on geography.'],
        ['Retail and e-commerce ready', 'Full labeling and packaging support.'],
        ['Predictable lead times', 'Clear schedule from approval to shipment.'],
        ['Comfortable residual shelf life', 'Practical remaining time for the supply chain.'],
      ],
    },
    {
      icon: 'tag', num: '04',
      title: 'Marketing and support: stronger sell-through',
      bullets: [
        ['Templates and design support', 'Guidance on dielines and pack design.'],
        ['Labeling and compliance', 'Follow target-market rules.'],
        ['POS support', 'Recommendations for retail displays.'],
        ['E-commerce content support', 'Product images and digital assets for faster launches.'],
      ],
    },
  ];

  return (
    <section className="slm-section" id="why" data-screen-label="02 Why PL" style={{ background: 'var(--slm-page-2)' }}>
      <div className="slm-shell">
        <div className="slm-pays-intro slm-fade">
          <div className="slm-sec-eyebrow under-rule">Why Private Label</div>
          <h2 className="slm-sec-title">Benefits and advantages</h2>
          <p className="slm-sec-sub" style={{ marginTop: 14 }}>
            Turnkey consulting for Private Label. We do more than manufacture: we help solve recipe, specifications, packaging, and logistics issues, enabling faster market launches with predictable margins.
          </p>
        </div>

        <div className="slm-pays-rows slm-fade">
          {rows.map(r => (
            <div className="slm-pays-row" key={r.num}>
              <div className="slm-pays-row-head">
                <div className="slm-pays-row-ic"><Icon name={r.icon} size={22} strokeWidth={1.7} /></div>
                <div>
                  <div className="slm-pays-row-num">{r.num}</div>
                  <div className="slm-pays-row-title">{r.title}</div>
                </div>
              </div>
              <div className="slm-pays-bullets">
                {r.bullets.map(([t, d]) => (
                  <div key={t}>
                    <div className="slm-pays-bullet-title">{t}</div>
                    <div className="slm-pays-bullet-desc">{d}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>

        {/* Two bottom plates: IP + confidentiality */}
        <div className="slm-pl-ip-strip slm-fade">
          <div className="slm-pl-ip-ic"><Icon name="lock" size={18} strokeWidth={2} /></div>
          <div>
            <div className="slm-pl-ip-title">Your brand stays your brand</div>
            <div className="slm-pl-ip-desc">
              Recipe direction, packaging design, and customer relationships belong to you. We focus on production, quality, and documentation.
            </div>
          </div>
          <div>
            <div className="slm-pl-ip-title">Confidentiality by default</div>
            <div className="slm-pl-ip-desc">
              Private Label projects are treated as confidential from the first call. NDA available on request.
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ── 3. WHAT YOU CAN LAUNCH ──────────────────────────────────────── */
const WhatYouCanLaunch = () => {
  const customize = [
    ['flame',  'Roast intensity'],
    ['shield', 'Salt level'],
    ['box',    'Kernel / size selection'],
    ['tag',    'Flavor direction'],
    ['file',   'Pack size'],
    ['globe',  'Target channel'],
    ['clock',  'Shelf-life target'],
    ['pie-chart', 'Cost positioning'],
  ];

  return (
    <section className="slm-section" id="range" data-screen-label="03 What you can launch">
      <div className="slm-shell">
        <div className="slm-fade" style={{ marginBottom: 48 }}>
          <div className="slm-sec-eyebrow under-rule">Product range</div>
          <h2 className="slm-sec-title">
            Core snack categories <em>ready for</em> Private Label development.
          </h2>
          <p className="slm-sec-sub" style={{ marginTop: 16 }}>
            The range is presented as a launch platform, not as a messy catalogue. Choose a category, align the recipe, and shape the pack around your channel.
          </p>
        </div>

        <div className="slm-pl-range-grid slm-fade">
          <div className="slm-pl-panel">
            <div className="slm-pl-panel-eyebrow">Category A</div>
            <div className="slm-pl-panel-title">Sunflower seed formats</div>
            <div className="slm-pl-panel-desc">
              Black, striped / JUMBO, white, and other selected seed profiles in salted and unsalted roasted variants. The Slomax flagship category — built for repeat shelf rotation.
            </div>
            <div className="slm-pl-panel-products">
              <span className="slm-stamp">In-shell · roasted</span>
              <span className="slm-stamp">Kernels · roasted</span>
              <span className="slm-stamp">Salted / unsalted</span>
              <span className="slm-stamp">Selected caliber</span>
            </div>
          </div>

          <div className="slm-pl-panel">
            <div className="slm-pl-panel-eyebrow">Category B</div>
            <div className="slm-pl-panel-title">Nuts and related snack formats</div>
            <div className="slm-pl-panel-desc">
              Peanuts, pistachios, pumpkin seeds, almonds, and cashews in commercially relevant roasted and salted / unsalted options. Single-SKU launches or mixed-category lines.
            </div>
            <div className="slm-pl-panel-products">
              <span className="slm-stamp">Peanuts</span>
              <span className="slm-stamp">Pistachios</span>
              <span className="slm-stamp">Pumpkin seeds</span>
              <span className="slm-stamp">Almonds · cashews</span>
            </div>
          </div>

          <div className="slm-pl-customize">
            <div>
              <div className="slm-pl-panel-eyebrow" style={{ marginBottom: 10 }}>Customisation board</div>
              <div className="slm-pl-panel-title">What can be adjusted</div>
              <p className="slm-pl-panel-desc" style={{ marginTop: 12 }}>
                Each launch is shaped around a small number of decisions. Discuss them at the brief stage; we lock them at sample approval.
              </p>
              <a className="slm-btn slm-btn-primary slm-btn-sm" href="#brief" style={{ marginTop: 18 }}>
                Fill in PL brief <Icon name="arrow" size={14} strokeWidth={2} />
              </a>
            </div>
            <div className="slm-pl-customize-chips">
              {customize.map(([ic, label]) => (
                <span className="slm-pl-customize-chip" key={label}>
                  <span className="ic"><Icon name={ic} size={14} strokeWidth={1.7} /></span>
                  {label}
                </span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

/* ── 4. PACKAGING AND DESIGN ─────────────────────────────────────── */
const PackagingDesign = () => (
  <section className="slm-section" id="packaging" data-screen-label="04 Packaging" style={{ background: 'var(--slm-page-2)' }}>
    <div className="slm-shell">
      <div className="slm-fade" style={{ marginBottom: 48 }}>
        <div className="slm-sec-eyebrow under-rule">Packaging and design</div>
        <h2 className="slm-sec-title">
          From pack structure <em>to</em> shelf-ready brand presentation.
        </h2>
        <p className="slm-sec-sub" style={{ marginTop: 16 }}>
          Packaging is part of the product strategy. It shapes compliance, freshness, logistics, and how the product performs on shelf or online.
        </p>
      </div>

      <div className="slm-pl-pack-grid">
        <div className="slm-pl-pack-cards slm-fade">
          <div className="slm-pl-pack-card">
            <div className="slm-pl-pack-card-ic"><Icon name="box" size={20} strokeWidth={1.7} /></div>
            <div className="slm-pl-pack-card-title">Pack formats</div>
            <div className="slm-pl-pack-card-desc">
              Flow pack, stabilo bag, doy-pack, and selected alternative formats depending on the project.
            </div>
          </div>
          <div className="slm-pl-pack-card">
            <div className="slm-pl-pack-card-ic"><Icon name="leaf" size={20} strokeWidth={1.7} /></div>
            <div className="slm-pl-pack-card-title">Barrier and freshness logic</div>
            <div className="slm-pl-pack-card-desc">
              Material structure and freshness protection are aligned with the product, route to market, and target shelf life.
            </div>
          </div>
          <div className="slm-pl-pack-card">
            <div className="slm-pl-pack-card-ic"><Icon name="doc-check" size={20} strokeWidth={1.7} /></div>
            <div className="slm-pl-pack-card-title">Labeling and technical prep</div>
            <div className="slm-pl-pack-card-desc">
              Dielines, barcode zones, legal information areas, date coding, and multilingual versions can be coordinated in one workflow.
            </div>
          </div>
          <div className="slm-pl-pack-card">
            <div className="slm-pl-pack-card-ic"><Icon name="cart" size={20} strokeWidth={1.7} /></div>
            <div className="slm-pl-pack-card-title">Retail and e-commerce readiness</div>
            <div className="slm-pl-pack-card-desc">
              SRP / show-box options, case packs, pallet logic, and marketplace preparation can be discussed as part of the launch setup.
            </div>
          </div>
        </div>

        <div className="slm-pl-pack-visual slm-fade">
          <img className="slm-pl-pack-formats-img" src="/page-resources/assets/private-label-pack-formats.png" alt="Three private label pack formats" loading="lazy" />
        </div>
      </div>

      {/* Discreet $10K secondary offer strip — not visually dominant */}
      <div className="slm-pl-offer slm-fade">
        <span className="slm-pl-offer-tag">Optional · larger opening projects</span>
        <div className="slm-pl-offer-text">
          <span className="slm-pl-offer-title">Launch support for larger opening projects</span>
          <span className="slm-pl-offer-desc">
            For Private Label orders starting from $10,000, an additional brand-promotion support package may be included at no extra cost.
          </span>
          <span className="slm-pl-offer-note">Presented as a secondary commercial benefit, not the core offer.</span>
        </div>
        <a className="slm-btn slm-btn-secondary slm-btn-sm" href="#contact">
          Discuss eligibility <Icon name="arrow" size={14} strokeWidth={2} />
        </a>
      </div>
    </div>
  </section>
);

Object.assign(window, { PlHero: Hero, PlWhy: WhyPL, PlLaunch: WhatYouCanLaunch, PlPackaging: PackagingDesign });
