"use client";

import React from "react";

// Minimal SVG Icons
const Icons = {
  Users: () => (
    <svg
      width="14"
      height="14"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth="2"
      strokeLinecap="round"
      strokeLinejoin="round"
    >
      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
      <circle cx="9" cy="7" r="4" />
      <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
      <path d="M16 3.13a4 4 0 0 1 0 7.75" />
    </svg>
  ),
};

export default function FindClientsView() {
  return (
    <div style={{ padding: "40px 56px", maxWidth: 1100, margin: "0 auto" }}>
      {/* Header */}
      <div style={{ marginBottom: 32 }}>
        <h1
          style={{
            fontSize: "28px",
            fontWeight: 600,
            color: "#1a1a1a",
            letterSpacing: "-0.02em",
            margin: "0 0 8px",
          }}
        >
          Find Clients
        </h1>
        <p style={{ color: "#6b6560", fontSize: "15px", margin: 0 }}>
          Vibn analyzes local businesses in your geofence and identifies
          software gaps you can pitch and build.
        </p>
      </div>

      {/* Geofence & Filters */}
      <div
        style={{
          display: "flex",
          gap: 12,
          marginBottom: 24,
          padding: "16px",
          background: "#fff",
          border: "1px solid #eae6de",
          borderRadius: 12,
          alignItems: "center",
        }}
      >
        <div
          style={{ flex: 1, display: "flex", flexDirection: "column", gap: 4 }}
        >
          <label
            style={{
              fontSize: "11px",
              fontWeight: 600,
              color: "#a09a90",
              textTransform: "uppercase",
            }}
          >
            Location
          </label>
          <div style={{ fontSize: "14px", fontWeight: 500, color: "#1a1a1a" }}>
            📍 Austin, TX (50km radius)
          </div>
        </div>
        <div style={{ width: 1, height: 32, background: "#eae6de" }} />
        <div
          style={{
            flex: 1,
            display: "flex",
            flexDirection: "column",
            gap: 4,
            paddingLeft: 12,
          }}
        >
          <label
            style={{
              fontSize: "11px",
              fontWeight: 600,
              color: "#a09a90",
              textTransform: "uppercase",
            }}
          >
            Ideal Customer Profile
          </label>
          <div style={{ fontSize: "14px", fontWeight: 500, color: "#1a1a1a" }}>
            "Plumbers and HVAC"
          </div>
        </div>
        <button
          style={{
            padding: "8px 16px",
            background: "var(--accent)",
            color: "#fff",
            borderRadius: 8,
            fontWeight: 500,
            fontSize: "13px",
            border: "none",
            cursor: "pointer",
            boxShadow: "0 2px 8px var(--accent-glow)",
          }}
        >
          Run Analysis
        </button>
      </div>

      {/* Target Results */}
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 20 }}>
        {/* Target Card 1 */}
        <div
          style={{
            background: "#fff",
            border: "1px solid #eae6de",
            borderRadius: 12,
            overflow: "hidden",
            boxShadow: "0 4px 20px rgba(0,0,0,0.03)",
          }}
        >
          <div
            style={{ padding: "20px 24px", borderBottom: "1px solid #eae6de" }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "flex-start",
                marginBottom: 12,
              }}
            >
              <div>
                <h3
                  style={{
                    fontSize: "18px",
                    fontWeight: 600,
                    color: "#1a1a1a",
                    margin: "0 0 4px",
                  }}
                >
                  Apex Plumbing Services
                </h3>
                <a
                  href="#"
                  style={{
                    fontSize: "13px",
                    color: "var(--accent)",
                    textDecoration: "none",
                  }}
                >
                  apexplumbingatx.com
                </a>
              </div>
              <span
                style={{
                  background: "#e8f5e9",
                  color: "#2e7d32",
                  padding: "4px 8px",
                  borderRadius: 6,
                  fontSize: "11px",
                  fontWeight: 600,
                }}
              >
                High Intent
              </span>
            </div>

            <div
              style={{
                display: "flex",
                gap: 16,
                fontSize: "13px",
                color: "#6b6560",
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
                <Icons.Users /> 12 employees
              </div>
              <div>Est. Software Spend: $450/mo</div>
            </div>
          </div>

          <div style={{ padding: "20px 24px", background: "#faf9f6" }}>
            <div
              style={{
                fontSize: "11px",
                fontWeight: 600,
                color: "#a09a90",
                textTransform: "uppercase",
                marginBottom: 12,
              }}
            >
              AI Software Gap Analysis
            </div>
            <ul
              style={{
                margin: 0,
                padding: 0,
                listStyle: "none",
                display: "flex",
                flexDirection: "column",
                gap: 12,
              }}
            >
              <li
                style={{
                  display: "flex",
                  gap: 10,
                  fontSize: "14px",
                  color: "#1a1a1a",
                }}
              >
                <span style={{ color: "#d32f2f" }}>✗</span>
                <div>
                  <strong>No online booking system.</strong>
                  <div
                    style={{ fontSize: "13px", color: "#6b6560", marginTop: 2 }}
                  >
                    They use a generic contact form. You can pitch a custom
                    scheduling portal.
                  </div>
                </div>
              </li>
              <li
                style={{
                  display: "flex",
                  gap: 10,
                  fontSize: "14px",
                  color: "#1a1a1a",
                }}
              >
                <span style={{ color: "#d32f2f" }}>✗</span>
                <div>
                  <strong>Fragmented quoting.</strong>
                  <div
                    style={{ fontSize: "13px", color: "#6b6560", marginTop: 2 }}
                  >
                    Reviews indicate slow quote turnaround times.
                  </div>
                </div>
              </li>
            </ul>

            <button
              style={{
                width: "100%",
                marginTop: 20,
                padding: "10px",
                background: "#1a1a1a",
                color: "#fff",
                borderRadius: 8,
                fontWeight: 500,
                fontSize: "14px",
                border: "none",
                cursor: "pointer",
              }}
            >
              Generate Pitch & Proposal
            </button>
          </div>
        </div>

        {/* Target Card 2 */}
        <div
          style={{
            background: "#fff",
            border: "1px solid #eae6de",
            borderRadius: 12,
            overflow: "hidden",
            boxShadow: "0 4px 20px rgba(0,0,0,0.03)",
          }}
        >
          <div
            style={{ padding: "20px 24px", borderBottom: "1px solid #eae6de" }}
          >
            <div
              style={{
                display: "flex",
                justifyContent: "space-between",
                alignItems: "flex-start",
                marginBottom: 12,
              }}
            >
              <div>
                <h3
                  style={{
                    fontSize: "18px",
                    fontWeight: 600,
                    color: "#1a1a1a",
                    margin: "0 0 4px",
                  }}
                >
                  Barton Creek HVAC
                </h3>
                <span style={{ fontSize: "13px", color: "#a09a90" }}>
                  No website detected
                </span>
              </div>
              <span
                style={{
                  background: "#fff3e0",
                  color: "#ef6c00",
                  padding: "4px 8px",
                  borderRadius: 6,
                  fontSize: "11px",
                  fontWeight: 600,
                }}
              >
                Medium Intent
              </span>
            </div>

            <div
              style={{
                display: "flex",
                gap: 16,
                fontSize: "13px",
                color: "#6b6560",
              }}
            >
              <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
                <Icons.Users /> 4 employees
              </div>
              <div>Est. Software Spend: $80/mo</div>
            </div>
          </div>

          <div style={{ padding: "20px 24px", background: "#faf9f6" }}>
            <div
              style={{
                fontSize: "11px",
                fontWeight: 600,
                color: "#a09a90",
                textTransform: "uppercase",
                marginBottom: 12,
              }}
            >
              AI Software Gap Analysis
            </div>
            <ul
              style={{
                margin: 0,
                padding: 0,
                listStyle: "none",
                display: "flex",
                flexDirection: "column",
                gap: 12,
              }}
            >
              <li
                style={{
                  display: "flex",
                  gap: 10,
                  fontSize: "14px",
                  color: "#1a1a1a",
                }}
              >
                <span style={{ color: "#d32f2f" }}>✗</span>
                <div>
                  <strong>Missing digital presence.</strong>
                  <div
                    style={{ fontSize: "13px", color: "#6b6560", marginTop: 2 }}
                  >
                    Only operates via a Facebook page. You can pitch a
                    lead-capture landing page and admin dashboard.
                  </div>
                </div>
              </li>
            </ul>

            <button
              style={{
                width: "100%",
                marginTop: 20,
                padding: "10px",
                background: "#fff",
                color: "#1a1a1a",
                border: "1px solid #eae6de",
                borderRadius: 8,
                fontWeight: 500,
                fontSize: "14px",
                cursor: "pointer",
              }}
            >
              Generate Pitch & Proposal
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}
