/* global React */
/* sections-recognition.jsx ─────────────────────────────────────────
   "Do you recognize this?" — centred, text-led, breathing section.
   Placed after Our Sanctuary (RetreatShowcase).
──────────────────────────────────────────────────────────────────── */

const RZ_ITEMS = [
  {
    text: "I want to be fully productive at work — and fully present with family and friends.",
    icon: <path d="M8 18c0-5 3-9 8-11M16 18c0-5-3-9-8-11M12 7v11" />,
    label: "balance",
  },
  {
    text: "I want to wake up with real energy, and a body that can keep up with my life.",
    icon: <><path d="M12 6V4M6.3 8.3 4.9 6.9M17.7 8.3l1.4-1.4M4 14h2M18 14h2" /><path d="M7 14a5 5 0 0 1 10 0" /></>,
    label: "energy",
  },
  {
    text: "I want to stay calm and steady when the pressure is highest.",
    icon: <><path d="M3 19 10 7l3.5 6M13.5 13 16 9l5 10H3" /></>,
    label: "calm",
  },
  {
    text: "I want a clear head and clear judgment in the moments that matter most.",
    icon: <><circle cx="12" cy="12" r="8.5" fill="none" /><path d="m15.2 8.8-2 5-5 2.2 2-5z" /></>,
    label: "clarity",
  },
  {
    text: "I want to know how I am really doing — an honest picture of my health, before it's too late.",
    icon: <><circle cx="12" cy="12" r="5" fill="none" /><circle cx="12" cy="12" r="8.5" fill="none" strokeOpacity="0.35" /></>,
    label: "health",
  },
  {
    text: "I want to stay connected to who I am and why I started — and have a circle of people who get it.",
    icon: <><circle cx="12" cy="8" r="2.8" fill="none" /><circle cx="7" cy="16" r="2.8" fill="none" /><circle cx="17" cy="16" r="2.8" fill="none" /><path d="M9.7 10 8 13.3M14.3 10l1.7 3.3M9.3 16.1h5.4" strokeOpacity="0.55" /></>,
    label: "connection",
  },
];

function RecognitionSection() {
  return (
    <section className="rz-section" id="recognition" aria-label="Do you recognize this?">
      <div className="rz-topo" aria-hidden="true"></div>
      <div className="wrap">
        <div className="rz-inner">

          <span className="kicker reveal" style={{ marginBottom: "18px", display: "block" }}>
            The honest question
          </span>

          <h2 className="h2 rz-heading reveal" style={{ transitionDelay: "50ms" }}>
            Do you <em>recognize</em> this?
          </h2>

          <ul className="rz-list" role="list">
            {RZ_ITEMS.map((item, i) => (
              <li
                key={i}
                className="rz-item reveal"
                style={{ transitionDelay: `${130 + i * 85}ms` }}
              >
                <svg className="rz-icon" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" strokeWidth="1.5"
                  strokeLinecap="round" strokeLinejoin="round"
                  width="22" height="22"
                  style={{width:"22px",height:"22px",minWidth:"22px",flex:"0 0 22px",color:"oklch(0.50 0.11 125deg)",opacity:"1"}}
                  aria-label={item.label} role="img">
                  {item.icon}
                </svg>
                <span>{item.text}</span>
              </li>
            ))}
          </ul>

        </div>
      </div>
    </section>
  );
}

Object.assign(window, { RecognitionSection });