// Demo 3 — Restaurante La Barraca · Canet d'En Berenguer
// Vibe: mediterranean, authentic, appetizing. Accent: terracotta #D97706.

const REST_BG = '#FBF6EE';
const REST_INK = '#2A1E12';
const REST_TERRA = '#D97706';
const REST_TERRA_DEEP = '#A85D04';
const REST_SAGE = '#7A8B5C';
const REST_PAPER = '#F4ECD8';
const REST_MUTED = '#7A6A55';

// Striped placeholder w/ caption
function FoodPlate({ size = 220, label = 'plato.jpg', accent = REST_TERRA, round = true, rotation = 0 }) {
  return (
    <div style={{
      width: size, height: size,
      borderRadius: round ? '50%' : 12,
      overflow: 'hidden', position: 'relative',
      background: REST_PAPER,
      border: `1px solid ${REST_PAPER}`,
      boxShadow: round ? `0 18px 40px -12px rgba(42,30,18,0.25)` : `0 8px 22px -8px rgba(42,30,18,0.18)`,
      transform: `rotate(${rotation}deg)`,
    }}>
      <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
        <defs>
          <pattern id={`fpst${size}${rotation}`} patternUnits="userSpaceOnUse" width="11" height="11" patternTransform={`rotate(${30 + rotation})`}>
            <rect width="11" height="11" fill={REST_PAPER}/>
            <line x1="0" y1="0" x2="0" y2="11" stroke={accent} strokeWidth="0.7" opacity="0.35"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill={`url(#fpst${size}${rotation})`}/>
      </svg>
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'ui-monospace, monospace',
        fontSize: 10, color: accent,
        letterSpacing: '0.06em',
      }}>[{label}]</div>
    </div>
  );
}

// ── Menu tabs (interactive) ─────────────────────────────────
function MenuTabs({ compact = false }) {
  const [tab, setTab] = React.useState('Arroces');
  const data = {
    'Entrantes': [
      { n: 'Esgarraet de bacalao', d: 'Pimiento asado, bacalao desmigado, ajo confitado', p: '9,50' },
      { n: 'Clóchinas al vapor', d: 'Mejillón valenciano, limón, laurel', p: '11,00' },
      { n: 'Tomata valenciana', d: 'Tomate del huerto, sal en escamas, aceite virgen', p: '7,50' },
      { n: 'Coca de tomate y atún', d: 'Masa fina, tomate maduro, atún en aceite', p: '8,00' },
    ],
    'Arroces': [
      { n: 'Paella valenciana', d: 'Pollo, conejo, garrofó, ferraura, judía verde', p: '22,00', star: true },
      { n: 'Arroz a banda', d: 'Caldo de pescado de roca, sepia, gamba', p: '24,00' },
      { n: 'Arroz negro', d: 'Tinta de calamar, calamares de la lonja, alioli suave', p: '23,00' },
      { n: 'Fideuá del Puerto', d: 'Fideo fino, gamba roja, mejillón, alioli', p: '21,00' },
      { n: 'Arroz del senyoret', d: 'Pescado y marisco pelado, caldo de roca', p: '26,00' },
    ],
    'Postres': [
      { n: 'Coca de llanda', d: 'Bizcocho tradicional, canela, cítricos', p: '5,50' },
      { n: 'Torrija caramelizada', d: 'Brioche casero, leche infusionada, helado de canela', p: '6,50' },
      { n: 'Naranjas de Sagunto', d: 'Cortadas en gajos, miel de azahar, almendra marcona', p: '5,00' },
    ],
  };
  const tabs = Object.keys(data);
  const items = data[tab];

  return (
    <div style={{
      background: REST_PAPER,
      border: `1px solid ${REST_TERRA}33`,
      borderRadius: 4,
      padding: compact ? '24px 22px' : '40px 44px',
      fontFamily: 'Plus Jakarta Sans, sans-serif',
      color: REST_INK,
      position: 'relative',
    }}>
      {/* Decorative top */}
      <div style={{
        textAlign: 'center', marginBottom: 14,
      }}>
        <div style={{
          fontSize: 10, color: REST_TERRA, letterSpacing: '0.32em',
          textTransform: 'uppercase', fontWeight: 700, marginBottom: 6,
        }}>· La carta ·</div>
        <div style={{
          fontFamily: 'Plus Jakarta Sans, serif',
          fontSize: compact ? 26 : 38, fontWeight: 800,
          letterSpacing: '-0.02em', lineHeight: 1,
          fontStyle: 'italic',
        }}>Cocina del huerto y la mar</div>
      </div>

      {/* Tabs */}
      <div style={{
        display: 'flex', justifyContent: 'center', gap: compact ? 4 : 8,
        marginBottom: 22, marginTop: 18,
        borderBottom: `1px solid ${REST_TERRA}22`,
        paddingBottom: 0,
      }}>
        {tabs.map(t => (
          <button key={t} onClick={() => setTab(t)} style={{
            background: 'transparent',
            border: 'none',
            padding: compact ? '8px 12px' : '10px 18px',
            fontFamily: 'inherit',
            fontSize: compact ? 12 : 14,
            fontWeight: 700,
            letterSpacing: '0.04em',
            color: tab === t ? REST_TERRA : REST_MUTED,
            borderBottom: tab === t ? `2px solid ${REST_TERRA}` : '2px solid transparent',
            marginBottom: -1,
            cursor: 'pointer',
            transition: 'all .2s',
          }}>{t}</button>
        ))}
      </div>

      {/* Items */}
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        {items.map((it, i) => (
          <div key={it.n} style={{
            display: 'flex', alignItems: 'baseline', gap: 14,
            padding: compact ? '12px 0' : '14px 0',
            borderBottom: i < items.length - 1 ? `1px dashed ${REST_TERRA}22` : 'none',
            animation: 'restFade .35s ease both',
          }}>
            <div style={{ flex: 1 }}>
              <div style={{
                display: 'flex', alignItems: 'baseline', gap: 8,
                fontSize: compact ? 14 : 16, fontWeight: 700, marginBottom: 3,
                letterSpacing: '-0.01em',
              }}>
                {it.n}
                {it.star && (
                  <span style={{
                    fontSize: 9, fontWeight: 700,
                    background: REST_TERRA, color: '#fff',
                    padding: '2px 7px', borderRadius: 999,
                    letterSpacing: '0.1em', textTransform: 'uppercase',
                  }}>El plato</span>
                )}
              </div>
              <div style={{
                fontSize: compact ? 11 : 13, color: REST_MUTED,
                fontStyle: 'italic',
              }}>{it.d}</div>
            </div>
            <div style={{
              fontFamily: 'Plus Jakarta Sans, serif',
              fontSize: compact ? 16 : 20, fontWeight: 800,
              color: REST_TERRA_DEEP,
              letterSpacing: '-0.02em',
              whiteSpace: 'nowrap',
            }}>{it.p}<span style={{ fontSize: '0.7em', marginLeft: 1 }}>€</span></div>
          </div>
        ))}
      </div>
    </div>
  );
}

// ── Reviews ─────────────────────────────────────────────────
function GoogleReviews({ compact = false }) {
  const reviews = [
    { name: 'Marta L.', text: 'La paella más auténtica que he probado fuera de Valencia. La sobremesa con vistas al mar fue un sueño.', stars: 5, when: 'hace 2 sem.' },
    { name: 'James K.', text: 'Stunning seafood rice and warm hospitality. Worth the drive from Valencia. Order the gamba roja!', stars: 5, when: 'hace 1 mes' },
    { name: 'Núria F.', text: 'Producto local, trato cercano y precios honestos. Volveremos seguro.', stars: 5, when: 'hace 3 días' },
  ];
  return (
    <div style={{ display: 'grid', gridTemplateColumns: compact ? '1fr' : 'repeat(3, 1fr)', gap: compact ? 12 : 16 }}>
      {reviews.map((r, i) => (
        <div key={i} style={{
          background: '#fff',
          border: `1px solid ${REST_TERRA}22`,
          borderRadius: 6,
          padding: compact ? 18 : 22,
          fontFamily: 'Plus Jakarta Sans, sans-serif',
          color: REST_INK,
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 12 }}>
            <span style={{
              width: 24, height: 24, borderRadius: '50%',
              background: REST_SAGE, color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 11, fontWeight: 700,
            }}>{r.name[0]}</span>
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: 12, fontWeight: 700, lineHeight: 1.1 }}>{r.name}</div>
              <div style={{ fontSize: 9, color: REST_MUTED, letterSpacing: '0.05em' }}>{r.when} · vía Google</div>
            </div>
            <span style={{ color: REST_TERRA, letterSpacing: 1, fontSize: 11 }}>★★★★★</span>
          </div>
          <div style={{ fontSize: 13, lineHeight: 1.55, color: REST_INK, fontStyle: 'italic' }}>"{r.text}"</div>
        </div>
      ))}
    </div>
  );
}

// ── Reservation widget ──────────────────────────────────────
function ReserveWidget({ compact = false }) {
  return (
    <div style={{
      background: REST_INK,
      color: REST_BG,
      borderRadius: 6,
      padding: compact ? 22 : 32,
      fontFamily: 'Plus Jakarta Sans, sans-serif',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* warm corner glow */}
      <div style={{
        position: 'absolute', top: -80, right: -80,
        width: 240, height: 240, borderRadius: '50%',
        background: `radial-gradient(circle, ${REST_TERRA}55, transparent 70%)`,
        pointerEvents: 'none',
      }}/>
      <div style={{
        fontSize: 10, color: REST_TERRA, letterSpacing: '0.28em',
        textTransform: 'uppercase', fontWeight: 700, marginBottom: 10,
      }}>— Reserva</div>
      <div style={{
        fontSize: compact ? 22 : 30, fontWeight: 800,
        fontStyle: 'italic',
        letterSpacing: '-0.02em', lineHeight: 1.05, marginBottom: 22,
      }}>Tu mesa con vistas, en 30 segundos.</div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: compact ? '1fr 1fr' : 'repeat(3, 1fr) auto',
        gap: 8, marginBottom: compact ? 10 : 0,
      }}>
        <div style={{ background: '#fff1', borderRadius: 4, padding: '10px 14px' }}>
          <div style={{ fontSize: 9, color: REST_TERRA, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 3 }}>Día</div>
          <div style={{ fontSize: 14, fontWeight: 700 }}>Sáb 02 may</div>
        </div>
        <div style={{ background: '#fff1', borderRadius: 4, padding: '10px 14px' }}>
          <div style={{ fontSize: 9, color: REST_TERRA, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 3 }}>Hora</div>
          <div style={{ fontSize: 14, fontWeight: 700 }}>14:30</div>
        </div>
        <div style={{ background: '#fff1', borderRadius: 4, padding: '10px 14px' }}>
          <div style={{ fontSize: 9, color: REST_TERRA, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 3 }}>Personas</div>
          <div style={{ fontSize: 14, fontWeight: 700 }}>4 adultos</div>
        </div>
        {!compact && (
          <button style={{
            background: REST_TERRA, color: '#fff',
            border: 'none', padding: '0 22px',
            fontFamily: 'inherit', fontSize: 12, fontWeight: 800,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            borderRadius: 4, cursor: 'pointer',
          }}>Confirmar →</button>
        )}
      </div>
      {compact && (
        <button style={{
          width: '100%',
          background: REST_TERRA, color: '#fff',
          border: 'none', padding: '12px 0',
          fontFamily: 'inherit', fontSize: 12, fontWeight: 800,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          borderRadius: 4, cursor: 'pointer',
        }}>Confirmar reserva →</button>
      )}
    </div>
  );
}

// ── Desktop ─────────────────────────────────────────────────
function RestaurantDesktop() {
  return (
    <div style={{
      width: 1440, minHeight: 900,
      background: REST_BG,
      color: REST_INK,
      fontFamily: 'Plus Jakarta Sans, sans-serif',
      position: 'relative',
      overflow: 'hidden',
    }}>
      {/* Nav */}
      <nav style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        padding: '24px 72px',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{
            width: 38, height: 38, borderRadius: '50%',
            background: REST_TERRA, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'Plus Jakarta Sans, serif',
            fontWeight: 800, fontSize: 18, fontStyle: 'italic',
          }}>B</div>
          <div>
            <div style={{ fontSize: 16, fontWeight: 800, fontStyle: 'italic', letterSpacing: '-0.01em', lineHeight: 1 }}>La Barraca</div>
            <div style={{ fontSize: 9, color: REST_MUTED, letterSpacing: '0.18em', textTransform: 'uppercase', marginTop: 2 }}>Canet d'En Berenguer · 1971</div>
          </div>
        </div>
        <div style={{ display: 'flex', gap: 32, fontSize: 13, fontWeight: 600 }}>
          {['Carta', 'Menú del día', 'Reservar', 'Historia', 'Contacto'].map(l => (
            <span key={l} style={{ cursor: 'pointer' }}>{l}</span>
          ))}
        </div>
        <button style={{
          background: REST_INK, color: REST_BG,
          fontFamily: 'inherit', fontSize: 12, fontWeight: 700,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          padding: '11px 20px', border: 'none', borderRadius: 4, cursor: 'pointer',
        }}>Reservar mesa</button>
      </nav>

      {/* Hero */}
      <section style={{
        padding: '40px 72px 80px',
        display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 60, alignItems: 'center',
      }}>
        <div>
          <div style={{
            fontSize: 11, color: REST_TERRA, letterSpacing: '0.3em', textTransform: 'uppercase',
            fontWeight: 700, marginBottom: 26,
            display: 'flex', alignItems: 'center', gap: 14,
          }}>
            <span style={{ display: 'inline-block', width: 28, height: 1, background: REST_TERRA }}></span>
            Tres generaciones · 55 años a pie de mar
          </div>
          <h1 style={{
            fontSize: 96, fontWeight: 800,
            letterSpacing: '-0.04em', lineHeight: 0.95, margin: '0 0 28px',
          }}>
            La <span style={{ fontStyle: 'italic', fontWeight: 400, color: REST_TERRA }}>paella</span><br/>
            de la abuela<br/>
            Carmen.
          </h1>
          <p style={{
            fontSize: 17, color: REST_MUTED, lineHeight: 1.6,
            maxWidth: 460, margin: '0 0 36px',
          }}>
            Arroz bomba, conejo de Llíria, garrofó del huerto y leña de naranjo. Como se ha cocinado siempre en La Barraca, desde 1971.
          </p>
          <div style={{ display: 'flex', gap: 14, alignItems: 'center', marginBottom: 40 }}>
            <button style={{
              background: REST_TERRA, color: '#fff',
              fontFamily: 'inherit', fontSize: 13, fontWeight: 700,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              padding: '15px 26px', border: 'none', borderRadius: 4, cursor: 'pointer',
            }}>Reservar mesa</button>
            <button style={{
              background: 'transparent', color: REST_INK,
              fontFamily: 'inherit', fontSize: 13, fontWeight: 700,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              padding: '15px 0', border: 'none', cursor: 'pointer',
              borderBottom: `1.5px solid ${REST_INK}`,
            }}>Ver carta</button>
          </div>
          {/* Rating strip */}
          <div style={{
            display: 'flex', gap: 30, alignItems: 'center',
            paddingTop: 24, borderTop: `1px solid ${REST_TERRA}22`,
          }}>
            <div>
              <div style={{ fontSize: 22, fontWeight: 800, color: REST_TERRA }}>4,8 ★</div>
              <div style={{ fontSize: 10, color: REST_MUTED, letterSpacing: '0.1em', textTransform: 'uppercase' }}>Google · 1.247 reseñas</div>
            </div>
            <div>
              <div style={{ fontSize: 22, fontWeight: 800 }}>Bib<br/></div>
              <div style={{ fontSize: 10, color: REST_MUTED, letterSpacing: '0.1em', textTransform: 'uppercase', marginTop: -10 }}>Recomendado Repsol</div>
            </div>
            <div>
              <div style={{ fontSize: 22, fontWeight: 800 }}>55 <span style={{ fontSize: 14, color: REST_MUTED }}>años</span></div>
              <div style={{ fontSize: 10, color: REST_MUTED, letterSpacing: '0.1em', textTransform: 'uppercase' }}>familia Llopis</div>
            </div>
          </div>
        </div>
        {/* Hero plate composition */}
        <div style={{
          position: 'relative',
          height: 540,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          {/* Main plate */}
          <div style={{ position: 'relative' }}>
            <FoodPlate size={420} label="paella.valenciana.jpg" accent={REST_TERRA}/>
            {/* Floating tag */}
            <div style={{
              position: 'absolute', left: -30, top: 40,
              background: '#fff',
              borderRadius: 999,
              padding: '10px 16px',
              fontSize: 12, fontWeight: 700,
              boxShadow: `0 14px 30px -10px rgba(42,30,18,0.25)`,
              display: 'flex', alignItems: 'center', gap: 8,
              transform: 'rotate(-4deg)',
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: '50%',
                background: REST_SAGE,
              }}></span>
              Producto km 0
            </div>
            <div style={{
              position: 'absolute', right: -10, bottom: 50,
              background: REST_TERRA, color: '#fff',
              borderRadius: 999,
              padding: '12px 18px',
              fontSize: 13, fontWeight: 800,
              fontStyle: 'italic',
              boxShadow: `0 14px 30px -10px ${REST_TERRA}99`,
              transform: 'rotate(6deg)',
            }}>22€ · El plato</div>
          </div>
          {/* Side small plate */}
          <div style={{ position: 'absolute', left: 0, bottom: 30 }}>
            <FoodPlate size={140} label="clochina.jpg" accent={REST_SAGE} rotation={-8}/>
          </div>
          <div style={{ position: 'absolute', right: 10, top: 40 }}>
            <FoodPlate size={120} label="naranjas.jpg" accent={REST_TERRA} rotation={10}/>
          </div>
        </div>
      </section>

      {/* Menu del día strip */}
      <section style={{
        margin: '0 72px 90px',
        background: REST_INK, color: REST_BG,
        borderRadius: 6,
        padding: '36px 44px',
        display: 'grid', gridTemplateColumns: '1fr 1.5fr 1fr', gap: 40, alignItems: 'center',
      }}>
        <div>
          <div style={{ fontSize: 10, color: REST_TERRA, letterSpacing: '0.28em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 8 }}>Lunes 27</div>
          <div style={{ fontSize: 28, fontWeight: 800, fontStyle: 'italic', lineHeight: 1.05, letterSpacing: '-0.02em' }}>Menú del día<br/>de hoy</div>
          <div style={{ fontSize: 13, opacity: 0.7, marginTop: 10 }}>3 platos · pan · bebida · postre</div>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14 }}>
          {[
            ['Primero', 'Crema de calabaza con picatostes', '·'],
            ['Segundo', 'Arroz al horno tradicional', '★'],
            ['Postre', 'Coca de llanda con café', '·'],
          ].map(([l, n, m], i) => (
            <div key={i} style={{
              display: 'flex', alignItems: 'baseline', gap: 14,
              paddingBottom: 8, borderBottom: '1px dashed #fff2',
            }}>
              <span style={{ fontSize: 9, color: REST_TERRA, letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 700, width: 60 }}>{l}</span>
              <span style={{ flex: 1 }}>{n}</span>
              <span style={{ color: REST_TERRA, fontSize: 16, fontWeight: 700 }}>{m}</span>
            </div>
          ))}
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 56, fontWeight: 800, color: REST_TERRA, fontStyle: 'italic', lineHeight: 1, letterSpacing: '-0.04em' }}>16,50€</div>
          <div style={{ fontSize: 11, opacity: 0.6, letterSpacing: '0.1em', textTransform: 'uppercase', marginBottom: 14 }}>L–V · 13:00–16:00</div>
          <button style={{
            background: REST_TERRA, color: '#fff',
            fontFamily: 'inherit', fontSize: 12, fontWeight: 700,
            letterSpacing: '0.12em', textTransform: 'uppercase',
            padding: '12px 22px', border: 'none', borderRadius: 4, cursor: 'pointer',
          }}>Reservar →</button>
        </div>
      </section>

      {/* Carta interactive */}
      <section style={{
        margin: '0 72px 90px',
      }}>
        <MenuTabs/>
      </section>

      {/* Reviews */}
      <section style={{ margin: '0 72px 60px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 24 }}>
          <div>
            <div style={{ fontSize: 11, color: REST_TERRA, letterSpacing: '0.28em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 8 }}>— Lo dice la gente</div>
            <h2 style={{ fontSize: 38, fontWeight: 800, fontStyle: 'italic', letterSpacing: '-0.02em', margin: 0 }}>Las últimas reseñas</h2>
          </div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 32, fontWeight: 800, color: REST_TERRA }}>4,8</span>
            <div>
              <div style={{ fontSize: 13, color: REST_TERRA }}>★★★★★</div>
              <div style={{ fontSize: 10, color: REST_MUTED }}>1.247 reseñas Google</div>
            </div>
          </div>
        </div>
        <GoogleReviews/>
      </section>

      {/* Reserve */}
      <section style={{ margin: '0 72px 60px' }}>
        <ReserveWidget/>
      </section>

      <footer style={{
        padding: '30px 72px 40px',
        borderTop: `1px solid ${REST_TERRA}22`,
        display: 'flex', justifyContent: 'space-between',
        fontSize: 11, color: REST_MUTED, letterSpacing: '0.12em', textTransform: 'uppercase',
      }}>
        <span>La Barraca · Av. del Mar, 88 · Canet d'En Berenguer</span>
        <span>L–D · 13:00–16:30 · 20:00–23:30</span>
        <span>962 608 144</span>
      </footer>
    </div>
  );
}

// ── Mobile ──────────────────────────────────────────────────
function RestaurantMobile() {
  return (
    <div style={{
      width: 390, minHeight: 844,
      background: REST_BG,
      color: REST_INK,
      fontFamily: 'Plus Jakarta Sans, sans-serif',
      overflow: 'hidden',
    }}>
      <div style={{
        height: 44, padding: '0 22px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        fontSize: 14, fontWeight: 600,
      }}>
        <span>9:41</span><span style={{ fontSize: 12 }}>●●● 📶 🔋</span>
      </div>

      <div style={{
        padding: '12px 20px',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{
            width: 30, height: 30, borderRadius: '50%',
            background: REST_TERRA, color: '#fff',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            fontFamily: 'serif', fontWeight: 800, fontSize: 15, fontStyle: 'italic',
          }}>B</div>
          <div style={{ fontSize: 14, fontWeight: 800, fontStyle: 'italic' }}>La Barraca</div>
        </div>
        <span style={{ fontSize: 18 }}>☰</span>
      </div>

      {/* Hero */}
      <section style={{ padding: '12px 20px 28px' }}>
        <div style={{
          fontSize: 9, color: REST_TERRA, letterSpacing: '0.3em', textTransform: 'uppercase',
          fontWeight: 700, marginBottom: 14,
        }}>Tres generaciones · 1971</div>
        <h1 style={{
          fontSize: 50, fontWeight: 800, letterSpacing: '-0.04em',
          lineHeight: 0.95, margin: '0 0 16px',
        }}>
          La <span style={{ fontStyle: 'italic', fontWeight: 400, color: REST_TERRA }}>paella</span><br/>
          de la abuela<br/>Carmen.
        </h1>
        <p style={{ fontSize: 14, color: REST_MUTED, lineHeight: 1.55, margin: '0 0 22px' }}>
          Arroz bomba, conejo de Llíria y leña de naranjo. Como en 1971.
        </p>
        <div style={{ position: 'relative', marginBottom: 22, height: 280, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
          <FoodPlate size={250} label="paella.jpg"/>
          <div style={{
            position: 'absolute', right: 10, bottom: 18,
            background: REST_TERRA, color: '#fff',
            borderRadius: 999, padding: '8px 14px',
            fontSize: 11, fontWeight: 800, fontStyle: 'italic',
            transform: 'rotate(6deg)',
          }}>22€ · El plato</div>
        </div>
        <button style={{
          width: '100%',
          background: REST_TERRA, color: '#fff',
          fontFamily: 'inherit', fontSize: 12, fontWeight: 700,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          padding: '14px 0', border: 'none', borderRadius: 4, cursor: 'pointer',
        }}>Reservar mesa</button>
      </section>

      {/* Menú del día */}
      <section style={{ padding: '0 20px 24px' }}>
        <div style={{
          background: REST_INK, color: REST_BG, borderRadius: 6, padding: 22,
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 14 }}>
            <div>
              <div style={{ fontSize: 9, color: REST_TERRA, letterSpacing: '0.28em', textTransform: 'uppercase', fontWeight: 700, marginBottom: 4 }}>Hoy</div>
              <div style={{ fontSize: 20, fontWeight: 800, fontStyle: 'italic', lineHeight: 1.05 }}>Menú del día</div>
            </div>
            <div style={{ fontSize: 28, fontWeight: 800, color: REST_TERRA, fontStyle: 'italic' }}>16,50€</div>
          </div>
          <div style={{ fontSize: 12, lineHeight: 1.7 }}>
            <div style={{ borderBottom: '1px dashed #fff2', paddingBottom: 5, marginBottom: 5 }}>
              <span style={{ color: REST_TERRA, fontWeight: 700, marginRight: 8 }}>1.</span>
              Crema de calabaza
            </div>
            <div style={{ borderBottom: '1px dashed #fff2', paddingBottom: 5, marginBottom: 5 }}>
              <span style={{ color: REST_TERRA, fontWeight: 700, marginRight: 8 }}>2.</span>
              Arroz al horno tradicional ★
            </div>
            <div>
              <span style={{ color: REST_TERRA, fontWeight: 700, marginRight: 8 }}>3.</span>
              Coca de llanda con café
            </div>
          </div>
        </div>
      </section>

      {/* Carta */}
      <section style={{ padding: '0 20px 24px' }}>
        <MenuTabs compact/>
      </section>

      {/* Reviews */}
      <section style={{ padding: '0 20px 24px' }}>
        <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
          <h2 style={{ fontSize: 22, fontWeight: 800, fontStyle: 'italic', margin: 0, letterSpacing: '-0.02em' }}>Reseñas</h2>
          <span style={{ fontSize: 13, fontWeight: 700, color: REST_TERRA }}>4,8 ★ · 1.247</span>
        </div>
        <GoogleReviews compact/>
      </section>

      {/* Reserve */}
      <section style={{ padding: '0 20px 28px' }}>
        <ReserveWidget compact/>
      </section>

      <footer style={{
        padding: '20px 20px 36px',
        borderTop: `1px solid ${REST_TERRA}22`,
        textAlign: 'center', lineHeight: 1.7,
        fontSize: 10, color: REST_MUTED, letterSpacing: '0.16em', textTransform: 'uppercase',
      }}>
        Av. del Mar, 88<br/>Canet d'En Berenguer<br/>962 608 144
      </footer>
    </div>
  );
}

Object.assign(window, { RestaurantDesktop, RestaurantMobile });