// EYEQ — Services bento (Corporate wing + Event wing)

function ServiceIcon({ kind }) {
  // Minimalist gold line icons
  const stroke = 'currentColor';
  const sw = 1.2;
  const svgProps = { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke, strokeWidth: sw, strokeLinecap: 'round', strokeLinejoin: 'round' };
  switch (kind) {
    case 'camera': return (
      <svg {...svgProps}>
        <rect x="3" y="7" width="14" height="10" rx="1" />
        <path d="M17 10l4-2v8l-4-2z" />
        <circle cx="10" cy="12" r="2" />
      </svg>
    );
    case 'cube': return (
      <svg {...svgProps}>
        <path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z" />
        <path d="M12 12l8-4.5M12 12v9M12 12L4 7.5" />
      </svg>
    );
    case 'reel': return (
      <svg {...svgProps}>
        <circle cx="12" cy="12" r="8" />
        <circle cx="12" cy="12" r="1.5" />
        <circle cx="12" cy="5" r="1.5" />
        <circle cx="12" cy="19" r="1.5" />
        <circle cx="5" cy="12" r="1.5" />
        <circle cx="19" cy="12" r="1.5" />
      </svg>
    );
    case 'wave': return (
      <svg {...svgProps}>
        <path d="M3 12c2 0 2-4 4-4s2 8 4 8 2-12 4-12 2 8 4 8 2-4 2-4" />
      </svg>
    );
    case 'heart': return (
      <svg {...svgProps}>
        <path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z" />
      </svg>
    );
    case 'spark': return (
      <svg {...svgProps}>
        <path d="M12 3v6M12 15v6M3 12h6M15 12h6M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3" />
      </svg>
    );
    case 'frame': return (
      <svg {...svgProps}>
        <rect x="4" y="4" width="16" height="16" />
        <path d="M4 8h16M4 16h16M8 4v16M16 4v16" />
      </svg>
    );
    case 'fan': return (
      <svg {...svgProps}>
        <circle cx="12" cy="12" r="1.5" />
        <path d="M12 3a4 4 0 0 1 4 4c0 2-2 4-4 5M12 21a4 4 0 0 1-4-4c0-2 2-4 4-5M3 12a4 4 0 0 1 4-4c2 0 4 2 5 4M21 12a4 4 0 0 1-4 4c-2 0-4-2-5-4" />
      </svg>
    );
    default: return null;
  }
}

function BentoCard({ s, wing }) {
  return (
    <div className={`bento-card ${wing} ${s.shape || ''}`}>
      <div className="bento-img" style={{ backgroundImage: `url(${s.img})` }} />
      <div className="bento-overlay" />
      <div className="bento-icon"><ServiceIcon kind={s.icon} /></div>
      <div className="bento-corner">{s.tag}</div>
      <div className="bento-meta">
        <div className="bento-name serif">
          {s.name.replace(s.italic, '')}
          <em>{s.italic}</em>
        </div>
        <div className="bento-desc">{s.desc}</div>
      </div>
    </div>
  );
}

function ServicesBento() {
  return (
    <section className="section" id="services">
      <div className="section-head">
        <div>
          <div className="section-idx">02 — SERVICES · TWO WINGS, ONE STUDIO</div>
          <h2 className="section-title">
            What we shoot, <em>edit</em>,<br />and deliver.
          </h2>
        </div>
        <div className="section-sub">
          Two craft wings under one roof. The <b style={{ color: 'var(--text)' }}>Corporate Wing</b> works in sharp,
          architectural light — boardroom films, product cinema, CGI integration. The <b style={{ color: 'var(--text)' }}>Event Wing </b>
          works in softer tones — weddings, celebrations, intimate portraiture. Same colorist. Same standard.
        </div>
      </div>

      <div className="bento">
        {/* Corporate wing */}
        <div className="bento-wing">
          <div className="bento-wing-head">
            <h3>The <em>Corporate</em> Wing</h3>
            <span className="bento-wing-tag">C01 — C04 · 4 SERVICES</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {window.CORPORATE_SERVICES.map((s, i) => (
              <BentoCard key={i} s={s} wing="corporate" />
            ))}
          </div>
        </div>

        {/* Event wing */}
        <div className="bento-wing">
          <div className="bento-wing-head">
            <h3>The <em>Event</em> Wing</h3>
            <span className="bento-wing-tag">E01 — E04 · 4 SERVICES</span>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
            {window.EVENT_SERVICES.map((s, i) => (
              <BentoCard key={i} s={s} wing="event" />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesBento });