/* SRQ Analytics — v2 page sections
   Goals vs v1: (1) remove the many numbered sequences — only the
   "How it works" steps stay numbered; (2) broaden the systems/automation
   story beyond finance into operations, sales, and back office. */

const Outcomes = () => (
  <section className="section" id="outcomes">
    <div className="wrap">
      <div className="section-head reveal">
        <span className="eyebrow">The outcome</span>
        <h2 className="h2" style={{ marginTop: 18 }}>What it all adds up to.</h2>
        <p className="lead">Every engagement is designed around three outcomes.</p>
      </div>
      <div className="outcomes reveal">
        <div className="outcome">
          <h3>A more confident owner</h3>
          <p>You lead with conviction — grounded in a clear, current view of where the business stands and where it is headed.</p>
        </div>
        <div className="outcome">
          <h3>A stronger profit and cash position</h3>
          <p>Improved margins and healthier cash flow, with less value lost to manual effort, blind spots, and decisions made a beat too late.</p>
        </div>
        <div className="outcome">
          <h3>A more capable, valued team</h3>
          <p>Your people spend less time on busywork and more on the work that matters — equipped with the systems and insight to excel and grow.</p>
        </div>
      </div>
    </div>
  </section>
);

const Nav = () => (
  <header className="nav">
    <div className="wrap nav-inner">
      <a className="brand" href="#top"><Mark /> SRQ&nbsp;Analytics</a>
      <nav className="nav-links">
        <a href="#services">Services</a>
        <a href="#approach">Approach</a>
        <a href="#process">How it works</a>
        <a href="#about">About</a>
        <a href="#faq">FAQ</a>
      </nav>
      <div className="nav-cta">
        <a className="btn btn-primary" href="#contact">Book a consultation <Arrow /></a>
      </div>
    </div>
  </header>
);

const Hero = () => (
  <section className="hero" id="top">
    <div className="wrap hero-grid">
      <div className="hero-copy">
        <span className="eyebrow">Fractional CFO · Systems · Automation · AI · Sarasota, FL</span>
        <h1 className="display">The clarity of a CFO. The leverage of <em>technology</em>.</h1>
        <p className="lead">SRQ Analytics is where financial leadership meets technology — guiding owners toward smart, responsible investments in the systems and automation that make a growing business run.</p>
        <div className="hero-actions">
          <a className="btn btn-primary" href="#contact">Book a consultation <Arrow /></a>
          <a className="btn btn-ghost" href="#services">Explore services</a>
        </div>
        <div className="hero-meta">
          <div className="item"><span className="k">CFO-level</span><span className="l">strategic finance</span></div>
          <div className="item"><span className="k">Systems-first</span><span className="l">operations automated</span></div>
          <div className="item"><span className="k">AI-assisted</span><span className="l">decisions, human-in-loop</span></div>
        </div>
      </div>
      <div className="hero-visual">
        <div className="viz">
          <div className="viz-glow" />
          <div className="viz-head">
            <span className="viz-title">Business performance · year over year</span>
            <span className="viz-dot" />
          </div>
          <div className="viz-kpi">
            <span className="viz-big">$2.4M</span>
            <span className="viz-delta">
              <svg width="9" height="9" viewBox="0 0 10 10" fill="none" aria-hidden="true"><path d="M5 1.5L8.6 7.5H1.4z" fill="currentColor" /></svg>
              34% YoY
            </span>
          </div>
          <div className="viz-chart">
            {[["Q1", 38, 52], ["Q2", 45, 61], ["Q3", 52, 74], ["Q4", 58, 88]].map(([q, prev, cur]) => (
              <div className="viz-col" key={q}>
                <div className="viz-pair">
                  <span className="vb prev" style={{ height: prev + "%" }} />
                  <span className="vb cur" style={{ height: cur + "%" }} />
                </div>
                <span className="viz-x">{q}</span>
              </div>
            ))}
          </div>
          <div className="viz-legend">
            <span><i className="sw prev" /> Last year</span>
            <span><i className="sw cur" /> This year</span>
          </div>
          <div className="viz-list">
            <div className="viz-item"><span className="lbl">Hours saved / week <span className="pill">automated</span></span><span className="val">22 hrs</span></div>
            <div className="viz-item"><span className="lbl">Manual tasks removed</span><span className="val">140+</span></div>
            <div className="viz-item"><span className="lbl">Lead response time <span className="pill">▼ faster</span></span><span className="val">4 min</span></div>
            <div className="viz-item"><span className="lbl">Gross margin</span><span className="val">61%</span></div>
            <div className="viz-item"><span className="lbl">Cash runway</span><span className="val">18.4 mo</span></div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

const SERVICES = [
  { ico: Ico.cfo, t: "Fractional CFO", d: "Senior financial leadership on a part-time basis — cash flow, budgeting, forecasting, board-ready reporting, and the decisions that move the business.", tags: ["Cash flow", "Forecasting", "Budgeting", "Contract negotiations"] },
  { ico: Ico.gears, t: "Systems & Automation", d: "We design and build systems that automate the work across your whole business — back office, sales, fulfillment, reporting. If it's repetitive, we make it run itself.", tags: ["Back office", "Sales ops", "Workflows", "Integrations"] },
  { ico: Ico.chart, t: "Analytics & Dashboards", d: "Data from every corner of the business — finance, sales, operations — connected into clean, live dashboards, built on whatever tools fit you best.", tags: ["Live dashboards", "KPIs", "Best-fit tools"] },
  { ico: Ico.ai, t: "AI-Assisted Decisions", d: "Applied, not hype. Logic- and AI-assisted decisioning with a human in the loop — forecasting, scenario planning, and analysis that sharpen every call while keeping you in control.", tags: ["Decision logic", "Human-in-the-loop", "Scenario planning"] },
];

const Services = () => (
  <section className="section" id="services">
    <div className="wrap">
      <div className="section-head reveal">
        <span className="eyebrow">What we do</span>
        <h2 className="h2" style={{ marginTop: 18 }}>Financial leadership — and the systems to run the whole business.</h2>
        <p className="lead">One partner for financial guidance and the automation that streamlines how your business runs.</p>
      </div>
      <div className="services reveal">
        {SERVICES.map((s) => (
          <div className="svc" key={s.t}>
            <div className="svc-ico">{s.ico}</div>
            <h3>{s.t}</h3>
            <p>{s.d}</p>
            <div className="svc-tags">{s.tags.map((t) => <span key={t}>{t}</span>)}</div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const PILLARS = [
  { t: "Clarity over noise", d: "One source of truth across the whole business — not just the books. You always know where things stand, and why." },
  { t: "Leverage by design", d: "Every engagement leaves behind systems that keep working. Automation and AI handle the repeatable across operations — you and your team stay in the loop on what matters." },
  { t: "Senior, hands-on", d: "You work directly with the person doing the work. No junior hand-offs, no layers — just accountable, expert partnership." },
];

const Approach = () => (
  <section className="section dark" id="approach">
    <div className="wrap">
      <div className="section-head reveal">
        <span className="eyebrow on-dark">The approach</span>
        <h2 className="h2 display" style={{ marginTop: 18 }}>We don't just report the numbers — we build the machine that runs the business.</h2>
      </div>
      <div className="pillars reveal">
        {PILLARS.map((p) => (
          <div className="pillar" key={p.t}>
            <h3>{p.t}</h3>
            <p>{p.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

const STEPS = [
  { n: "1", t: "Diagnose", d: "We map your operations, tools, and finances — and pinpoint where time and money are leaking." },
  { n: "2", t: "Connect", d: "Data and tools across the business are integrated into one clean, trusted layer." },
  { n: "3", t: "Automate", d: "Repetitive work — back office, sales, reporting — becomes systems that run themselves, with AI assisting and you in the loop." },
  { n: "4", t: "Advise", d: "With the engine running, we focus on strategy, forecasting, and the decisions that drive growth." },
];

const Process = () => (
  <section className="section" id="process">
    <div className="wrap section-head reveal">
      <span className="eyebrow">How it works</span>
      <h2 className="h2" style={{ marginTop: 18 }}>A clear path from busywork to a business that runs itself.</h2>
    </div>
    <div className="steps reveal">
      {STEPS.map((s) => (
        <div className="step" key={s.n}>
          <span className="n">{s.n}</span>
          <h4>{s.t}</h4>
          <p>{s.d}</p>
        </div>
      ))}
    </div>
  </section>
);

const About = () => (
  <section className="section" id="about">
    <div className="wrap about-grid">
      <div className="about-card reveal">
        <div className="glow" />
        <div className="about-avatar">NB</div>
        <div className="name">Nik Bergenske</div>
        <div className="role">Founder · SRQ Analytics</div>
        <p className="quote">"A business shouldn't run on busywork and guesswork. Our job is to make the numbers clear, the systems automatic, and the next move obvious."</p>
      </div>
      <div className="about-copy reveal">
        <span className="eyebrow">About</span>
        <h2 className="h2" style={{ marginTop: 16 }}>Sarasota-based. Built for owner-operators.</h2>
        <p>SRQ Analytics brings together CFO-level financial leadership and a builder's mindset for systems, automation, and AI. It's the combination most growing companies need but rarely find in one place.</p>
        <p>We help Sarasota and Gulf Coast businesses replace manual work across finance, sales, and operations with systems that scale — giving owners the clarity, structure, and leverage to grow with confidence.</p>
      </div>
    </div>
  </section>
);

const Contact = () => (
  <section className="section dark" id="contact">
    <div className="wrap cta reveal">
      <span className="eyebrow on-dark" style={{ justifyContent: "center", display: "flex" }}>Let's talk</span>
      <h2 className="display" style={{ marginTop: 20 }}>Ready to run on <em>intelligent systems.</em></h2>
      <p className="lead on-dark">Book a no-pressure consultation. We'll look at where you are, what's slowing you down, and what better systems could unlock.</p>
      <div className="cta-actions">
        <a className="btn btn-primary on-dark" href="mailto:hello@srqanalytics.com">Book a consultation <Arrow /></a>
        <a className="btn btn-ghost on-dark" href="mailto:hello@srqanalytics.com">Email us</a>
      </div>
      <div className="cta-contacts">
        <a href="mailto:hello@srqanalytics.com">{Ico.mail} hello@srqanalytics.com</a>
        <a href="#about">{Ico.pin} Sarasota, Florida</a>
      </div>
    </div>
  </section>
);

const FAQS = [
  { q: "What does SRQ Analytics do?", a: "SRQ Analytics provides fractional CFO services, financial analytics, and business systems and automation for growing businesses — combining senior financial leadership with technology to streamline how the whole operation runs." },
  { q: "What is a fractional CFO?", a: "A fractional CFO is an experienced finance executive who works with your business part-time, providing cash flow management, forecasting, budgeting, and strategic guidance without the cost of a full-time hire." },
  { q: "What kinds of systems and automation do you build?", a: "We automate work across the entire business — back office, sales, fulfillment, and reporting — built on whatever tools fit you best, with AI-assisted decisioning kept under human oversight." },
  { q: "Where is SRQ Analytics located?", a: "SRQ Analytics is based in Sarasota, Florida, and works with owner-operated businesses across Sarasota and the wider Gulf Coast." },
  { q: "Who is SRQ Analytics for?", a: "Growing, owner-operated companies that want more than the numbers — owners looking for a partner to bring clarity, build smarter systems, and unlock real operational leverage as they scale." },
];

const Faq = () => (
  <section className="section faq-section" id="faq">
    <div className="wrap">
      <div className="section-head reveal">
        <span className="eyebrow">Questions</span>
        <h2 className="h2" style={{ marginTop: 18 }}>Good to know.</h2>
      </div>
      <div className="faq-list reveal">
        {FAQS.map((f) => (
          <details className="faq-item" key={f.q}>
            <summary>
              <span>{f.q}</span>
              <span className="faq-mark" aria-hidden="true" />
            </summary>
            <p>{f.a}</p>
          </details>
        ))}
      </div>
    </div>
  </section>
);

const Footer = () => (
  <footer className="footer">
    <div className="wrap footer-inner">
      <a className="brand" href="#top"><Mark size={22} /> SRQ&nbsp;Analytics</a>
      <span className="meta">© {new Date().getFullYear()} SRQ Analytics · Sarasota, FL · <a href="mailto:hello@srqanalytics.com">hello@srqanalytics.com</a></span>
    </div>
  </footer>
);

Object.assign(window, { Nav, Hero, Services, Outcomes, Approach, Process, About, Faq, Contact, Footer });