// 09 — Bloques rápidos (Buscador / English / Chefs / Recetario)
function CQuick() {
  const [, t] = window.useLang();
  const Icons = {
    plate: () => (
      <svg viewBox="0 0 64 64" width="60" height="60" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M14 14 V40 M14 14 L20 22 V40" />
        <circle cx="32" cy="32" r="10" />
        <circle cx="32" cy="32" r="14" />
        <path d="M50 14 V40" /><path d="M46 14 C46 22 46 22 50 24" />
      </svg>
    ),
    lang: () => (
      <svg viewBox="0 0 64 64" width="60" height="60" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="32" cy="32" r="20" />
        <path d="M27 22 v20 M22 26 h12 M22 36 h8" />
      </svg>
    ),
    chef: () => (
      <svg viewBox="0 0 64 64" width="60" height="60" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M20 30 a8 8 0 1 1 4 -15 a7 7 0 0 1 16 0 a8 8 0 1 1 4 15 v8 H20 Z" />
        <path d="M20 42 H44 V50 H20 Z" />
        <path d="M26 46 v2 M32 46 v2 M38 46 v2" />
      </svg>
    ),
    book: () => (
      <svg viewBox="0 0 64 64" width="60" height="60" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M14 14 H46 a4 4 0 0 1 4 4 V50 H18 a4 4 0 0 1 -4 -4 Z" />
        <path d="M22 22 h20 M22 30 h20 M22 38 h14" />
      </svg>
    ),
    book2: () => (
      <svg viewBox="0 0 64 64" width="60" height="60" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 16 C18 14 26 14 32 18 C38 14 46 14 52 16 V48 C46 46 38 46 32 50 C26 46 18 46 12 48 Z" />
        <path d="M32 18 V50" />
      </svg>
    ),
    data: () => (
      <svg viewBox="0 0 64 64" width="60" height="60" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M12 50 H52" />
        <rect x="16" y="34" width="6" height="14" />
        <rect x="28" y="24" width="6" height="24" />
        <rect x="40" y="14" width="6" height="34" />
      </svg>
    ),
    seal: () => (
      <svg viewBox="0 0 64 64" width="60" height="60" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="32" cy="28" r="14" />
        <path d="M32 14 L34 22 L42 23 L36 28 L38 36 L32 32 L26 36 L28 28 L22 23 L30 22 Z" />
        <path d="M24 40 L20 56 L28 50 L32 56 L36 50 L44 56 L40 40" />
      </svg>
    ),
    raiz: () => (
      <svg viewBox="0 0 64 64" width="60" height="60" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M32 8 V28" />
        <path d="M32 14 C26 14 22 10 22 10" />
        <path d="M32 14 C38 14 42 10 42 10" />
        <path d="M32 28 C20 28 14 38 14 50 C14 54 18 56 22 54 C26 52 28 48 32 48 C36 48 38 52 42 54 C46 56 50 54 50 50 C50 38 44 28 32 28 Z" />
        <path d="M22 40 V50 M32 38 V52 M42 40 V50" />
      </svg>
    ),
    campo: () => (
      <svg viewBox="0 0 64 64" width="60" height="60" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M8 46 C16 38 22 38 32 42 C42 46 48 46 56 38" />
        <path d="M8 54 H56" />
        <path d="M20 38 V20 M20 20 C20 14 24 12 28 16 M20 20 C20 14 16 12 12 16" />
        <path d="M44 38 V14" />
        <path d="M44 14 L40 18 M44 14 L48 18 M44 22 L40 26 M44 22 L48 26" />
      </svg>
    ),
    spice: () => (
      <svg viewBox="0 0 64 64" width="60" height="60" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M22 14 H42 L40 24 H24 Z" />
        <path d="M20 24 H44 V52 a4 4 0 0 1 -4 4 H24 a4 4 0 0 1 -4 -4 Z" />
        <path d="M28 24 V20 M36 24 V20" />
        <circle cx="28" cy="36" r="1.5" fill="currentColor" />
        <circle cx="36" cy="40" r="1.5" fill="currentColor" />
        <circle cx="32" cy="46" r="1.5" fill="currentColor" />
      </svg>
    ),
    lang_es: () => (
      <svg viewBox="0 0 64 64" width="60" height="60">
        <circle cx="32" cy="32" r="22" fill="#fff" stroke="currentColor" strokeWidth="2"/>
        <path d="M10 24 H54 V40 H10 Z" fill="#C60B1E"/>
        <path d="M10 28 H54 V36 H10 Z" fill="#FFC400"/>
      </svg>
    ),
    lang_en: () => (
      <svg viewBox="0 0 64 64" width="60" height="60">
        <circle cx="32" cy="32" r="22" fill="#012169" stroke="currentColor" strokeWidth="2"/>
        <path d="M14 14 L50 50 M50 14 L14 50" stroke="#fff" strokeWidth="6"/>
        <path d="M32 10 V54 M10 32 H54" stroke="#fff" strokeWidth="8"/>
        <path d="M32 10 V54 M10 32 H54" stroke="#C8102E" strokeWidth="4"/>
      </svg>
    ),
    lang_fr: () => (
      <svg viewBox="0 0 64 64" width="60" height="60">
        <circle cx="32" cy="32" r="22" fill="#fff" stroke="currentColor" strokeWidth="2"/>
        <path d="M10 14 H24 V50 H10 Z" fill="#0055A4"/>
        <path d="M40 14 H54 V50 H40 Z" fill="#EF4135"/>
      </svg>
    ),
    lang_de: () => (
      <svg viewBox="0 0 64 64" width="60" height="60">
        <circle cx="32" cy="32" r="22" fill="#000" stroke="currentColor" strokeWidth="2"/>
        <path d="M10 26 H54 V38 H10 Z" fill="#DD0000"/>
        <path d="M10 38 H54 V50 H10 Z" fill="#FFCE00"/>
      </svg>
    ),
  };

  return (
    <section className="cgclm-quick">
      <style>{`
        .cgclm-quick { padding: 80px 40px; background: var(--c-cream); }
        .cgclm-quick .cq-head { margin-bottom: 32px; }
        .cgclm-quick .cq-kicker {
          font: 500 11px var(--font-body);
          letter-spacing: 0.18em; text-transform: uppercase;
          color: var(--c-green-deep);
        }
        .cgclm-quick .cq-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(28px, 3.4vw, 44px);
          letter-spacing: -0.02em;
          margin: 8px 0 0;
        }
        .cgclm-quick .cq-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 16px;
        }
        .cgclm-quick .cq-tile {
          display: flex; align-items: center; gap: 26px;
          padding: 24px 28px;
          background: var(--c-green-deep);
          color: var(--c-cream);
          border-radius: 8px;
          text-decoration: none;
          transition: all .3s cubic-bezier(.6,.2,.2,1);
          position: relative;
          overflow: hidden;
        }
        .cgclm-quick .cq-tile:nth-child(4n+2) { background: #1F8B7E; }
        .cgclm-quick .cq-tile:nth-child(4n+3) { background: var(--c-red); }
        .cgclm-quick .cq-tile:nth-child(4n+4) { background: var(--c-aubergine); }
        .cgclm-quick .cq-tile:nth-child(4n+1) { background: var(--c-green-deep); }
        .cgclm-quick .cq-tile:hover {
          transform: translate(2px, -2px);
          box-shadow: -6px 6px 0 var(--c-ink);
        }
        .cgclm-quick .cq-icon {
          flex: 0 0 auto;
          color: var(--c-cream);
          opacity: 0.95;
        }
        .cgclm-quick .cq-text { flex: 1; min-width: 0; }
        .cgclm-quick .cq-tile-title {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: clamp(22px, 2.2vw, 30px);
          line-height: 1.05;
          letter-spacing: -0.015em;
          margin: 0;
          color: var(--c-cream);
          display: flex; align-items: center; gap: 12px;
        }
        .cgclm-quick .cq-sub {
          font: 400 13px var(--font-body);
          color: rgba(242,239,228,0.78);
          margin-top: 6px;
        }
        .cgclm-quick .cq-arrow {
          opacity: 0.8;
          transition: transform .3s;
          flex: 0 0 auto;
          color: var(--c-cream);
        }
        .cgclm-quick .cq-tile:hover .cq-arrow { transform: translateX(6px); opacity: 1; }
        @media (max-width: 800px) {
          .cgclm-quick { padding: 56px 22px; }
          .cgclm-quick .cq-grid { grid-template-columns: 1fr; }
        }
      `}</style>

      <div className="cq-head">
        <div className="cq-kicker">{t.quick.kicker}</div>
        <h2 className="cq-title">{t.quick.title}</h2>
      </div>
      <div className="cq-grid">
        {t.quick.items.map((it, i) => {
          const Ico = Icons[it.icon] || Icons.plate;
          return (
            <a
              key={i}
              href={it.href || "#"}
              target={it.external ? "_blank" : undefined}
              rel={it.external ? "noreferrer noopener" : undefined}
              className="cq-tile"
            >
              <div className="cq-icon"><Ico /></div>
              <div className="cq-text">
                <h3 className="cq-tile-title">{it.t}</h3>
                <div className="cq-sub">{it.sub}</div>
              </div>
              <span className="cq-arrow">
                <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                  <path d="M9 6 L15 12 L9 18" />
                </svg>
              </span>
            </a>
          );
        })}
      </div>
    </section>
  );
}

window.CQuick = CQuick;
