/* global React, ReactDOM, Hero, Services, Proceso, Gallery, Cobertura, Testimonios, Garantias, FAQ, Contacto, useReveal, useTweaks, TweaksPanel, TweakSection, TweakColor, TweakRadio, TweakToggle */
const { useEffect: aUseEffect, useState: aUseState } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#c87456",
  "theme": "light",
  "heroVariant": "editorial"
}/*EDITMODE-END*/;

const ACCENT_OPTIONS = [
  '#c87456', // terracota Málaga
  '#0a2540', // azul océano
  '#5a6b4a', // oliva
  '#0071e3', // azul Apple
];

const NAV_LINKS = [
  { href: '#servicios', label: 'Servicios' },
  { href: '#proceso',   label: 'Proceso' },
  { href: '#proyectos', label: 'Proyectos' },
  { href: '#opiniones', label: 'Opiniones' },
  { href: '#garantias', label: 'Garantías' },
  { href: '#faq',       label: 'Dudas' },
];

function PhoneIcon({ size = 14 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M20 15.5c-1.25 0-2.45-.2-3.57-.57-.35-.11-.74-.03-1.02.24l-2.2 2.2c-2.83-1.44-5.15-3.75-6.59-6.59l2.2-2.21c.27-.27.35-.66.24-1.02C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.5c0-.55-.45-1-1-1z"/>
    </svg>
  );
}

function WhatsAppIcon({ size = 17 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M17.5 14.4c-.3-.1-1.7-.8-2-.9-.3-.1-.5-.1-.7.1-.2.3-.8.9-1 1.1-.2.2-.4.2-.7.1-.3-.1-1.2-.4-2.3-1.4-.9-.8-1.4-1.7-1.6-2-.2-.3 0-.5.1-.6.1-.1.3-.4.4-.5.1-.2.2-.3.3-.5.1-.2 0-.4 0-.5 0-.1-.7-1.7-.9-2.3-.2-.6-.5-.5-.7-.5h-.6c-.2 0-.5.1-.8.4-.3.3-1 1-1 2.4 0 1.4 1 2.7 1.2 2.9.2.2 2 3 4.7 4.2.7.3 1.2.5 1.6.6.7.2 1.3.2 1.7.1.5-.1 1.7-.7 1.9-1.4.2-.7.2-1.2.2-1.4-.1-.1-.3-.2-.6-.4z"/>
      <path d="M20.5 3.5C18.3 1.2 15.3 0 12 0 5.4 0 0 5.4 0 12c0 2.1.6 4.2 1.7 6L0 24l6.2-1.6c1.7.9 3.7 1.4 5.8 1.4 6.6 0 12-5.4 12-12 0-3.2-1.3-6.2-3.5-8.3zM12 21.8c-1.9 0-3.7-.5-5.3-1.5l-.4-.2-3.7 1 1-3.6-.2-.4c-1-1.6-1.6-3.5-1.6-5.5C1.8 6.4 6.4 1.8 12 1.8c2.7 0 5.2 1 7.1 2.9 1.9 1.9 2.9 4.4 2.9 7.1.1 5.6-4.5 10-9.9 10z"/>
    </svg>
  );
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrolled, setScrolled] = aUseState(false);
  const [menuOpen, setMenuOpen] = aUseState(false);
  useReveal();

  aUseEffect(() => {
    document.documentElement.style.setProperty('--accent', t.accent);
    document.documentElement.setAttribute('data-theme', t.theme);
  }, [t.accent, t.theme]);

  aUseEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  aUseEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  aUseEffect(() => {
    const onKey = (e) => { if (e.key === 'Escape') setMenuOpen(false); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, []);

  const closeMenu = () => setMenuOpen(false);

  return (
    <>
      <nav className={"nav " + (scrolled ? 'scrolled' : '')}>
        <div className="nav-inner">
          <a className="brand" href="#inicio" onClick={closeMenu}>
            <img className="brand-logo" width="40" height="40" src="https://malaga.reformamostuhogar.es/wp-content/uploads/2026/03/Gemini_Generated_Image_hvg3ehvg3ehvg3eh-removebg-preview.png" alt="Reformamos Tu Hogar Málaga" />
            <span className="brand-text">
              <span className="brand-name">Reformamos Tu Hogar</span>
              <span className="brand-loc">Málaga · Costa del Sol</span>
            </span>
          </a>
          <div className="nav-links">
            {NAV_LINKS.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
          </div>
          <div className="nav-actions">
            <a href="tel:+34951239369" className="nav-cta nav-cta-call" aria-label="Llamar al 951 23 93 69">
              <PhoneIcon size={14} />
              <span className="nav-cta-num">951 23 93 69</span>
            </a>
            <button
              className="nav-burger"
              aria-label={menuOpen ? "Cerrar menú" : "Abrir menú"}
              aria-expanded={menuOpen}
              onClick={() => setMenuOpen(o => !o)}
            >
              <span className="nav-burger-bars">
                <span /><span /><span />
              </span>
            </button>
          </div>
        </div>
      </nav>

      {/* Mobile menu drawer */}
      <div className={"mobile-menu " + (menuOpen ? 'open' : '')} role="dialog" aria-modal={menuOpen} aria-hidden={!menuOpen}>
        <div className="mobile-menu-backdrop" onClick={closeMenu} />
        <div className="mobile-menu-panel">
          <div className="mobile-menu-head">
            <a className="brand" href="#inicio" onClick={closeMenu}>
              <img className="brand-logo" width="44" height="44" src="https://malaga.reformamostuhogar.es/wp-content/uploads/2026/03/Gemini_Generated_Image_hvg3ehvg3ehvg3eh-removebg-preview.png" alt="Reformamos Tu Hogar Málaga" />
              <span className="brand-text">
                <span className="brand-name">Reformamos Tu Hogar</span>
                <span className="brand-loc">Málaga · Costa del Sol</span>
              </span>
            </a>
            <button className="mobile-menu-close" aria-label="Cerrar menú" onClick={closeMenu}>×</button>
          </div>
          <nav className="mobile-menu-links" onClick={closeMenu}>
            {NAV_LINKS.map(l => <a key={l.href} href={l.href}>{l.label}</a>)}
            <a href="#contacto">Contacto</a>
          </nav>
          <div className="mobile-menu-ctas">
            <a href="tel:+34951239369" className="btn btn-primary" onClick={closeMenu}>
              <PhoneIcon size={16} /> 951 23 93 69
            </a>
            <a href="https://wa.me/34614790667" target="_blank" rel="noreferrer" className="btn btn-ghost" onClick={closeMenu}>
              WhatsApp · 614 79 06 67
            </a>
          </div>
          <div className="mobile-menu-trust">
            <div className="mobile-trust-item">
              <span className="mt-value stars">★★★★★</span>
              <span className="mt-label">Reseñas Google</span>
            </div>
            <div className="mobile-trust-item">
              <span className="mt-value">2019</span>
              <span className="mt-label">Calidad desde</span>
            </div>
            <div className="mobile-trust-item">
              <span className="mt-value">24-48h</span>
              <span className="mt-label">Presupuesto</span>
            </div>
          </div>
        </div>
      </div>

      <main>
        <Hero variant={t.heroVariant} />
        <Services />
        <Proceso />
        <Gallery />
        <Cobertura />
        <Testimonios />
        <Garantias />
        <FAQ />
        <Contacto />
      </main>

      <a className="google-rating-float" href="https://maps.google.com/?cid=12181362237813676095" target="_blank" rel="noreferrer" aria-label="5,0 estrellas en Google · 15 reseñas">
        <GoogleG size={26} />
        <span className="grf-body">
          <span className="grf-top">
            <span className="grf-num">5,0</span>
            <span className="grf-stars">★★★★★</span>
          </span>
          <span className="grf-count">15 reseñas en Google</span>
        </span>
      </a>

      <a className="call-float" href="tel:+34951239369" aria-label="Llamar 951 23 93 69">
        <PhoneIcon size={24} />
      </a>

      <a className="wa-float" href="https://wa.me/34614790667" target="_blank" rel="noreferrer" aria-label="WhatsApp 614 79 06 67">
        <WhatsAppIcon size={24} />
      </a>

      {/* Mobile sticky CTA bar */}
      <div className="mcta" role="region" aria-label="Acciones de contacto">
        <div className="mcta-row">
          <a className="mcta-btn mcta-call" href="tel:+34951239369" aria-label="Llamar 951 23 93 69">
            <PhoneIcon size={17} />
            <span className="mcta-btn-label">
              <span className="mcta-main">Llamar ahora</span>
              <span className="mcta-sub">951 23 93 69</span>
            </span>
          </a>
          <a className="mcta-btn mcta-wa" href="https://wa.me/34614790667" target="_blank" rel="noreferrer" aria-label="WhatsApp 614 79 06 67">
            <WhatsAppIcon size={17} />
            <span className="mcta-btn-label">
              <span className="mcta-main">WhatsApp</span>
              <span className="mcta-sub">Respuesta en min</span>
            </span>
          </a>
        </div>
      </div>

      <TweaksPanel title="Tweaks">
        <TweakSection label="Color de acento" />
        <TweakColor
          label="Acento de marca"
          value={t.accent}
          options={ACCENT_OPTIONS}
          onChange={(v) => setTweak('accent', v)}
        />
        <TweakSection label="Tema" />
        <TweakRadio
          label="Modo"
          value={t.theme}
          options={['light', 'dark']}
          onChange={(v) => setTweak('theme', v)}
        />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);