/* eslint-disable */
/* Babel-standalone compiles this in the browser. */

const { useState, useEffect } = React;

const DURATION = 7500;

/* ============================================================ */
/* DEMOS                                                        */
/* ============================================================ */

function VoiceDemo() {
  const [stage, setStage] = useState("ringing");
  const [shown, setShown] = useState([]);
  const [appt, setAppt] = useState(false);

  useEffect(() => {
    const ts = [
      setTimeout(() => setStage("answered"), 1200),
      setTimeout(() => setShown(["g"]), 1900),
      setTimeout(() => setShown((p) => [...p, "i"]), 3000),
      setTimeout(() => setShown((p) => [...p, "b"]), 4200),
      setTimeout(() => setShown((p) => [...p, "y"]), 5400),
      setTimeout(() => setAppt(true), 6300),
    ];
    return () => ts.forEach(clearTimeout);
  }, []);

  const lines = [
    { id: "g", who: "AI",     cls: "ai", what: "“Hi, this is Maple at Acme HVAC, how can I help?”" },
    { id: "i", who: "Caller", cls: "",   what: "“My furnace just stopped working overnight.”" },
    { id: "b", who: "AI",     cls: "ai", what: "“I can get a tech to you tomorrow at 9 AM. Sound good?”" },
    { id: "y", who: "Caller", cls: "",   what: "“Yes, please.”" },
  ];

  return (
    <div className="demo-voice">
      <div className={`dv-phone ${stage}`}>
        <div className="dv-phone-icon">{"☎"}</div>
        <div className="dv-phone-meta">
          <div className="dv-phone-name">Sarah Mitchell</div>
          <div className="dv-phone-num">+1 (555) 014-9032</div>
        </div>
        <div className="dv-phone-state">
          {stage === "ringing" ? "Ringing…" : "Connected · 0:42"}
        </div>
      </div>

      <div className="dv-transcript">
        {lines.map((l) => (
          <div key={l.id} className={`dv-line ${l.cls} ${shown.includes(l.id) ? "show" : ""}`}>
            <span className="who">{l.who}</span>
            <span className="what">{l.what}</span>
          </div>
        ))}
      </div>

      <div className={`dv-appt ${appt ? "show" : ""}`}>
        <div>
          <div className="dv-appt-tag">Appointment booked</div>
          <div className="dv-appt-when">Tomorrow, 9:00 AM · Sarah Mitchell</div>
        </div>
        <div className="dv-appt-check">{"✓"}</div>
      </div>
    </div>
  );
}

function WorkflowDemo() {
  const [active, setActive] = useState(0);

  useEffect(() => {
    const ts = [
      setTimeout(() => setActive(1), 1700),
      setTimeout(() => setActive(2), 3400),
      setTimeout(() => setActive(3), 5100),
    ];
    return () => ts.forEach(clearTimeout);
  }, []);

  const stages = [
    { num: "01", title: "Quote sent",        active: "Generated · 11:42",   done: "Sent · viewed" },
    { num: "02", title: "Contract signed",   active: "Awaiting signature…", done: "Signed · e-sig" },
    { num: "03", title: "Deposit collected", active: "Auto-invoice queued",      done: "Paid · $2,400" },
  ];

  return (
    <div className="demo-workflow">
      {stages.map((s, i) => {
        const cls = i < active ? "done" : i === active ? "active" : "";
        const state = i < active ? s.done : i === active ? s.active : "Queued";
        return (
          <div key={s.num} className={`dw-stage ${cls}`}>
            <div className="dw-stage-num">Step {s.num}</div>
            <div className="dw-stage-title">{s.title}</div>
            <div className="dw-stage-state">{state}</div>
            <div className="dw-stage-bar"><span /></div>
          </div>
        );
      })}
    </div>
  );
}

function AdminDemo() {
  const invoices = [
    { x: "INV-1042", name: "Pacific Supply",     amt: "$1,240.00" },
    { x: "INV-1043", name: "BlueSky Roofing",    amt: "$3,810.00" },
    { x: "INV-1044", name: "Northwind Plumbing", amt: "$622.00"   },
    { x: "INV-1045", name: "Cedar HVAC",         amt: "$1,915.00" },
  ];
  const [done, setDone] = useState([]);

  useEffect(() => {
    const ts = invoices.map((_, i) =>
      setTimeout(() => setDone((prev) => [...prev, i]), 1100 + i * 1200)
    );
    return () => ts.forEach(clearTimeout);
  }, []);

  return (
    <div className="demo-admin">
      <div className="da-pile in">
        <div className="da-pile-label">Inbox · 4 invoices</div>
        {invoices.map((inv, i) => (
          <div key={i} className={`da-invoice ${done.includes(i) ? "processing" : ""}`}>
            <span className="x">{inv.x}</span>
            <span className="name">{inv.name}</span>
            <span className="amt">{inv.amt}</span>
          </div>
        ))}
      </div>

      <div className="da-pile out">
        <div className="da-pile-label">Filed + reconciled</div>
        {invoices.map((inv, i) => (
          <div key={i} className={`da-invoice ${done.includes(i) ? "arrived" : ""}`}>
            <span className="x">{"✓ " + inv.x}</span>
            <span className="name">{inv.name}</span>
            <span className="amt">{inv.amt}</span>
          </div>
        ))}
      </div>

      <div className="da-meta">
        <span className="clock">02:14 AM</span>
        <span>{done.length}/4 processed · saving ≈6h/wk</span>
      </div>
    </div>
  );
}

function LeadGenDemo() {
  const leads = [
    { x: 22, y: 32, who: "Westlake HOA",        what: "AC system replacement RFP", when: "Just now" },
    { x: 74, y: 22, who: "Lakeside Dental",     what: "Looking for managed IT",     when: "8s ago" },
    { x: 30, y: 72, who: "Cedar Mills Roofing", what: "Storm response inquiry",     when: "24s ago" },
    { x: 78, y: 68, who: "Hilltop Cafe",        what: "POS automation",             when: "41s ago" },
  ];
  const [shown, setShown] = useState([]);

  useEffect(() => {
    const ts = leads.map((_, i) =>
      setTimeout(() => setShown((prev) => [...prev, i]), 800 + i * 1500)
    );
    return () => ts.forEach(clearTimeout);
  }, []);

  return (
    <div className="demo-leadgen">
      <div className="dl-map">
        {leads.map((l, i) =>
          shown.includes(i) ? (
            <div
              key={i}
              className="dl-ping"
              style={{ left: `${l.x}%`, top: `${l.y}%` }}
            />
          ) : null
        )}
      </div>
      <div className="dl-list">
        <div className="dl-list-h">Leads captured</div>
        {leads.map((l, i) => (
          <div key={i} className={`dl-lead ${shown.includes(i) ? "show" : ""}`}>
            <div className="who">{l.who}</div>
            <div className="what">{l.what}</div>
            <div className="when">{l.when}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function LeadCapDemo() {
  const [phase, setPhase] = useState(0);
  const [timer, setTimer] = useState(60);

  useEffect(() => {
    const ts = [
      setTimeout(() => setPhase(1), 1100),
      setTimeout(() => setPhase(2), 2300),
      setTimeout(() => setPhase(3), 3500),
      setTimeout(() => setPhase(4), 4500),
      setTimeout(() => setPhase(5), 6000),
    ];
    return () => ts.forEach(clearTimeout);
  }, []);

  useEffect(() => {
    if (phase < 3 || phase >= 4) return;
    const id = setInterval(() => setTimer((t) => Math.max(0, t - 12)), 200);
    return () => clearInterval(id);
  }, [phase]);

  return (
    <div className="demo-leadcap">
      <div className={`dc-form ${phase >= 3 ? "submitted" : ""}`}>
        <div className="dc-form-h">Quote request · website form</div>

        <div className="dc-field">
          <label>Name</label>
          <div className={`input ${phase === 0 ? "typing" : ""}`}>
            {phase >= 0 ? "Sarah Mitchell" : ""}
          </div>
        </div>

        <div className="dc-field">
          <label>Phone</label>
          <div className={`input ${phase === 1 ? "typing" : ""}`}>
            {phase >= 1 ? "(555) 014-9032" : ""}
          </div>
        </div>

        <div className="dc-field">
          <label>What you need</label>
          <div className={`input ${phase === 2 ? "typing" : ""}`}>
            {phase >= 2 ? "Furnace not heating, urgent" : ""}
          </div>
        </div>

        <button className="dc-submit" type="button">
          {phase >= 3 ? "Sent ✓" : "Submit"}
        </button>
      </div>

      <div className="dc-phone">
        <div className="dc-phone-h">
          <span>Text-back · Acme HVAC</span>
          <span className="timer">
            {phase < 4 ? `${String(timer).padStart(2, "0")}s SLA` : "Replied in 8s"}
          </span>
        </div>
        <div className={`dc-bubble us ${phase >= 4 ? "show" : ""}`}>
          Hi Sarah, this is Maple at Acme HVAC. Got your request, can a tech come tomorrow at 9?
          <span className="meta">Auto-sent · 0:08</span>
        </div>
        <div className={`dc-bubble them ${phase >= 5 ? "show" : ""}`}>
          Yes please, thank you so much!
          <span className="meta">Sarah · 0:31</span>
        </div>
      </div>
    </div>
  );
}

/* ============================================================ */
/* APP                                                          */
/* ============================================================ */

const SERVICES = [
  { id: "voice",    num: "01", title: "Voice Answering",      sub: "Never miss the call. AI picks up, qualifies, books.", Demo: VoiceDemo,    head: "Incoming call · live transcript" },
  { id: "workflow", num: "02", title: "Automation Workflows", sub: "Quote, contract, deposit, hands-free.",               Demo: WorkflowDemo, head: "Job pipeline · Acme HVAC" },
  { id: "admin",    num: "03", title: "Admin Automation",     sub: "Overnight invoice and receipt sweep.",                Demo: AdminDemo,    head: "Overnight batch · 02:14 AM" },
  { id: "leadgen",  num: "04", title: "Lead Generation",      sub: "Service-area outreach that runs while you work.",     Demo: LeadGenDemo,  head: "Service radius · live intake" },
  { id: "leadcap",  num: "05", title: "Lead Capture",         sub: "60-second text-back. Every form, every time.",        Demo: LeadCapDemo,  head: "Capture → 60s text-back" },
];

function App() {
  const [active, setActive] = useState(0);
  const [auto, setAuto] = useState(true);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    if (!auto) { setProgress(0); return; }
    setProgress(0);
    const start = Date.now();
    const id = setInterval(() => {
      const p = Math.min(100, ((Date.now() - start) / DURATION) * 100);
      setProgress(p);
      if (p >= 100) {
        clearInterval(id);
        setActive((a) => (a + 1) % SERVICES.length);
      }
    }, 80);
    return () => clearInterval(id);
  }, [active, auto]);

  const onTab = (i) => {
    if (i === active) {
      setAuto(false);
      return;
    }
    setActive(i);
    setAuto(false);
  };

  const ActiveDemo = SERVICES[active].Demo;

  return (
    <div className="install-demo">
      <div className="install-rail">
        <div className="install-rail-eyebrow">Pick a service</div>
        {SERVICES.map((s, i) => (
          <button
            key={s.id}
            type="button"
            className={`install-tab ${i === active ? "active" : ""}`}
            onClick={() => onTab(i)}
          >
            <div className="install-tab-num">{s.num}</div>
            <div className="install-tab-title">{s.title}</div>
            <div className="install-tab-sub">{s.sub}</div>
            {i === active && auto ? (
              <div className="install-tab-progress">
                <div
                  className="install-tab-progress-bar"
                  style={{ width: `${progress}%` }}
                />
              </div>
            ) : null}
          </button>
        ))}
        {!auto ? (
          <button
            type="button"
            className="install-resume"
            onClick={() => setAuto(true)}
          >
            {"▶ resume autoplay"}
          </button>
        ) : null}
        <div className="install-rail-note">
          Plus many others. Every build is custom to your business.
        </div>
      </div>

      <div className="install-stage">
        <div className="install-stage-head">
          <span>{SERVICES[active].head}</span>
          <span className="live">LIVE</span>
        </div>
        <div className="install-stage-body">
          <ActiveDemo key={active} />
        </div>
      </div>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("install-demo-root"));
root.render(<App />);