// ProblemSection.jsx — Section 2. Eyewear has hidden operational complexity.
const ProblemSection = () => {
  const items = [
    { num: "01", head: "Technical unfamiliarity", body: "Frame anatomy, materials, hinges, and lens geometry are unfamiliar territory for most brand teams." },
    { num: "02", head: "Fragmented suppliers", body: "Acetate, metalwork, hinges, lenses, and packaging often come from five different vendors." },
    { num: "03", head: "Packaging & QC", body: "Cases, cloths, boxes, and inserts must arrive in sync — and survive shipping intact." },
    { num: "04", head: "Brand consistency", body: "Holding the visual identity steady across sampling rounds, factories, and retail partners." },
  ];
  return (
    <section className="section section--tight" id="problem">
      <span className="edge-label">EM · 02 — PROBLEM</span>
      <div className="shell">
        <div className="eyebrow eyebrow-rule">Section · 02 — The Problem</div>
        <h2 className="section-title">Eyewear is deceptively difficult — whether you're launching for the first time or rebuilding what's there.</h2>
        <div className="problem__grid">
          {items.map((it) => (
            <div className="problem__cell" key={it.num}>
              <div className="problem__num">{it.num}</div>
              <div className="problem__head">{it.head}</div>
              <p className="problem__body">{it.body}</p>
            </div>
          ))}
        </div>
        <p className="problem__footnote">
          Not every brand should launch eyewear. Part of our job is telling you, early.
        </p>
      </div>
    </section>
  );
};

window.ProblemSection = ProblemSection;