/* global React, Icon, FEATURES, EXTRAS, VEHICLES, VEHICLE_ICON, EXTRA_ICON, useReveal */
const { useState } = React;

function Features() {
  const [ref, visible] = useReveal();
  return (
    <section className="section" id="producto">
      <div className="container">
        <div ref={ref} className={'feat-head reveal' + (visible ? ' is-visible' : '')}>
          <span className="eyebrow">Funcionalidades del servicio</span>
          <h2 className="display feat-title">
            Todo lo que necesitas saber<br/>
            <em className="feat-em">en una sola app.</em>
          </h2>
        </div>

        <div className="feat-grid">
          {FEATURES.map((f, i) => (
            <div key={i} className="feat-card" style={{ '--d': `${i * 60}ms` }}>
              <div className="feat-icon"><Icon name={f.icon} size={22} /></div>
              <div className="feat-num mono">{String(i + 1).padStart(2, '0')}</div>
              <h3 className="feat-name">{f.title}</h3>
              <p className="feat-desc">{f.desc}</p>
            </div>
          ))}
        </div>

        {/* Extras / Accessories */}
        <div className="feat-divider" />
        <div className="extras-head">
          <span className="eyebrow">Extras y accesorios</span>
          <h3 className="display extras-title">Equípalo a tu medida.</h3>
        </div>
        <div className="extras-grid">
          {EXTRAS.map((e, i) => (
            <div key={i} className="extra-card">
              <div className="extra-icon"><Icon name={EXTRA_ICON[e.title] || 'pin'} size={20} /></div>
              <div className="extra-tag mono">{e.tag}</div>
              <div className="extra-name">{e.title}</div>
              <div className="extra-desc">{e.desc}</div>
            </div>
          ))}
        </div>

        {/* Vehicles */}
        <div className="feat-divider" />
        <div className="veh-head">
          <span className="eyebrow">Para todo tipo de vehículo</span>
          <h3 className="display veh-title">Si rueda, lo rastreamos.</h3>
        </div>
        <div className="veh-row">
          {VEHICLES.map((v, i) => (
            <div key={i} className="veh-card">
              <div className="veh-icon"><Icon name={VEHICLE_ICON[v.name]} size={42} stroke={1.4} /></div>
              <div className="veh-name display">{v.name}</div>
              <div className="veh-hint mono">{v.hint}</div>
            </div>
          ))}
        </div>
      </div>

      <style>{`
        .feat-head { margin-bottom: 48px; max-width: 900px; }
        .feat-title {
          font-size: clamp(40px, 5vw, 72px);
          margin: 14px 0 0;
          font-weight: 500;
          line-height: 1;
        }
        .feat-em { font-style: italic; color: var(--petrol); font-weight: 400; }
        .feat-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 1px;
          background: var(--line);
          border: 1px solid var(--line);
          border-radius: var(--radius-lg);
          overflow: hidden;
        }
        @media (max-width: 1100px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px)  { .feat-grid { grid-template-columns: 1fr; } }
        .feat-card {
          position: relative;
          background: var(--bg-3);
          padding: 28px 24px 28px;
          min-height: 220px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          transition: background .25s ease, transform .25s ease;
        }
        .feat-card:hover {
          background: color-mix(in oklab, var(--peach) 18%, var(--bg-3));
        }
        [data-theme='dark'] .feat-card:hover {
          background: color-mix(in oklab, var(--petrol) 16%, var(--bg-3));
        }
        .feat-icon {
          width: 44px; height: 44px;
          border-radius: 12px;
          background: color-mix(in oklab, var(--petrol) 12%, transparent);
          color: var(--petrol);
          display: grid; place-items: center;
          transition: transform .25s ease;
        }
        .feat-card:hover .feat-icon { transform: scale(1.08) rotate(-3deg); }
        .feat-num {
          position: absolute;
          top: 22px; right: 22px;
          color: var(--ink-mute);
          font-size: 11px;
        }
        .feat-name {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 18px;
          letter-spacing: -0.015em;
          margin: 6px 0 0;
        }
        .feat-desc {
          color: var(--ink-2);
          font-size: 14px;
          margin: 0;
          line-height: 1.5;
        }

        .feat-divider {
          height: 1px; background: var(--line);
          margin: 80px 0 56px;
        }

        .extras-head, .veh-head { margin-bottom: 32px; max-width: 900px; }
        .extras-title, .veh-title {
          font-size: clamp(28px, 3vw, 44px);
          margin: 10px 0 0;
          font-weight: 500;
          font-style: italic;
        }

        .extras-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 16px;
        }
        @media (max-width: 900px) { .extras-grid { grid-template-columns: repeat(2, 1fr); } }
        @media (max-width: 600px) { .extras-grid { grid-template-columns: 1fr; } }
        .extra-card {
          padding: 22px;
          background: var(--bg-3);
          border: 1px solid var(--line);
          border-radius: var(--radius-md);
          display: flex;
          flex-direction: column;
          gap: 8px;
          transition: transform .25s ease, border-color .25s ease;
        }
        .extra-card:hover {
          transform: translateY(-3px);
          border-color: var(--petrol);
        }
        .extra-icon {
          width: 38px; height: 38px;
          border-radius: 10px;
          background: var(--bg-2);
          color: var(--petrol);
          display: grid; place-items: center;
          margin-bottom: 4px;
        }
        .extra-tag {
          color: var(--peach-deep);
          font-size: 10px;
        }
        .extra-name {
          font-family: var(--font-display);
          font-weight: 600;
          font-size: 17px;
          letter-spacing: -0.01em;
        }
        .extra-desc { color: var(--ink-2); font-size: 13px; line-height: 1.5; }

        .veh-row {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: 12px;
        }
        @media (max-width: 900px) { .veh-row { grid-template-columns: repeat(2, 1fr); } }
        .veh-card {
          padding: 28px 18px;
          background: var(--bg-3);
          border: 1px solid var(--line);
          border-radius: var(--radius-md);
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          text-align: center;
          transition: background .3s ease, color .3s ease, transform .3s ease;
        }
        .veh-card:hover {
          background: var(--petrol);
          color: var(--bg);
          transform: translateY(-4px);
        }
        [data-theme='dark'] .veh-card:hover { color: #07171a; }
        .veh-card .veh-icon { color: var(--petrol); transition: color .3s ease; }
        .veh-card:hover .veh-icon { color: inherit; }
        .veh-name { font-size: 18px; font-weight: 600; }
        .veh-hint { font-size: 10px; color: var(--ink-mute); transition: color .3s ease; }
        .veh-card:hover .veh-hint { color: inherit; opacity: 0.8; }
      `}</style>
    </section>
  );
}

window.Features = Features;
