// Octopak website — reusable widgets shared across views.
const { PH, Flag, Icon, WhatsAppGlyph, waLink, WA_DEFAULT, routeToHref } = window;
const { useState } = React;
const { CLIENTS } = window;
const { Button } = window.OctopakDesignSystem_bc06ed;

// Small mono pill that marks a block as placeholder copy (no em dashes, guide brand rule).
function PlaceholderTag({ children = "Placeholder copy" }) {
  return <span className="ph-tag" title="Placeholder, final copy follows in a later pass">{children}</span>;
}

// FAQ accordion item. Optional guideAnchor renders a "see the guide" link.
function FAQItem({ q, a, flag, guideAnchor, guideLabel, onNavigate, defaultOpen = false }) {
  const [open, setOpen] = useState(defaultOpen);
  return (
    <div className={`faq-item ${open ? "is-open" : ""}`}>
      <button className="faq-item__q" aria-expanded={open} onClick={() => setOpen((v) => !v)}>
        <span>{q}</span>
        <span className="faq-item__chev"><Icon name="chevron" size={20} /></span>
      </button>
      <div className="faq-item__a">
        <div className="faq-item__a-inner">
          {a ? a : <span><PH>Answer to be written against the brand guide. Lead with the answer in the first sentence (GEO).</PH> {flag && <Flag />}</span>}
          {guideAnchor && onNavigate && (
            <p className="faq-item__guide">
              <a href={routeToHref(`guide#${guideAnchor}`)} onClick={(e) => { e.preventDefault(); onNavigate(`guide#${guideAnchor}`); }}>
                Read more in our Print &amp; Materials Guide: {guideLabel} →
              </a>
            </p>
          )}
        </div>
      </div>
    </div>
  );
}

function FAQList({ items, onNavigate }) {
  return (
    <div className="faq-list">
      {items.map((it, i) => <FAQItem key={i} {...it} onNavigate={onNavigate} />)}
    </div>
  );
}

// Logo wall — compact (home) or full (about). Scrolling marquee: CLIENTS is
// rendered twice back to back so the track can loop seamlessly at -50%.
function LogoWall({ full = false, label }) {
  return (
    <div className={`logowall ${full ? "logowall--full" : ""}`}>
      {label && (
        <div className="octo-container">
          <p className="logowall__label">{label}</p>
        </div>
      )}
      <div className="logowall__marquee">
        <div className="logowall__track">
          {CLIENTS.map((c) => <img key={`a-${c.name}`} className="logowall__logo" src={c.logo} alt={c.name} loading="lazy" />)}
          {CLIENTS.map((c) => <img key={`b-${c.name}`} className="logowall__logo" src={c.logo} alt="" aria-hidden="true" loading="lazy" />)}
        </div>
      </div>
    </div>
  );
}

// Reusable five-step process strip (Process page + Guide "From here").
const FIVE_STEPS = [
  { n: "01", icon: "message", t: "Talk to us", b: "Tell us what you are packaging, by enquiry form or WhatsApp. We reply within three business days, usually sooner." },
  { n: "02", icon: "pen", t: "Send and check the artwork", b: "Send your artwork print-ready, or close to it. Octopak checks files, advises on print method, paper, colour, and finishes, and tweaks file-level issues. We do not design brands from scratch." },
  { n: "03", icon: "box", t: "Confirm spec and MOQ", b: "Print method, materials, finishes, and quantity. Paper bags start from 1,000. Coffee cups and pouches from 5,000. Other customised lines generally from 10,000. Higher quantities lower the unit price." },
  { n: "04", icon: "check", t: "Digital mockup, signed off", b: "Octopak sends a digital mockup for sign-off before anything prints. Physical mockups are available on request, adding one to two weeks and a possible cost depending on the product." },
  { n: "05", icon: "truck", t: "Produce and deliver", b: "Production runs and your order ships. Typical lead time is six to eight weeks from mockup sign-off, all in. One team owns the run to your door." },
];

function FiveStepStrip({ extras }) {
  // extras: optional map of step-number -> React node rendered inside that step
  return (
    <div className="steps steps--5">
      {FIVE_STEPS.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>
          {extras && extras[s.n]}
        </div>
      ))}
    </div>
  );
}

// Reusable MOQ + lead-time callout (product family pages + Guide).
function MoqLeadCallout({ family }) {
  return (
    <div className="moq-lead">
      <div className="moq-lead__cell">
        <span className="moq-box__label">Starting MOQ{family ? ` · ${family}` : ""}</span>
        <span className="moq-box__num">1,000</span>
        <p className="moq-box__note">From 1,000 for paper bags, 5,000 for coffee cups and pouches, generally 10,000 for other customised lines. Higher quantities lower the unit price.</p>
      </div>
      <div className="moq-lead__cell">
        <span className="moq-box__label">Typical lead time</span>
        <span className="moq-box__num">6-8 wks</span>
        <p className="moq-box__note">Six to eight weeks from mockup sign-off, all in.</p>
      </div>
    </div>
  );
}

Object.assign(window, { FAQItem, FAQList, LogoWall, FiveStepStrip, MoqLeadCallout, PlaceholderTag, FIVE_STEPS });