// App root + Tweaks panel

const { useState: uSA, useEffect: uEA } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "coralColor": "#EC6A4D",
  "inkColor": "#1A1410",
  "creamColor": "#FAF6F2",
  "heroHeadline": "Tu hogar en buenas manos.",
  "displayFont": "Fraunces",
  "showFAB": true
}/*EDITMODE-END*/;

function App() {
  const [tweaks, setTweaks] = uSA(TWEAK_DEFAULTS);
  const [editMode, setEditMode] = uSA(false);

  uEA(() => {
    document.documentElement.style.setProperty('--coral', tweaks.coralColor);
    document.documentElement.style.setProperty('--ink', tweaks.inkColor);
    document.documentElement.style.setProperty('--cream', tweaks.creamColor);
    document.documentElement.style.setProperty('--font-display', `'${tweaks.displayFont}', Georgia, serif`);
    document.body.style.background = tweaks.creamColor;
  }, [tweaks]);

  uEA(() => {
    const handler = (e) => {
      if (e.data?.type === '__activate_edit_mode') setEditMode(true);
      if (e.data?.type === '__deactivate_edit_mode') setEditMode(false);
    };
    window.addEventListener('message', handler);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', handler);
  }, []);

  const updateTweak = (key, val) => {
    setTweaks(t => ({ ...t, [key]: val }));
    window.parent.postMessage({ type: '__edit_mode_set_keys', edits: { [key]: val } }, '*');
  };

  const openWhatsapp = () => {
    window.open('https://wa.me/573001234567?text=' + encodeURIComponent('Hola Homli, me gustaría cotizar un servicio.'), '_blank');
  };
  const scrollToCotizar = () => {
    const el = document.getElementById('sec-3');
    if (!el) return;
    const top = el.getBoundingClientRect().top + window.pageYOffset - 20;
    window.scrollTo({ top, behavior: 'smooth' });
  };

  return (
    <>
      <Nav onCotizar={openWhatsapp} />
      <Hero onCotizar={scrollToCotizar} onWhatsapp={openWhatsapp} heroHeadline={tweaks.heroHeadline} />
      <Marquee />
      <BeforeAfter />
      <ServicesSection />
      <Cotizador onWhatsapp={openWhatsapp} />
      <HowItWorks />
      <WhyHomli />
      <FAQ />
      <FinalCTA onWhatsapp={openWhatsapp} />
      <Footer onWhatsapp={openWhatsapp} />
      {tweaks.showFAB && <WhatsappFAB onClick={openWhatsapp} />}

      {editMode && <TweaksPanel tweaks={tweaks} onChange={updateTweak} />}
    </>
  );
}

function TweaksPanel({ tweaks, onChange }) {
  return (
    <div style={{
      position: 'fixed', bottom: 100, right: 24, zIndex: 200,
      width: 280, background: 'var(--ink)', color: 'var(--cream)',
      borderRadius: 18, padding: 20, boxShadow: '0 24px 60px -12px rgba(0,0,0,0.4)',
      fontFamily: 'var(--font-body)',
    }}>
      <div style={{ fontSize: 12, textTransform: 'uppercase', letterSpacing: '0.1em', color: 'var(--coral-soft)', marginBottom: 14, fontWeight: 600 }}>Tweaks</div>

      <TweakRow label="Color principal">
        <input type="color" value={tweaks.coralColor} onChange={e => onChange('coralColor', e.target.value)}
          style={{ width: 40, height: 28, border: 'none', borderRadius: 6, cursor: 'pointer', background: 'transparent' }}/>
      </TweakRow>

      <TweakRow label="Tono de tinta">
        <input type="color" value={tweaks.inkColor} onChange={e => onChange('inkColor', e.target.value)}
          style={{ width: 40, height: 28, border: 'none', borderRadius: 6, cursor: 'pointer', background: 'transparent' }}/>
      </TweakRow>

      <TweakRow label="Fuente display">
        <select value={tweaks.displayFont} onChange={e => onChange('displayFont', e.target.value)}
          style={{
            background: 'var(--ink-2)', color: 'var(--cream)', border: '1px solid rgba(255,255,255,0.15)',
            borderRadius: 6, padding: '4px 8px', fontSize: 12, fontFamily: 'var(--font-body)',
          }}>
          <option value="Fraunces">Fraunces</option>
          <option value="Instrument Serif">Instrument Serif</option>
          <option value="Playfair Display">Playfair Display</option>
          <option value="DM Serif Display">DM Serif Display</option>
        </select>
      </TweakRow>

      <TweakRow label="FAB WhatsApp">
        <button onClick={() => onChange('showFAB', !tweaks.showFAB)}
          style={{
            width: 36, height: 20, borderRadius: 999,
            background: tweaks.showFAB ? 'var(--coral)' : 'rgba(255,255,255,0.2)',
            border: 'none', cursor: 'pointer', position: 'relative',
            transition: 'background 0.2s',
          }}>
          <span style={{
            position: 'absolute', top: 2, left: tweaks.showFAB ? 18 : 2,
            width: 16, height: 16, borderRadius: '50%', background: 'white',
            transition: 'left 0.2s',
          }}/>
        </button>
      </TweakRow>

      <div style={{ marginTop: 12 }}>
        <div style={{ fontSize: 10, color: 'rgba(250,246,242,0.5)', marginBottom: 6, textTransform: 'uppercase', letterSpacing: '0.1em' }}>Titular hero</div>
        <textarea value={tweaks.heroHeadline} onChange={e => onChange('heroHeadline', e.target.value)}
          rows={2}
          style={{
            width: '100%', background: 'var(--ink-2)', color: 'var(--cream)',
            border: '1px solid rgba(255,255,255,0.15)', borderRadius: 6,
            padding: 8, fontSize: 12, resize: 'none', fontFamily: 'var(--font-body)',
          }}/>
      </div>
    </div>
  );
}

function TweakRow({ label, children }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10, fontSize: 12 }}>
      <span style={{ color: 'rgba(250,246,242,0.7)' }}>{label}</span>
      {children}
    </div>
  );
}

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