/* Ez Studio – Easy Driver page components (premium dark) */
/* eslint-disable */

const { useState: useState_ED, useEffect: useEffect_ED, useRef: useRef_ED } = React;

const EDPC = {
  bg: '#0a0a0b',
  bg2: '#0d0d10',
  bg3: '#111114',
  fg: '#f6f4ef',
  fg2: 'rgba(246,244,239,0.62)',
  fg3: 'rgba(246,244,239,0.4)',
  fg4: 'rgba(246,244,239,0.22)',
  border: 'rgba(255,255,255,0.07)',
  borderHi: 'rgba(255,255,255,0.14)',
  purple: '#a78bfa',
  purpleSoft: 'rgba(167,139,250,0.14)',
  purpleDim: 'rgba(167,139,250,0.32)',
  green: '#22d36b',
};

/* ── fade-in on scroll ────────────────────────────────── */
function useReveal() {
  const ref = useRef_ED(null);
  const [visible, setVisible] = useState_ED(false);
  useEffect_ED(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {
        setVisible(true);
        io.disconnect();
      }
    }, { threshold: 0.12, rootMargin: '0px 0px -10% 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return [ref, visible];
}

function Reveal({ children, delay = 0, y = 24, as: As = 'div', style }) {
  const [ref, visible] = useReveal();
  return (
    <As
      ref={ref}
      style={{
        opacity: visible ? 1 : 0,
        transform: visible ? 'translateY(0)' : `translateY(${y}px)`,
        transition: `opacity 0.9s cubic-bezier(0.16,1,0.3,1) ${delay}ms, transform 0.9s cubic-bezier(0.16,1,0.3,1) ${delay}ms`,
        ...style,
      }}
    >{children}</As>
  );
}

/* ── tokens / primitives ─────────────────────────────── */

function EDPEyebrow({ children, style }) {
  return (
    <div style={{
      fontFamily: 'JetBrains Mono, monospace',
      fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
      color: EDPC.purple,
      ...style,
    }}>{children}</div>
  );
}

function EDPSection({ children, id, padTop = 140, padBottom = 140, style }) {
  return (
    <section id={id} style={{
      padding: `${padTop}px 0 ${padBottom}px`,
      position: 'relative',
      ...style,
    }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto', padding: '0 32px',
        position: 'relative',
      }}>
        {children}
      </div>
    </section>
  );
}

function EDPButton({ children, variant = 'primary', href = '#', icon, style }) {
  const isPrimary = variant === 'primary';
  return (
    <a
      href={href}
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        height: 46, padding: '0 22px',
        borderRadius: 999,
        fontFamily: 'Inter, sans-serif',
        fontSize: 14, fontWeight: 500, letterSpacing: '-0.005em',
        textDecoration: 'none',
        background: isPrimary ? EDPC.fg : 'transparent',
        color: isPrimary ? EDPC.bg : EDPC.fg,
        border: isPrimary ? '1px solid transparent' : `1px solid ${EDPC.borderHi}`,
        transition: 'transform 0.2s, background 0.2s, border-color 0.2s',
        cursor: 'pointer',
        ...style,
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.transform = 'translateY(-1px)';
        if (!isPrimary) e.currentTarget.style.borderColor = EDPC.purple;
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.transform = 'translateY(0)';
        if (!isPrimary) e.currentTarget.style.borderColor = EDPC.borderHi;
      }}
    >
      {children}
      {icon && <span aria-hidden style={{ fontSize: 13, opacity: 0.7 }}>{icon}</span>}
    </a>
  );
}

/* ── phone mockup ────────────────────────────────────── */

function PhoneFrame({ children, width = 280, height = 580, rotate = 0, glow = false, chromeless = false, style }) {
  return (
    <div style={{
      position: 'relative',
      width, height,
      transform: `rotate(${rotate}deg)`,
      transformStyle: 'preserve-3d',
      ...style,
    }}>
      {glow && (
        <div aria-hidden style={{
          position: 'absolute', inset: '-40px -60px',
          background: `radial-gradient(60% 50% at 50% 40%, rgba(167,139,250,0.22) 0%, rgba(167,139,250,0) 60%)`,
          filter: 'blur(20px)', pointerEvents: 'none', zIndex: 0,
        }}/>
      )}
      <div style={{
        position: 'relative', zIndex: 1,
        width: '100%', height: '100%',
        borderRadius: 44,
        background: 'linear-gradient(180deg, #2a2a2e 0%, #0a0a0b 50%, #1a1a1d 100%)',
        padding: 6,
        boxShadow: '0 60px 120px -40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05), inset 0 0 0 1px rgba(255,255,255,0.04)',
      }}>
        <div style={{
          width: '100%', height: '100%',
          borderRadius: 38,
          background: EDPC.bg,
          overflow: 'hidden',
          position: 'relative',
          border: '1px solid rgba(0,0,0,0.6)',
        }}>
          {/* notch */}
          {!chromeless && <div style={{
            position: 'absolute', top: 8, left: '50%', transform: 'translateX(-50%)',
            width: 92, height: 24, borderRadius: 999, background: '#000', zIndex: 5,
          }}/>}
          {/* status bar */}
          {!chromeless && <div style={{
            position: 'absolute', top: 12, left: 0, right: 0, height: 24,
            display: 'flex', justifyContent: 'space-between',
            padding: '0 28px',
            fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 600,
            color: EDPC.fg, zIndex: 4,
          }}>
            <span>9:41</span>
            <span style={{ display: 'flex', gap: 4, alignItems: 'center' }}>
              <span style={{ display: 'flex', gap: 2, alignItems: 'flex-end' }}>
                <span style={{ width: 3, height: 5, background: EDPC.fg, borderRadius: 1 }}/>
                <span style={{ width: 3, height: 7, background: EDPC.fg, borderRadius: 1 }}/>
                <span style={{ width: 3, height: 9, background: EDPC.fg, borderRadius: 1 }}/>
                <span style={{ width: 3, height: 11, background: EDPC.fg, borderRadius: 1 }}/>
              </span>
              <span style={{
                width: 22, height: 11, border: `1px solid ${EDPC.fg}`, borderRadius: 3,
                position: 'relative', padding: 1,
              }}>
                <span style={{ display: 'block', width: '80%', height: '100%', background: EDPC.fg, borderRadius: 1 }}/>
              </span>
            </span>
          </div>}
          {children}
        </div>
      </div>
    </div>
  );
}

/* Passenger screen — map + ride card */
function PassengerScreen() {
  return (
    <div style={{ position: 'absolute', inset: 0, paddingTop: 44 }}>
      {/* Map area */}
      <div style={{
        position: 'absolute', inset: '44px 0 220px',
        background: `
          radial-gradient(60% 50% at 70% 30%, rgba(167,139,250,0.18), transparent 60%),
          radial-gradient(60% 50% at 30% 70%, rgba(167,139,250,0.10), transparent 60%),
          linear-gradient(180deg, #14141a 0%, #0d0d11 100%)
        `,
      }}>
        {/* map grid */}
        <div style={{
          position: 'absolute', inset: 0,
          backgroundImage: `
            linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px)
          `,
          backgroundSize: '36px 36px',
        }}/>
        {/* route line */}
        <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
          <path d="M 40 220 Q 80 160 130 140 T 220 60" stroke={EDPC.purple} strokeWidth="2.5" fill="none" strokeDasharray="0" strokeLinecap="round"/>
          <circle cx="40" cy="220" r="6" fill={EDPC.fg}/>
          <circle cx="40" cy="220" r="3" fill={EDPC.bg}/>
          <circle cx="220" cy="60" r="6" fill={EDPC.purple}/>
        </svg>
      </div>
      {/* Bottom card */}
      <div style={{
        position: 'absolute', left: 12, right: 12, bottom: 14,
        background: 'rgba(20,20,24,0.92)',
        backdropFilter: 'blur(20px)',
        border: `1px solid ${EDPC.border}`,
        borderRadius: 22,
        padding: '16px 16px 18px',
        color: EDPC.fg,
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
          <span style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
            letterSpacing: '0.18em', textTransform: 'uppercase', color: EDPC.purple,
          }}>Em rota · 4 min</span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            fontSize: 9, fontFamily: 'JetBrains Mono, monospace',
            color: EDPC.fg3, letterSpacing: '0.14em', textTransform: 'uppercase',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: EDPC.green, boxShadow: `0 0 8px ${EDPC.green}` }}/>
            Live
          </span>
        </div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 40, height: 40, borderRadius: 999,
            background: 'linear-gradient(135deg, #4a4258, #1f1d29)',
            flexShrink: 0,
          }}/>
          <div style={{ flex: 1 }}>
            <div style={{ fontSize: 13, fontWeight: 500 }}>Carlos M.</div>
            <div style={{ fontSize: 10, color: EDPC.fg3, marginTop: 2 }}>★ 4.92 · BMW iX5 · BLU·7K23</div>
          </div>
          <div style={{
            width: 36, height: 36, borderRadius: 12,
            background: EDPC.fg, color: EDPC.bg,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 16,
          }}>↗</div>
        </div>
        <div style={{
          marginTop: 14, height: 4, borderRadius: 999,
          background: 'rgba(255,255,255,0.08)',
          overflow: 'hidden',
        }}>
          <div style={{ width: '64%', height: '100%', background: EDPC.purple, borderRadius: 999 }}/>
        </div>
      </div>
    </div>
  );
}

/* Partner screen — incoming ride request */
function PartnerScreen() {
  return (
    <div style={{ position: 'absolute', inset: 0, paddingTop: 44, color: EDPC.fg, fontFamily: 'Inter, sans-serif' }}>
      <div style={{ padding: '16px 18px 0' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18 }}>
          <span style={{
            fontFamily: 'JetBrains Mono, monospace', fontSize: 9,
            letterSpacing: '0.18em', textTransform: 'uppercase', color: EDPC.fg3,
          }}>Online · em busca</span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', gap: 5,
            fontSize: 9, fontFamily: 'JetBrains Mono, monospace',
            color: EDPC.green, letterSpacing: '0.14em', textTransform: 'uppercase',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: EDPC.green, boxShadow: `0 0 8px ${EDPC.green}` }}/>
            ATIVO
          </span>
        </div>

        {/* Big request card */}
        <div style={{
          background: 'linear-gradient(180deg, rgba(167,139,250,0.08), rgba(167,139,250,0.02))',
          border: `1px solid ${EDPC.purpleDim}`,
          borderRadius: 20, padding: 18,
          position: 'relative', overflow: 'hidden',
        }}>
          <div style={{
            position: 'absolute', top: -40, right: -40, width: 120, height: 120,
            borderRadius: 999, background: 'rgba(167,139,250,0.18)', filter: 'blur(40px)',
          }}/>
          <div style={{ fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: EDPC.purple, fontFamily: 'JetBrains Mono, monospace' }}>Nova corrida</div>
          <div style={{ fontSize: 26, fontWeight: 500, marginTop: 6, letterSpacing: '-0.02em' }}>R$ 28,40</div>
          <div style={{ fontSize: 10, color: EDPC.fg3, marginTop: 2, fontFamily: 'JetBrains Mono, monospace' }}>14 min · 6.2 km</div>

          <div style={{ marginTop: 16, display: 'flex', flexDirection: 'column', gap: 10 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: EDPC.fg, flexShrink: 0 }}/>
              <span style={{ fontSize: 11, color: EDPC.fg2 }}>R. das Laranjeiras, 482</span>
            </div>
            <div style={{ width: 1, height: 12, background: EDPC.border, marginLeft: 4 }}/>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: EDPC.purple, flexShrink: 0, boxShadow: `0 0 8px ${EDPC.purple}` }}/>
              <span style={{ fontSize: 11, color: EDPC.fg2 }}>Aeroporto Santos Dumont</span>
            </div>
          </div>
        </div>

        {/* CTAs */}
        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
          <div style={{
            flex: 1, height: 44, borderRadius: 14,
            border: `1px solid ${EDPC.border}`,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 12, color: EDPC.fg2,
          }}>Recusar</div>
          <div style={{
            flex: 2, height: 44, borderRadius: 14,
            background: EDPC.fg, color: EDPC.bg,
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 12, fontWeight: 600,
          }}>Aceitar corrida</div>
        </div>

        {/* Stats row */}
        <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 8 }}>
          {[['R$', '180', 'hoje'], ['', '8', 'corridas'], ['★', '4.9', 'rating']].map(([p, v, l], i) => (
            <div key={i} style={{
              background: 'rgba(255,255,255,0.02)',
              border: `1px solid ${EDPC.border}`,
              borderRadius: 12, padding: '10px 8px', textAlign: 'center',
            }}>
              <div style={{ fontSize: 14, fontWeight: 500 }}><span style={{ fontSize: 9, color: EDPC.fg3, marginRight: 2 }}>{p}</span>{v}</div>
              <div style={{ fontSize: 8, color: EDPC.fg3, letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 2, fontFamily: 'JetBrains Mono, monospace' }}>{l}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { EDPC, useReveal, Reveal, EDPEyebrow, EDPSection, EDPButton, PhoneFrame, PassengerScreen, PartnerScreen });