// Booking modal — mock Calendly UI
const BookingModal = ({ t, onClose }) => {
  const [date, setDate] = React.useState(null);
  const [time, setTime] = React.useState(null);
  const [confirmed, setConfirmed] = React.useState(false);
  const [monthOffset, setMonthOffset] = React.useState(0);

  const today = new Date(2026, 4, 12); // May 12, 2026
  const view = new Date(today.getFullYear(), today.getMonth() + monthOffset, 1);
  const monthName = view.toLocaleString(t === window.CONTENT.es ? 'es-CL' : 'en-US', { month: 'long', year: 'numeric' });
  const daysInMonth = new Date(view.getFullYear(), view.getMonth() + 1, 0).getDate();
  const firstDay = (view.getDay() + 6) % 7; // Mon-first
  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push({ empty: true });
  for (let d = 1; d <= daysInMonth; d++) {
    const dt = new Date(view.getFullYear(), view.getMonth(), d);
    const isPast = dt < new Date(today.getFullYear(), today.getMonth(), today.getDate());
    const dow = dt.getDay();
    const isWeekend = dow === 0 || dow === 6;
    cells.push({ d, disabled: isPast || isWeekend });
  }

  const times = ["09:00", "10:30", "12:00", "14:30", "16:00", "17:30"];
  const dayLabels = (t === window.CONTENT.es) ? ['L','M','M','J','V','S','D'] : ['M','T','W','T','F','S','S'];

  const fmtSelected = () => {
    if (!date) return '';
    const dt = new Date(view.getFullYear(), view.getMonth(), date);
    return dt.toLocaleDateString(t === window.CONTENT.es ? 'es-CL' : 'en-US', { weekday: 'long', day: 'numeric', month: 'long' });
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <h3>{t.modal.title}</h3>
            <p className="muted" style={{ fontSize: 14 }}>{t.modal.sub}</p>
          </div>
          <button className="modal-close" onClick={onClose}><Icon name="close" size={16}/></button>
        </div>
        <div className="modal-body">
          {confirmed ? (
            <div style={{ textAlign: 'center', padding: '32px 0' }}>
              <div style={{ width: 64, height: 64, borderRadius: 999, background: 'var(--bg-pastel-violet)', color: 'var(--accent-primary)', display: 'inline-flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}><Icon name="check" size={28}/></div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 22, marginBottom: 8 }}>{t.modal.confirmed}</h3>
              <p className="muted" style={{ fontSize: 14 }}>{fmtSelected()} · {time} · {t.modal.tz}</p>
            </div>
          ) : (
            <div className="cal-grid">
              <div>
                <div className="cal-month">
                  <span style={{ textTransform: 'capitalize' }}>{monthName}</span>
                  <div style={{ display: 'flex', gap: 6 }}>
                    <button onClick={() => setMonthOffset(Math.max(0, monthOffset - 1))} disabled={monthOffset === 0} style={{ opacity: monthOffset === 0 ? 0.3 : 1 }}><Icon name="chevLeft" size={14}/></button>
                    <button onClick={() => setMonthOffset(monthOffset + 1)}><Icon name="chevRight" size={14}/></button>
                  </div>
                </div>
                <div className="cal-days">{dayLabels.map((d, i) => <span key={i}>{d}</span>)}</div>
                <div className="cal-cells">
                  {cells.map((c, i) => (
                    c.empty ? <div key={i} className="cal-cell empty" /> :
                    <button key={i} className={`cal-cell ${c.disabled ? 'disabled' : 'avail'} ${date === c.d ? 'selected' : ''}`} disabled={c.disabled} onClick={() => { setDate(c.d); setTime(null); }}>{c.d}</button>
                  ))}
                </div>
                <p className="mono" style={{ fontSize: 11, color: 'var(--text-muted)', marginTop: 14 }}>{t.modal.tz}</p>
              </div>
              <div className="cal-times">
                <h4>{date ? t.modal.pickTime : t.modal.pickDate}</h4>
                {date && times.map((tm, i) => (
                  <button key={i} className={`cal-time ${time === tm ? 'picked' : ''}`} onClick={() => setTime(tm)}>{tm}</button>
                ))}
                {date && time && (
                  <div className="cal-confirm">
                    <div style={{ fontSize: 13, color: 'var(--text-secondary)', marginBottom: 10 }}>{fmtSelected()} · {time}</div>
                    <button className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }} onClick={() => setConfirmed(true)}>{t.modal.confirm}<Icon name="arrow" size={14}/></button>
                  </div>
                )}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

// Tweaks panel
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "es",
  "hero": "split",
  "density": "standard",
  "pastel": "subtle",
  "accent": "blue"
}/*EDITMODE-END*/;

const App = () => {
  const [tweaks, setTweak] = window.useTweaks ? window.useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];
  const [modalOpen, setModalOpen] = React.useState(false);
  const lang = tweaks.lang;
  const setLang = (l) => setTweak('lang', l);
  const content = window.CONTENT[lang];

  React.useEffect(() => {
    document.documentElement.setAttribute('data-density', tweaks.density);
    document.documentElement.setAttribute('data-pastel', tweaks.pastel);
    document.documentElement.setAttribute('data-hero', tweaks.hero);
    document.documentElement.setAttribute('lang', lang);
    const accents = {
      blue:   { p: '#1E40AF', ph: '#1D4ED8' },
      violet: { p: '#6D28D9', ph: '#7C3AED' },
      cyan:   { p: '#0E7490', ph: '#0891B2' },
      ink:    { p: '#0A0A1F', ph: '#1E1E3A' },
    };
    const a = accents[tweaks.accent] || accents.blue;
    document.documentElement.style.setProperty('--accent-primary', a.p);
    document.documentElement.style.setProperty('--accent-primary-hover', a.ph);
  }, [tweaks]);

  return (
    <>
      <Nav t={content} lang={lang} setLang={setLang} onBook={() => setModalOpen(true)} />
      <main>
        <Hero t={content} onBook={() => setModalOpen(true)} />
        <Problema t={content} />
        <Solucion t={content} />
        <Servicios t={content} />
        <Industrias t={content} />
        <Metodo t={content} />
        <Caso t={content} />
        <Diferencial t={content} />
        <Insights t={content} />
        <CTAFinal t={content} onBook={() => setModalOpen(true)} />
        <FAQ t={content} />
      </main>
      <Footer t={content} lang={lang} setLang={setLang} />
      {modalOpen && <BookingModal t={content} onClose={() => setModalOpen(false)} />}
      {window.TweaksPanel && (
        <window.TweaksPanel title="Tweaks">
          <window.TweakSection title="Idioma">
            <window.TweakRadio label="Lang" value={tweaks.lang} options={[{value:'es',label:'ES'},{value:'en',label:'EN'}]} onChange={(v) => setTweak('lang', v)} />
          </window.TweakSection>
          <window.TweakSection title="Hero">
            <window.TweakSelect label="Variante" value={tweaks.hero} options={[{value:'split',label:'Split + agentes'},{value:'centered',label:'Centrado'},{value:'editorial',label:'Editorial XL'}]} onChange={(v) => setTweak('hero', v)} />
          </window.TweakSection>
          <window.TweakSection title="Sistema">
            <window.TweakColor label="Acento" value={tweaks.accent} options={[
              {value:'blue', color:'#1E40AF'},
              {value:'violet', color:'#6D28D9'},
              {value:'cyan', color:'#0E7490'},
              {value:'ink', color:'#0A0A1F'},
            ]} onChange={(v) => setTweak('accent', v)} />
            <window.TweakRadio label="Pasteles" value={tweaks.pastel} options={[{value:'none',label:'Off'},{value:'subtle',label:'Subtle'},{value:'bold',label:'Bold'}]} onChange={(v) => setTweak('pastel', v)} />
            <window.TweakRadio label="Densidad" value={tweaks.density} options={[{value:'compact',label:'Compact'},{value:'standard',label:'Standard'},{value:'airy',label:'Airy'}]} onChange={(v) => setTweak('density', v)} />
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </>
  );
};

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