// Main MasterCasa app — two hero variants, lead chooser, sections.
const { useState: useS, useEffect: useE, useRef: useR } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "lang": "en",
  "variant": "A",
  "accentA": "#2F5E4A",
  "accentB": "#79E0A8",
  "showChat": true
}/*EDITMODE-END*/;

const PATH_ICONS = {
  buy: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H10v6H5a1 1 0 0 1-1-1z" />
    </svg>
  ),
  sell: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 21V10l8-6 8 6v11" />
      <path d="M9 21v-7h6v7" />
      <path d="M14 6l5 3" />
    </svg>
  ),
  refi: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 12a9 9 0 0 1 15.5-6.3L21 8" />
      <path d="M21 3v5h-5" />
      <path d="M21 12a9 9 0 0 1-15.5 6.3L3 16" />
      <path d="M3 21v-5h5" />
    </svg>
  ),
  prequal: (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M9 11l3 3L22 4" />
      <path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11" />
    </svg>
  ),
};

function PathCard({ id, t, onPick, accent, dense }) {
  const p = t.paths[id];
  return (
    <button className={"mc-path" + (dense ? " mc-path-dense" : "")} onClick={() => onPick(id)} style={{ "--mc-accent": accent }}>
      <span className="mc-path-icon">{PATH_ICONS[id]}</span>
      <span className="mc-path-text">
        <strong>{p.label}</strong>
        <span>{p.hint}</span>
      </span>
      <span className="mc-path-arrow">→</span>
    </button>
  );
}

function ToolModal({ open, onClose, tool, t, accent }) {
  useE(() => {
    if (open) document.body.style.overflow = "hidden";
    else document.body.style.overflow = "";
    return () => (document.body.style.overflow = "");
  }, [open]);
  if (!open) return null;
  const ToolComp = { buy: AffordabilityCalc, sell: ValuationForm, refi: RefiForm, prequal: PreQualForm }[tool];
  return (
    <div className="mc-modal" onClick={onClose}>
      <div className="mc-modal-card" onClick={(e) => e.stopPropagation()}>
        <button className="mc-modal-close" onClick={onClose} aria-label="Close">×</button>
        <ToolComp t={t} accent={accent} />
      </div>
    </div>
  );
}

// ============== VARIANT A: WARM FAMILY ==============
function HeroA({ t, accent, onPick, setLang, lang }) {
  return (
    <section className="mc-heroA" data-screen-label="01 Hero A">
      <div className="mc-heroA-grid">
        <div className="mc-heroA-left">
          <div className="mc-eyebrow">{t.heroA.eyebrow}</div>
          <h1 className="mc-heroA-title">
            <span>{t.heroA.title1}</span>
            <span>{t.heroA.title2}</span>
            <span style={{ color: accent, fontStyle: "italic" }}>{t.heroA.title3}</span>
          </h1>
          <p className="mc-heroA-sub">{t.heroA.sub}</p>
          <div className="mc-heroA-ctas">
            <button className="mc-btn mc-btn-primary" style={{ background: accent }} onClick={() => { setLang("en"); onPick("buy"); }}>
              {t.heroA.ctaEn} <span>→</span>
            </button>
            <button className="mc-btn mc-btn-secondary" onClick={() => { setLang("es"); onPick("buy"); }}>
              {t.heroA.ctaEs} <span>→</span>
            </button>
          </div>
          <div className="mc-heroA-note">{t.heroA.note}</div>
        </div>
        <div className="mc-heroA-right">
          <div className="mc-heroA-photoStack">
            <div className="mc-heroA-photo mc-heroA-photo-a">
              <img src="images/jesus.png" alt="Jesus Bencomo" />
            </div>
            <div className="mc-heroA-photo mc-heroA-photo-b">
              <img src="images/cesar.png" alt="Ceasar Bencomo" />
            </div>
            <div className="mc-heroA-badge">
              <div className="mc-heroA-badge-num">1,000+</div>
              <div className="mc-heroA-badge-lab">{t.lang === "es" ? "familias" : "families helped"}</div>
            </div>
          </div>
        </div>
      </div>

      <div className="mc-chooser-strip">
        <div className="mc-chooser-strip-label">{t.chooser.title}</div>
        <div className="mc-chooser-strip-grid">
          {["buy", "sell", "refi", "prequal"].map((k) => (
            <PathCard key={k} id={k} t={t} accent={accent} onPick={onPick} dense />
          ))}
        </div>
      </div>
    </section>
  );
}

// ============== VARIANT B: BOLD CONVERSION ==============
function HeroB({ t, accent, onPick, setLang }) {
  return (
    <section className="mc-heroB" data-screen-label="01 Hero B">
      <div className="mc-heroB-inner">
        <div className="mc-heroB-eyebrow"><span className="mc-dot" style={{ background: accent }}></span> {t.heroB.eyebrow}</div>
        <h1 className="mc-heroB-title">{t.heroB.title}</h1>
        <p className="mc-heroB-sub">{t.heroB.sub}</p>

        <div className="mc-heroB-paths">
          {["buy", "sell", "refi", "prequal"].map((k) => (
            <PathCard key={k} id={k} t={t} accent={accent} onPick={onPick} />
          ))}
        </div>

        <div className="mc-heroB-ctas">
          <button className="mc-btn mc-btn-ghostLight" onClick={() => { setLang("en"); onPick("buy"); }}>{t.heroB.ctaEn} →</button>
          <button className="mc-btn mc-btn-ghostLight" onClick={() => { setLang("es"); onPick("buy"); }}>{t.heroB.ctaEs} →</button>
        </div>

        <div className="mc-heroB-statbar">
          {t.trust.stats.map((s, i) => (
            <div key={i} className="mc-heroB-stat">
              <div className="mc-heroB-stat-n" style={{ color: accent }}>{s.n}</div>
              <div className="mc-heroB-stat-l">{s.l}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ============== SHARED SECTIONS ==============
function TrustSection({ t, accent, variant }) {
  if (variant === "B") return null; // B has stats inline
  return (
    <section className="mc-trust" data-screen-label="02 Trust">
      <div className="mc-trust-inner">
        <h2 className="mc-section-h">{t.trust.title}</h2>
        <div className="mc-trust-stats">
          {t.trust.stats.map((s, i) => (
            <div key={i} className="mc-trust-stat">
              <div className="mc-trust-stat-n" style={{ color: accent }}>{s.n}</div>
              <div className="mc-trust-stat-l">{s.l}</div>
            </div>
          ))}
        </div>
        <div className="mc-areas">
          <div className="mc-areas-label">{t.trust.areasLabel}</div>
          <div className="mc-areas-block">
            <p className="mc-areas-base"><strong>{t.trust.areasBase}</strong><br />{t.trust.areasBaseDesc}</p>
            <div className="mc-areas-grid">
              {t.trust.areas.map((a) => <span key={a} className="mc-area-chip">{a}</span>)}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function ProcessSection({ t, accent }) {
  return (
    <section className="mc-process" data-screen-label="03 Process">
      <div className="mc-process-inner">
        <div className="mc-eyebrow">{t.process.eyebrow}</div>
        <h2 className="mc-section-h">{t.process.title}</h2>
        <div className="mc-process-grid">
          {t.process.steps.map((s, i) => (
            <div key={i} className="mc-step">
              <div className="mc-step-num" style={{ color: accent }}>0{i + 1}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CalcEmbed({ t, accent }) {
  return (
    <section className="mc-embed" data-screen-label="04 Inline calc">
      <div className="mc-embed-inner">
        <div className="mc-embed-grid">
          <div className="mc-embed-copy">
            <div className="mc-eyebrow">{t.lang === "es" ? "Calculadora" : "Affordability"}</div>
            <h2 className="mc-section-h">{t.calc.title}</h2>
            <p className="mc-embed-sub">{t.calc.sub}</p>
            <ul className="mc-embed-list">
              <li>{t.lang === "es" ? "Sin revisión de crédito" : "No credit check"}</li>
              <li>{t.lang === "es" ? "Sin compromiso" : "No obligation"}</li>
              <li>{t.lang === "es" ? "Resultado al instante" : "Instant result"}</li>
            </ul>
          </div>
          <div className="mc-embed-tool">
            <AffordabilityCalc t={t} accent={accent} />
          </div>
        </div>
      </div>
    </section>
  );
}

function TeamSection({ t, accent }) {
  return (
    <section className="mc-team" data-screen-label="05 Team">
      <div className="mc-team-inner">
        <div className="mc-eyebrow">{t.team.eyebrow}</div>
        <h2 className="mc-section-h">{t.team.title}</h2>
        <p className="mc-team-sub">{t.team.sub}</p>
        <div className="mc-team-grid">
          {[t.team.jesus, t.team.cesar].map((p, i) => (
            <div key={i} className="mc-team-card">
              <div className="mc-team-photo">
                <img src={i === 0 ? "images/jesus.png" : "images/cesar.png"} alt={p.name} />
              </div>
              <div className="mc-team-body">
                <h3>{p.name}</h3>
                <div className="mc-team-role">{p.role}</div>
                <div className="mc-team-meta">{p.dre}</div>
                <a className="mc-team-phone" href={"tel:" + p.phone.replace(/\D/g, "")} style={{ color: accent }}>
                  📞 {p.phone}
                </a>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CtaBand({ t, accent, onPick }) {
  return (
    <section className="mc-band" data-screen-label="06 CTA band" style={{ background: accent }}>
      <div className="mc-band-inner">
        <h2>{t.lang === "es" ? "¿Listo para empezar?" : "Ready to start?"}</h2>
        <p>{t.lang === "es" ? "Elige una herramienta — te respondemos hoy." : "Pick a tool — we respond same-day."}</p>
        <div className="mc-band-ctas">
          <button className="mc-btn mc-btn-onaccent" onClick={() => onPick("buy")}>{t.common.tools.buy} →</button>
          <button className="mc-btn mc-btn-onaccent" onClick={() => onPick("sell")}>{t.common.tools.sell} →</button>
          <button className="mc-btn mc-btn-onaccent" onClick={() => onPick("prequal")}>{t.common.tools.prequal} →</button>
        </div>
      </div>
    </section>
  );
}

function Footer({ t }) {
  return (
    <footer className="mc-foot" data-screen-label="07 Footer">
      <div className="mc-foot-inner">
        <div className="mc-foot-top">
          <div>
            <div className="mc-foot-brand">MasterCasa</div>
            <div className="mc-foot-tag">{t.foot.tag}</div>
          </div>
          <div className="mc-foot-contact">
            <a href="tel:5624164445">📞 (562) 416-4445 · Jesus</a>
            <a href="tel:7146812203">📞 (714) 681-2203 · Ceasar</a>
          </div>
        </div>
        <div className="mc-foot-bot">
          <div>{t.foot.copy}</div>
          <div className="mc-foot-disc">{t.foot.disclaimer}</div>
        </div>
      </div>
    </footer>
  );
}

function GlobeIcon() {
  return (
    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10" />
      <path d="M2 12h20" />
      <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
    </svg>
  );
}

function Nav({ t, setLang, lang, variant, accent, onPick }) {
  return (
    <nav className={"mc-nav" + (variant === "B" ? " mc-nav-dark" : "")}>
      <div className="mc-nav-inner">
        <button className="mc-lang" style={{ background: accent }} onClick={() => setLang(lang === "en" ? "es" : "en")}>
          <GlobeIcon />
          {lang === "en" ? "EN → Español" : "ES → English"}
        </button>
        <a href="#top" className="mc-brand">
          MasterCasa
        </a>
        <div className="mc-nav-loc">{t.locale}</div>
        <div className="mc-nav-right">
          <a className="mc-nav-call" href="tel:5624164445">{t.nav.call} →</a>
        </div>
      </div>
    </nav>
  );
}

function StickyChat({ t, onPick, accent }) {
  const [open, setOpen] = useS(false);
  return (
    <div className="mc-chat">
      {open && (
        <div className="mc-chat-card">
          <div className="mc-chat-head">
            <div className="mc-chat-avatar"><span>C</span></div>
            <div>
              <div className="mc-chat-name">Ceasar · MasterCasa</div>
              <div className="mc-chat-status"><span className="mc-chat-dot" /> {t.lang === "es" ? "responde rápido" : "usually replies fast"}</div>
            </div>
            <button className="mc-chat-x" onClick={() => setOpen(false)}>×</button>
          </div>
          <div className="mc-chat-body">
            <div className="mc-chat-bubble">
              {t.lang === "es"
                ? "¡Hola! ¿En qué puedo ayudarte hoy?"
                : "Hi! What can I help you with today?"}
            </div>
            <div className="mc-chat-options">
              <button onClick={() => { onPick("buy"); setOpen(false); }}>{t.paths.buy.label}</button>
              <button onClick={() => { onPick("sell"); setOpen(false); }}>{t.paths.sell.label}</button>
              <button onClick={() => { onPick("prequal"); setOpen(false); }}>{t.paths.prequal.label}</button>
            </div>
            <a className="mc-chat-call" href="tel:7146812203">📞 (714) 681-2203</a>
          </div>
        </div>
      )}
      <button className="mc-chat-fab" style={{ background: accent }} onClick={() => setOpen(!open)}>
        {open ? "×" : "💬"}
      </button>
    </div>
  );
}

// ============== APP ROOT ==============
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const lang = tweaks.lang;
  const variant = tweaks.variant;
  const accent = variant === "A" ? tweaks.accentA : tweaks.accentB;
  const t = { ...COPY[lang], lang };

  const [tool, setTool] = useS(null);

  const onPick = (id) => setTool(id);

  return (
    <div className={"mc-root mc-v-" + variant} data-lang={lang}>
      <Nav t={t} lang={lang} setLang={(l) => setTweak("lang", l)} variant={variant} accent={accent} onPick={onPick} />

      {variant === "A" ? <HeroA t={t} accent={accent} onPick={onPick} setLang={(l) => setTweak("lang", l)} lang={lang} /> : <HeroB t={t} accent={accent} onPick={onPick} setLang={(l) => setTweak("lang", l)} />}
      <TrustSection t={t} accent={accent} variant={variant} />
      {variant === "A" && <CalcEmbed t={t} accent={accent} />}
      <ProcessSection t={t} accent={accent} />
      {variant === "B" && <CalcEmbed t={t} accent={accent} />}
      <TeamSection t={t} accent={accent} />
      <CtaBand t={t} accent={accent} onPick={onPick} />
      <Footer t={t} />

      <ToolModal open={!!tool} onClose={() => setTool(null)} tool={tool} t={t} accent={accent} />
      {tweaks.showChat && <StickyChat t={t} accent={accent} onPick={onPick} />}

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language & variant" />
        <TweakRadio label="Language" value={lang} onChange={(v) => setTweak("lang", v)} options={["en", "es"]} />
        <TweakRadio label="Variant" value={variant} onChange={(v) => setTweak("variant", v)} options={["A", "B"]} />
        <TweakSection label="Style" />
        {variant === "A" ? (
          <TweakColor label="Accent" value={tweaks.accentA} onChange={(v) => setTweak("accentA", v)} options={["#2F5E4A", "#79E0A8", "#B6552E", "#1F3A52"]} />
        ) : (
          <TweakColor label="Accent" value={tweaks.accentB} onChange={(v) => setTweak("accentB", v)} options={["#79E0A8", "#F4B860", "#E3866A", "#9AB8F2"]} />
        )}
        <TweakToggle label="Sticky chat widget" value={tweaks.showChat} onChange={(v) => setTweak("showChat", v)} />
      </TweaksPanel>
    </div>
  );
}

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