// Specific.jsx — "Got something specific?" — 2 cards (Fit-Out + Custom Build)

function Specific() {
  useLucide();

  return (
    <Section id="fitout" bg="sand">
      <div style={{ marginBottom: 56, maxWidth: 720 }}>
        <Eyebrow>For the unusual jobs</Eyebrow>
        <h2 style={{
          fontSize: "clamp(36px, 5vw, 56px)", fontWeight: 800,
          letterSpacing: "-0.03em", lineHeight: 1.05,
          margin: "14px 0 16px", color: "var(--ink)", textWrap: "balance",
        }}>Got something specific?</h2>
        <p style={{ fontSize: 19, lineHeight: 1.5, color: "var(--ink-soft)",
                    margin: 0, maxWidth: 600 }}>
          For when you need a chat first, or your problem doesn't fit a standard tool.
        </p>
      </div>

      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24 }} className="grid-2">

        {/* Fit-Out Session — featured dark card */}
        <div style={{
          background: "var(--blue-900)", color: "#fff",
          borderRadius: 20, padding: 36,
          display: "flex", flexDirection: "column", gap: 22,
          transition: "box-shadow .2s var(--t-ease)",
        }}
          onMouseEnter={e => e.currentTarget.style.boxShadow = "var(--sh-lg)"}
          onMouseLeave={e => e.currentTarget.style.boxShadow = "none"}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <FeatureIcon name="compass" dark size={52} iconSize={24} radius={12} />
            <Chip tone="onDark">Most popular starting point</Chip>
          </div>
          <div>
            <h3 style={{ fontSize: 30, fontWeight: 800, letterSpacing: "-0.02em",
                         lineHeight: 1.15, margin: "0 0 12px", color: "#fff" }}>
              AI Fit-Out Session
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.55, margin: 0,
                        color: "rgba(255,255,255,0.78)", textWrap: "pretty" }}>
              Half a day. We find where time is leaking, hand you a plain-English plan — and show you AI tools you can use from your phone tomorrow.
            </p>
          </div>

          <ul style={{ listStyle: "none", padding: 0, margin: 0,
                       display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              "Online or in person",
              "We walk through your week — quotes, jobs, paperwork, follow-ups",
              "Plain-English plan: what we can automate, what it'll cost, what you'll get back",
              "Hands-on tour of AI tools you can use from your phone tomorrow",
              "No commitment to anything afterwards",
            ].map((b, i) => (
              <li key={i} style={{
                display: "flex", gap: 12, alignItems: "flex-start",
                fontSize: 14.5, lineHeight: 1.5, color: "rgba(255,255,255,0.86)",
              }}>
                <span style={{
                  width: 20, height: 20, borderRadius: 99,
                  background: "rgba(255,255,255,0.12)", color: "#fff",
                  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: 22,
                        borderTop: "1px solid rgba(255,255,255,0.14)",
                        display: "flex", justifyContent: "space-between",
                        alignItems: "center", gap: 16, flexWrap: "wrap" }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 14,
                           color: "#fff", fontWeight: 500 }}>£350 — one-off</span>
            <a href="#contact"
               onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("af:pick-service", { detail: { name: "AI Fit-Out Session" } })); }}
               style={{
                 display: "inline-flex", alignItems: "center", gap: 8,
                 padding: "11px 18px", borderRadius: 10,
                 background: "var(--orange)", color: "#fff",
                 fontSize: 14, fontWeight: 600, textDecoration: "none",
                 border: "1px solid var(--orange)",
                 transition: "transform .12s var(--t-ease)",
               }}
               onMouseEnter={e => e.currentTarget.style.transform = "translateY(-1px)"}
               onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"}>
              Book a Fit-Out
              <i data-lucide="arrow-right" style={{ width: 13, height: 13, strokeWidth: 2.25 }}></i>
            </a>
          </div>
        </div>

        {/* Custom Build — white card */}
        <div style={{
          background: "#fff", borderRadius: 20, padding: 36,
          border: "1px solid var(--line)",
          display: "flex", flexDirection: "column", gap: 22,
          transition: "transform .2s var(--t-ease), box-shadow .2s var(--t-ease)",
        }}
          onMouseEnter={e => { e.currentTarget.style.transform = "translateY(-4px)"; e.currentTarget.style.boxShadow = "var(--sh-md)"; }}
          onMouseLeave={e => { e.currentTarget.style.transform = "translateY(0)"; e.currentTarget.style.boxShadow = "none"; }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <FeatureIcon name="wrench" size={52} iconSize={24} radius={12} />
            <Chip tone="sand">For the unusual jobs</Chip>
          </div>
          <div>
            <h3 style={{ fontSize: 30, fontWeight: 800, letterSpacing: "-0.02em",
                         lineHeight: 1.15, margin: "0 0 12px", color: "var(--ink)" }}>
              Custom Build
            </h3>
            <p style={{ fontSize: 16, lineHeight: 1.55, margin: 0,
                        color: "var(--ink-soft)", textWrap: "pretty" }}>
              Built around the specific thing eating your week.
            </p>
          </div>

          <ul style={{ listStyle: "none", padding: 0, margin: 0,
                       display: "flex", flexDirection: "column", gap: 10 }}>
            {[
              "Quote-from-WhatsApp automation",
              "Automatic invoice chaser",
              "Supplier order workflows",
              "Job-sheet to invoice pipeline",
              "Anything else that's eating your evenings",
            ].map((b, i) => (
              <li key={i} style={{
                display: "flex", gap: 12, alignItems: "flex-start",
                fontSize: 14.5, lineHeight: 1.5, color: "var(--ink-soft)",
              }}>
                <span style={{
                  width: 20, height: 20, borderRadius: 99,
                  background: "var(--blue-100)", color: "var(--blue)",
                  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: 22,
                        borderTop: "1px solid var(--line)",
                        display: "flex", justifyContent: "space-between",
                        alignItems: "center", gap: 16, flexWrap: "wrap" }}>
            <span style={{ fontFamily: "var(--font-mono)", fontSize: 14,
                           color: "var(--ink)", fontWeight: 500 }}>Price is flexible — we scope it together</span>
            <a href="#contact"
               onClick={(e) => { e.preventDefault(); window.dispatchEvent(new CustomEvent("af:pick-service", { detail: { name: "Custom Build" } })); }}
               style={{
                 display: "inline-flex", alignItems: "center", gap: 8,
                 padding: "11px 18px", borderRadius: 10,
                 background: "var(--ink)", color: "#fff",
                 fontSize: 14, fontWeight: 600, textDecoration: "none",
                 border: "1px solid var(--ink)",
                 transition: "transform .12s var(--t-ease)",
               }}
               onMouseEnter={e => e.currentTarget.style.transform = "translateY(-1px)"}
               onMouseLeave={e => e.currentTarget.style.transform = "translateY(0)"}>
              Tell us what you need
              <i data-lucide="arrow-right" style={{ width: 13, height: 13, strokeWidth: 2.25 }}></i>
            </a>
          </div>
        </div>
      </div>

      <p style={{
        marginTop: 48, textAlign: "center", fontSize: 17,
        color: "var(--ink-soft)", maxWidth: 680, marginLeft: "auto", marginRight: "auto",
        lineHeight: 1.55, textWrap: "pretty",
      }}>
        Not sure which? <strong style={{ color: "var(--ink)", fontWeight: 700 }}>Start with the Fit-Out</strong> — we'll tell you straight if a standard tool will do, or if it needs a custom build.
      </p>
    </Section>
  );
}
window.Specific = Specific;