// v5_paperwork.jsx — combined Paperwork+Chasing 4-column row matching reference
// PRESERVES animations: form auto-fills, activity log ticks

function PaperworkStripV5() {
  // ── Form fill animation ─────────────────────────────────────────────
  const formFields = [
    { label: "Name", value: "Aoife O'Connell" },
    { label: "Email", value: "aoife@email.com" },
    { label: "Employer", value: "Acme Design Ltd" },
    { label: "Annual Income", value: "€56,000" },
    { label: "Deposit available", value: "€36,000" },
    { label: "Move-in date", value: "Flexible" },
  ];

  const [filled, setFilled] = useStateV5(0);
  useEffectV5(() => {
    const id = setInterval(() => {
      setFilled(f => {
        if (f >= formFields.length) {
          setTimeout(() => setFilled(0), 2200);
          return f;
        }
        return f + 1;
      });
    }, 380);
    return () => clearInterval(id);
  }, []);

  // ── Activity log animation ──────────────────────────────────────────
  const baseEvents = [
    { time: "2m ago",  title: "New match found",     sub: "Ranelagh, Dublin 6", icon: "sparkles", color: "#1E5BFF" },
    { time: "40m ago", title: "Viewing booked",      sub: "Sat 17 May, 11:00",  icon: "calendar", color: "#E8A83A" },
    { time: "2h ago",  title: "Landlord replied",    sub: "Reference received",  icon: "check",   color: "#3D6A4F" },
    { time: "3h ago",  title: "Application drafted", sub: "All forms complete", icon: "file",     color: "#1E5BFF" },
    { time: "4h ago",  title: "Movement synced",     sub: "Your schedule updated", icon: "refresh", color: "#3D6A4F" },
  ];
  const [shownEv, setShownEv] = useStateV5(2);
  useEffectV5(() => {
    const id = setInterval(() => {
      setShownEv(s => s >= baseEvents.length ? 2 : s + 1);
    }, 1500);
    return () => clearInterval(id);
  }, []);

  // ── Documents (static — verified state) ─────────────────────────────
  const docs = [
    { name: "Passport",             ver: true },
    { name: "PSD 2025",             ver: true },
    { name: "Payslips (3 months)",  ver: true },
    { name: "Bank statements (3m)", ver: true },
    { name: "Proof of address",     ver: true },
    { name: "Employment letter",    ver: true },
  ];

  return (
    <section style={{ padding: "100px 48px", background: "#FFFFFF" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div className="r-paperwork-grid" style={{
          display: "grid",
          gridTemplateColumns: "1fr 1fr 1fr 1fr",
          gap: 22,
          alignItems: "start",
        }}>
          {/* COL 1 — Paperwork copy */}
          <div>
            <div style={{ fontSize: 11, color: "#1E5BFF", letterSpacing: ".10em", textTransform: "uppercase", fontWeight: 500, marginBottom: 14 }}>
              Paperwork, on autopilot.
            </div>
            <h2 className="display" style={{ fontSize: 30, margin: "0 0 14px", lineHeight: 1.1, letterSpacing: "-0.02em", fontWeight: 500 }}>
              Upload once. <br/><span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>We do the rest.</span>
            </h2>
            <p style={{ fontSize: 13.5, color: "var(--ink-2)", margin: "0 0 22px", lineHeight: 1.55 }}>
              We verify, store and auto-fill so your applications are complete and credible from day one.
            </p>
            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
              <BulletV5 icon="shield" color="#1E5BFF" label="Bank-grade security"/>
              <BulletV5 icon="lock"   color="#1E5BFF" label="Encrypted & private"/>
              <BulletV5 icon="check"  color="#1E5BFF" label="You're always in control"/>
            </div>
          </div>

          {/* COL 2 — Verified documents */}
          <div style={{
            background: "#FFFFFF",
            border: "0.5px solid var(--border)",
            borderRadius: 14, padding: 16,
            boxShadow: "0 4px 20px rgba(10,24,48,0.04)",
            minHeight: 360,
            display: "flex", flexDirection: "column",
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13, fontWeight: 500, color: "var(--ink)" }}>
                <Icon name="shield" size={13} style={{ color: "#1E5BFF" }}/>
                Verified documents
              </div>
            </div>
            <div style={{ display: "flex", flexDirection: "column", gap: 2, flex: 1 }}>
              {docs.map((d, i) => (
                <div key={i} style={{
                  display: "flex", alignItems: "center", justifyContent: "space-between",
                  padding: "10px 10px",
                  borderBottom: i < docs.length - 1 ? "0.5px solid var(--border)" : "none",
                  fontSize: 13,
                }}>
                  <span style={{ display: "flex", alignItems: "center", gap: 10 }}>
                    <Icon name="file" size={14} style={{ color: "var(--ink-3)" }}/>
                    {d.name}
                  </span>
                  <span style={{
                    fontSize: 10.5, padding: "2px 9px", borderRadius: 999,
                    background: "var(--green-soft)", color: "var(--green-2)",
                    fontWeight: 600, letterSpacing: ".02em",
                    display: "inline-flex", alignItems: "center", gap: 4,
                  }}>
                    <Icon name="check" size={10} strokeWidth={2.5}/> Verified
                  </span>
                </div>
              ))}
            </div>
            <button style={{
              marginTop: 14,
              background: "#1E5BFF", color: "#FFFFFF",
              border: 0, padding: "10px", borderRadius: 8,
              fontSize: 12.5, fontWeight: 500,
            }}>
              Manage documents
            </button>
          </div>

          {/* COL 3 — Form preview (animated fill) */}
          <div style={{
            background: "#FFFFFF",
            border: "0.5px solid var(--border)",
            borderRadius: 14, padding: 16,
            boxShadow: "0 4px 20px rgba(10,24,48,0.04)",
            minHeight: 360,
            display: "flex", flexDirection: "column",
          }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 14 }}>
              <div style={{ fontSize: 13, fontWeight: 500, color: "var(--ink)" }}>Form preview</div>
              <span style={{
                fontSize: 10, padding: "2px 8px", borderRadius: 999,
                background: "rgba(30,91,255,0.12)", color: "#1E5BFF",
                fontWeight: 600, letterSpacing: ".02em",
                display: "inline-flex", alignItems: "center", gap: 4,
              }}>
                <Icon name="sparkles" size={9}/>
                <span className="tnum">Auto-filled {Math.round((filled/formFields.length)*72)}%</span>
              </span>
            </div>

            <div style={{ display: "flex", flexDirection: "column", gap: 10, flex: 1 }}>
              {formFields.map((f, i) => {
                const isDone = i < filled;
                const isCurrent = i === filled - 1;
                return (
                  <div key={i} style={{ opacity: isDone ? 1 : 0.35, transition: "opacity .3s" }}>
                    <div style={{ fontSize: 10, color: "var(--ink-3)", marginBottom: 3, letterSpacing: ".01em" }}>{f.label}</div>
                    <div className={isCurrent ? "ai-fill" : ""} style={{
                      background: isDone ? "#F4F6FA" : "#F0EFEA",
                      border: isDone ? "0.5px solid rgba(30,91,255,0.20)" : "0.5px solid var(--border)",
                      borderRadius: 6, padding: "7px 10px",
                      fontSize: 12.5, color: isDone ? "var(--ink)" : "transparent",
                      fontWeight: 500, minHeight: 30,
                      display: "flex", alignItems: "center",
                      transition: "all .25s",
                    }}>
                      {isDone ? f.value : "—"}
                    </div>
                  </div>
                );
              })}
            </div>

            <button style={{
              marginTop: 14,
              background: "#1E5BFF", color: "#FFFFFF",
              border: 0, padding: "10px", borderRadius: 8,
              fontSize: 12.5, fontWeight: 500,
              opacity: filled === formFields.length ? 1 : 0.65,
            }}>
              {filled === formFields.length ? "Continue application" : "Filling…"}
            </button>
          </div>

          {/* COL 4 — Live activity (chasing) */}
          <div>
            <div style={{ fontSize: 11, color: "#1E5BFF", letterSpacing: ".10em", textTransform: "uppercase", fontWeight: 500, marginBottom: 14 }}>
              HomeWoosh does the chasing.
            </div>
            <div style={{ fontSize: 18, fontWeight: 500, marginBottom: 14, color: "var(--ink)" }}>Live activity</div>

            <div style={{
              background: "var(--ink)",
              borderRadius: 12, padding: 12,
              boxShadow: "0 4px 20px rgba(10,24,48,0.18)",
              display: "flex", flexDirection: "column", gap: 8,
              minHeight: 280,
            }}>
              {baseEvents.slice(0, shownEv).map((e, i) => (
                <div key={`${e.title}-${i}`} className="fade-in" style={{
                  display: "grid", gridTemplateColumns: "26px 1fr auto",
                  gap: 10, alignItems: "center",
                  padding: "9px 10px",
                  background: "rgba(255,255,255,0.05)",
                  borderRadius: 8,
                }}>
                  <span style={{
                    width: 26, height: 26, borderRadius: 6,
                    background: `${e.color}33`, color: e.color,
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                  }}>
                    <Icon name={e.icon} size={13}/>
                  </span>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 11.5, color: "#FFFFFF", fontWeight: 500, lineHeight: 1.2 }}>{e.title}</div>
                    <div style={{ fontSize: 10, color: "rgba(255,255,255,0.55)", marginTop: 1 }}>{e.sub}</div>
                  </div>
                  <span className="tnum" style={{ fontSize: 9.5, color: "rgba(255,255,255,0.45)" }}>{e.time}</span>
                </div>
              ))}
              {shownEv < baseEvents.length && (
                <div style={{ padding: "9px 10px", display: "flex", alignItems: "center", gap: 8, fontSize: 10.5, color: "rgba(255,255,255,0.5)" }}>
                  <span style={{ width: 5, height: 5, borderRadius: 999, background: "#7FB1FF", animation: "pulse-soft 1.2s infinite" }}/>
                  Scanning…
                </div>
              )}
            </div>
            <a style={{ marginTop: 14, display: "inline-flex", alignItems: "center", gap: 4, fontSize: 12, color: "#1E5BFF", fontWeight: 500 }}>
              See all activity <Icon name="arrow" size={12}/>
            </a>
          </div>
        </div>

        {/* Consent reassurance */}
        <div style={{
          marginTop: 36,
          textAlign: "center",
          fontSize: 13.5,
          color: "var(--ink-2)",
          fontFamily: "var(--font-serif)",
          fontStyle: "italic",
        }}>
          <Icon name="lock" size={13} style={{ verticalAlign: -2, marginRight: 6, color: "var(--ink-3)" }}/>
          HomeWoosh prepares everything. You approve before anything is sent or booked.
        </div>
      </div>
    </section>
  );
}

function BulletV5({ icon, color, label }) {
  return (
    <div style={{ display: "flex", gap: 12, alignItems: "center", fontSize: 13.5, color: "var(--ink-2)" }}>
      <span style={{
        width: 24, height: 24, borderRadius: 999,
        background: `${color}18`, color,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        flexShrink: 0,
      }}>
        <Icon name={icon} size={12}/>
      </span>
      {label}
    </div>
  );
}

window.PaperworkStripV5 = PaperworkStripV5;