// Tools.jsx — Ready-to-Fit Tools — 4 cards with bullet lists

function Tools() {
  useLucide();
  const tools = [
  {
    id: "email",
    icon: "mail",
    name: "AI Email Assistant",
    photoLabel: "AI Email Assistant — demo video",
    image: "assets/tools/email-assistant.jpg",
    tagline: "Replies the moment an enquiry lands. Answers questions, books the appointment, follows up — before the lead goes cold.",
    bullets: [
    "Replies instantly to website forms and email enquiries, day or night",
    "Books calls and appointments straight into your Google Calendar",
    "Answers customer questions the way you'd want them answered",
    "Handles rescheduling without you getting involved",
    "Hands over to you when the conversation needs you",
    "Sends you a summary by WhatsApp, Telegram, or email — your choice"],

    price: "Setup £350 · Then £75/month"
  },
  {
    id: "phone",
    icon: "phone",
    name: "AI Phone Assistant",
    photoLabel: "AI Phone Assistant — demo video",
    image: "assets/tools/phone-assistant.jpg",
    tagline: "Answers your phone 24/7 in plain natural English. Never sleeps, never snaps, never misses a call.",
    bullets: [
    "Dedicated business number — use it on your website, your ads, or forward your existing line when you're busy",
    "Books appointments straight into Google Calendar",
    "Answers customer questions the way you'd want them answered",
    "Sends SMS — confirmations, information requests",
    "Transfers to you when needed",
    "Sends you a call summary by SMS, WhatsApp, Telegram, or email — your choice"],

    price: "Setup £750 · Then £145/month"
  },
  {
    id: "receptionist",
    icon: "headset",
    name: "AI Receptionist",
    subname: "Email + Phone bundle",
    photoLabel: "Android phone — inbox view",
    image: "assets/tools/receptionist.jpg",
    tagline: "One assistant for everything coming in — phone and email. Same brain, same calendar, same answers.",
    bullets: [
    "Everything in the AI Email Assistant",
    "Everything in the AI Phone Assistant",
    "One calendar, one set of instructions — consistent every time",
    "Customers get the same experience whether they ring or write",
    "Best value if missed calls and slow replies are both costing you work"],

    price: "Setup £995 · Then £195/month",
    featured: true,
    tag: "Best value"
  },
  {
    id: "paperwork",
    icon: "folder-search",
    name: "AI Paperwork Assistant",
    photoLabel: "Pile of invoices and receipts",
    image: "assets/tools/paperwork.jpg",
    tagline: "Stop hunting through paper, inboxes, and folders. Your documents, organised and searchable in plain English.",
    bullets: [
    "Send documents in by photo, email, or file — invoices, bills, contracts, certificates, receipts",
    "Filed and organised automatically",
    <React.Fragment key="search">Search in plain English: <em style={{ color: "var(--ink)" }}>"What did we invoice Johnson's in March?"</em></React.Fragment>,
    "Builds tables and reports from your documents on demand — just ask",
    "Your data stays private and secure — your own database, nobody else's"],

    price: "Setup £495 · Then £95/month"
  }];


  return (
    <Section id="services" bg="white">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", alignItems: "end",
        gap: 32, marginBottom: 56 }} className="grid-2">
        <div>
          <Eyebrow>Ready-to-Fit Tools</Eyebrow>
          <h2 style={{
            fontSize: "clamp(36px, 5vw, 56px)", fontWeight: 800,
            letterSpacing: "-0.03em", lineHeight: 1.05,
            margin: "14px 0 0", color: "var(--ink)", textWrap: "balance"
          }}>Standard for every business.</h2>
        </div>
        <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--ink-soft)",
          margin: 0, maxWidth: 460 }}>Select from our suite of ready-to-deploy AI agents. We tailor the fit to your business.</p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }} className="grid-2">
        {tools.map((t) => <ToolCard key={t.id} {...t} />)}
      </div>
    </Section>);

}

function ToolCard({ icon, name, subname, photoLabel, image, tagline, bullets, price, featured, tag }) {
  const fg = featured ? "#fff" : "var(--ink)";
  const fgSoft = featured ? "rgba(255,255,255,0.78)" : "var(--ink-soft)";
  const line = featured ? "rgba(255,255,255,0.14)" : "var(--line)";
  const checkBg = featured ? "rgba(255,255,255,0.12)" : "var(--blue-100)";
  const checkColor = featured ? "#fff" : "var(--blue)";

  function pickThis(e) {
    e.preventDefault();
    window.dispatchEvent(new CustomEvent("af:pick-service", { detail: { name } }));
    const el = document.getElementById("contact-form");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });else
    location.hash = "#contact-form";
  }

  return (
    <div style={{
      background: featured ? "var(--blue-900)" : "#fff",
      borderRadius: 20,
      border: featured ? "1px solid var(--blue-900)" : "1px solid var(--line)",
      padding: 8,
      display: "flex", flexDirection: "column",
      transition: "transform .2s var(--t-ease), box-shadow .2s var(--t-ease)"
    }}
    onMouseEnter={(e) => {e.currentTarget.style.transform = featured ? "none" : "translateY(-4px)";e.currentTarget.style.boxShadow = "var(--sh-md)";}}
    onMouseLeave={(e) => {e.currentTarget.style.transform = "none";e.currentTarget.style.boxShadow = "none";}}>

      {/* Photo / video placeholder */}
      <div style={{ position: "relative" }}>
        {image ?
        <div style={{
          aspectRatio: "16 / 9", borderRadius: 14, overflow: "hidden",
          background: "var(--sand)",
          border: featured ? "1px solid rgba(255,255,255,0.08)" : "1px solid var(--line-2)"
        }}>
            <img src={image} alt={name} loading="lazy" style={{
            width: "100%", height: "100%", objectFit: "cover", display: "block"
          }} />
          </div> :

        <PhotoPlaceholder aspect="16 / 9" label={photoLabel} radius={14} dark={featured} icon="play" />
        }
        {tag &&
        <div style={{ position: "absolute", top: 14, right: 14 }}>
            <Chip tone="orange">{tag}</Chip>
          </div>
        }
        <div style={{ position: "absolute", top: 14, left: 14 }}>
          <div style={{
            width: 36, height: 36, borderRadius: 10,
            background: featured ? "rgba(255,255,255,0.14)" : "#fff",
            color: featured ? "#fff" : "var(--blue)",
            display: "flex", alignItems: "center", justifyContent: "center",
            border: featured ? "1px solid rgba(255,255,255,0.18)" : "1px solid var(--line)",
            boxShadow: featured ? "none" : "var(--sh-xs)"
          }}>
            <i data-lucide={icon} style={{ width: 18, height: 18, strokeWidth: 2 }}></i>
          </div>
        </div>
      </div>

      <div style={{ padding: "24px 28px 28px",
        display: "flex", flexDirection: "column", flexGrow: 1, gap: 18 }}>
        <div>
          <h3 style={{ fontSize: 26, fontWeight: 800, letterSpacing: "-0.02em",
            lineHeight: 1.15, margin: "0 0 6px", color: fg }}>
            {name}
            {subname && <span style={{ fontWeight: 500, fontSize: 15, color: fgSoft,
              marginLeft: 8, letterSpacing: 0 }}>· {subname}</span>}
          </h3>
          <p style={{ fontSize: 15.5, lineHeight: 1.55, margin: 0,
            color: fgSoft, textWrap: "pretty" }}>{tagline}</p>
        </div>

        <ul style={{ listStyle: "none", padding: 0, margin: 0,
          display: "flex", flexDirection: "column", gap: 10 }}>
          {bullets.map((b, i) =>
          <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start",
            fontSize: 14, lineHeight: 1.5, color: fgSoft }}>
              <span style={{
              width: 20, height: 20, borderRadius: 99, background: checkBg,
              color: checkColor,
              display: "inline-flex", alignItems: "center", justifyContent: "center",
              flexShrink: 0, marginTop: 1
            }}>
                <i data-lucide="check" style={{ width: 12, height: 12, strokeWidth: 2.5 }}></i>
              </span>
              <span>{b}</span>
            </li>
          )}
        </ul>

        <div style={{ marginTop: "auto",
          paddingTop: 20, borderTop: `1px solid ${line}`,
          display: "flex", justifyContent: "space-between",
          alignItems: "center", gap: 16, flexWrap: "wrap" }}>
          <span style={{ fontFamily: "var(--font-mono)", fontSize: 13.5,
            color: fg, fontWeight: 500 }}>{price}</span>
          <a href="#contact-form" onClick={pickThis}
          style={{
            display: "inline-flex", alignItems: "center", gap: 8,
            padding: "10px 16px", borderRadius: 10,
            background: featured ? "var(--orange)" : "var(--ink)",
            color: "#fff", fontSize: 13.5, fontWeight: 600, textDecoration: "none",
            border: `1px solid ${featured ? "var(--orange)" : "var(--ink)"}`,
            transition: "transform .12s var(--t-ease), background .15s var(--t-ease)"
          }}
          onMouseEnter={(e) => {e.currentTarget.style.transform = "translateY(-1px)";}}
          onMouseLeave={(e) => {e.currentTarget.style.transform = "translateY(0)";}}>
            Get this fitted
            <i data-lucide="arrow-right" style={{ width: 13, height: 13, strokeWidth: 2.25 }}></i>
          </a>
        </div>
      </div>
    </div>);

}

window.Tools = Tools;