// sections-mid.jsx — Services, Results, Process, Industries

/* ── Services ────────────────────────────────────────────────── */
function ServicesSection() {
  const items = [
    {
      tag: "01 / Design",
      title: "Custom web design",
      desc: "Bespoke, conversion-focused websites tailored to your brand. No templates. Every element designed to guide visitors toward taking action — booking a call, filling a form, or making a purchase.",
      bullets: ["Responsive design", "Conversion-optimized", "Brand-aligned"],
    },
    {
      tag: "02 / SEO",
      title: "Search optimization",
      desc: "Get found by the people searching for your services. Proven SEO strategies that boost rankings, drive organic traffic, and deliver leads without the ongoing ad spend.",
      bullets: ["On-page", "Local SEO", "Technical"],
    },
    {
      tag: "03 / Brand",
      title: "Marketing & branding",
      desc: "A strong brand paired with smart marketing turns attention into revenue. Compelling messaging, brand identity, and campaigns that resonate with your target audience.",
      bullets: ["Brand strategy", "Content", "Social"],
    },
  ];
  return (
    <section id="services" className="section">
      <div className="container">
        <div style={{ marginBottom: 56 }}>
          <Reveal><Eyebrow>What we do</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2 className="display h2" style={{ marginTop: 20, maxWidth: "18ch" }}>
              Services built to <span className="serif-it">grow</span> your business.
            </h2>
          </Reveal>
        </div>

        <div className="svc-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 12,
        }}>
          {items.map((s, i) => (
            <Reveal key={i} delay={i * 100}>
              <article className="svc-card card" style={{
                padding: 0,
                display: "flex",
                flexDirection: "column",
                height: "100%",
              }}>
                <div style={{
                  aspectRatio: "16 / 10",
                  background: "var(--bg-3)",
                  position: "relative",
                  borderBottom: "1px solid var(--border)",
                  overflow: "hidden",
                }}>
                  <svg width="100%" height="100%" viewBox="0 0 400 250" preserveAspectRatio="xMidYMid slice">
                    <defs>
                      <pattern id={`stripe-${i}`} width="14" height="14" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
                        <line x1="0" y1="0" x2="0" y2="14" stroke="rgba(242,240,235,0.06)" strokeWidth="6"/>
                      </pattern>
                    </defs>
                    <rect width="400" height="250" fill={`url(#stripe-${i})`} />
                  </svg>
                  {/* svc illustration glyph */}
                  <div style={{
                    position: "absolute", inset: 0,
                    display: "grid", placeItems: "center",
                  }}>
                    {i === 0 && (
                      <svg width="120" height="80" viewBox="0 0 120 80" fill="none">
                        <rect x="6" y="6" width="108" height="68" rx="6" stroke="var(--accent)" strokeWidth="1.5"/>
                        <line x1="6" y1="22" x2="114" y2="22" stroke="var(--accent)" strokeWidth="1.5"/>
                        <circle cx="14" cy="14" r="1.6" fill="var(--accent)"/>
                        <circle cx="20" cy="14" r="1.6" fill="var(--accent)"/>
                        <circle cx="26" cy="14" r="1.6" fill="var(--accent)"/>
                        <rect x="14" y="32" width="40" height="4" rx="1" fill="var(--accent)"/>
                    <line x1="14" y1="42" x2="74" y2="42" stroke="rgba(111,197,240,0.5)" strokeWidth="3" strokeLinecap="round"/>
                    <line x1="14" y1="50" x2="64" y2="50" stroke="rgba(111,197,240,0.5)" strokeWidth="3" strokeLinecap="round"/>
                        <rect x="14" y="60" width="28" height="8" rx="2" fill="var(--accent)"/>
                      </svg>
                    )}
                    {i === 1 && (
                      <svg width="120" height="80" viewBox="0 0 120 80" fill="none">
                        <circle cx="50" cy="40" r="22" stroke="var(--accent)" strokeWidth="1.5"/>
                        <line x1="68" y1="56" x2="92" y2="74" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round"/>
                        <path d="M40 40 L46 46 L60 32" stroke="var(--accent)" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                      </svg>
                    )}
                    {i === 2 && (
                      <svg width="120" height="80" viewBox="0 0 120 80" fill="none">
                        <path d="M20 60 L40 30 L60 48 L100 14" stroke="var(--accent)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                        <circle cx="40" cy="30" r="3" fill="var(--accent)"/>
                        <circle cx="60" cy="48" r="3" fill="var(--accent)"/>
                        <circle cx="100" cy="14" r="3" fill="var(--accent)"/>
                        <line x1="20" y1="68" x2="100" y2="68" stroke="rgba(111,197,240,0.4)" strokeWidth="1" strokeDasharray="2 4"/>
                      </svg>
                    )}
                  </div>
                </div>

                <div style={{ padding: 24, display: "flex", flexDirection: "column", flex: 1 }}>
                  <span className="mono" style={{ fontSize: 11, color: "var(--fg-dim)", letterSpacing: "0.1em", textTransform: "uppercase", marginBottom: 14 }}>{s.tag}</span>
                  <h3 className="display" style={{ fontSize: 26, fontWeight: 500, letterSpacing: "-0.02em", marginBottom: 12 }}>{s.title}</h3>
                  <p className="mute" style={{ fontSize: 14.5, lineHeight: 1.55, marginBottom: 20, flex: 1 }}>{s.desc}</p>
                  <div style={{ display: "flex", flexWrap: "wrap", gap: 6 }}>
                    {s.bullets.map((b) => (
                      <span key={b} style={{
                        fontFamily: "var(--font-mono)",
                        fontSize: 10.5,
                        letterSpacing: "0.05em",
                        textTransform: "uppercase",
                        color: "var(--fg-mute)",
                        border: "1px solid var(--border)",
                        padding: "5px 10px",
                        borderRadius: 999,
                        whiteSpace: "nowrap",
                      }}>{b}</span>
                    ))}
                  </div>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .svc-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ── Results ─────────────────────────────────────────────────── */
function ResultsSection() {
  const items = [
    {
      tag: "Home improvement",
      client: "Accel Building & Remodeling",
      hero: { v: 5, s: "+", l: "Organic calls / month" },
      sub:  { v: 14, s: "+", l: "5★ Google reviews" },
      desc: "From zero online presence to a steady stream of inbound calls and a dominant Google reputation — without paid ads.",
    },
    {
      tag: "Mortgage & finance",
      client: "Lend Ignite",
      hero: { v: 2, s: "+", l: "Booked calls / month" },
      sub:  { v: 100, s: "%", l: "Inbound, no cold outreach" },
      desc: "A mortgage business that struggled with lead gen now gets consistent booked appointments through their website.",
    },
    {
      tag: "Construction",
      client: "Build Effective",
      hero: { v: 2, s: "x", l: "Contact-form submissions" },
      sub:  { v: 1, s: "wk", l: "Time to first lead" },
      desc: "A complete marketing overhaul that turned a static website into an active lead generation tool.",
    },
  ];

  return (
    <section id="results" className="section section--alt">
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "end", flexWrap: "wrap", gap: 24, marginBottom: 56 }}>
          <Reveal>
            <Eyebrow>Real results</Eyebrow>
            <h2 className="display h2" style={{ marginTop: 20, maxWidth: "16ch" }}>
              We don't <span className="serif-it">promise</span><br />
              results. We <span className="serif-it" style={{ color: "var(--accent)" }}>show</span> them.
            </h2>
          </Reveal>
          <Reveal delay={120}>
            <a href={CALENDLY_URL} target="_blank" rel="noopener noreferrer" className="row-c gap-2" style={{
              fontSize: 14,
              color: "var(--fg-mute)",
              borderBottom: "1px solid var(--border-2)",
              paddingBottom: 4,
            }}>
              See how we'd do this for you <Icon.arrUR />
            </a>
          </Reveal>
        </div>

        <div className="res-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
          gap: 12,
        }}>
          {items.map((r, i) => (
            <Reveal key={i} delay={i * 100}>
              <article className="card" style={{
                padding: 28,
                height: "100%",
                display: "flex", flexDirection: "column",
                background: "var(--bg)",
              }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 28 }}>
                  <span className="mono" style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                    {r.tag}
                  </span>
                  <span className="mono" style={{ fontSize: 11, color: "var(--fg-dim)" }}>0{i+1} / 03</span>
                </div>

                <div style={{ marginBottom: 24 }}>
                  <div className="display" style={{ fontSize: 72, fontWeight: 600, letterSpacing: "-0.04em", lineHeight: 1, color: "var(--accent)" }}>
                    <CountUp end={r.hero.v} suffix={r.hero.s} />
                  </div>
                  <p className="mono" style={{ fontSize: 11.5, color: "var(--fg-mute)", textTransform: "uppercase", letterSpacing: "0.08em", marginTop: 8 }}>
                    {r.hero.l}
                  </p>
                </div>

                <div style={{ borderTop: "1px solid var(--border)", paddingTop: 18, marginBottom: 22 }}>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 10 }}>
                    <span className="display" style={{ fontSize: 28, fontWeight: 500 }}>
                      <CountUp end={r.sub.v} suffix={r.sub.s} />
                    </span>
                    <span className="mono" style={{ fontSize: 11, color: "var(--fg-mute)", letterSpacing: "0.08em", textTransform: "uppercase" }}>
                      {r.sub.l}
                    </span>
                  </div>
                </div>

                <p className="mute" style={{ fontSize: 14, lineHeight: 1.55, marginBottom: 24, flex: 1 }}>{r.desc}</p>

                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 18, borderTop: "1px solid var(--border)" }}>
                  <span className="display" style={{ fontSize: 15, fontWeight: 500 }}>{r.client}</span>
                  <span style={{ color: "var(--fg-mute)" }}><Icon.arrUR /></span>
                </div>
              </article>
            </Reveal>
          ))}
        </div>
      </div>

      <style>{`
        @media (max-width: 980px) {
          .res-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </section>
  );
}

/* ── Process ─────────────────────────────────────────────────── */
function ProcessSection() {
  const items = [
    { n: "01", t: "Discovery call", time: "15 min", d: "We learn about your business, your customers, and what's not working with your current site. No pitch. Just questions so we understand what you need." },
    { n: "02", t: "Strategy, design & build", time: "1–2 weeks", d: "We map out your messaging, design a conversion-focused layout, write the sales copy, and build your website. You review, we refine, nothing launches without your approval." },
    { n: "03", t: "Launch & track", time: "Day one", d: "Your site goes live with Google Analytics, conversion tracking, and lead capture systems already in place. You'll see exactly how your website performs from day one." },
  ];
  return (
    <section id="process" className="section">
      <div className="container">
        <div style={{ marginBottom: 56 }}>
          <Reveal><Eyebrow>How it works</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2 className="display h2" style={{ marginTop: 20, maxWidth: "16ch" }}>
              From first call to live website — <span className="serif-it">in 1–2 weeks.</span>
            </h2>
          </Reveal>
        </div>

        <div style={{ position: "relative" }}>
          {items.map((it, i) => (
            <Reveal key={i} delay={i * 120}>
              <div style={{
                display: "grid",
                gridTemplateColumns: "120px 1fr 160px",
                gap: 32,
                padding: "36px 0",
                borderTop: "1px solid var(--border)",
                alignItems: "start",
              }} className="proc-row">
                <div>
                  <span className="display" style={{ fontSize: 64, fontWeight: 500, color: "var(--accent)", letterSpacing: "-0.04em", lineHeight: 1 }}>{it.n}</span>
                </div>
                <div>
                  <h3 className="display" style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em", marginBottom: 14 }}>{it.t}</h3>
                  <p className="mute" style={{ fontSize: 15.5, lineHeight: 1.55, maxWidth: "60ch" }}>{it.d}</p>
                </div>
                <div className="proc-time" style={{ textAlign: "right" }}>
                  <Pill dot={false}><span style={{ color: "var(--accent)" }}>●</span>&nbsp;{it.time}</Pill>
                </div>
              </div>
            </Reveal>
          ))}
          <div style={{ borderTop: "1px solid var(--border)" }}></div>
        </div>
      </div>

      <style>{`
        @media (max-width: 860px) {
          .proc-row { grid-template-columns: 80px 1fr !important; }
          .proc-time { display: none !important; }
        }
      `}</style>
    </section>
  );
}

/* ── Industries ──────────────────────────────────────────────── */
function IndustriesSection() {
  const items = [
    { name: "Home improvement", note: "Remodelers, contractors, builders" },
    { name: "Mortgage & finance", note: "Brokers, lenders, advisors" },
    { name: "Healthcare & wellness", note: "Clinics, practices, providers" },
    { name: "Professional services", note: "Law, accounting, agencies" },
    { name: "Consulting", note: "Strategy, ops, niche experts" },
  ];
  return (
    <section className="section section--alt">
      <div className="container">
        <div style={{ display: "grid", gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1.4fr)", gap: 64, alignItems: "start" }} className="two-col">
          <div>
            <Reveal><Eyebrow>Who we serve</Eyebrow></Reveal>
            <Reveal delay={80}>
              <h2 className="display h2" style={{ marginTop: 20 }}>
                Built for <span className="serif-it">service</span><br />
                businesses.
              </h2>
            </Reveal>
            <Reveal delay={160}>
              <p className="lead" style={{ marginTop: 24, maxWidth: "32ch" }}>
                Industries where leads and consultations drive growth — not e-commerce, not B2B SaaS.
              </p>
            </Reveal>
          </div>

          <div style={{ borderTop: "1px solid var(--border)" }}>
            {items.map((it, i) => (
              <Reveal key={i} delay={i * 70}>
                <div className="ind-row" style={{
                  display: "grid",
                  gridTemplateColumns: "60px 1fr auto auto",
                  alignItems: "center",
                  gap: 20,
                  padding: "22px 0",
                  borderBottom: "1px solid var(--border)",
                  transition: "padding 320ms ease",
                  cursor: "default",
                }} onMouseEnter={(e) => e.currentTarget.style.paddingLeft = "12px"}
                   onMouseLeave={(e) => e.currentTarget.style.paddingLeft = "0px"}>
                  <span className="mono" style={{ fontSize: 12, color: "var(--fg-dim)", letterSpacing: "0.06em" }}>0{i+1}</span>
                  <span className="display" style={{ fontSize: 24, fontWeight: 500, letterSpacing: "-0.02em" }}>{it.name}</span>
                  <span className="mute ind-note" style={{ fontSize: 13.5, fontStyle: "italic", fontFamily: "var(--font-serif)" }}>{it.note}</span>
                  <span style={{ color: "var(--accent)" }}><Icon.arrR /></span>
                </div>
              </Reveal>
            ))}
          </div>
        </div>
      </div>

      <style>{`
        @media (max-width: 720px) {
          .ind-row { grid-template-columns: 40px 1fr auto !important; }
          .ind-row .ind-note { display: none; }
        }
      `}</style>
    </section>
  );
}

Object.assign(window, { ServicesSection, ResultsSection, ProcessSection, IndustriesSection });