/* Pronto — Missed-call → text-back → Google Calendar booking demo — loops automatically */
const { useEffect, useState, useRef } = React;

// How this works in reality:
// 1. SMS is sent with a plain URL (any SMS can include a link)
// 2. iMessage / Android Messages auto-renders a link preview beneath the URL
// 3. Lead taps → opens booking page in their browser (Cal.com / Calendly style)
// 4. They pick a slot → Google Calendar event is created for both sides
// This is exactly how Calendly links work over SMS — no RCS or special carrier needed.

const SCRIPT = [
  {
    side: "event",
    text: "Missed call",
    caller: "+1 (415) 555-0182 · Unknown",
    t: 0,
  },
  { side: "typing", t: 900 },
  {
    side: "us",
    text: "Hey! Sorry we missed your call. This is [Business] — how can we help?\n\ncal.getpronto.tech/shiv",
    t: 1800,
    meta: "PRONTO · SENT IN 18 SECONDS",
  },
  // Link preview rendered automatically by iMessage / Android Messages
  { side: "link-preview", t: 1800 },
  { side: "them", text: "I was calling about pricing — just booked Tuesday 2pm 👍", t: 6200 },
  { side: "typing", t: 7400 },
  {
    side: "us",
    text: "✓ Confirmed! Google Calendar invite is on its way. See you Tuesday at 2pm.",
    t: 8400,
    meta: "BOOKED · GOOGLE CALENDAR SYNCED",
  },
];

// LinkPreview renders exactly like an iMessage / Android Messages link preview card.
// The URL in the SMS text is tapped → opens the booking page in the phone's browser.
// No special carrier or RCS agreement needed — this is plain URL + og:image metadata.
function LinkPreview() {
  return (
    <div className="demo-cal-card">
      <div style={{ fontFamily: "var(--mono)", fontSize: 10, color: "var(--ink-dim)", marginBottom: 8, letterSpacing: "0.08em" }}>
        LINK PREVIEW · OPENS IN BROWSER
      </div>
      <div className="cal-head">
        <span className="gcal-dot-sm"/>
        Book a time — Pronto
      </div>
      <div className="cal-label">Available this week · 15-min call</div>
      <div className="slot-row">
        <span className="slot-chip hot">Tue 2pm</span>
        <span className="slot-chip">Wed 10am</span>
        <span className="slot-chip">Thu 11am</span>
        <span className="slot-chip">Fri 3pm</span>
      </div>
      <div className="cal-footer">cal.getpronto.tech/shiv · POWERED BY GOOGLE CALENDAR</div>
    </div>
  );
}

function HeroDemo() {
  const [step, setStep] = useState(0);
  const bodyRef = useRef(null);

  useEffect(() => {
    if (step >= SCRIPT.length) {
      const r = setTimeout(() => setStep(0), 4500);
      return () => clearTimeout(r);
    }
    const cur = SCRIPT[step];
    const next = SCRIPT[step + 1];
    if (!next) {
      const r = setTimeout(() => setStep(step + 1), 3200);
      return () => clearTimeout(r);
    }
    const dwell = next.t - cur.t;
    const r = setTimeout(() => setStep(step + 1), dwell);
    return () => clearTimeout(r);
  }, [step]);

  useEffect(() => {
    if (bodyRef.current) bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
  }, [step]);

  const visible = SCRIPT.slice(0, step + 1);
  const isDone = step >= SCRIPT.length;

  return (
    <div className="demo">
      <div className="demo-head">
        <div className="lights"><span/><span/><span/></div>
        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
          <span>pronto / missed-call-thread</span>
        </div>
        <div className="live"><span className="pulse"/>LIVE</div>
      </div>

      <div className="demo-body" ref={bodyRef}>
        {visible.map((m, i) => {
          if (m.side === "event") {
            return (
              <div key={i} className="missed-event">
                <span className="phone-icon">📵</span>
                <span>Missed call</span>
                <span className="caller">
                  {m.caller}
                  <br/>
                  <small>JUST NOW · UNANSWERED</small>
                </span>
              </div>
            );
          }

          if (m.side === "typing") {
            if (i !== visible.length - 1) return null;
            return (
              <div key={i} className="msg us" style={{ padding: "10px 14px" }}>
                <div className="typing"><span/><span/><span/></div>
              </div>
            );
          }

          if (m.side === "link-preview") {
            return <LinkPreview key={i}/>;
          }

          return (
            <div key={i} className={`msg ${m.side}`}>
              {m.text}
              {m.meta && <span className="meta">{m.meta}</span>}
            </div>
          );
        })}
      </div>

      {isDone && (
        <div className="demo-status">
          <span className="ok">✓</span>
          <span className="dim">Booked · Google Calendar synced · lead secured</span>
        </div>
      )}
    </div>
  );
}

function HeroType() {
  return (
    <div className="demo" style={{ padding: 40, justifyContent: "center", alignItems: "center", textAlign: "center" }}>
      <div style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-dim)", letterSpacing: ".14em", marginBottom: 24 }}>
        AVERAGE BUSINESS RESPONSE TIME
      </div>
      <div style={{
        fontFamily: "var(--serif)", fontSize: "clamp(80px, 14vw, 200px)", lineHeight: 0.9, letterSpacing: "-0.04em",
        color: "var(--ink-dim)"
      }}>
        47<span style={{ fontSize: "0.4em" }}>hrs</span>
      </div>
      <div style={{ margin: "24px 0", fontFamily: "var(--serif)", fontSize: 24, color: "var(--ink-dim)", fontStyle: "italic" }}>
        ours
      </div>
      <div style={{
        fontFamily: "var(--serif)", fontSize: "clamp(80px, 14vw, 200px)", lineHeight: 0.9, letterSpacing: "-0.04em",
        color: "var(--accent)"
      }}>
        18<span style={{ fontSize: "0.4em", color: "var(--ink-dim)" }}>s</span>
      </div>
      <div style={{
        marginTop: 28, fontFamily: "var(--mono)", fontSize: 11, color: "var(--ink-dim)", letterSpacing: ".14em"
      }}>
        SOURCE: HUBSPOT 2025 · AVG B2B RESPONSE IS 47 HOURS
      </div>
    </div>
  );
}

window.HeroDemo = HeroDemo;
window.HeroType = HeroType;