/* Services at a Glance — five icon cards.
 * Sits just under the hero as a quick scannable overview before the
 * detailed Services section. Keyword-bearing card titles for SEO.
 * Minimal line-icons only (square/circle/line primitives — no illustration).
 */

const GLANCE = [
  {
    title: "Menu Development",
    sub: "UAE · KSA · Oman",
    note: "Seasonal menus, signature pastry lines, and product pricing strategy built for the GCC palate and market margin requirements.",
    icon: (
      <svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
        <rect x="6" y="4" width="20" height="24" stroke="currentColor" strokeWidth="1.4"/>
        <line x1="10" y1="11" x2="22" y2="11" stroke="currentColor" strokeWidth="1.4"/>
        <line x1="10" y1="16" x2="22" y2="16" stroke="currentColor" strokeWidth="1.4"/>
        <line x1="10" y1="21" x2="18" y2="21" stroke="currentColor" strokeWidth="1.4"/>
      </svg>
    ),
  },
  {
    title: "Central Kitchen Design",
    sub: "Production-ready layouts",
    note: "Full floor plan and equipment specification for bakery production facilities — from chocolate rooms to cold storage — designed for efficiency and compliance.",
    icon: (
      <svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
        <rect x="4" y="6" width="24" height="20" stroke="currentColor" strokeWidth="1.4"/>
        <line x1="4" y1="14" x2="28" y2="14" stroke="currentColor" strokeWidth="1.4"/>
        <line x1="14" y1="14" x2="14" y2="26" stroke="currentColor" strokeWidth="1.4"/>
        <circle cx="9" cy="10" r="1.4" fill="currentColor"/>
      </svg>
    ),
  },
  {
    title: "Staff Training",
    sub: "On-site · Multilingual",
    note: "Hands-on training programmes for pastry and bakery teams, covering technique, hygiene standards, and production consistency — delivered in English and Arabic.",
    icon: (
      <svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
        <circle cx="16" cy="11" r="5" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M6 27c0-5.5 4.5-9 10-9s10 3.5 10 9" stroke="currentColor" strokeWidth="1.4"/>
      </svg>
    ),
  },
  {
    title: "Franchise Architecture",
    sub: "Scale your brand across GCC",
    note: "Recipe standardisation, operations manuals, supplier frameworks and brand guidelines so your bakery concept can open consistently across multiple locations.",
    icon: (
      <svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
        <rect x="13" y="4" width="6" height="6" stroke="currentColor" strokeWidth="1.4"/>
        <rect x="4" y="22" width="6" height="6" stroke="currentColor" strokeWidth="1.4"/>
        <rect x="22" y="22" width="6" height="6" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M16 10v6M16 16H7v6M16 16h9v6" stroke="currentColor" strokeWidth="1.4"/>
      </svg>
    ),
  },
  {
    title: "Operational Launch",
    sub: "Day 1 ready",
    note: "Full pre-opening support including six-phase launch structure, soft opening management, and post-launch performance review to ensure your bakery opens right the first time.",
    icon: (
      <svg viewBox="0 0 32 32" fill="none" aria-hidden="true">
        <path d="M16 4c5 3 7 8 7 13l-3 3h-8l-3-3c0-5 2-10 7-13Z" stroke="currentColor" strokeWidth="1.4"/>
        <circle cx="16" cy="13" r="2.2" stroke="currentColor" strokeWidth="1.4"/>
        <path d="M12 23l-2 5M20 23l2 5" stroke="currentColor" strokeWidth="1.4"/>
      </svg>
    ),
  },
];

function Glance(){
  return (
    <section className="ml-glance" id="glance" aria-label="Services at a glance">
      <div className="ml-glance-inner">
        <div className="ml-glance-head">
          <p className="ml-next-eyebrow" style={{color:"var(--steel)"}}>Services at a Glance</p>
          <h2 className="ml-glance-h">Everything a bakery needs, under <em>one roof</em>.</h2>
        </div>
        <ul className="ml-glance-grid">
          {GLANCE.map((g,i)=>(
            <li key={i} className="ml-glance-card" style={{"--i": i}}>
              <span className="ml-glance-icon">{g.icon}</span>
              <h3 className="ml-glance-title">{g.title}</h3>
              <p className="ml-glance-sub">{g.sub}</p>
              <p className="ml-glance-note">{g.note}</p>
              <a className="ml-glance-more" href="#services" aria-label={`Learn more about ${g.title}`}>
                Learn More
                <svg width="13" height="9" viewBox="0 0 13 9" fill="none" aria-hidden="true"><path d="M1 4.5h10M8 1l3.5 3.5L8 8" stroke="currentColor" strokeWidth="1.2" strokeLinecap="square"/></svg>
              </a>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

window.Glance = Glance;
