/* ====== App principal — funil de consulta ====== */
const { useState: useStateA, useEffect: useEffectA, useRef: useRefA } = React;

// >>> Configure aqui o WhatsApp de destino (formato internacional, só dígitos) <<<
const WHATSAPP_DEST = "5511965506829";

const PHOTOS = [
  "assets/antes-depois-1.jpg",
  "assets/antes-depois-2.jpg",
  "assets/antes-depois-3.jpg",
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "headingFont": "Cormorant Garamond",
  "uiFont": "Jost",
  "gold": ["#C9A14C", "#ECD498", "#AE7C28"],
  "bg": "#F5F0E8",
  "autoAdvance": true
}/*EDITMODE-END*/;

const MOTIVATION = [
  "Harmonização facial natural e preventiva",
  "Melhorar resultados de procedimentos anteriores",
  "Ainda estou pesquisando",
];
const CONCERNS = [
  "Flacidez e perda de contorno",
  "Rugas e linhas de expressão",
  "Bigode chinês e papada",
  "Olheiras e região dos olhos",
  "Manchas e textura da pele",
  "Lábios e região perioral",
  "Quero uma consulta geral",
];
const TIMELINE = [
  "Nas próximas semanas",
  "Nos próximos meses",
  "Ainda não decidi",
];

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const [screen, setScreen] = useStateA(0); // 0 welcome … 6 final
  const [data, setData] = useStateA({
    motivation: null,
    name: "",
    concerns: [],
    timeline: null,
    country: window.COUNTRIES[0],
    phone: "",
    email: "",
  });
  const set = (k, v) => setData(d => ({ ...d, [k]: v }));

  // apply theme tweaks
  useEffectA(() => {
    const r = document.documentElement;
    const [g1, g2, g3] = t.gold;
    r.style.setProperty("--gold-1", g1);
    r.style.setProperty("--gold-2", g2);
    r.style.setProperty("--gold-3", g3);
    r.style.setProperty("--gold-grad", `linear-gradient(135deg, ${g1} 0%, ${g2} 46%, ${g3} 100%)`);
    r.style.setProperty("--gold-soft", hexA(g3, 0.11));
    r.style.setProperty("--gold-line", hexA(g3, 0.42));
    r.style.setProperty("--gold-text", shade(g3, -0.28));
    r.style.setProperty("--bg", t.bg);
    r.style.setProperty("--bg-2", shade(t.bg, -0.05));
    r.style.setProperty("--font-display", `'${t.headingFont}', Georgia, serif`);
    r.style.setProperty("--font-ui", `'${t.uiFont}', system-ui, sans-serif`);
  }, [t.gold, t.bg, t.headingFont, t.uiFont]);

  const firstName = (data.name || "").trim().split(/\s+/)[0] || "";

  const go = (n) => setScreen(n);
  const next = () => setScreen(s => Math.min(s + 1, 5));
  const back = () => setScreen(s => Math.max(s - 1, 0));

  // single-select handler with optional auto-advance
  const pickSingle = (key, val) => {
    set(key, val);
    if (t.autoAdvance) setTimeout(() => next(), 360);
  };
  const toggleMulti = (val) => {
    setData(d => {
      const has = d.concerns.includes(val);
      return { ...d, concerns: has ? d.concerns.filter(x => x !== val) : [...d.concerns, val] };
    });
  };


  const STEP_OF = [null, 1, 2, 3, 4, 5];

  return (
    <div className="stage">
      <div className="shell">
        {screen >= 1 && screen <= 5 && (
          <React.Fragment>
            <div className="topbar">
              <button className="back" onClick={back} aria-label="Voltar"><Icon.back /></button>
              <div className="brandmark">
                <img src="assets/logo-tg.png" alt="Dra. Thayna Gonçalves" />
              </div>
              <div className="step-count">Etapa {STEP_OF[screen]} de 5</div>
            </div>
            <div className="track"><span style={{ width: (STEP_OF[screen] / 5 * 100) + "%" }} /></div>
          </React.Fragment>
        )}

        {/* ---------- 0 · WELCOME ---------- */}
        {screen === 0 && (
          <div className="welcome fade-step" key="w">
            <img className="logo" src="assets/logo-tg.png" alt="Dra. Thayna Gonçalves" />
            <p className="wordmark">Dra. Thayna Gonçalves</p>
            <p className="crosp">Harmonização Facial · CROSP 146879</p>
            <ResultsShowcase photos={PHOTOS} />
            <h1>O seu rosto conta uma história. Vamos garantir que ela seja a <em>mais bonita</em> possível.</h1>
            <p className="desc">A Dra. Thayna desenvolve protocolos personalizados com foco em naturalidade e equilíbrio. Responda algumas perguntas rápidas e entre em contato para agendar sua consulta.</p>
            <div className="cta-wrap">
              <button className="btn btn-gold btn-block" onClick={() => go(1)}>Começar</button>
              <div className="reassure"><Icon.spark /> Leva menos de 1 minuto</div>
            </div>
          </div>
        )}

        {/* ---------- 1 · MOTIVAÇÃO ---------- */}
        {screen === 1 && (
          <div className="body fade-step" key="s1">
            <p className="eyebrow">Motivação</p>
            <h2 className="q">O que te trouxe até aqui?</h2>
            <div className="options" style={{ marginTop: 4 }}>
              {MOTIVATION.map(o => (
                <Option key={o} label={o} selected={data.motivation === o} onClick={() => pickSingle("motivation", o)} />
              ))}
            </div>
            {!t.autoAdvance && (
              <div className="footer-actions">
                <button className="btn btn-gold btn-block" disabled={!data.motivation} onClick={next}>Continuar</button>
              </div>
            )}
          </div>
        )}

        {/* ---------- 2 · NOME ---------- */}
        {screen === 2 && (
          <div className="body fade-step" key="s2">
            <p className="eyebrow">Apresentação</p>
            <h2 className="q">Como você gostaria de ser chamado(a)?</h2>
            <div className="field" style={{ marginTop: 10 }}>
              <input
                className="text-input"
                placeholder="Seu nome"
                value={data.name}
                onChange={e => set("name", e.target.value)}
                onKeyDown={e => { if (e.key === "Enter" && data.name.trim()) next(); }}
                autoFocus
              />
            </div>
            <div className="footer-actions">
              <button className="btn btn-gold btn-block" disabled={!data.name.trim()} onClick={next}>Continuar</button>
            </div>
          </div>
        )}

        {/* ---------- 3 · PREOCUPAÇÕES ---------- */}
        {screen === 3 && (
          <div className="body fade-step" key="s3">
            <p className="eyebrow">Preocupações</p>
            <h2 className="q">{firstName ? <React.Fragment><span className="accent">{firstName}</span>, o</React.Fragment> : "O"} que mais te incomoda no seu rosto hoje?</h2>
            <div className="hint"><Icon.info /> Você pode marcar mais de uma opção.</div>
            <div className="options">
              {CONCERNS.map(o => (
                <Option key={o} label={o} multi selected={data.concerns.includes(o)} onClick={() => toggleMulti(o)} />
              ))}
            </div>
            <div className="footer-actions">
              <button className="btn btn-gold btn-block" disabled={!data.concerns.length} onClick={next}>Continuar</button>
            </div>
          </div>
        )}

        {/* ---------- 4 · PRAZO ---------- */}
        {screen === 4 && (
          <div className="body fade-step" key="s4">
            <p className="eyebrow">Prazo</p>
            <h2 className="q">{firstName ? <React.Fragment><span className="accent">{firstName}</span>, quando</React.Fragment> : "Quando"} você pretende iniciar seu tratamento?</h2>
            <div className="options" style={{ marginTop: 4 }}>
              {TIMELINE.map(o => (
                <Option key={o} label={o} selected={data.timeline === o} onClick={() => pickSingle("timeline", o)} />
              ))}
            </div>
            {!t.autoAdvance && (
              <div className="footer-actions">
                <button className="btn btn-gold btn-block" disabled={!data.timeline} onClick={next}>Continuar</button>
              </div>
            )}
          </div>
        )}

        {/* ---------- 5 · CONTATO ---------- */}
        {screen === 5 && (
          <div className="body fade-step" key="s5">
            <p className="eyebrow">Último passo</p>
            <h2 className="q">Consulta com a Dra. Thayna Gonçalves</h2>
            <div className="price-card">
              <div className="pc-icon"><Icon.tag /></div>
              <div>
                <div className="pc-amt">Consulta <b>R$ 180,00</b></div>
                <div className="pc-note">Valor abatido integralmente do protocolo se o tratamento começar no mesmo dia.</div>
              </div>
            </div>
            <p className="sub" style={{ marginTop: -8 }}>Deixe seu WhatsApp e e-mail para que a Dra. Thayna entre em contato para agendar.</p>
            <form action="obrigado.html" method="GET" name="Consulta - Dra. Thayna Gonçalves">
              <input type="text" name="full_name" value={data.name} onChange={() => {}} className="ghl-field" tabIndex={-1} aria-hidden="true" />
              <input type="tel"  name="phone"     value={data.country.d + data.phone} onChange={() => {}} className="ghl-field" tabIndex={-1} aria-hidden="true" />
              <input type="hidden" name="motivacao" value={data.motivation || ""} />
              <input type="hidden" name="preocupacoes" value={data.concerns.join("|")} />
              <input type="hidden" name="prazo" value={data.timeline || ""} />
              <PhonePicker
                country={data.country}
                setCountry={c => set("country", c)}
                phone={data.phone}
                setPhone={v => set("phone", v)}
                onEnter={() => {}}
              />
              <div className="field" style={{ marginTop: 10 }}>
                <input
                  className="text-input"
                  type="email"
                  name="email"
                  placeholder="Seu e-mail"
                  value={data.email}
                  onChange={e => set("email", e.target.value)}
                />
              </div>
              <div className="footer-actions">
                <input
                  type="submit"
                  className="btn btn-gold btn-block"
                  value="Quero minha consulta"
                  disabled={!phoneOk(data.phone) || !emailOk(data.email)}
                />
              </div>
            </form>
          </div>
        )}

        {/* ---------- Tweaks ---------- */}
        <TweaksPanel>
          <TweakSection label="Tipografia" />
          <TweakSelect label="Fonte títulos" value={t.headingFont}
            options={["Cormorant Garamond", "Playfair Display", "EB Garamond"]}
            onChange={v => setTweak("headingFont", v)} />
          <TweakRadio label="Fonte interface" value={t.uiFont}
            options={["Jost", "Montserrat", "Poppins"]}
            onChange={v => setTweak("uiFont", v)} />
          <TweakSection label="Cores" />
          <TweakColor label="Dourado" value={t.gold}
            options={[
              ["#C9A14C", "#ECD498", "#AE7C28"],
              ["#B8924E", "#E4CB9A", "#8C6A2A"],
              ["#C28F5E", "#E9C49B", "#9A6438"],
              ["#A88B5C", "#DCC79C", "#7E633A"],
            ]}
            onChange={v => setTweak("gold", v)} />
          <TweakColor label="Fundo" value={t.bg}
            options={["#F5F0E8", "#F4EFEA", "#F2EEE6", "#FBF8F3"]}
            onChange={v => setTweak("bg", v)} />
          <TweakSection label="Comportamento" />
          <TweakToggle label="Avançar automático" value={t.autoAdvance}
            onChange={v => setTweak("autoAdvance", v)} />
        </TweaksPanel>
      </div>
    </div>
  );
}

function phoneOk(p) { return (p || "").replace(/\D/g, "").length >= 8; }
function emailOk(e) { return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(e || ""); }

// color helpers
function hexA(hex, a) {
  const { r, g, b } = toRGB(hex);
  return `rgba(${r}, ${g}, ${b}, ${a})`;
}
function shade(hex, amt) {
  let { r, g, b } = toRGB(hex);
  const f = (c) => Math.max(0, Math.min(255, Math.round(c + (amt < 0 ? c * amt : (255 - c) * amt))));
  r = f(r); g = f(g); b = f(b);
  return "#" + [r, g, b].map(c => c.toString(16).padStart(2, "0")).join("");
}
function toRGB(hex) {
  const h = hex.replace("#", "");
  return { r: parseInt(h.slice(0, 2), 16), g: parseInt(h.slice(2, 4), 16), b: parseInt(h.slice(4, 6), 16) };
}

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