/* global React, Sparkle, Icon, WhatsAppIcon */
const { useState } = React;

const SALON_INFO = {
  address: 'Av. Siqueira Campos, 1538',
  district: 'Prado · Maceió/AL',
  phone: '(82) 99997-3643',
  phoneRaw: '5582999973643',
  instagram: '@refinada_beauty',
  hours: [
    { day: 'Segunda a sexta', time: '08h às 18h' },
    { day: 'Sábado',          time: '08h às 13h' },
    { day: 'Domingo',         time: 'Fechado' },
  ],
};

function Contact() {
  return (
    <section id="contato" style={ctStyles.section}>
      <div className="container">
        <div className="section-head">
          <span className="kicker">Contato & visita</span>
          <h2>Venha conhecer a Refinada</h2>
          <p>Estamos no Prado, em Maceió. Atendimento exclusivo com hora marcada — pelo WhatsApp ou pelo site.</p>
        </div>

        <div className="split" style={{ alignItems: 'stretch' }}>
          <div style={ctStyles.infoCol}>
            <Detail icon="pin"       kicker="Endereço"  title={SALON_INFO.address}  note={SALON_INFO.district}/>
            <Detail icon="phone"     kicker="WhatsApp"  title={SALON_INFO.phone}    note="Resposta em até 30 min · 8h–18h"
              action={<a href={`https://wa.me/${SALON_INFO.phoneRaw}`} target="_blank" className="btn btn--whatsapp"><WhatsAppIcon size={14}/> &nbsp;Conversar</a>}
            />
            <Detail icon="instagram" kicker="Instagram" title={SALON_INFO.instagram} note="Acompanhe novidades e disponibilidade"
              action={<a href="https://www.instagram.com/refinada_beauty" target="_blank" className="btn btn--secondary"><Icon name="instagram" size={14}/> &nbsp;Seguir</a>}
            />
            <div style={ctStyles.hoursCard}>
              <span className="kicker">Horário</span>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginTop: 12 }}>
                {SALON_INFO.hours.map(h => (
                  <div key={h.day} style={ctStyles.hourRow}>
                    <span style={{ fontFamily: 'var(--font-sans)', fontSize: 14, color: 'var(--fg-1)' }}>{h.day}</span>
                    <span style={{ fontFamily: 'var(--font-display)', fontSize: 17, color: h.time === 'Fechado' ? 'var(--fg-3)' : 'var(--rb-rose-deep)' }}>{h.time}</span>
                  </div>
                ))}
              </div>
            </div>
          </div>

          <MapCard/>
        </div>
      </div>
    </section>
  );
}

function Detail({ icon, kicker, title, note, action }) {
  return (
    <div style={ctStyles.detail}>
      <div style={ctStyles.detailIcon}><Icon name={icon} size={20} color="var(--rb-rose-deep)"/></div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 4, flex: '1 1 200px', minWidth: 0 }}>
        <span className="kicker" style={{ fontSize: 16 }}>{kicker}</span>
        <span style={{ fontFamily: 'var(--font-display)', fontSize: 20, color: 'var(--fg-1)', lineHeight: 1.2 }}>{title}</span>
        <span style={{ fontFamily: 'var(--font-sans)', fontSize: 13, color: 'var(--fg-3)' }}>{note}</span>
      </div>
      {action && <div style={{ marginLeft: 'auto' }}>{action}</div>}
    </div>
  );
}

function MapCard() {
  return (
    <div style={ctStyles.mapWrap}>
      {/* Stylized map placeholder - real maps would be an iframe but we don't want third-party scripts */}
      <div style={ctStyles.mapImg}>
        <svg viewBox="0 0 400 500" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block' }}>
          <defs>
            <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
              <path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(43,27,18,0.06)" strokeWidth="0.5"/>
            </pattern>
            <linearGradient id="mapBg" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="#F7EFE8"/>
              <stop offset="100%" stopColor="#E7C9BB"/>
            </linearGradient>
          </defs>
          <rect width="400" height="500" fill="url(#mapBg)"/>
          <rect width="400" height="500" fill="url(#grid)"/>

          {/* Roads */}
          <path d="M -20 120 Q 200 80 420 180" stroke="#FFF7F0" strokeWidth="22" fill="none" strokeLinecap="round"/>
          <path d="M -20 120 Q 200 80 420 180" stroke="#E7C9BB" strokeWidth="1" fill="none" opacity="0.7"/>

          <path d="M 80 -20 Q 120 250 60 520" stroke="#FFF7F0" strokeWidth="16" fill="none"/>
          <path d="M 200 -20 Q 220 250 240 520" stroke="#FFF7F0" strokeWidth="22" fill="none"/>
          <path d="M 320 -20 Q 300 250 340 520" stroke="#FFF7F0" strokeWidth="14" fill="none"/>

          <path d="M -20 320 Q 200 280 420 360" stroke="#FFF7F0" strokeWidth="18" fill="none"/>
          <path d="M -20 440 L 420 460" stroke="#FFF7F0" strokeWidth="12" fill="none"/>

          {/* Park / parks */}
          <ellipse cx="120" cy="380" rx="55" ry="35" fill="#C8D4B7" opacity="0.6"/>
          <ellipse cx="350" cy="80" rx="40" ry="30" fill="#C8D4B7" opacity="0.6"/>

          {/* Buildings (light blocks) */}
          <rect x="40"  y="180" width="38" height="50" fill="#FFFDFB" opacity="0.7" rx="2"/>
          <rect x="100" y="200" width="50" height="40" fill="#FFFDFB" opacity="0.7" rx="2"/>
          <rect x="260" y="170" width="44" height="38" fill="#FFFDFB" opacity="0.7" rx="2"/>
          <rect x="270" y="240" width="50" height="46" fill="#FFFDFB" opacity="0.7" rx="2"/>
          <rect x="60"  y="250" width="60" height="46" fill="#FFFDFB" opacity="0.7" rx="2"/>

          {/* Pin */}
          <g transform="translate(218, 218)">
            <circle r="36" fill="rgba(201,138,125,0.18)">
              <animate attributeName="r" values="20;48;20" dur="2.6s" repeatCount="indefinite"/>
              <animate attributeName="opacity" values="0.4;0;0.4" dur="2.6s" repeatCount="indefinite"/>
            </circle>
            <path d="M 0 -34 C -20 -34 -20 -10 0 14 C 20 -10 20 -34 0 -34 Z" fill="#C98A7D" stroke="#FFF7F0" strokeWidth="3"/>
            <circle cx="0" cy="-22" r="6" fill="#FFF7F0"/>
          </g>

          {/* Street labels */}
          <text x="120" y="146" fontFamily="ui-sans-serif" fontSize="9" fill="#5C453A" letterSpacing="2">AV. SIQUEIRA CAMPOS</text>
          <text x="250" y="306" fontFamily="ui-sans-serif" fontSize="8" fill="#8A6F60" letterSpacing="1.5">R. DO PRADO</text>
        </svg>
      </div>
      <div style={ctStyles.mapOverlay}>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <span style={{ fontFamily: 'var(--font-display)', fontSize: 18, color: 'var(--fg-1)' }}>Refinada Beauty</span>
          <span style={{ fontFamily: 'var(--font-sans)', fontSize: 12, color: 'var(--fg-3)' }}>{SALON_INFO.address}<br/>{SALON_INFO.district}</span>
        </div>
        <a
          href={`https://www.google.com/maps/dir/?api=1&destination=${encodeURIComponent(SALON_INFO.address + ', ' + SALON_INFO.district)}`}
          target="_blank"
          className="btn btn--primary">
          Como chegar
        </a>
      </div>
    </div>
  );
}

const ctStyles = {
  section: { background: 'var(--bg-1)', padding: 'var(--section-pad) var(--page-pad)' },
  infoCol: { display: 'flex', flexDirection: 'column', gap: 18, minWidth: 0 },
  detail: {
    display: 'flex', alignItems: 'center', gap: 18,
    padding: '20px 24px', borderRadius: 14,
    background: 'var(--rb-creme)',
    border: '1px solid var(--rb-champagne)',
    flexWrap: 'wrap',
  },
  detailIcon: {
    width: 50, height: 50, borderRadius: 999,
    background: 'rgba(201,138,125,0.14)',
    display: 'flex', alignItems: 'center', justifyContent: 'center',
    flexShrink: 0,
  },
  hoursCard: {
    background: 'var(--rb-nude)',
    borderRadius: 14, padding: 24,
    border: '1px solid var(--rb-champagne)',
  },
  hourRow: { display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', paddingBottom: 8, borderBottom: '1px solid var(--rb-champagne)' },
  mapWrap: { position: 'relative', borderRadius: 22, overflow: 'hidden', minHeight: 420, boxShadow: 'var(--shadow-2)', border: '1px solid var(--rb-champagne)' },
  mapImg: { position: 'absolute', inset: 0 },
  mapOverlay: {
    position: 'absolute', left: 20, right: 20, bottom: 20,
    background: 'rgba(255,247,240,0.95)',
    backdropFilter: 'blur(14px)',
    padding: 18, borderRadius: 14,
    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
    gap: 14, flexWrap: 'wrap',
    boxShadow: 'var(--shadow-2)',
  },
};

Object.assign(window, { Contact });