// What We Build — large premium cards

const BUILD_ITEMS = [
  {
    n: "01",
    title: "Website Development",
    desc: "Build websites designed to become sales tools, not digital brochures.",
    tags: ["Conversion", "Performance", "Design"],
  },
  {
    n: "02",
    title: "Search Engine Optimization",
    desc: "Long term local and national visibility strategies designed to increase qualified traffic.",
    tags: ["Local SEO", "National", "Content"],
  },
  {
    n: "03",
    title: "Paid Advertising",
    desc: "Google Ads and paid campaigns focused on attracting high intent customers.",
    tags: ["Google Ads", "Meta", "Tracking"],
  },
  {
    n: "04",
    title: "CRM Systems",
    desc: "Lead pipelines, organization systems, workflows, calendars and customer management.",
    tags: ["Pipelines", "Workflows", "Calendars"],
  },
  {
    n: "05",
    title: "Sales Systems",
    desc: "Lead handling processes, sales journeys, follow up systems and conversion optimization.",
    tags: ["Cadences", "Scripts", "Offers"],
  },
  {
    n: "06",
    title: "AI Automation",
    desc: "Missed call text back, AI assistants, internal workflows and customer communication automation.",
    tags: ["Assistants", "Text-back", "Ops"],
  },
  {
    n: "07",
    title: "Email and SMS Marketing",
    desc: "Retention systems, customer follow up and lead nurturing campaigns.",
    tags: ["Retention", "Nurture", "Broadcast"],
  },
  {
    n: "08",
    title: "Analytics and Tracking",
    desc: "Understand exactly where traffic, opportunities and revenue originate.",
    tags: ["Attribution", "Dashboards", "GA4"],
  },
  {
    n: "09",
    title: "Identity Resolution & Visitor Tracking",
    desc: "Capture anonymous website visitors and identify potential customer activity for stronger remarketing. Continue marketing and re-engaging audiences even when visitors never fill a form or call.",
    tags: ["De-anonymize", "Remarketing", "Data"],
    wide: true,
  },
];

function BuildCard({ item, i }) {
  const [hover, setHover] = React.useState(false);
  return (
    <Reveal delay={i * 60} className={item.wide ? "build-wide" : ""}>
      <article
        className="card"
        onMouseEnter={() => setHover(true)}
        onMouseLeave={() => setHover(false)}
        style={{
          padding: "32px 32px 28px",
          minHeight: 280,
          display: "flex",
          flexDirection: "column",
          gap: 22,
          transition: "transform 0.6s cubic-bezier(0.2,0.8,0.2,1), border-color 0.4s, background 0.4s",
          background: hover ? "var(--ink)" : "var(--paper)",
          color: hover ? "var(--paper)" : "var(--ink)",
          borderColor: hover ? "var(--ink)" : "var(--line)",
        }}
      >
        <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
          <span className="idx" style={{ color: hover ? "var(--muted-2)" : "var(--muted-2)" }}>{item.n}</span>
          <span style={{
            width: 36, height: 36,
            borderRadius: "50%",
            border: `1px solid ${hover ? "rgba(255,255,255,0.2)" : "var(--line-strong)"}`,
            display: "flex", alignItems: "center", justifyContent: "center",
            transition: "transform 0.5s cubic-bezier(0.2,0.8,0.2,1)",
            transform: hover ? "rotate(-45deg)" : "rotate(0)",
          }}>
            <ArrowR />
          </span>
        </div>

        <h3 className="h-3" style={{ fontSize: 22, fontWeight: 500, marginTop: "auto" }}>{item.title}</h3>
        <p style={{
          margin: 0,
          fontSize: 14.5,
          lineHeight: 1.55,
          color: hover ? "rgba(255,255,255,0.7)" : "var(--muted)",
          letterSpacing: "-0.005em",
        }}>
          {item.desc}
        </p>

        <div className="row gap-2" style={{ flexWrap: "wrap", marginTop: 4 }}>
          {item.tags.map((t) => (
            <span key={t} style={{
              fontSize: 11,
              fontFamily: "var(--mono)",
              textTransform: "uppercase",
              letterSpacing: "0.08em",
              padding: "5px 10px",
              borderRadius: 999,
              border: `1px solid ${hover ? "rgba(255,255,255,0.15)" : "var(--line)"}`,
              color: hover ? "rgba(255,255,255,0.7)" : "var(--muted)",
            }}>{t}</span>
          ))}
        </div>
      </article>
    </Reveal>
  );
}

function CTATile() {
  const [hover, setHover] = React.useState(false);
  return (
    <a
      href="#contact"
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "flex",
        flexDirection: "column",
        justifyContent: "space-between",
        gap: 22,
        padding: "32px 32px 28px",
        minHeight: 280,
        height: "100%",
        borderRadius: "var(--radius-lg)",
        background: hover ? "var(--accent)" : "transparent",
        color: hover ? "#fff" : "var(--ink)",
        border: `1px dashed ${hover ? "var(--accent)" : "var(--line-strong)"}`,
        transition: "background 0.4s, color 0.4s, border-color 0.4s, transform 0.6s cubic-bezier(0.2,0.8,0.2,1)",
        position: "relative",
        overflow: "hidden",
      }}
    >
      <div className="row" style={{ justifyContent: "space-between", alignItems: "flex-start" }}>
        <span className="idx" style={{ color: hover ? "rgba(255,255,255,0.7)" : "var(--muted-2)" }}>+</span>
        <span style={{
          width: 36, height: 36,
          borderRadius: "50%",
          border: `1px solid ${hover ? "rgba(255,255,255,0.4)" : "var(--line-strong)"}`,
          display: "flex", alignItems: "center", justifyContent: "center",
          transition: "transform 0.5s cubic-bezier(0.2,0.8,0.2,1)",
          transform: hover ? "rotate(-45deg)" : "rotate(0)",
        }}>
          <ArrowR />
        </span>
      </div>
      <div style={{ marginTop: "auto" }}>
        <h3 className="h-3" style={{ fontSize: 22, fontWeight: 500 }}>
          Don't see what you need?
        </h3>
        <p style={{
          margin: "12px 0 0",
          fontSize: 14.5,
          lineHeight: 1.55,
          color: hover ? "rgba(255,255,255,0.85)" : "var(--muted)",
          letterSpacing: "-0.005em",
        }}>
          We build custom growth systems. Tell us what you're trying to solve and we'll scope it together.
        </p>
        <div style={{ marginTop: 22, display: "inline-flex", alignItems: "center", gap: 8, fontFamily: "var(--mono)", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.14em", fontWeight: 500 }}>
          Start a conversation
          <ArrowUR size={10} />
        </div>
      </div>
    </a>
  );
}

function Build() {
  return (
    <section id="build" style={{ padding: "120px 0", background: "var(--bg-2)" }}>
      <div className="container">
        <div className="section-head">
          <div>
            <Reveal><SectionLabel index="02" label="What We Build" /></Reveal>
            <Reveal delay={120}>
              <h2 className="h-1" style={{ marginTop: 32, maxWidth: "14ch" }}>
                Everything required to grow under one roof.
              </h2>
            </Reveal>
          </div>
          <Reveal delay={220}>
            <p className="lede" style={{ maxWidth: "44ch" }}>
              From lead generation and visibility to automation and sales infrastructure, we build the systems behind growth.
            </p>
          </Reveal>
        </div>

        <div className="build-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(4, 1fr)",
          gap: 16,
          gridAutoFlow: "dense",
        }}>
          {BUILD_ITEMS.map((it, i) => <BuildCard key={it.n} item={it} i={i} />)}
          <Reveal delay={BUILD_ITEMS.length * 60} className="build-cta">
            <CTATile />
          </Reveal>
        </div>

        <style>{`
          .build-wide { grid-column: span 2; }
          .build-cta { grid-column: span 2; }
          @media (max-width: 1180px) {
            .build-grid { grid-template-columns: repeat(3, 1fr) !important; }
            .build-wide { grid-column: auto !important; }
            .build-cta { grid-column: span 3 !important; }
          }
          @media (max-width: 880px) {
            .build-grid { grid-template-columns: repeat(2, 1fr) !important; }
            .build-wide { grid-column: span 2 !important; }
            .build-cta { grid-column: span 2 !important; }
          }
          @media (max-width: 560px) {
            .build-grid { grid-template-columns: 1fr !important; }
            .build-wide, .build-cta { grid-column: auto !important; }
          }
        `}</style>
      </div>
    </section>
  );
}

window.Build = Build;