/* global React, SectionHead, Placeholder, Logo, SkylineGlyph */

// ───────────── CONTACTO ─────────────
const Contacto = () => (
  <section id="contacto" className="bb-section bb-section--ink" style={{ position: 'relative', overflow: 'hidden' }}>
    <SectionHead num="07" title="Contacto" subtitle="Pasa por el local o escríbenos. Estamos para ti." light />

    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <ContactRow label="Dirección" value="Los Álamos 558, Coquimbo, Chile" />
      <ContactRow label="Horario" value="Lun – Sáb · 12:00 a 20:00" />
      <ContactRow label="WhatsApp" value="+56 9 8474 0024" link="https://wa.me/56984740024" />
      <ContactRow label="Instagram" value="@breadwaybarber" link="https://www.instagram.com/breadwaybarber" />
    </div>

    {/* Map placeholder */}
    <a href="https://maps.apple/p/vm-ZDM3zgKrwvH" target="_blank" rel="noreferrer" style={{ textDecoration: 'none', display: 'block', marginTop: 22 }}>
      <div style={{ position: 'relative' }}>
        <div style={{
          height: 200,
          background: `
            repeating-linear-gradient(0deg, rgba(184,146,74,0.15) 0px, rgba(184,146,74,0.15) 1px, transparent 1px, transparent 32px),
            repeating-linear-gradient(90deg, rgba(184,146,74,0.15) 0px, rgba(184,146,74,0.15) 1px, transparent 1px, transparent 32px),
            #1a1814
          `,
          border: '1px solid rgba(184,146,74,0.4)',
          position: 'relative',
        }}>
          {/* Pin */}
          <div style={{
            position: 'absolute', top: '50%', left: '50%',
            transform: 'translate(-50%, -100%)',
            display: 'flex', flexDirection: 'column', alignItems: 'center',
          }}>
            <div style={{
              width: 14, height: 14, borderRadius: '50%',
              background: 'var(--gold)',
              border: '2px solid var(--bg)',
            }} />
            <div style={{ width: 1, height: 16, background: 'var(--gold)' }} />
          </div>
          <div style={{
            position: 'absolute', top: 12, left: 12,
            background: 'rgba(20,17,12,0.85)',
            padding: '6px 10px',
            border: '1px solid rgba(184,146,74,0.4)',
          }}>
            <div className="bb-label" style={{ color: 'var(--gold)' }}>Apple Maps</div>
          </div>
          <div style={{
            position: 'absolute', bottom: 12, right: 12,
            color: 'var(--bg)',
            fontFamily: 'JetBrains Mono', fontSize: 9,
          }}>↗ Abrir mapa</div>
        </div>
      </div>
    </a>

    {/* Skyline strip above the footer */}
    <div style={{ marginTop: 36, opacity: 0.9 }}>
      <SkylineGlyph height={64} color="rgba(184,146,74,0.28)" />
    </div>

    {/* Footer */}
    <div style={{ marginTop: -4, textAlign: 'center', borderTop: '1px solid rgba(184,146,74,0.3)', paddingTop: 24 }}>
      <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 10 }}>
        <Logo size={34} variant="gold" />
      </div>
      <div style={{
        fontFamily: "'Cormorant Garamond', serif",
        fontStyle: 'italic', fontSize: 24,
      }}>
        Bread Way<span style={{ color: 'var(--gold)' }}> Barber</span>
      </div>
      <div className="bb-label" style={{ color: 'rgba(250,248,243,0.4)', marginTop: 8 }}>
        © MMXXVI · Coquimbo, Chile
      </div>
    </div>
  </section>
);

const ContactRow = ({ label, value, link }) => {
  const inner = (
    <div style={{
      display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
      padding: '14px 0',
      borderBottom: '1px solid rgba(184,146,74,0.2)',
    }}>
      <span className="bb-label" style={{ color: 'var(--gold)' }}>{label}</span>
      <span style={{
        fontFamily: "'Cormorant Garamond', serif",
        fontStyle: 'italic', fontSize: 18,
        color: 'var(--bg)',
        textAlign: 'right',
      }}>{value}{link ? <span style={{ color: 'var(--gold)', marginLeft: 6, fontSize: 12 }}>↗</span> : null}</span>
    </div>
  );
  return link ? (
    <a href={link} target="_blank" rel="noreferrer" style={{ textDecoration: 'none', color: 'inherit' }}>{inner}</a>
  ) : inner;
};

// ───────────── DASHBOARD (internal, no longer rendered publicly) ─────────────
const Dashboard = () => {
  const weekData = [42, 38, 55, 48, 62, 78, 35]; // bookings per day
  const max = Math.max(...weekData);
  const days = ['L','M','M','J','V','S','D'];

  const products = [
    { name: 'Pomada Mate', sold: 38, revenue: 566200 },
    { name: 'Aceite Barba', sold: 29, revenue: 362500 },
    { name: 'Perfume 01', sold: 18, revenue: 504000 },
    { name: 'Cera Sculpt', sold: 24, revenue: 324000 },
  ];

  const services = [
    { name: 'Fade premium', count: 86, share: 32 },
    { name: 'Corte clásico', count: 64, share: 24 },
    { name: 'Pack Bread Way', count: 48, share: 18 },
    { name: 'Afeitado navaja', count: 42, share: 16 },
  ];

  return (
    <section id="dashboard" className="bb-section bb-section--paper" style={{ background: '#f3efe6' }}>
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
        marginBottom: 8,
      }}>
        <div className="bb-label" style={{ color: 'var(--muted)' }}>— PANEL INTERNO · 09 —</div>
        <div className="bb-label" style={{
          background: 'var(--ink)', color: 'var(--gold)',
          padding: '4px 8px',
        }}>Privado</div>
      </div>
      <h2 style={{
        fontFamily: "'Cormorant Garamond', serif",
        fontStyle: 'italic', fontWeight: 500,
        fontSize: 32, lineHeight: 1.05,
        margin: '4px 0 6px',
      }}>Dashboard Gerencial</h2>
      <p className="bb-small" style={{ marginBottom: 24 }}>
        Vista mensual · Octubre 2026 · Solo personal autorizado
      </p>

      {/* KPI grid */}
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8, marginBottom: 18 }}>
        <KPI label="Reservas mes" value="358" delta="+12%" />
        <KPI label="Ventas boutique" value="$2.4M" delta="+24%" />
        <KPI label="Clientes únicos" value="241" delta="+8%" />
        <KPI label="Ticket promedio" value="$18.6k" delta="+3%" />
      </div>

      {/* Weekly trend */}
      <Card title="Tendencia semanal" caption="Reservas · últimos 7 días">
        <div style={{
          display: 'flex', alignItems: 'flex-end', gap: 8,
          height: 110, padding: '8px 4px',
        }}>
          {weekData.map((v, i) => (
            <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
              <div style={{
                fontFamily: 'JetBrains Mono', fontSize: 9, color: 'var(--ink-soft)',
              }}>{v}</div>
              <div style={{
                width: '100%',
                height: (v / max) * 80,
                background: i === 5 ? 'var(--gold)' : 'var(--ink)',
              }} />
              <div className="bb-label" style={{ fontSize: 8, color: 'var(--muted)' }}>{days[i]}</div>
            </div>
          ))}
        </div>
      </Card>

      {/* Top products */}
      <Card title="Productos más vendidos" caption="Octubre · top 4">
        {products.map((p, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'baseline',
            padding: '10px 0',
            borderBottom: i < products.length - 1 ? '1px solid var(--line-soft)' : 'none',
            gap: 10,
          }}>
            <span className="bb-label" style={{ color: 'var(--gold)', minWidth: 22 }}>
              {String(i + 1).padStart(2, '0')}
            </span>
            <div style={{ flex: 1 }}>
              <div style={{ fontFamily: 'Inter', fontSize: 13, color: 'var(--ink)' }}>{p.name}</div>
              <div className="bb-label" style={{ marginTop: 2, color: 'var(--muted)' }}>
                {p.sold} unidades
              </div>
            </div>
            <div style={{
              fontFamily: "'Cormorant Garamond', serif",
              fontStyle: 'italic', fontSize: 17,
            }}>${(p.revenue/1000).toFixed(0)}k</div>
          </div>
        ))}
      </Card>

      {/* Top services */}
      <Card title="Servicios más reservados" caption="Distribución del mes">
        {services.map((s, i) => (
          <div key={i} style={{ marginBottom: 12 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
              <span style={{ fontFamily: 'Inter', fontSize: 12 }}>{s.name}</span>
              <span className="bb-label" style={{ color: 'var(--muted)' }}>{s.count} · {s.share}%</span>
            </div>
            <div style={{ height: 4, background: 'var(--line-soft)' }}>
              <div style={{
                width: `${s.share * 3}%`, height: '100%',
                background: i === 0 ? 'var(--gold)' : 'var(--ink)',
              }} />
            </div>
          </div>
        ))}
      </Card>

      {/* Cash flow recent */}
      <Card title="Flujo de caja · hoy" caption="Movimientos recientes">
        {[
          { type: 'Servicio', who: 'Tomás V.', amount: 16000, time: '13:42' },
          { type: 'Producto', who: 'Diego A.', amount: 14900, time: '14:15' },
          { type: 'Servicio', who: 'Javier M.', amount: 18000, time: '15:00' },
          { type: 'Producto', who: 'Luis P.', amount: 28000, time: '15:30' },
          { type: 'Servicio', who: 'Andrés T.', amount: 24000, time: '16:00' },
        ].map((r, i) => (
          <div key={i} style={{
            display: 'flex', alignItems: 'baseline',
            padding: '8px 0',
            borderBottom: '1px solid var(--line-soft)',
            gap: 10,
          }}>
            <span className="bb-label" style={{
              padding: '2px 6px',
              background: r.type === 'Servicio' ? 'var(--ink)' : 'var(--gold)',
              color: r.type === 'Servicio' ? 'var(--gold)' : 'var(--paper)',
              fontSize: 7,
            }}>{r.type}</span>
            <span style={{ flex: 1, fontFamily: 'Inter', fontSize: 12 }}>{r.who}</span>
            <span className="bb-label" style={{ color: 'var(--muted)' }}>{r.time}</span>
            <span style={{
              fontFamily: 'JetBrains Mono', fontSize: 12,
              minWidth: 60, textAlign: 'right',
            }}>+${r.amount.toLocaleString('es-CL')}</span>
          </div>
        ))}
        <div style={{
          display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          paddingTop: 12, marginTop: 6,
          borderTop: '2px solid var(--ink)',
        }}>
          <span className="bb-label" style={{ color: 'var(--ink)' }}>Total día</span>
          <span style={{
            fontFamily: "'Cormorant Garamond', serif",
            fontStyle: 'italic', fontSize: 22,
            color: 'var(--gold)',
          }}>$100.900</span>
        </div>
      </Card>

      <div style={{ marginTop: 16, textAlign: 'center' }}>
        <div className="bb-small" style={{ color: 'var(--muted)' }}>
          Esta vista es interna y no es accesible al público.
        </div>
      </div>
    </section>
  );
};

const KPI = ({ label, value, delta }) => (
  <div style={{
    background: 'var(--paper)',
    border: '1px solid var(--line-soft)',
    padding: '14px 14px',
  }}>
    <div className="bb-label" style={{ color: 'var(--muted)' }}>{label}</div>
    <div style={{
      fontFamily: "'Cormorant Garamond', serif",
      fontStyle: 'italic', fontSize: 30,
      lineHeight: 1.1, marginTop: 6,
    }}>{value}</div>
    <div className="bb-label" style={{ color: 'var(--gold)', marginTop: 4 }}>
      ↑ {delta}
    </div>
  </div>
);

const Card = ({ title, caption, children }) => (
  <div style={{
    background: 'var(--paper)',
    border: '1px solid var(--line-soft)',
    padding: '16px',
    marginBottom: 12,
  }}>
    <div style={{
      display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
      marginBottom: 12,
      paddingBottom: 10,
      borderBottom: '1px solid var(--line-soft)',
    }}>
      <div style={{
        fontFamily: "'Cormorant Garamond', serif",
        fontStyle: 'italic', fontSize: 18, lineHeight: 1,
      }}>{title}</div>
      <div className="bb-label" style={{ color: 'var(--muted)', fontSize: 7 }}>{caption}</div>
    </div>
    {children}
  </div>
);

Object.assign(window, { Contacto, Dashboard });
