// vull-app.jsx — mock del teléfono (pantalla de mapa de Vull) + panel de Tweaks
const { useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#E8163E",
  "phonePose": "Inclinado",
  "glow": true
}/*EDITMODE-END*/;

// ── Pantalla de mapa (recreación de la captura) ──────────────
function VullMapScreen({ accent }) {
  const street = '#28282C';
  const avenue = '#37373C';
  const label = { fill: '#7A777B', fontSize: 13, fontFamily: 'Instrument Sans, sans-serif', letterSpacing: 0.5 };
  return (
    <div style={{ position: 'relative', height: '100%', background: '#141416', overflow: 'hidden', fontFamily: 'Instrument Sans, sans-serif' }}>
      {/* mapa */}
      <svg viewBox="0 0 396 600" style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '74%' }} preserveAspectRatio="xMidYMid slice">
        {/* calles secundarias */}
        <g stroke={street} strokeWidth="3" fill="none">
          <path d="M -20 80 L 420 40" />
          <path d="M -20 150 L 420 110" />
          <path d="M -20 290 L 420 250" />
          <path d="M -20 360 L 420 330" />
          <path d="M -20 440 L 420 410" />
          <path d="M -20 520 L 420 495" />
          <path d="M 60 -20 L 95 620" />
          <path d="M 150 -20 L 175 620" />
          <path d="M 320 -20 L 345 620" />
        </g>
        {/* avenidas */}
        <g stroke={avenue} strokeWidth="7" fill="none">
          <path d="M 238 -20 C 230 180, 246 400, 232 620" />
          <path d="M 320 220 C 330 340, 310 480, 318 620" />
          <path d="M -20 215 L 420 175" />
        </g>
        {/* nombres de calles */}
        <text x="246" y="120" style={label} transform="rotate(87 246 120)">Avenida 2</text>
        <text x="40" y="262" style={label}>Calle 17</text>
        <text x="262" y="392" style={label}>Calle 6</text>
        <text x="300" y="60" style={{ ...label, fontSize: 12, letterSpacing: 2 }}>BARRIO</text>
        {/* ruta */}
        <path d="M 198 330 L 236 326 C 240 380, 232 430, 236 470 L 330 458" stroke={accent} strokeWidth="5" fill="none" strokeLinecap="round" strokeLinejoin="round" strokeDasharray="1 9" />
        {/* destino */}
        <circle cx="330" cy="458" r="9" fill={accent} />
        <circle cx="330" cy="458" r="3.5" fill="#141416" />
        {/* ubicación actual */}
        <circle cx="198" cy="330" r="16" fill="rgba(66,133,244,0.18)" />
        <circle cx="198" cy="330" r="7" fill="#4285F4" stroke="#fff" strokeWidth="2.5" />
      </svg>

      {/* botón de menú */}
      <div style={{ position: 'absolute', top: 14, left: 16, width: 46, height: 46, borderRadius: '50%', background: '#202023', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 14px rgba(0,0,0,0.4)' }}>
        <svg width="20" height="20" viewBox="0 0 20 20">
          <g stroke="#E9E6E4" strokeWidth="2" strokeLinecap="round">
            <line x1="3" y1="5" x2="17" y2="5" />
            <line x1="3" y1="10" x2="17" y2="10" />
            <line x1="3" y1="15" x2="17" y2="15" />
          </g>
        </svg>
      </div>

      {/* botones flotantes derecha */}
      <div style={{ position: 'absolute', right: 16, bottom: '28%', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div style={{ width: 46, height: 46, borderRadius: '50%', background: '#202023', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 14px rgba(0,0,0,0.4)' }}>
          <svg width="20" height="20" viewBox="0 0 20 20">
            <g stroke="#E9E6E4" strokeWidth="1.8" fill="none" strokeLinecap="round">
              <circle cx="10" cy="10" r="5" />
              <line x1="10" y1="1.5" x2="10" y2="4" />
              <line x1="10" y1="16" x2="10" y2="18.5" />
              <line x1="1.5" y1="10" x2="4" y2="10" />
              <line x1="16" y1="10" x2="18.5" y2="10" />
            </g>
            <circle cx="10" cy="10" r="1.8" fill="#E9E6E4" />
          </svg>
        </div>
        <div style={{ width: 46, height: 46, borderRadius: '50%', background: '#202023', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 4px 14px rgba(0,0,0,0.4)' }}>
          <svg width="20" height="22" viewBox="0 0 20 22">
            <path d="M10 1 L18.5 4.5 V10 C18.5 15.5 15 19.5 10 21 C5 19.5 1.5 15.5 1.5 10 V4.5 Z" fill={accent} />
            <path d="M10 1 L10 21 C5 19.5 1.5 15.5 1.5 10 V4.5 Z" fill="rgba(0,0,0,0.35)" />
          </svg>
        </div>
      </div>

      {/* hoja inferior */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: '26%', background: '#1A1A1D', borderRadius: '24px 24px 0 0', padding: '24px 22px 0', boxShadow: '0 -10px 30px rgba(0,0,0,0.45)' }}>
        <div style={{ fontSize: 24, fontWeight: 700, color: '#F2EFED', letterSpacing: -0.4, fontFamily: 'Schibsted Grotesk, sans-serif' }}>
          ¿Para dónde vamos hoy?
        </div>
        <div style={{ marginTop: 18, display: 'flex', alignItems: 'center', gap: 12, background: '#232326', border: '1px solid rgba(255,255,255,0.07)', borderRadius: 14, padding: '14px 16px' }}>
          <svg width="18" height="18" viewBox="0 0 18 18">
            <g stroke={accent} strokeWidth="2" fill="none" strokeLinecap="round">
              <circle cx="7.5" cy="7.5" r="5.5" />
              <line x1="12" y1="12" x2="16.5" y2="16.5" />
            </g>
          </svg>
          <span style={{ color: '#6E6A6D', fontSize: 16 }}>Ingresa tu destino</span>
        </div>
      </div>
    </div>
  );
}

// ── Teléfono + Tweaks ────────────────────────────────────────
function VullPhoneApp() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  useEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.body.dataset.glow = t.glow ? 'on' : 'off';
  }, [t.accent, t.glow]);

  const tilted = t.phonePose === 'Inclinado';
  const scale = 0.66;

  return (
    <React.Fragment>
      <div style={{
        width: 412 * scale,
        height: 892 * scale,
        transform: tilted ? 'rotate(-4deg)' : 'none',
        transition: 'transform 0.4s ease',
        position: 'relative',
      }}>
        <div style={{ transform: `scale(${scale})`, transformOrigin: 'top left' }}>
          <AndroidDevice dark width={412} height={892}>
            <VullMapScreen accent={t.accent} />
          </AndroidDevice>
        </div>
      </div>

      <TweaksPanel>
        <TweakSection label="Marca" />
        <TweakColor label="Color de acento" value={t.accent}
          options={['#E8163E', '#FF3D24', '#C81946', '#E8164E']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Hero" />
        <TweakRadio label="Teléfono" value={t.phonePose}
          options={['Recto', 'Inclinado']}
          onChange={(v) => setTweak('phonePose', v)} />
        <TweakToggle label="Resplandor rojo" value={t.glow}
          onChange={(v) => setTweak('glow', v)} />
      </TweaksPanel>
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('phone-root')).render(<VullPhoneApp />);