// Home page React app
const { useEffect: useEffectH } = React;

function Home() {
  window.useReveal();
  window.useHeroGlow('.hero');
  const TCMark = window.TCMark;

  return (
    <>
      <window.Nav current="home" />

      <main id="main">
      {/* HERO */}
      <section className="hero" data-section-nav="Intro">
        <div className="hero-bg">
          <div className="hero-bg-grid" />
          <div className="hero-bg-glow" />
        </div>
        <div className="hero-inner">
          <div className="hero-kicker-row">
            <span className="kicker">Technology operations</span>
            <span className="kicker" style={{ textTransform: 'uppercase' }}>AI implementation</span>
            <span className="kicker" style={{ textTransform: 'uppercase' }}>Security-first</span>
          </div>
          <h1 className="hero-headline">
            Your business doesn't need more AI tools.<br />
            It needs a <span className="serif">system</span> that runs on them.
          </h1>
          <p className="hero-sub">
            We work with companies that are serious about AI — not just experimenting with it. Custom-built, sourced from our vetted partner network, or a combination. Security-first. Designed around your workflows. Engineered to make your team more productive, not smaller.
          </p>
          <div className="hero-ctas">
            <a href="contact.html" className="btn btn-primary">
              Book a 15-minute strategy session <span aria-hidden="true">→</span>
            </a>
            <a href="the-cycle.html" className="btn btn-ghost">
              See how we work <span aria-hidden="true">→</span>
            </a>
          </div>

          <div className="hero-meta">
            <div className="hero-meta-item">
              <div className="hero-meta-num">1,000+</div>
              <div className="hero-meta-label">Businesses served · collectively</div>
            </div>
            <div className="hero-meta-item">
              <div className="hero-meta-num">2016</div>
              <div className="hero-meta-label">Operating since</div>
            </div>
            <div className="hero-meta-item">
              <div className="hero-meta-num">300+</div>
              <div className="hero-meta-label">Tech partners global</div>
            </div>
            <div className="hero-meta-item">
              <div className="hero-meta-num"><span className="gradient-text">4–10×</span></div>
              <div className="hero-meta-label">Team productivity gain</div>
            </div>
          </div>
        </div>

        {/* Live system feed — pinned to the right of the hero */}
        <div className="hero-terminal-slot">
          <window.HeroTerminal />
        </div>
      </section>

      {/* PRODUCTIVITY JOURNEY */}
      <window.ProductivityJourney />

      {/* ENHANCE NOT REPLACE */}
      <section className="enhance-section reveal">
        <div className="container">
          <div className="enhance-layout">
            <div className="enhance-head">
              <span className="kicker">Enhance, Don't Replace</span>
              <h2 style={{ marginTop: 20 }}>
                Make your team 4–10× more productive.<br/>
                <span className="strike">Not 4–10× smaller.</span>
              </h2>
            </div>
            <div className="enhance-body">
              <p className="lead">
                We don't come in to cut headcount. We come in to eliminate the work your team shouldn't be doing manually — data entry, repetitive follow-ups, copy-paste reporting, manual scheduling — so they can focus on the work that actually requires human judgment, creativity, and relationships.
              </p>
              <p>
                Your best people aren't leaving because the work is hard. They're leaving because the work is tedious. Fix that, and everything else follows.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* WHAT WE DO — solution cards */}
      <section className="solutions-section reveal" data-section-nav="What We Do">
        <div className="container">
          <div className="section-head left">
            <span className="kicker">What We Do</span>
            <h2 style={{ marginTop: 20 }}>The right solution for your business. Not ours.</h2>
            <p style={{ maxWidth: 600 }}>
              We evaluate the full landscape — custom-built, off-the-shelf from our vetted partner network, or a combination. Vendor-agnostic by design.
            </p>
          </div>
          <div className="solutions-grid">
            {[
              { n: '01', t: 'AI & Intelligent Automation', d: 'AI agents and automated workflows that make your team more productive — not smaller. From voice agents that handle inbound call overflow to automated pipelines that eliminate hours of manual processing.' },
              { n: '02', t: 'Custom Software & Integration', d: 'We build what you need from scratch, make what you already have work better, or source the right product from our partner network — whichever delivers the best result for how your business actually operates.' },
              { n: '03', t: 'Technology Spend Optimization', d: "We audit what you're spending on technology and find the waste. Overlapping SaaS, unused licenses, overprovisioned cloud. In many cases, the savings pay for the engagement." },
              { n: '04', t: 'Managed Services & Partnership', d: "Continuous monitoring, optimization, and expansion of your technology infrastructure. Monthly performance reviews. Quarterly strategic planning. We're a partner, not a project." },
            ].map(s => (
              <a key={s.n} className="solution-card" href="solutions.html">
                <div className="solution-card-index mono">// {s.n}</div>
                <h3>{s.t}</h3>
                <p>{s.d}</p>
                <span className="solution-card-link">Explore <span aria-hidden="true">→</span></span>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* CYCLE PREVIEW */}
      <window.CyclePreview />

      {/* FIT */}
      <section className="fit-section reveal" data-section-nav="Fit">
        <div className="container">
          <div className="section-head left">
            <span className="kicker">Fit Check</span>
            <h2 style={{ marginTop: 20 }}>We're selective about who we work with. Here's why.</h2>
            <p style={{ maxWidth: 640 }}>
              We take a limited number of engagements. Every client gets our full attention, our best thinking, and direct access to senior leadership.
            </p>
          </div>

          <div className="fit-grid">
            <div className="fit-col fit-yes">
              <div className="fit-col-head">
                <span className="fit-col-badge">Built for you</span>
                <h3>If this sounds like you, let's talk.</h3>
              </div>
              <div className="fit-list">
                <div className="fit-item"><span className="fit-item-marker">✓</span><span><strong>You lead a company</strong> and your team spends more time on manual processes than actual growth.</span></div>
                <div className="fit-item"><span className="fit-item-marker">✓</span><span>You're <strong>paying for technology that doesn't talk to each other.</strong></span></div>
                <div className="fit-item"><span className="fit-item-marker">✓</span><span>You want a <strong>long-term partner whose success is tied to yours</strong> — not a vendor who disappears after the invoice clears.</span></div>
                <div className="fit-item"><span className="fit-item-marker">✓</span><span>You're <strong>ready to move</strong>, not form a committee.</span></div>
              </div>
            </div>
            <div className="fit-col fit-no">
              <div className="fit-col-head">
                <span className="fit-col-badge">Not for you if…</span>
                <h3>We'll point you elsewhere.</h3>
              </div>
              <div className="fit-list">
                <div className="fit-item"><span className="fit-item-marker">—</span><span>You're looking for <strong>one-off tool installs</strong> with no follow-through.</span></div>
                <div className="fit-item"><span className="fit-item-marker">—</span><span>You want to <strong>replace your team with AI</strong> rather than make them more productive.</span></div>
                <div className="fit-item"><span className="fit-item-marker">—</span><span>You're <strong>not ready to commit to quarterly iteration cycles.</strong></span></div>
                <div className="fit-item"><span className="fit-item-marker">—</span><span>A chatbot is what you're after. We build integrated systems, not point solutions.</span></div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* ENGAGE */}
      <section className="engage-section reveal" data-section-nav="Engage">
        <div className="container">
          <div className="section-head left">
            <span className="kicker">How We Engage</span>
            <h2 style={{ marginTop: 20 }}>Three ways to work with us.</h2>
          </div>
          <div className="engage-grid">
            <div className="engage-card">
              <div className="engage-card-num">// Model 01</div>
              <h3>Advisory</h3>
              <p>We develop the strategy. Your team executes it. We stay available for guidance, vendor evaluation, and course correction.</p>
              <span className="engage-card-tag">Best for internal capability</span>
            </div>
            <div className="engage-card">
              <div className="engage-card-num">// Model 02</div>
              <h3>Full Implementation</h3>
              <p>We assess, build, deploy, and train. Custom software, AI agents, integrations, automation, hardware procurement — end to end.</p>
              <span className="engage-card-tag">Most common</span>
            </div>
            <div className="engage-card featured">
              <div className="engage-card-num">// Model 03</div>
              <h3>Strategic Partnership</h3>
              <p>For companies with exceptional growth potential. We become equity partners, align financial incentives with long-term growth, and invest our resources and network.</p>
              <span className="engage-card-tag">By invitation</span>
            </div>
          </div>
          <div className="engage-cta">
            <p>Not sure which model fits? Most engagements start with a 15-minute strategy call — we'll listen to the situation and recommend the right shape.</p>
            <a href="contact.html" className="btn btn-primary">
              Book a free strategy session <span aria-hidden="true">→</span>
            </a>
          </div>
        </div>
      </section>

      {/* PROOF */}
      <section className="proof-section reveal" data-section-nav="Proof">
        <div className="container">
          <div className="section-head left">
            <span className="kicker">Proof</span>
            <h2 style={{ marginTop: 20 }}>We've put the Cycle to work on our own companies.</h2>
            <p style={{ maxWidth: 640 }}>
              Before we brought AI and automation to outside clients, we tested it across our own operating companies — telecom, managed technology, AI implementation — then refined what worked. Every system we deploy runs on the same architecture and methodology we use ourselves, across multiple real businesses.
            </p>
          </div>
          <div className="proof-metrics">
            {[
              { n: '40+', l: 'Hours / week automated', d: 'Internal onboarding, vendor follow-ups, reporting, and document processing running on AI agents and automated pipelines.' },
              { n: '70%', l: 'Reduction, manual data entry', d: 'Automated pipelines and intelligent document processing replaced copy-paste workflows across finance and operations.' },
              { n: '1,000+', l: 'Businesses served collectively', d: 'A decade of managing technology operations across telecom, procurement, vendor contracts, and infrastructure — the experience AI runs on top of.' },
              { n: '−$$', l: 'Third-party software costs', d: 'Custom-built solutions replaced multiple expensive SaaS subscriptions where the math worked, reducing overhead and increasing control.' },
            ].map(m => (
              <div key={m.l} className="proof-metric">
                <div className="proof-metric-num">{m.n}</div>
                <div className="proof-metric-label">{m.l}</div>
                <div className="proof-metric-desc">{m.d}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ROI micro-tool */}
      <window.ROITool />

      {/* INTEGRATIONS */}
      <section className="integrations-section">
        <div className="integrations-head">Integrates with everything you're already running</div>
        <div className="marquee-wrap">
          <div className="marquee">
            {[...Array(2)].map((_, dupIdx) => (
              <React.Fragment key={dupIdx}>
                {['HubSpot','Salesforce','Google Workspace','Microsoft 365','QuickBooks','Slack','Dialpad','NetSuite','Zendesk','Monday','Okta','Notion','Airtable','Snowflake'].map(n => (
                  <div className="marquee-item" key={n + dupIdx}>
                    <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--accent)' }} />
                    {n}
                  </div>
                ))}
              </React.Fragment>
            ))}
          </div>
        </div>
      </section>

      {/* PAGE FAQ — LLM-citable Q&A block */}
      {window.PageFAQ ? <window.PageFAQ pageKey="home" /> : null}

      {/* CTA */}
      <section className="cta-section">
        <div className="container">
          <span className="kicker" style={{ justifyContent: 'center' }}>Let's talk</span>
          <h2 style={{ marginTop: 24 }}>
            See if there's <span className="serif">a fit</span>.
          </h2>
          <p>
            Book a free 15-minute strategy session. No pitch. No follow-up sequence. Just a straightforward conversation with someone who understands your technology challenges.
          </p>
          <a href="contact.html" className="btn btn-primary" style={{ fontSize: 15, padding: '16px 28px' }}>
            Book your free strategy session <span aria-hidden="true">→</span>
          </a>
          <div className="cta-direct">
            Or reach out directly · <a href="tel:8557483030">855-748-3030</a> · <a href="mailto:info@technologycycle.com">info@technologycycle.com</a>
          </div>
        </div>
      </section>
      </main>

      <window.Footer />
      <window.TweaksPanel />
      </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<Home />);