/* global React */
const { useState, useEffect, useRef } = React;

// ============================================================
// ESTILO 1 — CREATIVO & VIBRANTE
// Salpicaduras, color saturado, tipografía display, sensación de taller artístico
// ============================================================

function useReveal() {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(([e]) => e.isIntersecting && setVis(true), { threshold: 0.15, root: ref.current.closest('.dc-artboard-frame') || null });
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);
  return [ref, vis];
}

function Reveal({ children, delay = 0, y = 24 }) {
  const [ref, vis] = useReveal();
  return (
    <div ref={ref} style={{
      opacity: vis ? 1 : 0,
      transform: vis ? 'translateY(0)' : `translateY(${y}px)`,
      transition: `opacity 0.7s ease ${delay}s, transform 0.8s cubic-bezier(.2,.8,.2,1) ${delay}s`
    }}>{children}</div>
  );
}

// Salpicadura SVG simple (formas orgánicas con círculos, NO hand-drawn complex)
function Splat({ color, size = 80, style = {} }) {
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" style={style} aria-hidden="true">
      <circle cx="50" cy="50" r="28" fill={color} />
      <circle cx="78" cy="32" r="6" fill={color} opacity="0.9"/>
      <circle cx="22" cy="72" r="8" fill={color} opacity="0.85"/>
      <circle cx="84" cy="68" r="4" fill={color} opacity="0.7"/>
      <circle cx="14" cy="40" r="3" fill={color} opacity="0.7"/>
      <circle cx="62" cy="14" r="3" fill={color} opacity="0.6"/>
    </svg>
  );
}

const vibStyles = {
  root: {
    fontFamily: "'Outfit', system-ui, sans-serif",
    color: 'var(--cd-ink)',
    background: 'var(--cd-cream)',
    width: '100%', minHeight: '100%',
    overflow: 'hidden',
    position: 'relative',
  },
  nav: {
    display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    padding: '14px 48px',
    position: 'sticky', top: 0, zIndex: 50,
    background: 'rgba(250,247,242,0.88)',
    backdropFilter: 'blur(14px)',
    borderBottom: '1px solid rgba(26,26,46,0.06)',
  },
  navLogo: { display: 'flex', alignItems: 'center', gap: 12, fontFamily: "'Bricolage Grotesque', serif", fontWeight: 700, fontSize: 22, letterSpacing: '-0.02em' },
  navLinks: { display: 'flex', gap: 32, fontSize: 15, fontWeight: 500 },
  navCta: {
    background: 'var(--cd-magenta)', color: 'white',
    padding: '10px 20px', borderRadius: 999,
    fontWeight: 600, fontSize: 14,
    border: 'none', cursor: 'pointer',
    display: 'inline-flex', alignItems: 'center', gap: 8,
  },
};

function NavVib({ social }) {
  return (
    <nav style={vibStyles.nav}>
      <div style={vibStyles.navLogo}>
        <img src="assets/logo-transparent.png" alt="CreArDi — Creación, Arte y Diseño en Cali" style={{ height: 64, display: 'block' }} />
      </div>
      <div style={vibStyles.navLinks}>
        <a style={{ color: 'var(--cd-ink)', textDecoration: 'none' }} href="#servicios">Servicios</a>
        <a style={{ color: 'var(--cd-ink)', textDecoration: 'none' }} href="#galeria">Galería</a>
        <a style={{ color: 'var(--cd-ink)', textDecoration: 'none' }} href="#proceso">Proceso</a>
        <a style={{ color: 'var(--cd-ink)', textDecoration: 'none' }} href="#contacto">Contacto</a>
      </div>
      <a href={`https://wa.me/${(social?.whatsapp || '').replace(/[^0-9]/g, '')}`} style={{ ...vibStyles.navCta, textDecoration: 'none' }}>
        <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--cd-yellow)' }} />
        Cotizar por WhatsApp
      </a>
    </nav>
  );
}

function HeroVib({ social, hero }) {
  const h = hero || {};
  const tagline = h.tagline || 'Taller creativo · Cali, Colombia';
  const title1 = h.title1 || 'Lo imaginas,';
  const title2Raw = h.title2 || 'nosotros lo creamos.';
  // Split title2 on its last word for the gradient highlight
  const m = title2Raw.match(/^(.*?)(\S+)([.!?]*)$/);
  const beforeWord = m ? m[1] : title2Raw + ' ';
  const word = m ? m[2] : '';
  const trailingPunct = m ? m[3] : '';
  const subtitle = h.subtitle || 'Corte láser, sublimación, impresión 3D y troquelado de papel. Piezas pequeñas hechas a mano con la presentación pulida al 200%.';
  return (
    <section style={{ position: 'relative', padding: '80px 48px 120px', overflow: 'hidden' }}>
      {/* Salpicaduras decorativas */}
      <Splat color="var(--cd-orange)" size={140} style={{ position: 'absolute', top: 60, right: '8%', opacity: 0.85 }} />
      <Splat color="var(--cd-turquoise)" size={90} style={{ position: 'absolute', top: 240, right: '32%', opacity: 0.75 }} />
      <Splat color="var(--cd-magenta)" size={60} style={{ position: 'absolute', bottom: 80, left: '38%', opacity: 0.8 }} />
      <Splat color="var(--cd-blue)" size={50} style={{ position: 'absolute', top: 120, left: '6%', opacity: 0.7 }} />

      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1.1fr 0.9fr', gap: 60, alignItems: 'center', position: 'relative', zIndex: 2 }}>
        <Reveal>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '6px 14px', borderRadius: 999,
            background: 'white', border: '1px solid var(--cd-line)',
            fontSize: 13, fontWeight: 500,
            marginBottom: 28,
            fontFamily: "'Geist Mono', monospace", letterSpacing: '0.04em', textTransform: 'uppercase',
          }}>
            <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--cd-magenta)' }} />
            {tagline}
          </div>
          <h1 style={{
            fontFamily: "'Bricolage Grotesque', serif",
            fontSize: 84, lineHeight: 0.95, fontWeight: 700,
            letterSpacing: '-0.035em', margin: 0,
            color: 'var(--cd-ink)',
          }}>
            {title1}<br />
            {beforeWord}<span style={{
              fontStyle: 'italic',
              backgroundImage: 'linear-gradient(120deg, var(--cd-magenta), var(--cd-orange))',
              WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent',
            }}>{word}</span>{trailingPunct}
          </h1>
          <p style={{
            fontSize: 19, lineHeight: 1.55, color: 'var(--cd-ink-soft)',
            marginTop: 24, maxWidth: 520,
          }}>
            {subtitle}
          </p>
          <div style={{ display: 'flex', gap: 12, marginTop: 36, flexWrap: 'wrap' }}>
            <a href="#galeria" style={{
              background: 'var(--cd-ink)', color: 'white',
              padding: '16px 26px', borderRadius: 999,
              fontWeight: 600, fontSize: 16, border: 'none', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 10,
              textDecoration: 'none',
            }}>
              Ver galería
              <span aria-hidden="true">→</span>
            </a>
            <a href={`https://wa.me/${(social?.whatsapp || '').replace(/[^0-9]/g, '')}`} style={{
              background: 'transparent', color: 'var(--cd-ink)',
              padding: '16px 26px', borderRadius: 999,
              fontWeight: 600, fontSize: 16,
              border: '1.5px solid var(--cd-ink)', cursor: 'pointer',
              textDecoration: 'none',
            }}>
              Pedir cotización
            </a>
          </div>
          <div style={{ display: 'flex', gap: 32, marginTop: 48, fontFamily: "'Geist Mono', monospace" }}>
            <div>
              <div style={{ fontSize: 32, fontWeight: 700, color: 'var(--cd-magenta)' }}>2 años</div>
              <div style={{ fontSize: 12, color: 'var(--cd-ink-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>creando</div>
            </div>
            <div>
              <div style={{ fontSize: 32, fontWeight: 700, color: 'var(--cd-blue)' }}>+500</div>
              <div style={{ fontSize: 12, color: 'var(--cd-ink-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>piezas únicas</div>
            </div>
            <div>
              <div style={{ fontSize: 32, fontWeight: 700, color: 'var(--cd-orange)' }}>4</div>
              <div style={{ fontSize: 12, color: 'var(--cd-ink-muted)', textTransform: 'uppercase', letterSpacing: '0.08em' }}>técnicas</div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={0.15}>
          <div style={{ position: 'relative', aspectRatio: '4/5' }}>
            {h.img1 ? (
              <div style={{
                position: 'absolute', top: 0, right: 0, width: '78%', height: '70%',
                borderRadius: 24, transform: 'rotate(3deg)', overflow: 'hidden',
                boxShadow: '0 30px 60px -20px rgba(229,35,123,0.25)'
              }}>
                <img src={h.img1} alt="Trabajos personalizados en corte láser y sublimación — CreArDi Cali" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            ) : (
              <div className="cd-ph" style={{
                position: 'absolute', top: 0, right: 0, width: '78%', height: '70%',
                borderRadius: 24, transform: 'rotate(3deg)',
                boxShadow: '0 30px 60px -20px rgba(229,35,123,0.25)'
              }}>
                <span>foto · cuadro láser MDF</span>
              </div>
            )}
            {h.img2 ? (
              <div style={{
                position: 'absolute', bottom: 0, left: 0, width: '60%', height: '55%',
                borderRadius: 24, transform: 'rotate(-5deg)', overflow: 'hidden',
                boxShadow: '0 30px 60px -20px rgba(27,154,216,0.3)'
              }}>
                <img src={h.img2} alt="Impresión 3D y detalles personalizados para eventos en Cali — CreArDi" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </div>
            ) : (
              <div className="cd-ph" style={{
                position: 'absolute', bottom: 0, left: 0, width: '60%', height: '55%',
                borderRadius: 24, transform: 'rotate(-5deg)',
                backgroundColor: '#EAF7FB',
                boxShadow: '0 30px 60px -20px rgba(27,154,216,0.3)'
              }}>
                <span>foto · mug sublimado</span>
              </div>
            )}
            <div style={{
              position: 'absolute', top: '38%', left: '52%',
              width: 110, height: 110, borderRadius: '50%',
              background: 'var(--cd-yellow)',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: "'Bricolage Grotesque', serif",
              fontSize: 14, fontWeight: 700, textAlign: 'center', lineHeight: 1.1,
              transform: 'rotate(-12deg)',
              boxShadow: '0 12px 24px rgba(243,146,0,0.3)',
            }}>
              hecho<br/>a mano<br/>en Cali
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

const SERVICES_VIB = [
  { color: 'var(--cd-magenta)', icon: '◐', title: 'Corte láser', desc: 'MDF, madera, acrílico fino. Cuadros decorativos, llaveros, topers, placas grabadas.', tag: 'L1 · Diodo' },
  { color: 'var(--cd-orange)', icon: '◓', title: 'Sublimación', desc: 'Mugs, camisetas, gorras, platos y más. Color total, sin desgaste, listo para regalar.', tag: 'L2 · Textil + Cerámica' },
  { color: 'var(--cd-blue)', icon: '◒', title: 'Impresión 3D', desc: 'Filamento PLA. Soportes, figuras decorativas, accesorios funcionales a medida.', tag: 'L3 · FDM' },
  { color: 'var(--cd-turquoise)', icon: '◑', title: 'Troquelado papel', desc: 'Cameo 5. Empaques únicos, figuras craft, invitaciones y detalles para eventos.', tag: 'L4 · Craft' },
];

function ServicesVib() {
  return (
    <section id="servicios" style={{ padding: '120px 48px', background: 'var(--cd-white)', position: 'relative' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Reveal>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 60, gap: 40, flexWrap: 'wrap' }}>
            <div>
              <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--cd-magenta)', marginBottom: 16 }}>
                — Lo que hacemos
              </div>
              <h2 style={{ fontFamily: "'Bricolage Grotesque', serif", fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em', margin: 0, lineHeight: 1, maxWidth: 620 }}>
                Cuatro técnicas. Un mismo nivel de detalle.
              </h2>
            </div>
            <p style={{ maxWidth: 340, fontSize: 16, lineHeight: 1.6, color: 'var(--cd-ink-soft)', margin: 0 }}>
              Nos enfocamos en piezas pequeñas, terminadas con pintura a mano cuando lo necesitan.
            </p>
          </div>
        </Reveal>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 24 }}>
          {SERVICES_VIB.map((s, i) => (
            <Reveal key={s.title} delay={i * 0.08}>
              <div style={{
                position: 'relative',
                padding: 36,
                borderRadius: 28,
                background: 'var(--cd-cream)',
                border: '1px solid var(--cd-line)',
                minHeight: 280,
                display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
                overflow: 'hidden',
              }}>
                <Splat color={s.color} size={120} style={{ position: 'absolute', top: -20, right: -20, opacity: 0.18 }} />
                <div>
                  <div style={{
                    width: 56, height: 56, borderRadius: 16,
                    background: s.color, color: 'white',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 32, fontWeight: 700, marginBottom: 24,
                  }}>{s.icon}</div>
                  <h3 style={{ fontFamily: "'Bricolage Grotesque', serif", fontSize: 32, fontWeight: 700, margin: '0 0 12px', letterSpacing: '-0.02em' }}>{s.title}</h3>
                  <p style={{ fontSize: 16, lineHeight: 1.5, color: 'var(--cd-ink-soft)', margin: 0, maxWidth: 420 }}>{s.desc}</p>
                </div>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 28 }}>
                  <span style={{ fontFamily: "'Geist Mono', monospace", fontSize: 11, letterSpacing: '0.1em', color: 'var(--cd-ink-muted)' }}>{s.tag}</span>
                  <span style={{ fontSize: 14, fontWeight: 600, color: s.color }}>Ver ejemplos →</span>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

const GALLERY_PLACEHOLDERS = [
  { tag: 'Láser MDF', label: 'Cuadro decorativo personalizado', color: 'var(--cd-magenta)', span: 'tall', tone: '#FCE6EE' },
  { tag: 'Sublimación', label: 'Set mugs · pedido empresarial', color: 'var(--cd-orange)', tone: '#FDEEDC' },
  { tag: '3D + Pintura', label: 'Figura coleccionable pintada a mano', color: 'var(--cd-blue)', tone: '#DEF0FA' },
  { tag: 'Cameo 5', label: 'Empaque para boda', color: 'var(--cd-turquoise)', span: 'wide', tone: '#DAF1F1' },
  { tag: 'Láser madera', label: 'Llaveros con grabado', color: 'var(--cd-magenta)', tone: '#FCE6EE' },
  { tag: 'Sublimación', label: 'Camisetas evento corporativo', color: 'var(--cd-orange)', tone: '#FDEEDC' },
];

const TAG_COLORS = {
  'Láser MDF': 'var(--cd-magenta)',
  'Láser madera': 'var(--cd-magenta)',
  'Sublimación': 'var(--cd-orange)',
  'Impresión 3D': 'var(--cd-blue)',
  '3D + Pintura': 'var(--cd-blue)',
  'Cameo 5': 'var(--cd-turquoise)',
  'Papel craft': 'var(--cd-turquoise)',
};

function GalleryVib({ gallery }) {
  const items = (gallery && gallery.length > 0)
    ? gallery.map((g, i) => ({
        url: g.url,
        type: g.type,
        tag: g.tag || 'Trabajo',
        label: g.label || 'Pieza CreArDi',
        color: TAG_COLORS[g.tag] || (i % 4 === 0 ? 'var(--cd-magenta)' : i % 4 === 1 ? 'var(--cd-orange)' : i % 4 === 2 ? 'var(--cd-blue)' : 'var(--cd-turquoise)'),
        span: g.span || (i === 0 ? 'tall' : i === 3 ? 'wide' : null),
        tone: '#F4F4F4',
      }))
    : GALLERY_PLACEHOLDERS;
  return (
    <section id="galeria" style={{ padding: '120px 48px', background: 'var(--cd-cream)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Reveal>
          <div style={{ textAlign: 'center', marginBottom: 56 }}>
            <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 12, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--cd-orange)', marginBottom: 16 }}>
              — Trabajos recientes
            </div>
            <h2 style={{ fontFamily: "'Bricolage Grotesque', serif", fontSize: 64, fontWeight: 700, letterSpacing: '-0.03em', margin: 0 }}>
              Nuestra galería habla por nosotros.
            </h2>
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(4, 1fr)',
          gridAutoRows: '220px',
          gap: 16,
        }}>
          {items.map((g, i) => {
            const span = g.span === 'tall' ? { gridRow: 'span 2' } : g.span === 'wide' ? { gridColumn: 'span 2' } : {};
            return (
              <Reveal key={i} delay={i * 0.05}>
                <div style={{ position: 'relative', borderRadius: 20, overflow: 'hidden', height: '100%', minHeight: 220, ...span, cursor: 'pointer' }}>
                  {g.url ? (
                    (g.type === 'youtube' || g.type === 'video')
                      ? <iframe title={g.label || `${g.tag} — CreArDi Cali`} src={g.type === 'youtube' ? g.url.replace('youtube.com/embed/', 'youtube-nocookie.com/embed/') + '?rel=0&modestbranding=1' : g.url} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 'none' }} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen" allowFullScreen />
                      : <img src={g.url} alt={g.label ? `${g.label} — ${g.tag} en Cali, CreArDi` : `${g.tag} personalizado en Cali — CreArDi`} style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }} />
                  ) : (
                    <div className="cd-ph" style={{ position: 'absolute', inset: 0, backgroundColor: g.tone }}>
                      <span>foto · {g.tag}</span>
                    </div>
                  )}
                  <div style={{
                    position: 'absolute', bottom: 16, left: 16, right: 16,
                    background: 'rgba(255,255,255,0.95)',
                    backdropFilter: 'blur(8px)',
                    padding: '10px 14px',
                    borderRadius: 12,
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 8,
                  }}>
                    <div>
                      <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 10, letterSpacing: '0.08em', color: g.color, textTransform: 'uppercase' }}>{g.tag}</div>
                      <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--cd-ink)', marginTop: 2 }}>{g.label}</div>
                    </div>
                    <div style={{ width: 28, height: 28, borderRadius: '50%', background: g.color, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12 }}>↗</div>
                  </div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ProcessVib() {
  const steps = [
    { n: '01', title: 'Cuéntanos tu idea', desc: 'WhatsApp, foto, sketch o referencia. No hay idea muy pequeña.', color: 'var(--cd-magenta)' },
    { n: '02', title: 'Cotización clara', desc: 'Te enviamos diseño previo, materiales, tiempos y valor en menos de 24h.', color: 'var(--cd-orange)' },
    { n: '03', title: 'Lo creamos', desc: 'En el taller, con la técnica indicada. Acabados pintados a mano si aplica.', color: 'var(--cd-blue)' },
    { n: '04', title: 'Empaque y entrega', desc: 'Empacado para regalar de una. Entrega en Cali o envío nacional.', color: 'var(--cd-turquoise)' },
  ];
  return (
    <section id="proceso" style={{ padding: '120px 48px', background: 'var(--cd-white)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <Reveal>
          <h2 style={{ fontFamily: "'Bricolage Grotesque', serif", fontSize: 56, fontWeight: 700, letterSpacing: '-0.03em', margin: '0 0 60px', maxWidth: 620, lineHeight: 1 }}>
            De la idea a tu mano en <em style={{ color: 'var(--cd-magenta)', fontStyle: 'italic' }}>cuatro pasos</em>.
          </h2>
        </Reveal>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 24 }}>
          {steps.map((s, i) => (
            <Reveal key={s.n} delay={i * 0.08}>
              <div style={{ paddingTop: 24, borderTop: `2px solid ${s.color}` }}>
                <div style={{ fontFamily: "'Geist Mono', monospace", fontSize: 12, color: s.color, marginBottom: 16 }}>{s.n}</div>
                <h3 style={{ fontFamily: "'Bricolage Grotesque', serif", fontSize: 24, fontWeight: 700, margin: '0 0 10px', letterSpacing: '-0.02em' }}>{s.title}</h3>
                <p style={{ fontSize: 15, lineHeight: 1.55, color: 'var(--cd-ink-soft)', margin: 0 }}>{s.desc}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function SocialIcon({ kind, size = 18 }) {
  const paths = {
    whatsapp: 'M16 .5C7.4.5.5 7.4.5 16c0 2.8.7 5.5 2.1 7.9L.5 31.5l7.9-2.1c2.3 1.3 5 2 7.6 2C24.6 31.5 31.5 24.6 31.5 16S24.6.5 16 .5zm0 28.4c-2.4 0-4.7-.6-6.7-1.9l-.5-.3-4.7 1.2 1.3-4.6-.3-.5c-1.4-2.1-2.1-4.6-2.1-7.1C3 9 8.8 3.1 16 3.1S29 9 29 16.2 23.2 28.9 16 28.9zm7.2-9.6c-.4-.2-2.3-1.1-2.7-1.3-.4-.1-.6-.2-.9.2s-1 1.3-1.3 1.5c-.2.3-.5.3-.9.1-.4-.2-1.7-.6-3.2-2-1.2-1.1-2-2.4-2.2-2.8-.2-.4 0-.6.2-.8.2-.2.4-.5.6-.7.2-.2.3-.4.4-.7.1-.3 0-.5-.1-.7-.1-.2-.9-2.2-1.3-3-.3-.8-.7-.7-.9-.7h-.7c-.3 0-.7.1-1 .5-.4.4-1.4 1.3-1.4 3.3 0 1.9 1.4 3.8 1.6 4.1.2.3 2.8 4.3 6.8 6 1 .4 1.7.6 2.3.8 1 .3 1.8.3 2.5.2.8-.1 2.3-1 2.6-1.9.3-.9.3-1.7.2-1.9-.1-.2-.4-.3-.8-.5z',
    instagram: 'M16 2.9c4.3 0 4.8 0 6.5.1 1.6.1 2.4.3 3 .6.8.3 1.3.7 1.9 1.3.6.6 1 1.1 1.3 1.9.2.6.5 1.4.6 3 .1 1.7.1 2.2.1 6.5s0 4.8-.1 6.5c-.1 1.6-.3 2.4-.6 3-.3.8-.7 1.3-1.3 1.9-.6.6-1.1 1-1.9 1.3-.6.2-1.4.5-3 .6-1.7.1-2.2.1-6.5.1s-4.8 0-6.5-.1c-1.6-.1-2.4-.3-3-.6-.8-.3-1.3-.7-1.9-1.3-.6-.6-1-1.1-1.3-1.9-.2-.6-.5-1.4-.6-3-.1-1.7-.1-2.2-.1-6.5s0-4.8.1-6.5c.1-1.6.3-2.4.6-3 .3-.8.7-1.3 1.3-1.9.6-.6 1.1-1 1.9-1.3.6-.2 1.4-.5 3-.6 1.7-.1 2.2-.1 6.5-.1zm0-2.9C11.6 0 11.1 0 9.4.1 7.7.2 6.6.4 5.6.8 4.6 1.2 3.7 1.7 2.9 2.5 2 3.4 1.5 4.2 1.1 5.2c-.4 1-.7 2.1-.8 3.8C.2 10.7 0 11.2 0 16s0 5.3.1 7c.1 1.7.4 2.8.8 3.8.4 1 .9 1.9 1.7 2.7.9.9 1.7 1.4 2.7 1.8 1 .4 2.1.7 3.8.8 1.7.1 2.2.1 7 .1s5.3 0 7-.1c1.7-.1 2.8-.4 3.8-.8 1-.4 1.9-.9 2.7-1.7.9-.9 1.4-1.7 1.8-2.7.4-1 .7-2.1.8-3.8.1-1.7.1-2.2.1-7s0-5.3-.1-7c-.1-1.7-.4-2.8-.8-3.8C30 4.2 29.5 3.4 28.7 2.5 27.8 1.7 27 1.2 26 .8c-1-.4-2.1-.7-3.8-.8C20.5 0 20 0 16 0zm0 7.8a8.2 8.2 0 100 16.4 8.2 8.2 0 000-16.4zm0 13.5a5.3 5.3 0 110-10.6 5.3 5.3 0 010 10.6zM26.5 7.5a1.9 1.9 0 11-3.8 0 1.9 1.9 0 013.8 0z',
    facebook: 'M32 16C32 7.2 24.8 0 16 0S0 7.2 0 16c0 8 5.9 14.6 13.5 15.8V20.6h-4V16h4v-3.5C13.5 8.6 15.9 6.5 19.5 6.5c1.7 0 3.5.3 3.5.3v3.9h-2c-1.9 0-2.5 1.2-2.5 2.5V16h4.3l-.7 4.6h-3.6v11.2C26.1 30.6 32 24 32 16z',
    tiktok: 'M24.4 7.5c-1.6-1-2.7-2.7-3-4.6V2h-3.7v14.7c0 2-1.7 3.7-3.7 3.7-1.4 0-2.6-.8-3.2-2-.4-.8-.5-1.7-.3-2.5.4-1.7 1.9-3 3.7-3 .4 0 .8 0 1.1.2v-3.8c-.4-.1-.7-.1-1.1-.1-3.9 0-7.1 3.2-7.1 7.1 0 2.4 1.2 4.6 3 5.9 1.2.8 2.6 1.3 4.1 1.3 3.9 0 7.1-3.2 7.1-7.1V8.7c1.6 1.1 3.6 1.8 5.7 1.8V7c-1.1 0-2.4-.5-3.6-1.2-.5-.3-.7-.6-1-1.1z',
  };
  return (
    <svg width={size} height={size} viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
      <path d={paths[kind]} />
    </svg>
  );
}

function FooterVib({ social }) {
  const links = [
    { kind: 'whatsapp', label: 'WhatsApp', href: `https://wa.me/${(social?.whatsapp || '').replace(/[^0-9]/g, '')}`, color: '#25D366' },
    { kind: 'instagram', label: 'Instagram', href: `https://instagram.com/${(social?.instagram || '').replace('@', '')}`, color: '#E5237B' },
    { kind: 'facebook', label: 'Facebook', href: `https://facebook.com/${social?.facebook || ''}`, color: '#1877F2' },
    { kind: 'tiktok', label: 'TikTok', href: `https://tiktok.com/@${(social?.tiktok || '').replace('@', '')}`, color: '#000' },
  ];
  return (
    <section style={{ padding: '60px 48px 40px', background: 'var(--cd-cream)', borderTop: '1px solid var(--cd-line)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 40, alignItems: 'center' }}>
        <div>
          <img src="assets/logo-transparent.png" alt="CreArDi — Taller creativo de detalles personalizados en Cali" style={{ height: 70, display: 'block', marginBottom: 16 }} />
          <p style={{ fontSize: 14, color: 'var(--cd-ink-soft)', margin: 0, maxWidth: 360, lineHeight: 1.5 }}>
            Taller creativo en Cali. Corte láser, sublimación, impresión 3D y troquelado craft.
          </p>
        </div>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'flex-end', flexWrap: 'wrap' }}>
          {links.map(l => (
            <a key={l.kind} href={l.href} target="_blank" rel="noopener" style={{
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '12px 18px', borderRadius: 999,
              background: 'white', border: '1px solid var(--cd-line)',
              color: l.color, fontWeight: 600, fontSize: 14, textDecoration: 'none',
            }}>
              <SocialIcon kind={l.kind} size={16} />
              <span style={{ color: 'var(--cd-ink)' }}>{l.label}</span>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function CTAVib({ social }) {
  const s = social || {};
  const wa = `https://wa.me/${(s.whatsapp || '').replace(/[^0-9]/g, '')}`;
  const ig = `https://instagram.com/${(s.instagram || '').replace('@', '')}`;
  return (
    <section id="contacto" style={{ padding: '120px 48px', background: 'var(--cd-ink)', color: 'white', position: 'relative', overflow: 'hidden' }}>
      <Splat color="var(--cd-magenta)" size={200} style={{ position: 'absolute', top: -40, left: '5%', opacity: 0.4 }} />
      <Splat color="var(--cd-orange)" size={150} style={{ position: 'absolute', bottom: 30, right: '8%', opacity: 0.4 }} />
      <Splat color="var(--cd-turquoise)" size={90} style={{ position: 'absolute', top: '50%', right: '40%', opacity: 0.3 }} />
      <div style={{ maxWidth: 900, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <Reveal>
          <h2 style={{ fontFamily: "'Bricolage Grotesque', serif", fontSize: 80, fontWeight: 700, letterSpacing: '-0.035em', lineHeight: 0.95, margin: 0 }}>
            ¿Tienes una idea?<br/>
            <span style={{ fontStyle: 'italic', color: 'var(--cd-yellow)' }}>Escríbenos.</span>
          </h2>
          <p style={{ fontSize: 19, color: 'rgba(255,255,255,0.7)', marginTop: 24, maxWidth: 560, marginInline: 'auto' }}>
            Respondemos cada mensaje personalmente. Cotización y diseño previo gratis.
          </p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 40, flexWrap: 'wrap' }}>
            <a href={wa} style={{
              background: 'var(--cd-yellow)', color: 'var(--cd-ink)',
              padding: '18px 32px', borderRadius: 999,
              fontWeight: 700, fontSize: 17, border: 'none', cursor: 'pointer',
              display: 'inline-flex', alignItems: 'center', gap: 10,
              textDecoration: 'none',
            }}>
              <span style={{ width: 10, height: 10, borderRadius: '50%', background: 'var(--cd-magenta)' }} />
              WhatsApp directo
            </a>
            <a href={ig} target="_blank" rel="noopener" style={{
              background: 'transparent', color: 'white',
              padding: '18px 32px', borderRadius: 999,
              fontWeight: 600, fontSize: 17,
              border: '1.5px solid rgba(255,255,255,0.3)', cursor: 'pointer',
              textDecoration: 'none',
            }}>
              Ver Instagram
            </a>
          </div>
        </Reveal>
      </div>
      <div style={{ borderTop: '1px solid rgba(255,255,255,0.1)', marginTop: 100, paddingTop: 32, fontFamily: "'Geist Mono', monospace", fontSize: 12, color: 'rgba(255,255,255,0.5)', display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, textTransform: 'uppercase', letterSpacing: '0.08em' }}>
        <span>© 2026 CreArDi · Cali, Colombia</span>
        <span>Creación · Arte · Diseño</span>
      </div>
    </section>
  );
}

function StyleVibrante({ social, gallery, hero }) {
  const s = social || { whatsapp: '+57 300 000 0000', instagram: '@creardi.cali', facebook: 'creardi.cali', tiktok: '@creardi.cali' };
  return (
    <div style={vibStyles.root}>
      <NavVib social={s} />
      <HeroVib social={s} hero={hero} />
      <ServicesVib />
      <GalleryVib gallery={gallery} />
      <ProcessVib />
      <CTAVib social={s} />
      <FooterVib social={s} />
    </div>
  );
}

window.StyleVibrante = StyleVibrante;