/* TekConnected — sections v5 (case study breadth + founder polish) */
const { useState: useS3, useEffect: useE3, useRef: useR3 } = React;

/* ----- Reveal-on-scroll hook (auto-applies to anything with .reveal) ----- */
function useRevealObserver() {
  useE3(() => {
    const els = document.querySelectorAll('.reveal, .stat-strip, .proof, .tpl, .how, .team');
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add('in');
          io.unobserve(e.target);
        }
      });
    }, { threshold: 0.16, rootMargin: '0px 0px -8% 0px' });
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

/* ----- Counter-up: animates a numeric value into view ----- */
function Counter({ to, suffix = '', prefix = '', duration = 1400, format }) {
  const [val, setVal] = useS3(0);
  const ref = useR3(null);
  const started = useR3(false);
  useE3(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting && !started.current) {
          started.current = true;
          const start = performance.now();
          const tick = (now) => {
            const t = Math.min(1, (now - start) / duration);
            const eased = 1 - Math.pow(1 - t, 3);
            setVal(Math.round(to * eased));
            if (t < 1) requestAnimationFrame(tick);
          };
          requestAnimationFrame(tick);
        }
      });
    }, { threshold: 0.6 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [to, duration]);
  const display = format ? format(val) : val.toLocaleString();
  return <span ref={ref} className="counting">{prefix}{display}{suffix}</span>;
}
window.Counter = Counter;
window.useRevealObserver = useRevealObserver;

function Nav() {
  return (
    <nav className="nav">
      <div className="wrap row">
        <a href="#" className="brand brand--svg" aria-label="tekconnected">
          <img src="assets/brand/tekconnected-logo.svg" alt="tekconnected." className="brand-logo" />
        </a>
        <div className="nav-links">
          <a href="#systems">What we build</a>
          <a href="#cases">Case studies</a>
          <a href="#how">Process</a>
          <a href="#team">Team</a>
          <a href="#faq">FAQ</a>
        </div>
        <div className="nav-meta">
          <span className="cert-badge"><span className="blue"></span><strong>monday.com</strong>&nbsp;Certified Partner</span>
          <a href="#book" className="btn btn--cta">Book a CRM strategy call <span className="arr" aria-hidden>→</span></a>
        </div>
      </div>
    </nav>
  );
}

function Hero({ tweaks }) {
  const [tab, setTab] = useS3("pipeline");
  const variant = tweaks.heroVariant;
  return (
    <section className="hero">
      <div className="hero-bg" />
      <div className="wrap hero-grid">
        <div>
          <div className="hero-meta">
            <span className="pill"><span className="dot"></span>Booking Q3 — limited intake</span>
            <span className="eyebrow">monday.com CRM implementation · for construction companies</span>
          </div>

          {variant === "ops" && (
            <h1>
              Your construction business has <span className="underlined">outgrown spreadsheets.</span>
            </h1>
          )}
          {variant === "blueprint" && (
            <h1>
              One <span className="acc">monday.com CRM.</span> Every lead, estimate and follow-up.
            </h1>
          )}
          {variant === "chaos" && (
            <h1>
              Stop losing leads, estimates and follow-ups in <span className="underlined">spreadsheets and group chats.</span>
            </h1>
          )}

          <p className="hero-sub">
            We design and build <strong>custom monday.com CRMs</strong> for construction companies that need to track leads, follow up on estimates, manage project handoffs, and see every opportunity in one place.
          </p>
          <p className="hero-sub-strong">Not templates. Built around your real workflow.</p>

          <div className="hero-cta-row">
            <a href="#book" className="btn btn--cta btn--lg">
              Book your CRM strategy call <span className="arr" aria-hidden>→</span>
            </a>
            <a href="#systems" className="btn btn--ghost btn--lg">
              See what we build
            </a>
          </div>

          <div className="hero-trust">
            <div className="avatars" aria-hidden>
              <span className="a" style={{ background: "#c2a878" }}></span>
              <span className="a" style={{ background: "#5a6473" }}></span>
              <span className="a" style={{ background: "#0073ea" }}></span>
              <span className="a" style={{ background: "#ff6a13" }}></span>
            </div>
            <span><strong style={{ color: "#0e1822" }}>monday.com Certified Partner</strong> · custom CRMs for project-based businesses</span>
          </div>
        </div>

        <div style={{ position: "relative" }}>
          <PipelineMockup activeTab={tab} onTab={setTab} />
          <FloatChip
            chip="1"
            style={{ left: "-28px", top: "30%" }}
            kind="monday" title="New lead → Owner: Mike R." sub="auto-assigned · 2.1s ago"
          />
          <FloatChip
            chip="2"
            style={{ right: "-16px", top: "12%" }}
            kind="green" title="Estimate follow-up scheduled" sub="Hartwell · 3-day · auto"
          />
          <FloatChip
            chip="3"
            style={{ right: "-12px", bottom: "14%" }}
            kind="safety" title="Follow-up overdue: Marston" sub="9 days · $112,800 in pipeline"
          />
        </div>
      </div>
    </section>
  );
}

function StatStrip() {
  const stats = [
    { node: <><Counter to={2000} />+</>,                       l: "Sales orders migrated" },
    { node: <><Counter to={12} />+</>,                          l: "Financial data points / project" },
    { node: <>Weekly</>,                                        l: "Automated system sync" },
    { node: <><Counter to={80} prefix="70-" suffix="%" /></>, l: "Less manual reporting" },
  ];
  return (
    <section className="stat-strip">
      <div className="wrap">
        <div className="row">
          {stats.map((s, i) => (
            <div className="stat-cell" key={i}>
              <div className="v">{s.node}</div>
              <div className="l">{s.l}</div>
            </div>
          ))}
        </div>
        <div className="stat-foot">
          ↳ Verified results from the <strong>Beachley Furniture Company</strong> implementation — see case studies below.
        </div>
      </div>
    </section>
  );
}

function Logos() {
  const logos = [
    { src: "assets/logo-beachley-1.png", name: "Beachley", tall: false },
    { src: "assets/logo-scb.png", name: "Steel Craft Builders", tall: true },
    { src: "assets/logo-edition-living.webp", name: "Edition Living" },
    { src: "assets/logo-pcmg.webp", name: "Principal Construction" },
    { src: "assets/logo-big-dog-painting.webp", name: "Big Dog Painting" },
    { src: "assets/logo-color-splash.webp", name: "Color Splash Painting" },
    { src: "assets/logo-winegardner.png", name: "Winegardner" },
    { src: "assets/logo-hvac-success.png", name: "HVAC Success" },
    { src: "assets/logo-lbrook-home.png", name: "L Brook Home", tall: true },
    { src: "assets/logo-jmi.png", name: "JM Investments" },
  ];
  return (
    <section className="logos">
      <div className="wrap">
        <div className="label">Trusted by project-based businesses and operations teams</div>
        <div className="logo-row">
          {logos.map((l, i) => (
            <div className={`logo-cell ${l.tall ? "tall" : ""}`} key={i} title={l.name}>
              <img src={l.src} alt={l.name} />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pains() {
  const pains = [
    {
      n: "01", tag: "LEAD LEAK",
      q: <>Leads come in. <span className="accent">Nobody owns the next step.</span></>,
      d: "Form fills, calls, referrals and emails get scattered across inboxes, spreadsheets and memory. By Tuesday, half are cold."
    },
    {
      n: "02", tag: "ESTIMATE GAP",
      q: <>Estimates go out. <span className="accent">Follow-up gets inconsistent.</span></>,
      d: "Your team knows the money is in the follow-up, but nobody has a clean system forcing it to happen on every quote."
    },
    {
      n: "03", tag: "HANDOFF CHAOS",
      q: <>Sales closes. <span className="accent">Operations gets fragments.</span></>,
      d: "Scope, notes, contacts, files and next steps get passed manually — and things get missed before the first day on site."
    },
  ];
  return (
    <section id="problems" className="pains section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow num"><span className="n">02</span><span className="dash">—</span> The chaos tax</span>
            <h2 style={{ marginTop: 18 }}>Three places your business is bleeding revenue right now.</h2>
          </div>
          <p>If two of these sound like your week, you don't need another tool — you need the tool you already pay for to actually match how you run the business.</p>
        </div>
        <div className="pain-grid">
          {pains.map((p, i) => (
            <div className={`pain reveal d${i+1}`} key={i}>
              <div className="icon-tag">!</div>
              <div className="num">PROBLEM // {p.n}<span className="tag">{p.tag}</span></div>
              <div className="quote">{p.q}</div>
              <div className="desc">{p.d}</div>
            </div>
          ))}
        </div>

        <div className="pain-close reveal">
          <span className="pain-close-mark">↳</span>
          <p>If two of these sound like your week, you don't need another tool — you need <strong>the system you already pay for, built around how you actually work.</strong></p>
        </div>
      </div>
    </section>
  );
}

/* ---------- Four-system UI snippets ---------- */
function CRMSnippet() {
  return (
    <div className="svc-snippet">
      <div className="svc-snippet-label">
        <span>SALES PIPELINE</span>
        <span className="live">live</span>
      </div>
      <div className="mini-pipeline">
        <div className="mp-col">
          <div className="mp-col-h"><span className="d" style={{background:"#c4c4c4"}}></span>New</div>
          <div className="mp-card">L Brook — stair refit<span className="v">$—</span></div>
          <div className="mp-card">Sycamore HOA<span className="v">$22.4k</span></div>
        </div>
        <div className="mp-col">
          <div className="mp-col-h"><span className="d" style={{background:"#0073ea"}}></span>Site visit</div>
          <div className="mp-card">Riverstone TI<span className="v">$184.5k</span></div>
        </div>
        <div className="mp-col">
          <div className="mp-col-h"><span className="d" style={{background:"#fdab3d"}}></span>Estimate</div>
          <div className="mp-card s">Hartwell remodel<span className="v">$48.2k</span></div>
          <div className="mp-card s">Marston add'n<span className="v">$112.8k</span></div>
        </div>
        <div className="mp-col">
          <div className="mp-col-h"><span className="d" style={{background:"#00c875"}}></span>Won</div>
          <div className="mp-card g">Color Splash<span className="v">$32.4k</span></div>
        </div>
      </div>
    </div>
  );
}

function HandoffSnippet() {
  return (
    <div className="svc-snippet">
      <div className="svc-snippet-label">
        <span>SALES → OPERATIONS</span>
        <span className="live">auto</span>
      </div>
      <div className="mini-handoff">
        <div className="mh-side">
          <div className="mh-h"><span className="d" style={{background:"#0073ea"}}></span>Sales — Won</div>
          <div className="mh-row"><span className="ck">✓</span>Scope of work</div>
          <div className="mh-row"><span className="ck">✓</span>Contract & files</div>
          <div className="mh-row"><span className="ck">✓</span>Customer contacts</div>
        </div>
        <div className="mh-arrow">
          <svg viewBox="0 0 100 32" preserveAspectRatio="none" aria-hidden>
            <path d="M 0 16 L 100 16" stroke="#ff6a13" strokeWidth="1.5" strokeDasharray="4 3" fill="none"/>
          </svg>
          <span className="mh-pulse">→</span>
        </div>
        <div className="mh-side">
          <div className="mh-h"><span className="d" style={{background:"#00c875"}}></span>Project board</div>
          <div className="mh-row"><span className="ck">✓</span>Kickoff scheduled</div>
          <div className="mh-row"><span className="ck">✓</span>PM assigned</div>
          <div className="mh-row"><span className="ck empty">·</span>Punch list pending</div>
        </div>
      </div>
    </div>
  );
}

function AutoSnippet() {
  return (
    <div className="svc-snippet">
      <div className="svc-snippet-label">
        <span>AUTOMATION RECIPE</span>
        <span className="live">live</span>
      </div>
      <div className="mini-auto">
        <div className="ma-row">
          <span className="step t">T</span>
          <div className="ma-card"><span className="lbl">When</span><strong>Estimate sent</strong></div>
        </div>
        <div className="ma-line"></div>
        <div className="ma-row">
          <span className="step a">A</span>
          <div className="ma-card"><span className="lbl">Then</span><strong>Schedule 3-day follow-up</strong></div>
        </div>
        <div className="ma-line"></div>
        <div className="ma-row">
          <span className="step f">N</span>
          <div className="ma-card"><span className="lbl">Notify</span><strong>Owner @ overdue → 7 days</strong></div>
        </div>
      </div>
    </div>
  );
}

function DashSnippet() {
  return (
    <div className="svc-snippet">
      <div className="svc-snippet-label">
        <span>OWNER DASHBOARD</span>
        <span className="live">live</span>
      </div>
      <div className="mini-dash">
        <div className="md-tile up">
          <div className="v">$847k</div>
          <div className="l">Pipeline</div>
        </div>
        <div className="md-tile">
          <div className="v">38%</div>
          <div className="l">Win rate</div>
        </div>
        <div className="md-tile warn">
          <div className="v">4</div>
          <div className="l">Overdue</div>
        </div>
        <div className="md-tile chart">
          <div className="l">Estimates / wk</div>
          <div className="md-bars"><i></i><i></i><i></i><i></i><i></i><i></i></div>
        </div>
      </div>
    </div>
  );
}

function Solutions() {
  const items = [
    {
      n: "01", tag: "CRM",
      title: "Lead & estimate CRM",
      body: "Every inquiry, sales stage, estimate and follow-up in one place — owned, tracked, and visible across the team.",
      bullets: [
        "Custom sales pipeline matched to your real stages",
        "Estimate templates with your cost codes & margins",
        "Auto-assigned owner + next follow-up on every lead",
      ],
      Snip: CRMSnippet,
    },
    {
      n: "02", tag: "HANDOFF",
      title: "Project handoff system",
      body: "Won jobs move from sales to operations cleanly — scope, contacts, contract and files attached. No more forwarded emails.",
      bullets: [
        "Auto-create project board the moment a deal is Won",
        "Handoff checklist: scope, contacts, schedule, files",
        "PM gets the full picture — customer feels nothing",
      ],
      Snip: HandoffSnippet,
    },
    {
      n: "03", tag: "AUTOMATIONS",
      title: "Automations & reminders",
      body: "Owners assigned, follow-ups triggered, overdue tasks flagged. The system nags so your team doesn't have to.",
      bullets: [
        "New lead → owner assigned → follow-up scheduled",
        "Estimate sent → 3-day, 7-day, 14-day reminders",
        "Status changes notify the right person, every time",
      ],
      Snip: AutoSnippet,
    },
    {
      n: "04", tag: "DASHBOARDS",
      title: "Dashboards & integrations",
      body: "Pipeline, active jobs, follow-ups, workload and connected tools — all in one view your owner and PMs actually open.",
      bullets: [
        "Pipeline value, win rate, and forecast — live",
        "Connect QuickBooks, Gmail, NetSuite, Make.com, more",
        "Custom dashboards for owner, sales, PM, finance",
      ],
      Snip: DashSnippet,
    },
  ];
  return (
    <section id="systems" className="soln section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow num"><span className="n">03</span><span className="dash">—</span> What we build</span>
            <h2 style={{ marginTop: 18 }}>Four systems. One workspace. Built around your trade.</h2>
          </div>
          <p>We don't drop a generic monday template in your account and walk away. We rebuild the platform around how <strong style={{ color: "#0e1822" }}>your</strong> sales, ops and field teams actually work.</p>
        </div>
        <div className="soln-grid">
          {items.map((it, i) => {
            const Snip = it.Snip;
            return (
              <div className={`svc reveal d${(i%2)+1}`} key={i}>
                <div className="head">
                  <div className="num">SYSTEM // {it.n}</div>
                  <div className="tag">{it.tag}</div>
                </div>
                <h3>{it.title}</h3>
                <p>{it.body}</p>
                <ul>
                  {it.bullets.map((b, j) => <li key={j}>{b}</li>)}
                </ul>
                <Snip />
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function CaseStudies() {
  const [active, setActive] = useS3(0);

  const cases = [
    {
      tag: "FINANCE OPERATIONS",
      client: "PCMGKC",
      title: "Project-to-invoice automation",
      one: "Manual invoicing across QuickBooks, duplicated data and delayed billing cycles.",
      two: "monday.com → Make.com → QuickBooks. Invoices generated only when financial conditions are met. IDs written back. Architecture portable to Xero & Sage.",
      stack: ["monday.com", "Make.com", "QuickBooks"],
      domain: "Construction & Property Services",
      diagram: (
        <svg viewBox="0 0 240 88" className="cs-mini" aria-hidden>
          <rect x="6"   y="30" width="60" height="28" rx="3" fill="#fff" stroke="#0e1822" strokeWidth="1"/>
          <text x="36" y="48" textAnchor="middle" fontSize="9" fontFamily="JetBrains Mono" fill="#0e1822">monday</text>
          <rect x="90"  y="30" width="60" height="28" rx="3" fill="#0e1822"/>
          <text x="120" y="48" textAnchor="middle" fontSize="9" fontFamily="JetBrains Mono" fill="#fff">Make.com</text>
          <rect x="174" y="30" width="60" height="28" rx="3" fill="#fff" stroke="#ff6a13" strokeWidth="1.5"/>
          <text x="204" y="48" textAnchor="middle" fontSize="9" fontFamily="JetBrains Mono" fill="#0e1822">QuickBooks</text>
          <path d="M66 44 L90 44" stroke="#0e1822" strokeWidth="1.2" strokeDasharray="3 3"/>
          <path d="M150 44 L172 44" stroke="#ff6a13" strokeWidth="1.5"/>
          <polygon points="172,42 174,44 172,46" fill="#ff6a13"/>
        </svg>
      ),
    },
    {
      tag: "QUOTE → INVOICE",
      client: "Steel Craft Builders",
      title: "Connected quote-to-cash CRM",
      one: "200–250 jobs quoted per year, 95% repeatable — but no system enforced the process. Re-keying between tools at every handoff.",
      two: "Four connected boards (CRM, Project Delivery, Erection Schedule, Billing) with cross-board automation. PO Signed auto-creates downstream items. Five billing cycles tracked end-to-end.",
      stack: ["monday.com", "Outlook", "DocuSign", "OneDrive"],
      domain: "Pre-engineered metal buildings",
      stat: { v: "~70%", l: "less manual data re-entry per job" },
      diagram: (
        <svg viewBox="0 0 240 88" className="cs-mini" aria-hidden>
          {[0,1,2,3].map((i) => (
            <g key={i}>
              <rect x={6 + i*58} y="30" width="50" height="28" rx="3" fill={i===3?"#fff":"#fff"} stroke={i===3?"#00c875":"#0e1822"} strokeWidth={i===3?"1.5":"1"}/>
              <text x={31 + i*58} y="42" textAnchor="middle" fontSize="7" fontFamily="JetBrains Mono" fill="#5a6473">B{i+1}</text>
              <text x={31 + i*58} y="52" textAnchor="middle" fontSize="7" fontFamily="JetBrains Mono" fill="#0e1822">{["CRM","Deliv","Sched","Bill"][i]}</text>
              {i < 3 && <path d={`M${56 + i*58} 44 L${64 + i*58} 44`} stroke="#ff6a13" strokeWidth="1.2"/>}
            </g>
          ))}
        </svg>
      ),
    },
    {
      tag: "AI KNOWLEDGE",
      client: "Steel Craft Builders",
      title: "Dual-interface RAG knowledge system",
      one: "Knowledge lived in founders' heads. Field teams phoned the office for SOPs. State building codes answered from memory.",
      two: "Document-grounded AI assistant with two interfaces — WordPress chatbot for customers, Slack agent for staff. 120+ vectorised docs auto-indexed from Google Drive. Multi-LLM cross-verification.",
      stack: ["n8n", "Supabase", "Claude", "GPT-4o", "Google Drive"],
      domain: "Pre-engineered metal buildings",
      stat: { v: "120+", l: "vectorised docs · re-indexed within 2 minutes" },
      diagram: (
        <svg viewBox="0 0 240 88" className="cs-mini" aria-hidden>
          <rect x="6" y="30" width="56" height="28" rx="3" fill="#fff" stroke="#0e1822" strokeWidth="1"/>
          <text x="34" y="48" textAnchor="middle" fontSize="9" fontFamily="JetBrains Mono" fill="#0e1822">G-Drive</text>
          <rect x="92" y="30" width="56" height="28" rx="3" fill="#0e1822"/>
          <text x="120" y="48" textAnchor="middle" fontSize="9" fontFamily="JetBrains Mono" fill="#fff">RAG</text>
          <rect x="178" y="14" width="56" height="22" rx="3" fill="#fff" stroke="#0073ea" strokeWidth="1.2"/>
          <text x="206" y="28" textAnchor="middle" fontSize="8" fontFamily="JetBrains Mono" fill="#0e1822">Slack</text>
          <rect x="178" y="52" width="56" height="22" rx="3" fill="#fff" stroke="#ff6a13" strokeWidth="1.2"/>
          <text x="206" y="66" textAnchor="middle" fontSize="8" fontFamily="JetBrains Mono" fill="#0e1822">Web chat</text>
          <path d="M62 44 L92 44" stroke="#0e1822" strokeWidth="1.2" strokeDasharray="3 3"/>
          <path d="M148 40 L178 25" stroke="#0073ea" strokeWidth="1.2"/>
          <path d="M148 48 L178 63" stroke="#ff6a13" strokeWidth="1.2"/>
        </svg>
      ),
    },
    {
      tag: "CHANGE ORDERS · CRM",
      client: "Winegardner Masonry",
      title: "Project, CRM & change-order ecosystem",
      one: "Ad-hoc project tracking. CCRs prepared by hand in Excel. No revision control. No consolidated view across projects.",
      two: "Five Make.com scenarios: project board provisioning, progress sync, sequential CCR numbering (WCO-XXXXX), revision tracking, and template mapping that auto-populates Google Sheets and attaches Excel back to monday.com.",
      stack: ["monday.com", "Make.com (×5)", "Google Sheets", "Google Drive"],
      domain: "Commercial & federal masonry",
      stat: { v: "5", l: "Make.com scenarios connecting ops, finance & change orders" },
      diagram: (
        <svg viewBox="0 0 240 88" className="cs-mini" aria-hidden>
          <rect x="6" y="30" width="60" height="28" rx="3" fill="#fff" stroke="#0e1822" strokeWidth="1"/>
          <text x="36" y="48" textAnchor="middle" fontSize="9" fontFamily="JetBrains Mono" fill="#0e1822">monday</text>
          <g>
            {[18,32,46,60,74].map((y, i) => (
              <rect key={i} x="92" y={y - 4} width="56" height="8" rx="2" fill="#0e1822" opacity={0.85 - i*0.07}/>
            ))}
            <text x="120" y="86" textAnchor="middle" fontSize="7" fontFamily="JetBrains Mono" fill="#5a6473">5 scenarios</text>
          </g>
          <rect x="174" y="30" width="60" height="28" rx="3" fill="#fff" stroke="#ff6a13" strokeWidth="1.5"/>
          <text x="204" y="48" textAnchor="middle" fontSize="9" fontFamily="JetBrains Mono" fill="#0e1822">Sheets/Drive</text>
          <path d="M66 44 L92 44" stroke="#0e1822" strokeWidth="1.2" strokeDasharray="3 3"/>
          <path d="M148 44 L172 44" stroke="#ff6a13" strokeWidth="1.5"/>
          <polygon points="172,42 174,44 172,46" fill="#ff6a13"/>
        </svg>
      ),
    },
    {
      tag: "WORK ORDERS",
      client: "S&G Creative",
      title: "CRM & work-order management",
      one: "Quotes, production jobs and invoices lived in separate spreadsheets. Paper job tickets. No real-time visibility for management.",
      two: "Three connected operational boards (Quotes, Production, Invoicing) with status-driven automations and cross-board relations. Make.com runs weekly inactivity scans (jobs idle 28+ days) and reports back.",
      stack: ["monday.com", "Make.com"],
      domain: "Print & packaging operations",
      stat: { v: "28+ days", l: "automated stale-job detection across all boards" },
      diagram: (
        <svg viewBox="0 0 240 88" className="cs-mini" aria-hidden>
          {[0,1,2].map((i) => (
            <g key={i}>
              <rect x={6 + i*78} y="30" width="68" height="28" rx="3" fill="#fff" stroke="#0e1822" strokeWidth="1"/>
              <text x={40 + i*78} y="48" textAnchor="middle" fontSize="9" fontFamily="JetBrains Mono" fill="#0e1822">{["Quotes","Production","Invoicing"][i]}</text>
              {i < 2 && <path d={`M${74 + i*78} 44 L${84 + i*78} 44`} stroke="#ff6a13" strokeWidth="1.2"/>}
            </g>
          ))}
          <path d="M40 30 Q 120 6 200 30" stroke="#0073ea" strokeWidth="1" fill="none" strokeDasharray="3 3"/>
          <text x="120" y="14" textAnchor="middle" fontSize="7" fontFamily="JetBrains Mono" fill="#5a6473">weekly inactivity scan</text>
        </svg>
      ),
    },
  ];

  const cs = cases[active];

  return (
    <section id="cases" className="cases section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow num"><span className="n">04</span><span className="dash">—</span> Case studies · the work</span>
            <h2 style={{ marginTop: 18 }}>Five recent builds. <span className="acc">One product, five different shapes.</span></h2>
          </div>
          <p>Construction, finance, work orders, change orders, AI knowledge — every build is custom infrastructure for project-based businesses. Click any tab to see the system shape and verified outcomes. Featured deep-dive on Beachley below.</p>
        </div>

        <div className="cs-tabs" role="tablist">
          {cases.map((c, i) => (
            <button
              key={i}
              role="tab"
              aria-selected={active === i}
              className={`cs-tab ${active === i ? "active" : ""}`}
              onClick={() => setActive(i)}
            >
              <span className="cs-tab-tag">{c.tag}</span>
              <span className="cs-tab-client">{c.client}</span>
            </button>
          ))}
        </div>

        <div className="cs-card" key={active}>
          <div className="cs-card-grid">
            <div className="cs-card-info">
              <div className="cs-meta">
                <span className="cs-meta-tag">{cs.tag}</span>
                <span className="cs-meta-dot">·</span>
                <span className="cs-meta-domain">{cs.domain}</span>
              </div>
              <h3 className="cs-title">{cs.title}</h3>
              <div className="cs-line cs-line--problem">
                <span className="cs-line-mark cs-line-mark--problem">PROBLEM</span>
                <p>{cs.one}</p>
              </div>
              <div className="cs-line cs-line--solution">
                <span className="cs-line-mark cs-line-mark--solution">BUILD</span>
                <p>{cs.two}</p>
              </div>
              <div className="cs-bottom">
                <div className="cs-stack">
                  {cs.stack.map((s, i) => <span className="cs-stack-tag" key={i}>{s}</span>)}
                </div>
                {cs.stat && (
                  <div className="cs-stat">
                    <div className="cs-stat-v">{cs.stat.v}</div>
                    <div className="cs-stat-l">{cs.stat.l}</div>
                  </div>
                )}
              </div>
            </div>
            <div className="cs-card-preview">
              <div className="cs-preview-label">SYSTEM SHAPE</div>
              {cs.diagram}
              <div className="cs-preview-foot">
                Full breakdown of this build available on the strategy call →
              </div>
            </div>
          </div>
        </div>

        <div className="cs-foot">
          <span className="cs-foot-arr">↓</span>
          <span>Featured deep-dive on the Beachley implementation below — full architecture &amp; verified numbers.</span>
        </div>
      </div>
    </section>
  );
}


function Proof() {
  return (
    <section id="proof" className="proof section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow num"><span className="n">04.f</span><span className="dash">—</span> Featured deep-dive</span>
            <h2 style={{ marginTop: 18 }}>Beachley, in detail. <span className="acc">Real systems. Real numbers.</span></h2>
          </div>
          <p>One detailed implementation, end-to-end. Verified architecture, verified outcomes — then we'll talk about yours.</p>
        </div>

        <div className="proof-card">
          <div className="proof-head">
            <div className="proof-logo">
              <img src="assets/logo-beachley-1.png" alt="Beachley Furniture Company" />
            </div>
            <div className="proof-meta">
              <span style={{ background: "rgba(0,200,117,0.10)", color: "#00875a", padding: "4px 10px", borderRadius: 3, letterSpacing: "0.10em" }} className="verified-chip">VERIFIED CASE STUDY</span>
              <span>FURNITURE MFG</span><span>·</span><span>PROJECT-BASED OPS</span><span>·</span><span>BUILT BY TEKCONNECTED</span>
            </div>
          </div>

          <div className="proof-body">
            <div className="proof-copy">
              <h3>Not templates. Real operational infrastructure.</h3>
              <p>For Beachley Furniture Company, TekConnected connected NetSuite, Paycom, Make.com and monday.com into one real-time project financial visibility system — giving the business weekly visibility into profitability instead of waiting until projects closed.</p>
              <p style={{ marginBottom: 0 }}>Three disconnected tools. Manual reporting that took days. No single source of truth. We built the layer that ties them together.</p>
              <div className="bridge">
                <span className="bridge-mark">↳</span>
                <span>Different workflow. Same problem construction companies face every day: <strong>disconnected tools, manual reporting, and no single source of truth.</strong></span>
              </div>
            </div>

            <div className="diagram">
              <div className="diag-label">SYSTEM ARCHITECTURE</div>
              <div className="diag-flow">
                <div className="diag-col">
                  <div className="diag-node">
                    <div className="diag-node-name">NetSuite</div>
                    <div className="diag-node-sub">ERP · sales orders</div>
                  </div>
                  <div className="diag-node">
                    <div className="diag-node-name">Paycom</div>
                    <div className="diag-node-sub">Payroll · labor cost</div>
                  </div>
                </div>
                <div className="diag-arrows" style={{position:"relative"}}>
                  <svg viewBox="0 0 80 200" preserveAspectRatio="none" aria-hidden>
                    <path d="M 0 50 Q 40 50 40 100 Q 40 100 80 100" stroke="#0e1822" strokeWidth="1.5" fill="none" strokeDasharray="4 4"/>
                    <path d="M 0 150 Q 40 150 40 100 Q 40 100 80 100" stroke="#0e1822" strokeWidth="1.5" fill="none" strokeDasharray="4 4"/>
                  </svg>
                </div>
                <div className="diag-col diag-mid">
                  <div className="diag-node diag-node--pipe">
                    <div className="diag-node-name">Make.com</div>
                    <div className="diag-node-sub">Sync engine · weekly</div>
                  </div>
                </div>
                <div className="diag-arrows" style={{position:"relative"}}>
                  <svg viewBox="0 0 80 200" preserveAspectRatio="none" aria-hidden>
                    <path d="M 0 100 Q 40 100 40 100 Q 40 100 80 100" stroke="#ff6a13" strokeWidth="2" fill="none"/>
                    <polygon points="74,96 80,100 74,104" fill="#ff6a13"/>
                  </svg>
                  <span className="diag-particle p1" style={{top:"calc(50% - 3px)"}}></span>
                  <span className="diag-particle p2" style={{top:"calc(50% - 3px)"}}></span>
                  <span className="diag-particle p3" style={{top:"calc(50% - 3px)"}}></span>
                </div>
                <div className="diag-col">
                  <div className="diag-node diag-node--out">
                    <div className="diag-node-name">monday.com</div>
                    <div className="diag-node-sub">Visibility &amp; reporting layer</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="proof-stats">
            <div className="ps">
              <div className="psv"><Counter to={2000} />+</div>
              <div className="psl">Sales orders migrated</div>
            </div>
            <div className="ps">
              <div className="psv"><Counter to={12} />+</div>
              <div className="psl">Financial data points / project</div>
            </div>
            <div className="ps">
              <div className="psv">Weekly</div>
              <div className="psl">Automated system sync</div>
            </div>
            <div className="ps">
              <div className="psv"><Counter to={80} prefix="70-" suffix="%" /></div>
              <div className="psl">Less manual reporting</div>
            </div>
            <div className="ps wide">
              <div className="psv psv-sm">End-of-project visibility&nbsp;<span className="arr">→</span>&nbsp;weekly visibility</div>
              <div className="psl">Owner &amp; finance now see margin live, not in retrospect</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Templates() {
  const tplCons = [
    "Generic stages",
    "No clear ownership",
    "No follow-up logic",
    "No project handoffs",
    "No reporting layer",
    "Team stops using it after week one",
  ];
  const tcPros = [
    "Workflow mapped to your real sales stages",
    "Owners on every lead, estimate and job",
    "Automated reminders and overdue flags",
    "Sales → operations handoff system, end-to-end",
    "Owner / PM / finance dashboards",
    "Built around adoption — your team will actually use it",
  ];
  return (
    <section id="templates" className="tpl section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow num"><span className="n">05</span><span className="dash">—</span> Why not templates</span>
            <h2 style={{ marginTop: 18 }}>Templates don't fix custom businesses.</h2>
          </div>
          <p>Most monday.com templates look good for a week. Then your team stops using them because they don't match how the business actually runs. We map your real workflow first — then build the boards, automations and dashboards around that.</p>
        </div>

        <div className="tpl-grid">
          <div className="tpl-card tpl-card--bad">
            <div className="tpl-card-head">
              <span className="tpl-tag tpl-tag--bad">TEMPLATE SETUP</span>
              <span className="tpl-sub">What you get from a download</span>
            </div>
            <ul className="tpl-list tpl-list--bad">
              {tplCons.map((c, i) => (
                <li key={i}><span className="tpl-mark tpl-mark--bad">×</span>{c}</li>
              ))}
            </ul>
          </div>

          <div className="tpl-divider" aria-hidden>
            <span className="tpl-vs">VS</span>
          </div>

          <div className="tpl-card tpl-card--good">
            <div className="tpl-card-head">
              <span className="tpl-tag tpl-tag--good">TEKCONNECTED BUILD</span>
              <span className="tpl-sub">What you get from a real implementation</span>
            </div>
            <ul className="tpl-list tpl-list--good">
              {tcPros.map((c, i) => (
                <li key={i}><span className="tpl-mark tpl-mark--good">→</span>{c}</li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  const steps = [
    { n: "01", t: "Week 1", h: "Audit & map", d: "We sit with sales, ops and field leads and map your real workflow — leads, estimates, follow-ups, handoffs, jobs, reporting." },
    { n: "02", t: "Week 2-4", h: "Build in your account", d: "We build your monday.com CRM, automations and dashboards inside your account — in a clean staging workspace, not a sandbox." },
    { n: "03", t: "Week 5", h: "Train the team", d: "Live walkthroughs for sales, PMs and admins. Recorded onboarding for future hires. A one-page SOP your team owns." },
    { n: "04", t: "Week 6+", h: "Optimize after launch", d: "30 days of post-launch tuning included. We refine the system after real usage so it sticks. We don't disappear after handoff." },
  ];
  return (
    <section id="how" className="how section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow num"><span className="n">06</span><span className="dash">—</span> The 6-week build</span>
            <h2 style={{ marginTop: 18 }}>From workflow audit to live monday.com workspace in six weeks.</h2>
          </div>
          <p>No 9-month "transformation projects." We build, you run it. The only thing slowing this down is how fast your team can sit down with us.</p>
        </div>
        <div className="how-grid">
          {steps.map((s, i) => (
            <div className={`how-step reveal d${i+1}`} key={i}>
              <div className="top">
                <div className="step-num">{s.n}<span>.</span></div>
                <div className="step-time">{s.t}</div>
              </div>
              <h3>{s.h}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Team() {
  const supporting = [
    { name: "Jordan Edwards",  role: "Solutions architect",         img: "assets/team-jordan.jpg" },
    { name: "Jacob Edwards",   role: "Workflow specialist",          img: "assets/team-jacob.jpg" },
    { name: "Pritam Jadhav",   role: "Automation & integrations",    img: "assets/team-pritam.jpg" },
    { name: "Jani Marais",     role: "Client onboarding & training", img: "assets/team-jani.jpg" },
  ];
  return (
    <section id="team" className="team">
      <div className="wrap">
        <div className="team-head">
          <div>
            <span className="eyebrow num"><span className="n">07</span><span className="dash">—</span> The team</span>
            <h2>Built by operators, not template installers.</h2>
          </div>
          <p>You're not getting passed to a generic support queue. TekConnected <strong>maps, builds, tests and launches</strong> your monday.com workspace with real implementation specialists who understand workflows, automations and adoption.</p>
        </div>

        {/* Founder feature card */}
        <div className="team-featured reveal">
          <div className="tf-photo">
            <img src="assets/team-michael.jpg" alt="Michael Hayles" loading="lazy" />
            <span className="tf-badge">FOUNDER</span>
          </div>
          <div className="tf-info">
            <div className="tf-eyebrow">
              <span className="tf-dot"></span>
              <span>Founder · Implementation lead</span>
            </div>
            <h3 className="tf-name">Michael Hayles</h3>
            <p className="tf-bio">
              Before building monday.com CRMs, Michael ran <strong>construction businesses</strong> — managing crews, chasing estimates, and watching jobs get won and lost on the strength of follow-up. That operator background is why every TekConnected build starts with workflow, not software.
            </p>
            <div className="tf-cred">
              <div className="tf-cred-item">
                <span className="tf-cred-v">15+ yrs</span>
                <span className="tf-cred-l">Operating project-based businesses</span>
              </div>
              <div className="tf-cred-item">
                <span className="tf-cred-v">Hands-on</span>
                <span className="tf-cred-l">Every strategy call &amp; build</span>
              </div>
              <div className="tf-cred-item">
                <span className="tf-cred-v">Operator</span>
                <span className="tf-cred-l">Workflow first, software second</span>
              </div>
            </div>
          </div>
        </div>

        {/* Supporting team — compact */}
        <div className="team-grid team-grid--compact">
          {supporting.map((m, i) => (
            <div className={`team-card reveal d${(i%4)+1}`} key={i}>
              <div className="team-photo"><img src={m.img} alt={m.name} loading="lazy" /></div>
              <div className="team-info">
                <div className="team-name">{m.name}</div>
                <div className="team-role">{m.role}</div>
              </div>
            </div>
          ))}
        </div>

        <div className="team-foot">
          <span><strong>monday.com</strong> Certified Partner</span>
          <span>·</span>
          <span>Implementation, not resale</span>
          <span>·</span>
          <span>Direct work with the people who build your system</span>
        </div>
      </div>
    </section>
  );
}

function Faq() {
  const items = [
    {
      q: "I already use monday.com — can you fix the mess we already have, or do we start over?",
      a: "We always spin up a clean staging workspace inside your existing account first, then rebuild around your actual workflow. We migrate the data and history that matters; the rest stays archived. You never lose anything, but you also don't inherit the chaos.",
    },
    {
      q: "We don't have any system at all — paper, texts, and a whiteboard. Can you still help?",
      a: "Yes — and honestly it's easier. With a blank canvas we don't have to undo anyone's bad habits. We start with a 90-minute workflow audit, design the CRM around how your team already sells, and have you running on it in six weeks.",
    },
    {
      q: "How long does a full build take?",
      a: "Six weeks for the standard build (CRM + project handoff + 8-12 automations + 2 integrations + training). More complex environments — multi-entity, custom field apps, AI agents — run 8-10 weeks. We give you a fixed timeline before you sign anything.",
    },
    {
      q: "Will my sales team and PMs actually use it?",
      a: "That's the whole job. We design owner-, sales- and PM-facing views to be three taps from any next action. We train your team live, not over a 90-minute Zoom. If a team member won't use what we built, that's our bug to fix — not yours.",
    },
    {
      q: "What stack do you integrate with?",
      a: "QuickBooks Online & Desktop, NetSuite, Paycom, Make.com, Buildertrend, Procore, CompanyCam, DocuSign, Stripe, Gmail/Outlook, Twilio, Zapier, and any tool with a REST API. If your tool isn't on the list, we'll build a custom connector.",
    },
    {
      q: "What happens after the build is done?",
      a: "30 days of post-launch tuning is included — bug fixes, automation tweaks, board adjustments. After that you can stay on a monthly retainer for new builds, AI agents, and quarterly optimizations, or just have us on speed-dial. No lock-in.",
    },
  ];
  const [open, setOpen] = useS3(0);
  return (
    <section id="faq" className="faq section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow num"><span className="n">08</span><span className="dash">—</span> FAQ</span>
            <h2 style={{ marginTop: 18 }}>Common questions, answered straight.</h2>
          </div>
          <p>If it's not here, ask on the strategy call. We won't dodge.</p>
        </div>
        <div className="faq-list">
          {items.map((it, i) => (
            <div className={`faq-item ${open === i ? "open" : ""}`} key={i}>
              <button className="faq-q" onClick={() => setOpen(open === i ? -1 : i)} aria-expanded={open === i}>
                <span>{it.q}</span>
                <span className="ic" aria-hidden>+</span>
              </button>
              <div className="faq-a"><div className="faq-a-inner">{it.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Final() {
  return (
    <section id="book" className="final">
      <div className="wrap final-grid">
        <div>
          <span className="eyebrow num" style={{ color: "#cfcabb" }}>
            <span className="n" style={{ color: "white" }}>09</span>
            <span className="dash">—</span> Book the call
          </span>
          <h2 style={{ marginTop: 18, marginBottom: 22 }}>
            Book a 45-minute CRM Strategy Call. <span className="acc">No generic template pitch.</span>
          </h2>
          <p style={{ marginBottom: 22 }}>
            We'll look at what's broken, what your monday.com CRM should actually include, and what it would take to build a system your team will use. You leave with a one-page CRM blueprint either way.
          </p>
          <div style={{ display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
            <span className="cert-badge"><span className="blue"></span><strong>monday.com</strong>&nbsp;Certified Partner</span>
            <span className="cert-badge" style={{ background: "transparent", color: "#cfcabb", borderColor: "rgba(255,255,255,0.18)" }}>
              45 min · No hard sell · Fixed scope &amp; price after the call
            </span>
          </div>
        </div>

        <div className="final-book-mount">
          <Book />
        </div>
      </div>
    </section>
  );
}

function Foot() {
  return (
    <footer className="foot foot--slim">
      <div className="wrap">
        <div className="foot-row">
          <a href="#" className="brand brand--svg" aria-label="tekconnected">
            <img src="assets/brand/tekconnected-logo-on-dark.svg" alt="tekconnected." className="brand-logo brand-logo--dark" />
          </a>
          <div className="foot-links">
            <span className="foot-rights">© 2026 TekConnected · All rights reserved</span>
            <span className="foot-sep" aria-hidden>·</span>
            <a href="terms.html">Terms</a>
            <span className="foot-sep" aria-hidden>·</span>
            <a href="privacy.html">Privacy</a>
          </div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, StatStrip, Logos, Pains, Solutions, CaseStudies, Proof, Templates, HowItWorks, Team, Faq, Final, Foot });