// Main App
const { useState, useEffect, useMemo, useRef } = React;
const D = window.SITE_DATA;

// ============ NAV ============
const Nav = () => (
  <nav className="nav">
    <div className="nav-brand">
      <span className="dot"></span>
      <span className="nav-brand-text">
        <span className="nav-brand-name">Solange de Castro</span>
        <span className="nav-brand-sep" aria-hidden="true">|</span>
        <span className="nav-brand-role">Psicanalista &amp; Hipnoterapeuta</span>
      </span>
    </div>
    <div className="nav-links">
      <a href="#sobre" className="nav-link">Sobre</a>
      <a href="#abordagens" className="nav-link">Abordagens</a>
      <a href="#processo" className="nav-link">Processo</a>
      <a href="#formacao" className="nav-link">Formação</a>
      <a href="#faq" className="nav-link">FAQ</a>
    </div>
    <a href="#agendar" className="nav-cta">
      Agendar
      <Icon.arrow />
    </a>
  </nav>
);

// ============ HERO ============
const Hero = () => (
  <section className="hero" id="hero">
    <div className="hero-mesh"><GradientMesh intensity={1} /></div>
    <div className="hero-grid" />
    <div className="container">
      <div className="hero-inner">
        <div>
          <Reveal><div className="eyebrow hero-eyebrow">{D.hero.eyebrow}</div></Reveal>
          <WordReveal as="h1" className="hero-title word-reveal">{D.hero.title}</WordReveal>
          <Reveal delay={2}>
            <p className="hero-sub" dangerouslySetInnerHTML={{ __html: D.hero.sub }} />
          </Reveal>
          <Reveal delay={3}>
            <div className="hero-actions">
              <a href="#agendar" className="btn btn-primary">
                Agendar conversa inicial
                <span className="btn-arrow"><Icon.arrow /></span>
              </a>
              <a href="#sobre" className="btn btn-secondary">
                Conhecer o trabalho
                <span className="btn-arrow"><Icon.arrow /></span>
              </a>
            </div>
          </Reveal>
          <Reveal delay={4}>
            <div className="hero-meta">
              {D.hero.metaItems.map((m, i) => (
                <div key={i} className="hero-meta-item">
                  <div className="num">{m.num}</div>
                  <div className="lbl">{m.lbl}</div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>

        <Reveal delay={2}>
          <div className="hero-portrait">
            <div className="label">retrato · solange de castro</div>
            <div className="corners" />
            <div className="placeholder-text">[ inserir foto profissional ]</div>
            <div className="floating-tag tag-1">
              <span className="icon"><Icon.lock /></span>
              Sigilo absoluto
            </div>
            <div className="floating-tag tag-2">
              <span className="icon"><Icon.globe /></span>
              Online & Presencial
            </div>
            <div className="floating-tag tag-3">
              <span className="icon"><Icon.chat /></span>
              Acolhimento
            </div>
          </div>
        </Reveal>
      </div>

      <Reveal delay={4}>
        <div className="marquee">
          <div className="marquee-track">
            <span>
              {Array(2).fill(0).map((_, k) => (
                <React.Fragment key={k}>
                  <em style={{ fontStyle: 'italic' }}>escutar</em><span className="sep" />
                  <span>acolher</span><span className="sep" />
                  <em style={{ fontStyle: 'italic' }}>traduzir</em><span className="sep" />
                  <span>elaborar</span><span className="sep" />
                  <em style={{ fontStyle: 'italic' }}>integrar</em><span className="sep" />
                  <span>habitar</span><span className="sep" />
                </React.Fragment>
              ))}
            </span>
          </div>
        </div>
      </Reveal>
    </div>
  </section>
);

// ============ SOBRE ============
const About = () => (
  <section id="sobre">
    <div className="container">
      <div className="about-grid">
        <Reveal>
          <div className="about-img">
            <div className="label">solange de castro · orlando</div>
          </div>
        </Reveal>
        <div>
          <Reveal><div className="eyebrow">{D.about.eyebrow}</div></Reveal>
          <WordReveal as="h2" className="section-title word-reveal">{D.about.title}</WordReveal>
          <div className="about-body">
            {D.about.paragraphs.map((p, i) => (
              <Reveal key={i} delay={(i + 1)}>
                <p dangerouslySetInnerHTML={{ __html: p }} />
              </Reveal>
            ))}
            <Reveal delay={4}><div className="signature">{D.about.signature}</div></Reveal>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// ============ ABORDAGENS ============
const Approaches = () => (
  <section id="abordagens" className="approaches">
    <div className="container">
      <Reveal><div className="eyebrow">02 — Abordagens</div></Reveal>
      <WordReveal as="h2" className="section-title word-reveal">{["Três caminhos,", "uma mesma", { it: "escuta." }]}</WordReveal>
      <div className="approach-grid">
        {D.approaches.map((a, i) => {
          const IconComp = Icon[a.icon];
          return (
            <Reveal key={i} delay={i + 1}>
              <div className="approach-card">
                <div className="approach-num">
                  <span>{a.num}</span>
                  <span className="approach-icon">{IconComp && <IconComp />}</span>
                </div>
                <h3 className="approach-name">{a.name}</h3>
                <p className="approach-desc">{a.desc}</p>
                <div className="approach-tags">
                  {a.tags.map((t, j) => <span key={j} className="approach-tag">{t}</span>)}
                </div>
              </div>
            </Reveal>
          );
        })}
      </div>
    </div>
  </section>
);

// ============ PARA QUEM ============
const ForWhom = () => (
  <section id="para-quem">
    <div className="container">
      <div className="for-whom">
        <div>
          <Reveal><div className="eyebrow">03 — Para quem é</div></Reveal>
          <WordReveal as="h2" className="section-title word-reveal">{["Se algo aqui", "te", { it: "atravessa," }, "podemos conversar."]}</WordReveal>
          <Reveal delay={2}>
            <p className="lede" style={{ marginTop: 24 }}>
              Não é uma lista de diagnósticos — é o que escuto com mais frequência no consultório. Se reconheceu algo do seu momento, é convite suficiente.
            </p>
          </Reveal>
        </div>
        <Reveal delay={1}>
          <div className="fw-list">
            {D.forWhom.map((f, i) => (
              <div key={i} className="fw-item">
                <span className="num">{f.num}</span>
                <span className="name">{f.name}</span>
                <span className="hint">{f.hint}</span>
              </div>
            ))}
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

// ============ COMO FUNCIONA ============
const How = () => (
  <section id="processo" className="how">
    <div className="how-mesh"><GradientMesh intensity={0.6} /></div>
    <div className="container">
      <Reveal><div className="eyebrow">04 — Como funciona</div></Reveal>
      <WordReveal as="h2" className="section-title word-reveal">{["O processo,", "passo a", { it: "passo." }]}</WordReveal>
      <div className="how-steps">
        {D.steps.map((s, i) => (
          <Reveal key={i} delay={i + 1}>
            <div className="how-step">
              <div className="step-num">{s.num}</div>
              <h3 className="step-name">{s.name}</h3>
              <p className="step-desc">{s.desc}</p>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

// ============ DIPLOMAS ============
const Diplomas = () => (
  <section id="formacao">
    <div className="container">
      <Reveal><div className="eyebrow">05 — Formação</div></Reveal>
      <WordReveal as="h2" className="section-title word-reveal">{["Estudo contínuo,", "rigor", { it: "clínico." }]}</WordReveal>
      <Reveal delay={2}>
        <p className="lede" style={{ marginTop: 24, maxWidth: '60ch' }}>
          A escuta acontece pela presença, mas se sustenta no estudo. Esses são os passos formais que organizam minha prática.
        </p>
      </Reveal>
      <div className="diplomas-list">
        {D.diplomas.map((d, i) => (
          <Reveal key={i}>
            <div className="diploma">
              <span className="dp-num">{d.num}</span>
              <span className="dp-title">{d.title}</span>
              <span className="dp-inst">{d.inst}</span>
              <span className="dp-year">{d.year}</span>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

// ============ DEPOIMENTOS ============
const Testimonials = () => (
  <section className="testimonials">
    <div className="container">
      <Reveal><div className="eyebrow">06 — Quem viveu</div></Reveal>
      <WordReveal as="h2" className="section-title word-reveal">{["O que dizem", "as", { it: "travessias." }]}</WordReveal>
      <div className="test-grid">
        {D.testimonials.map((t, i) => (
          <Reveal key={i} delay={i + 1}>
            <div className="test-card">
              <div className="test-quote-mark">"</div>
              <p className="test-text">{t.text}</p>
              <div className="test-author">
                <div className="test-avatar">{t.initials}</div>
                <div className="test-meta">
                  <span className="test-name">{t.name}</span>
                  <span className="test-role">{t.role}</span>
                </div>
              </div>
            </div>
          </Reveal>
        ))}
      </div>
    </div>
  </section>
);

// ============ FAQ ============
const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section id="faq">
      <div className="container">
        <div className="faq">
          <div>
            <Reveal><div className="eyebrow">07 — FAQ</div></Reveal>
            <WordReveal as="h2" className="section-title word-reveal">{["Perguntas que", "costumam", { it: "chegar." }]}</WordReveal>
            <Reveal delay={2}>
              <p className="lede" style={{ marginTop: 24 }}>
                Não encontrou o que precisa? Me escreva. Respondo pessoalmente, em até 24h.
              </p>
            </Reveal>
          </div>
          <Reveal delay={1}>
            <div className="faq-list">
              {D.faq.map((f, i) => (
                <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
                  <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)}>
                    <span>{f.q}</span>
                    <span className="icon" />
                  </button>
                  <div className="faq-a">
                    <div className="faq-a-inner">{f.a}</div>
                  </div>
                </div>
              ))}
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

// ============ AGENDAR (CALENDAR) ============
const monthNames = ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'];
const weekdays = ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb'];

// Generate fake availability — weekdays only, certain times
const getSlots = (date, modality) => {
  const dow = date.getDay();
  if (dow === 0 || dow === 6) return []; // weekend
  // pseudo-random based on date
  const seed = date.getDate() + date.getMonth() * 31;
  const allSlots = ['09:00','10:00','11:00','13:00','14:00','15:00','16:00','17:00','18:00'];
  const out = [];
  allSlots.forEach((s, i) => {
    if ((seed + i) % 3 !== 0) out.push(s);
  });
  if (modality === 'presencial') {
    // fewer slots in-person
    return out.filter((_, i) => i % 2 === 0);
  }
  return out;
};

const Booking = () => {
  const today = new Date();
  today.setHours(0,0,0,0);
  const [view, setView] = useState({ y: today.getFullYear(), m: today.getMonth() });
  const [selectedDate, setSelectedDate] = useState(null);
  const [selectedTime, setSelectedTime] = useState(null);
  const [modality, setModality] = useState('online');

  const days = useMemo(() => {
    const first = new Date(view.y, view.m, 1);
    const last = new Date(view.y, view.m + 1, 0);
    const startDow = first.getDay();
    const result = [];
    for (let i = 0; i < startDow; i++) result.push(null);
    for (let d = 1; d <= last.getDate(); d++) {
      const date = new Date(view.y, view.m, d);
      result.push(date);
    }
    return result;
  }, [view]);

  const slots = selectedDate ? getSlots(selectedDate, modality) : [];

  const navigateMonth = (delta) => {
    const next = new Date(view.y, view.m + delta, 1);
    setView({ y: next.getFullYear(), m: next.getMonth() });
    setSelectedDate(null);
    setSelectedTime(null);
  };

  const dateLabel = selectedDate
    ? `${selectedDate.getDate()} ${monthNames[selectedDate.getMonth()].slice(0,3).toLowerCase()}`
    : '—';

  const canConfirm = selectedDate && selectedTime;

  return (
    <section id="agendar" className="book">
      <div className="container">
        <Reveal><div className="eyebrow">08 — Agendar</div></Reveal>
        <WordReveal as="h2" className="section-title word-reveal">{["Escolha um dia", "para", { it: "começar." }]}</WordReveal>
        <Reveal delay={2}>
          <p className="lede" style={{ marginTop: 24, maxWidth: '60ch' }}>
            A primeira conversa tem 30 minutos e não tem custo. É um espaço para nos conhecermos e decidirmos juntas se faz sentido seguir.
          </p>
        </Reveal>

        <div className="book-grid">
          <Reveal>
            <div className="book-info">
              <h3>Conversa inicial</h3>
              <p>30 minutos · gratuita · sem compromisso</p>

              <div className="modality-tabs">
                <button
                  className={`modality-tab ${modality === 'online' ? 'active' : ''}`}
                  onClick={() => { setModality('online'); setSelectedTime(null); }}>
                  Online
                </button>
                <button
                  className={`modality-tab ${modality === 'presencial' ? 'active' : ''}`}
                  onClick={() => { setModality('presencial'); setSelectedTime(null); }}>
                  Presencial
                </button>
              </div>

              <div className="book-summary">
                <div className="book-row">
                  <span className="lbl">Modalidade</span>
                  <span className="val">{modality === 'online' ? 'Vídeo seguro' : 'Orlando, FL'}</span>
                </div>
                <div className="book-row">
                  <span className="lbl">Data</span>
                  <span className={`val ${!selectedDate ? 'empty' : ''}`}>
                    {selectedDate ? `${selectedDate.getDate()} de ${monthNames[selectedDate.getMonth()]}` : 'a escolher'}
                  </span>
                </div>
                <div className="book-row">
                  <span className="lbl">Horário</span>
                  <span className={`val ${!selectedTime ? 'empty' : ''}`}>
                    {selectedTime || 'a escolher'}
                  </span>
                </div>

              </div>

              <button className="btn btn-primary book-cta" disabled={!canConfirm}>
                {canConfirm ? 'Confirmar agendamento' : 'Selecione data e horário'}
                <span className="btn-arrow"><Icon.arrow /></span>
              </button>
            </div>
          </Reveal>

          <Reveal delay={1}>
            <div className="calendar">
              <div className="cal-header">
                <div className="cal-title">{monthNames[view.m]} {view.y}</div>
                <div className="cal-nav">
                  <button className="cal-nav-btn" onClick={() => navigateMonth(-1)}><Icon.chevLeft /></button>
                  <button className="cal-nav-btn" onClick={() => navigateMonth(1)}><Icon.chevRight /></button>
                </div>
              </div>
              <div className="cal-weekdays">
                {weekdays.map((w) => <div key={w} className="cal-weekday">{w}</div>)}
              </div>
              <div className="cal-days">
                {days.map((d, i) => {
                  if (!d) return <div key={i} className="cal-day empty" />;
                  const isPast = d < today;
                  const isToday = d.getTime() === today.getTime();
                  const isSelected = selectedDate && selectedDate.getTime() === d.getTime();
                  const slotsCount = isPast ? 0 : getSlots(d, modality).length;
                  const available = !isPast && slotsCount > 0;
                  let cls = 'cal-day';
                  if (!available) cls += ' disabled';
                  if (available) cls += ' available';
                  if (isToday) cls += ' today';
                  if (isSelected) cls += ' selected';
                  return (
                    <button
                      key={i}
                      className={cls}
                      onClick={() => available && (setSelectedDate(d), setSelectedTime(null))}>
                      {d.getDate()}
                    </button>
                  );
                })}
              </div>

              <div className="cal-times">
                <div className="cal-times-header">
                  <span className="cal-times-title">Horários disponíveis</span>
                  <span className="cal-times-date">{dateLabel}</span>
                </div>
                {selectedDate ? (
                  slots.length > 0 ? (
                    <div className="cal-slots">
                      {slots.map((s) => (
                        <button
                          key={s}
                          className={`cal-slot ${selectedTime === s ? 'selected' : ''}`}
                          onClick={() => setSelectedTime(s)}>
                          {s}
                        </button>
                      ))}
                    </div>
                  ) : (
                    <div className="cal-empty">Sem horários neste dia</div>
                  )
                ) : (
                  <div className="cal-empty">Selecione uma data no calendário</div>
                )}
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
};

// ============ CONTATO ============
const Contact = () => (
  <section id="contato">
    <div className="container">
      <div className="contact-grid">
        <div>
          <Reveal><div className="eyebrow">09 — Contato</div></Reveal>
          <WordReveal as="h2" className="section-title word-reveal">{["Onde me", { it: "encontrar." }]}</WordReveal>
          <div className="contact-list">
            {D.contact.items.map((c, i) => (
              <Reveal key={i} delay={i % 4}>
                <div className="contact-item">
                  <span className="lbl">{c.lbl}</span>
                  <span className="val" dangerouslySetInnerHTML={{ __html: c.val }} />
                </div>
              </Reveal>
            ))}
          </div>
        </div>

        <Reveal delay={1}>
          <div className="map-card">
            <div className="map-bg" />
            <div className="map-grid" />
            <div className="map-pin">
              <div className="pin-pulse" />
              <div className="pin-dot" />
            </div>
            <div className="map-label">
              <div className="city">Lake Eola · Downtown</div>
              <div className="addr">1234 Lake Eola Dr, Suite 220 · Orlando, FL</div>
            </div>
          </div>
        </Reveal>
      </div>
    </div>
  </section>
);

// ============ FOOTER ============
const Footer = () => (
  <footer className="footer">
    <div className="footer-mesh"><GradientMesh intensity={0.4} /></div>
    <div className="container">
      <div className="footer-inner">
        <div>
          <h2 className="footer-brand">Solange<br/><span className="it">de Castro</span></h2>
          <p style={{fontFamily:'var(--mono)',fontSize:11,letterSpacing:'0.12em',textTransform:'uppercase',color:'rgba(244,238,251,0.5)',marginTop:8,marginBottom:24}}>Psicanalista · Hipnoterapeuta</p>
          <p className="footer-tag">Terapeuta, psicanalista e hipnoterapeuta. Atendimento presencial em Orlando e online para mulheres brasileiras em qualquer canto do mundo.</p>
        </div>
        <div className="footer-col">
          <h4>Navegar</h4>
          <a href="#sobre">Sobre</a>
          <a href="#abordagens">Abordagens</a>
          <a href="#processo">Processo</a>
          <a href="#formacao">Formação</a>
          <a href="#faq">FAQ</a>
          <a href="#agendar">Agendar</a>
        </div>
        <div className="footer-col">
          <h4>Contato</h4>
          <a href="#">+1 (407) 555-0142</a>
          <a href="mailto:contato@solangedecastro.com">contato@solangedecastro.com</a>
          <a href="#">Instagram</a>
          <a href="#">LinkedIn</a>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 — Solange de Castro · LMHC #MH19847</span>
        <span>Orlando, FL · USA</span>
      </div>
    </div>
  </footer>
);

// ============ TWEAKS ============
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "lilas-claro",
  "typography": "instrument-geist",
  "theme": "light",
  "animationIntensity": 1,
  "showParticles": true
}/*EDITMODE-END*/;

const palettes = {
  'lilas-claro': { name: 'Lilás claro', vars: { '--bg':'#FAF7FE','--bg-2':'#F4EEFB','--soft':'#E8DEF5','--soft-2':'#D9CDF0','--primary':'#A78BD9','--primary-2':'#8B6FC4','--deep':'#3D2B5C','--ink':'#1F1733' } },
  'lilas-saturado': { name: 'Lilás saturado', vars: { '--bg':'#F8F2FE','--bg-2':'#EFE3FB','--soft':'#DCC8F2','--soft-2':'#C4ABEC','--primary':'#9070D6','--primary-2':'#6B4FA8','--deep':'#2E1F4C','--ink':'#1A0F33' } },
  'lavanda-quente': { name: 'Lavanda quente', vars: { '--bg':'#FBF7FB','--bg-2':'#F4EBF3','--soft':'#E5D2E0','--soft-2':'#D2B5CD','--primary':'#B289B5','--primary-2':'#8E5C92','--deep':'#3F2845','--ink':'#231526' } },
  'lilas-fria': { name: 'Lilás fria', vars: { '--bg':'#F7F8FE','--bg-2':'#EBEDFB','--soft':'#D4D8F2','--soft-2':'#B5BCEC','--primary':'#7E8BD6','--primary-2':'#5867B8','--deep':'#1F2952','--ink':'#0F1733' } },
};

const typographies = {
  'instrument-geist': { name: 'Instrument + Geist', serif: "'Instrument Serif', Georgia, serif", sans: "'Geist', 'DM Sans', sans-serif" },
  'fraunces-mono': { name: 'Fraunces + DM Mono', serif: "'Fraunces', Georgia, serif", sans: "'DM Sans', sans-serif" },
  'editorial-new': { name: 'Cormorant + Geist', serif: "'Cormorant Garamond', Georgia, serif", sans: "'Geist', sans-serif" },
};

const Tweaks = () => {
  const [tweaks, setTweaks] = useTweaks(TWEAK_DEFAULTS);

  // apply palette
  useEffect(() => {
    const p = palettes[tweaks.palette];
    if (!p) return;
    const root = document.documentElement;
    Object.entries(p.vars).forEach(([k, v]) => root.style.setProperty(k, v));
  }, [tweaks.palette]);

  // apply typography
  useEffect(() => {
    const t = typographies[tweaks.typography];
    if (!t) return;
    document.documentElement.style.setProperty('--serif', t.serif);
    document.documentElement.style.setProperty('--sans', t.sans);
  }, [tweaks.typography]);

  // theme
  useEffect(() => {
    document.documentElement.dataset.theme = tweaks.theme === 'dark' ? 'dark' : 'light';
  }, [tweaks.theme]);

  return (
    <TweaksPanel title="Tweaks">
      <TweakSection label="Paleta">
        <TweakRadio
          value={tweaks.palette}
          onChange={(v) => setTweaks('palette', v)}
          options={Object.entries(palettes).map(([k, v]) => ({ value: k, label: v.name }))}
        />
      </TweakSection>
      <TweakSection label="Tipografia">
        <TweakRadio
          value={tweaks.typography}
          onChange={(v) => setTweaks('typography', v)}
          options={Object.entries(typographies).map(([k, v]) => ({ value: k, label: v.name }))}
        />
      </TweakSection>
      <TweakSection label="Tema">
        <TweakRadio
          value={tweaks.theme}
          onChange={(v) => setTweaks('theme', v)}
          options={[{ value: 'light', label: 'Claro' }, { value: 'dark', label: 'Escuro' }]}
        />
      </TweakSection>
      <TweakSection label="Animações">
        <TweakSlider
          label="Intensidade"
          value={tweaks.animationIntensity}
          onChange={(v) => setTweaks('animationIntensity', v)}
          min={0} max={2} step={0.1}
        />
        <TweakToggle
          label="Partículas conectadas"
          value={tweaks.showParticles}
          onChange={(v) => setTweaks('showParticles', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
};

// ============ MOBILE CTA ============
const MobileCTA = () => (
  <a href="#agendar" className="mobile-cta">
    Agendar conversa
    <span className="mobile-cta-arrow"><Icon.arrow /></span>
  </a>
);

// ============ APP ============
const App = () => (
  <>
    <Nav />
    <Hero />
    <About />
    <Approaches />
    <ForWhom />
    <How />
    <Diplomas />
    <Testimonials />
    <FAQ />
    <Booking />
    <Contact />
    <Footer />
    <MobileCTA />
    <Tweaks />
  </>
);

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