/* global React, Eyebrow, PlaqueTag, Button, Icon, useBreakpoint */
const { useState, useEffect, useRef } = React;

/* ============================================================
   HERO
   ============================================================ */
function Hero({ onJump, onSchedule }) {
  const { isMobile, isTablet } = useBreakpoint();
  const compact = isMobile || isTablet;
  const cycle = [
    { eyebrow: 'Financial Clarity',                sub: 'Assists key stakeholders into the “whys” behind the numbers and identifies key trends and benchmarks.' },
    { eyebrow: 'Close Management and Optimization', sub: 'Review of the current close process and timeline, analyzes and provides suggestions on ways to streamline the monthly process.' },
    { eyebrow: 'Audit Readiness Support',          sub: 'Works with your business by reviewing/preparing workpapers, monitors outstanding audit related items and liaises directly with your auditors on your behalf.' },
    { eyebrow: 'Better Decisions',                 sub: 'Forward-looking insight so leadership can lead with confidence.' },
  ];
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % cycle.length), 3600);
    return () => clearInterval(t);
  }, []);

  return (
    <section style={{
      position: 'relative', overflow: 'hidden',
      background: 'linear-gradient(160deg, #1B3125 0%, #274734 45%, #2C597A 100%)',
      color: 'var(--mvg-offwhite)',
      padding: isMobile ? '64px 20px 84px' : isTablet ? '88px 28px 108px' : '104px 32px 128px',
    }}>
      <svg viewBox="0 0 1200 320" preserveAspectRatio="none" aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, width: '100%', height: 220, opacity: 0.38 }}>
        <path d="M0 320 L0 170 L120 120 L220 180 L340 80 L460 150 L560 70 L680 140 L820 50 L940 130 L1060 90 L1200 160 L1200 320 Z" fill="#1B3125"/>
        <path d="M0 320 L0 220 L140 190 L280 230 L420 180 L560 220 L700 190 L840 230 L980 200 L1120 230 L1200 210 L1200 320 Z" fill="#142619"/>
      </svg>
      <svg viewBox="0 0 40 40" aria-hidden="true" style={{ position: 'absolute', top: 60, right: '12%', width: 60, height: 60, opacity: 0.18 }}>
        <path d="M20 4 C22 16 24 18 36 20 C24 22 22 24 20 36 C18 24 16 22 4 20 C16 18 18 16 20 4 Z" fill="#7AADC1"/>
      </svg>

      <div style={{
        maxWidth: 1200, margin: '0 auto', position: 'relative',
        display: 'grid',
        gridTemplateColumns: compact ? '1fr' : '1.15fr 1fr',
        gap: compact ? 48 : 72,
        alignItems: 'center',
      }}>
        <div>
          <div style={{ marginBottom: 24 }}><PlaqueTag tone="slate">Outsourced Accounting Support</PlaqueTag></div>
          <h1 style={{ fontSize: 'clamp(32px, 5.4vw, 62px)', fontWeight: 700, lineHeight: 1.06, letterSpacing: '-0.025em', margin: '0 0 26px', fontFamily: 'var(--font-serif)', color: '#fff', textWrap: 'balance' }}>
            Outsourced accounting support to help your business reach its summit.
          </h1>
          <p style={{ fontSize: isMobile ? 16 : 19, lineHeight: 1.6, color: 'rgba(247,249,250,0.82)', margin: '0 0 36px', maxWidth: 600 }}>
            Mountain View Group, LLC provides reliable monthly close, bookkeeping, GAAP financial statements, audit-readiness support, budgeting, forecasting, software implementation assistance, and special project support for growing businesses that need clear financial direction.
          </p>
          <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 48 }}>
            <Button size="lg" onClick={() => onSchedule && onSchedule()}>Schedule a Consultation <Icon.ArrowRight size={16}/></Button>
            <Button size="lg" variant="ghost" onClick={() => onJump('services')}>
              <span style={{ color: 'var(--mvg-offwhite)' }}>View Services</span>
            </Button>
          </div>

          <div style={{ display: 'flex', alignItems: 'center', gap: isMobile ? 14 : 20, paddingTop: 24, borderTop: '1px solid rgba(247,249,250,0.14)', flexWrap: isMobile ? 'wrap' : 'nowrap' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.14em', color: 'var(--mvg-sky)', textTransform: 'uppercase' }}>How we help &nbsp;›</div>
            <div style={{ flex: 1, minWidth: isMobile ? '100%' : 0, display: 'grid' }}>
              {cycle.map((c, i) => {
                const active = i === idx;
                return (
                  <div
                    key={i}
                    aria-hidden={!active}
                    style={{
                      gridColumn: 1, gridRow: 1,
                      visibility: active ? 'visible' : 'hidden',
                      pointerEvents: active ? 'auto' : 'none',
                      animation: active ? 'heroFade 400ms var(--ease-standard)' : 'none',
                    }}
                  >
                    <div style={{ fontFamily: 'var(--font-serif)', fontSize: 20, fontWeight: 700, color: '#fff', marginBottom: 4, letterSpacing: '-0.01em' }}>{c.eyebrow}</div>
                    <div style={{ fontSize: 14, color: 'rgba(247,249,250,0.72)' }}>{c.sub}</div>
                  </div>
                );
              })}
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              {cycle.map((_, i) => (
                <button key={i} onClick={() => setIdx(i)} aria-label={`Show message ${i+1}`} style={{
                  width: i === idx ? 22 : 8, height: 8, borderRadius: 999,
                  background: i === idx ? 'var(--mvg-evergreen)' : 'rgba(247,249,250,0.25)',
                  border: 'none', padding: 0, cursor: 'pointer',
                  transition: 'width var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard)',
                }}/>
              ))}
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center' }}>
          <DashboardPreview/>
        </div>
      </div>

      <style>{`
        @keyframes heroFade {
          from { opacity: 0; transform: translateY(6px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>
  );
}

function DashboardPreview() {
  return (
    <div style={{
      width: '100%', maxWidth: 440,
      background: 'rgba(247,249,250,0.04)',
      border: '1px solid rgba(247,249,250,0.14)',
      borderRadius: 16, padding: 4,
      backdropFilter: 'blur(10px)',
      boxShadow: '0 30px 60px -20px rgba(0,0,0,0.5)',
    }}>
      <div style={{ background: 'rgba(255,255,255,0.98)', borderRadius: 13, padding: 22, color: 'var(--mvg-charcoal)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 18 }}>
          <div style={{ display: 'flex', gap: 5 }}>
            <div style={{ width: 10, height: 10, borderRadius: 999, background: '#E5858C' }}/>
            <div style={{ width: 10, height: 10, borderRadius: 999, background: '#E8C45B' }}/>
            <div style={{ width: 10, height: 10, borderRadius: 999, background: '#7FB894' }}/>
          </div>
          <div style={{ marginLeft: 'auto', fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>March 2026 · Close</div>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 18 }}>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color: 'var(--mvg-slate-700)', textTransform: 'uppercase', marginBottom: 6 }}>Monthly Close</div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 700, letterSpacing: '-0.01em', color: 'var(--mvg-forest)' }}>On Track</div>
          </div>
          <div style={{ background: 'var(--mvg-evergreen-50)', color: 'var(--mvg-evergreen-700)', fontSize: 11, fontWeight: 700, padding: '6px 10px', borderRadius: 999, display: 'flex', alignItems: 'center', gap: 6 }}>
            <span style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--mvg-evergreen)' }}/>
            Day 6 of 10
          </div>
        </div>

        <div style={{ background: 'var(--mvg-offwhite)', borderRadius: 10, padding: '18px 16px 14px', marginBottom: 16 }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 12 }}>
            <div style={{ fontSize: 12, color: 'var(--fg-3)' }}>Close progress</div>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mvg-forest)', fontWeight: 600 }}>74% complete</div>
          </div>
          <svg viewBox="0 0 280 70" style={{ width: '100%', height: 70 }}>
            <defs>
              <linearGradient id="prevfill" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="#3E8E54" stopOpacity="0.28"/>
                <stop offset="100%" stopColor="#3E8E54" stopOpacity="0"/>
              </linearGradient>
            </defs>
            <path d="M0 55 L35 48 L70 42 L105 34 L140 30 L175 22 L210 18 L245 14 L280 10 L280 70 L0 70 Z" fill="url(#prevfill)"/>
            <path d="M0 55 L35 48 L70 42 L105 34 L140 30 L175 22 L210 18 L245 14 L280 10" stroke="#3E8E54" strokeWidth="2" fill="none" strokeLinecap="round"/>
            {[[35,48],[70,42],[105,34],[140,30],[175,22],[210,18]].map(([x,y],i) => (
              <circle key={i} cx={x} cy={y} r="2.5" fill="#fff" stroke="#3E8E54" strokeWidth="1.5"/>
            ))}
          </svg>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          {[
            { t: 'Bank reconciliations',  d: true },
            { t: 'AR / AP review',        d: true },
            { t: 'Accrual entries',       d: true },
            { t: 'Financial statements',  d: false },
          ].map((row, i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13 }}>
              <div style={{
                width: 18, height: 18, borderRadius: 5,
                background: row.d ? 'var(--mvg-evergreen)' : 'transparent',
                border: row.d ? 'none' : '1.5px solid var(--border-default)',
                display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flexShrink: 0,
              }}>{row.d && <Icon.Check size={12}/>}</div>
              <span style={{ color: row.d ? 'var(--fg-3)' : 'var(--fg-1)', textDecoration: row.d ? 'line-through' : 'none', flex: 1 }}>{row.t}</span>
              {!row.d && <span style={{ fontSize: 11, color: 'var(--mvg-slate-700)', fontWeight: 600 }}>In progress</span>}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   TRUST / POSITIONING BAND
   ============================================================ */
function TrustBand() {
  const { isMobile, isTablet } = useBreakpoint();
  const compact = isMobile || isTablet;
  const pillars = [
    'Accurate monthly close processes',
    'GAAP-aligned financial statements',
    'Audit and special project support',
    'Practical forecasting and budgeting',
    'Accounting systems & implementation',
  ];
  return (
    <section style={{ background: 'var(--bg-page)', padding: isMobile ? '64px 20px' : '96px 32px', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: compact ? '1fr' : '1fr 1.1fr',
          gap: compact ? 40 : 80, alignItems: 'center',
        }}>
          <div>
            <Eyebrow>Positioning</Eyebrow>
            <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: isMobile ? 30 : 42, fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.02em', margin: '14px 0 20px', textWrap: 'balance' }}>
              Clear books. Reliable reporting. Better business decisions.
            </h2>
            <p style={{ fontSize: 17, color: 'var(--fg-2)', lineHeight: 1.65, margin: 0, maxWidth: 520 }}>
              Whether you need consistent monthly accounting support, GAAP-based financial reporting, or help preparing for an audit, Mountain View Group brings structure, accuracy, and confidence to your finance function.
            </p>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {pillars.map((p, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 18,
                padding: '20px 0',
                borderTop: i === 0 ? '1px solid var(--border-subtle)' : 'none',
                borderBottom: '1px solid var(--border-subtle)',
              }}>
                <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mvg-teal)', fontWeight: 600, width: 28 }}>{String(i + 1).padStart(2, '0')}</div>
                <div style={{ width: 28, height: 28, borderRadius: 999, background: 'var(--mvg-forest-50)', color: 'var(--mvg-forest)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon.Check size={14}/>
                </div>
                <div style={{ fontSize: 16, color: 'var(--fg-1)', fontWeight: 500 }}>{p}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   SERVICES OVERVIEW
   ============================================================ */
function ServicesOverview({ onJump, onSchedule }) {
  const { isMobile, isTablet } = useBreakpoint();
  const services = [
    { icon: <Icon.BookOpen size={22}/>,     title: 'Monthly Close & Bookkeeping',  body: 'Keep your financial records organized, accurate, and up to date with dependable monthly close and bookkeeping support.', target: 'feature-monthly-close' },
    { icon: <Icon.FileCheck size={22}/>,    title: 'GAAP Financial Statements',     body: 'Prepare financial statements aligned with GAAP principles to support leadership, lenders, investors, and auditors.', target: 'modal' },
    { icon: <Icon.ShieldCheck size={22}/>,  title: 'Audit-Readiness Support',       body: 'Get organized before the audit begins with schedules, reconciliations, documentation, and support designed to reduce stress.', target: 'feature-audit-readiness' },
    { icon: <Icon.Layers size={22}/>,       title: 'Special Projects',              body: 'Experienced accounting support for one-time or complex initiatives, cleanup work, process improvements, and finance team overflow.', target: 'modal' },
    { icon: <Icon.Settings size={22}/>,     title: 'Software Implementations',      body: 'Support accounting system transitions, setup, process design, data validation, and implementation planning.', target: 'modal' },
    { icon: <Icon.Wallet size={22}/>,       title: 'Budgeting & Cash Forecasting',  body: 'Develop clearer visibility into cash flow, future obligations, spending plans, and financial performance.', target: 'feature-budgeting' },
  ];
  const handleCardActivate = (s) => {
    if (s.target === 'modal') {
      onSchedule && onSchedule(s.title);
    } else {
      const el = document.getElementById(s.target);
      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  };
  return (
    <section id="services" style={{ background: 'var(--bg-surface)', padding: isMobile ? '72px 20px' : '112px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: isMobile ? 36 : 56, maxWidth: 720 }}>
          <Eyebrow>Services</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: isMobile ? 30 : 42, fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.02em', margin: '14px 0 18px', textWrap: 'balance' }}>
            Accounting services built for growing businesses.
          </h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: 'var(--fg-2)', lineHeight: 1.65, margin: 0 }}>
            From day-to-day bookkeeping to complex financial projects, Mountain View Group provides outsourced accounting support tailored to your organization's needs.
          </p>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
          gap: 20,
        }}>
          {services.map((s, i) => (
            <article
              key={i}
              role="button"
              tabIndex={0}
              onClick={() => handleCardActivate(s)}
              onKeyDown={e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleCardActivate(s); } }}
              style={{
                background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)', borderRadius: 10, padding: 28,
                cursor: 'pointer', transition: 'all var(--dur-base) var(--ease-standard)',
                display: 'flex', flexDirection: 'column',
              }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = 'var(--shadow-md)'; e.currentTarget.style.transform = 'translateY(-3px)'; e.currentTarget.style.borderColor = 'var(--border-default)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'translateY(0)'; e.currentTarget.style.borderColor = 'var(--border-subtle)'; }}>
              <div style={{ width: 48, height: 48, borderRadius: 10, background: 'var(--mvg-forest-50)', color: 'var(--mvg-forest)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 20 }}>{s.icon}</div>
              <h3 style={{ fontSize: 19, fontWeight: 600, margin: '0 0 10px', color: 'var(--fg-1)', lineHeight: 1.3 }}>{s.title}</h3>
              <p style={{ fontSize: 15, color: 'var(--fg-2)', lineHeight: 1.6, margin: '0 0 20px', flex: 1 }}>{s.body}</p>
              <div style={{ fontSize: 13, fontWeight: 600, color: 'var(--mvg-slate-700)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
                {s.target === 'modal' ? 'Get a consultation' : 'Learn more'} <Icon.ArrowRight size={14}/>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   WHO WE HELP
   ============================================================ */
function WhoWeHelp() {
  const { isMobile, isTablet } = useBreakpoint();
  const compact = isMobile || isTablet;
  const buckets = [
    'Small & mid-sized businesses',
    'Startups & growth-stage companies',
    'Nonprofit organizations',
    'Professional service firms',
    'Businesses preparing for audits, financing, or expansion',
    'Teams needing project-based accounting help',
  ];
  return (
    <section id="who-we-help" style={{ background: 'var(--bg-page)', padding: isMobile ? '72px 20px' : '112px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{
          display: 'flex', flexDirection: 'column', alignItems: 'center',
          textAlign: 'center', gap: 14,
          marginBottom: isMobile ? 48 : 72,
        }}>
          <img
            src="assets/mountain-view-logo.png"
            alt="Mountain View Group, LLC"
            style={{
              width: '100%', maxWidth: isMobile ? 280 : 380, height: 'auto',
              filter: 'drop-shadow(0 4px 18px rgba(27, 49, 37, 0.18))',
            }}
          />
          <div style={{ lineHeight: 1.05 }}>
            <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 900, fontSize: isMobile ? 26 : 32, color: 'var(--mvg-forest)', letterSpacing: '-0.01em' }}>Mountain View</div>
            <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: isMobile ? 12 : 13, letterSpacing: '0.24em', color: 'var(--mvg-slate-700)', textTransform: 'uppercase', marginTop: 6 }}>Group&nbsp;·&nbsp;LLC</div>
          </div>
        </div>
      <div style={{
        display: 'grid',
        gridTemplateColumns: compact ? '1fr' : '1fr 1.1fr',
        gap: compact ? 40 : 88, alignItems: 'center',
      }}>
        <div>
          <Eyebrow>Who we help</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: isMobile ? 28 : 40, fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.02em', margin: '14px 0 18px', textWrap: 'balance' }}>
            For businesses that need accounting support without a full-time hire.
          </h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: 'var(--fg-2)', lineHeight: 1.65, margin: 0, maxWidth: 500 }}>
            Mountain View Group is ideal for organizations that need dependable financial operations support but may not yet require a full in-house accounting team, Controller and C-Suite level support, or backfill while an employee is on an extended leave of absence.
          </p>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: 14 }}>
          {buckets.map((b, i) => (
            <div key={i} style={{
              display: 'flex', gap: 12, alignItems: 'flex-start',
              background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)',
              padding: '18px 18px', borderRadius: 8,
            }}>
              <div style={{ width: 6, height: 6, borderRadius: 999, background: 'var(--mvg-evergreen)', marginTop: 8, flexShrink: 0 }}/>
              <div style={{ fontSize: 14.5, color: 'var(--fg-1)', lineHeight: 1.45, fontWeight: 500 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>
      </div>
    </section>
  );
}

/* ============================================================
   APPROACH
   ============================================================ */
function Approach() {
  const { isMobile, isTablet } = useBreakpoint();
  const steps = [
    { n: '01', icon: <Icon.Telescope size={22}/>, title: 'Assess the Current View',  body: 'Review your current books, reporting, processes, deadlines, systems, and pain points.' },
    { n: '02', icon: <Icon.Map size={22}/>,       title: 'Build the Trail Map',      body: 'Create a practical plan for monthly close, reporting, cleanup, forecasting, or project work.' },
    { n: '03', icon: <Icon.Layers size={22}/>,    title: 'Execute with Precision',   body: 'Provide hands-on accounting support, documentation, reconciliations, and reporting.' },
    { n: '04', icon: <Icon.Flag size={22}/>,      title: 'Reach a Clearer Summit',   body: 'Deliver accurate, timely financial information that helps you lead with confidence.' },
  ];
  return (
    <section id="approach" style={{
      background: 'var(--mvg-forest)', color: 'var(--mvg-offwhite)',
      padding: isMobile ? '72px 20px' : '120px 32px',
      position: 'relative', overflow: 'hidden',
    }}>
      <svg viewBox="0 0 1200 400" preserveAspectRatio="none" aria-hidden="true" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', opacity: 0.1 }}>
        <path d="M0 400 L0 300 L150 200 L300 260 L450 120 L600 200 L750 80 L900 180 L1050 60 L1200 150 L1200 400 Z" fill="#7AADC1"/>
      </svg>

      <div style={{ maxWidth: 1200, margin: '0 auto', position: 'relative' }}>
        <div style={{ marginBottom: isMobile ? 40 : 64, maxWidth: 720 }}>
          <div style={{ marginBottom: 16 }}><PlaqueTag tone="slate">Our Approach</PlaqueTag></div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: isMobile ? 30 : 44, fontWeight: 700, lineHeight: 1.12, letterSpacing: '-0.02em', margin: '0 0 18px', color: '#fff', textWrap: 'balance' }}>
            A practical path to financial clarity.
          </h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: 'rgba(247,249,250,0.78)', lineHeight: 1.65, margin: 0, maxWidth: 600 }}>
            Four steps. Whether you're starting with clean-up or preparing for an audit, the path is the same.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)',
          gap: isMobile ? 32 : isTablet ? 40 : 0,
          position: 'relative',
        }}>
          {!isMobile && !isTablet && (
            <div aria-hidden="true" style={{
              position: 'absolute', top: 28, left: '12.5%', right: '12.5%', height: 2,
              background: 'linear-gradient(90deg, transparent, rgba(122,173,193,0.5), rgba(122,173,193,0.5), transparent)',
            }}/>
          )}
          {steps.map((s, i) => (
            <div key={s.n} style={{ padding: isMobile ? 0 : '0 18px', position: 'relative' }}>
              <div style={{
                width: 56, height: 56, borderRadius: 999,
                background: 'var(--mvg-forest-900)',
                border: '2px solid var(--mvg-evergreen)',
                color: 'var(--mvg-evergreen)',
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                margin: '0 0 24px', position: 'relative',
              }}>{s.icon}</div>
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mvg-sky)', marginBottom: 10, letterSpacing: '0.1em' }}>STEP {s.n}</div>
              <h3 style={{ fontSize: 20, fontWeight: 600, margin: '0 0 12px', color: '#fff', lineHeight: 1.3 }}>{s.title}</h3>
              <p style={{ fontSize: 14.5, color: 'rgba(247,249,250,0.78)', lineHeight: 1.6, margin: 0 }}>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FEATURED SERVICES
   ============================================================ */
function FeaturedService({ id, tag, title, body, points, cta, ctaService, onSchedule, align = 'left', illustration }) {
  const { isMobile, isTablet } = useBreakpoint();
  const compact = isMobile || isTablet;
  const isLeft = align === 'left';
  return (
    <div id={id} style={{
      display: 'grid',
      gridTemplateColumns: compact ? '1fr' : '1fr 1fr',
      gap: compact ? 40 : 72,
      alignItems: 'center',
      padding: compact ? '56px 0' : '80px 0',
      borderTop: '1px solid var(--border-subtle)',
      scrollMarginTop: 90,
    }}>
      <div style={{ order: compact ? 0 : (isLeft ? 0 : 1) }}>
        <div style={{ marginBottom: 16 }}><PlaqueTag tone="forest">{tag}</PlaqueTag></div>
        <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: isMobile ? 26 : 38, fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.02em', margin: '0 0 18px', textWrap: 'balance' }}>{title}</h2>
        <p style={{ fontSize: isMobile ? 15 : 17, color: 'var(--fg-2)', lineHeight: 1.65, margin: '0 0 26px' }}>{body}</p>
        <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : 'repeat(2, 1fr)', gap: '10px 22px', marginBottom: 30 }}>
          {points.map((p, i) => (
            <div key={i} style={{ display: 'flex', gap: 10, alignItems: 'flex-start' }}>
              <div style={{ width: 20, height: 20, borderRadius: 999, background: 'var(--mvg-evergreen-50)', color: 'var(--mvg-evergreen-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0, marginTop: 2 }}>
                <Icon.Check size={12}/>
              </div>
              <div style={{ fontSize: 14.5, color: 'var(--fg-1)', lineHeight: 1.5 }}>{p}</div>
            </div>
          ))}
        </div>
        {cta && <Button variant="secondary" size="md" onClick={() => onSchedule && onSchedule(ctaService)}>{cta} <Icon.ArrowRight size={14}/></Button>}
      </div>
      <div style={{ order: compact ? 1 : (isLeft ? 1 : 0) }}>{illustration}</div>
    </div>
  );
}

function FeaturedServices({ onSchedule }) {
  const { isMobile } = useBreakpoint();
  return (
    <section style={{ background: 'var(--bg-surface)', padding: isMobile ? '16px 20px 64px' : '32px 32px 96px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <FeaturedService
          id="feature-monthly-close"
          tag="Feature · Monthly Close"
          title="Start with a strong monthly close."
          body="A reliable monthly close process gives business owners and leadership teams a clear view of performance. We help ensure accounts are reconciled, activity is reviewed, financial statements are prepared, and issues are identified early."
          points={[
            'Bank and account reconciliations',
            'Month-end close support',
            'Financial statement preparation',
            'Variance review and reporting',
            'Cleanup and catch-up bookkeeping',
            'Documentation of processes',
          ]}
          cta="Get Monthly Close Support"
          ctaService="Bookkeeping"
          onSchedule={onSchedule}
          align="left"
          illustration={<CloseCalendar/>}
        />
        <FeaturedService
          id="feature-audit-readiness"
          tag="Feature · Audit Readiness"
          title="Prepare before the audit pressure starts."
          body="Audit preparation can be stressful when documentation, reconciliations, and schedules are incomplete. We help businesses organize accounting records, prepare support, and improve readiness before auditors begin their work."
          points={[
            'Account reconciliations',
            'Supporting schedules',
            'Documentation review',
            'Process cleanup',
            'Financial statement prep',
            'Auditor request support',
          ]}
          cta="Plan an Audit Readiness Review"
          ctaService="Audit support"
          onSchedule={onSchedule}
          align="right"
          illustration={<AuditBinder/>}
        />
        <FeaturedService
          id="feature-budgeting"
          tag="Feature · Budgeting & Forecasting"
          title="Know what's ahead before you get there."
          body="Budgeting and cash forecasting help you plan with greater confidence. We translate your financial activity into useful forward-looking insight, so you can make better decisions around spending, hiring, growth, and cash management."
          points={[
            'Operating budgets',
            'Cash flow forecasts',
            'Scenario planning',
            'Monthly budget-to-actual review',
            'Forecast updates',
            'Leadership reporting',
          ]}
          cta="Build a Forecast"
          ctaService="CFO/advisory services"
          onSchedule={onSchedule}
          align="left"
          illustration={<ForecastChart/>}
        />
      </div>
    </section>
  );
}

function CloseCalendar() {
  const today = new Date();
  const closingPeriod = new Date(today.getFullYear(), today.getMonth() - 1, 1);
  const closingLabel = closingPeriod.toLocaleString('en-US', { month: 'long', year: 'numeric' });
  const activityYear = today.getFullYear();
  const activityMonth = today.getMonth();
  const daysInMonth = new Date(activityYear, activityMonth + 1, 0).getDate();
  const firstWeekday = new Date(activityYear, activityMonth, 1).getDay();
  const days = Array.from({ length: daysInMonth }, (_, i) => i + 1);
  const businessDays = [];
  for (let d = 1; d <= daysInMonth && businessDays.length < 6; d++) {
    const dow = new Date(activityYear, activityMonth, d).getDay();
    if (dow !== 0 && dow !== 6) businessDays.push(d);
  }
  const closed = new Set(businessDays.slice(0, 5));
  const progress = new Set(businessDays.slice(5, 6));
  return (
    <div style={{ background: 'var(--mvg-offwhite)', border: '1px solid var(--border-subtle)', borderRadius: 14, padding: 28, boxShadow: 'var(--shadow-md)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color: 'var(--mvg-slate-700)', textTransform: 'uppercase', marginBottom: 4 }}>Close Calendar</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 700, color: 'var(--mvg-forest)' }}>{closingLabel}</div>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--mvg-evergreen)', fontWeight: 600 }}>Target: BD +6</div>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(7, 1fr)', gap: 4, marginBottom: 16 }}>
        {['S','M','T','W','T','F','S'].map((d, i) => (
          <div key={i} style={{ fontSize: 10, fontWeight: 700, color: 'var(--fg-3)', textAlign: 'center', padding: '4px 0' }}>{d}</div>
        ))}
        {Array.from({ length: firstWeekday }, (_, i) => <div key={'e'+i}/>)}
        {days.map(d => {
          const bg = closed.has(d) ? 'var(--mvg-evergreen)' : progress.has(d) ? 'var(--mvg-slate-700)' : 'transparent';
          const fg = closed.has(d) || progress.has(d) ? '#fff' : 'var(--fg-2)';
          return (
            <div key={d} style={{
              aspectRatio: '1', display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontSize: 12, fontWeight: 500, fontFamily: 'var(--font-mono)',
              background: bg, color: fg, borderRadius: 6,
              border: bg === 'transparent' ? '1px solid var(--border-subtle)' : 'none',
            }}>{d}</div>
          );
        })}
      </div>
      <div style={{ display: 'flex', gap: 16, paddingTop: 14, borderTop: '1px solid var(--border-subtle)', fontSize: 11, color: 'var(--fg-3)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: 'var(--mvg-evergreen)' }}/>Closed</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 10, height: 10, borderRadius: 3, background: 'var(--mvg-slate-700)' }}/>In progress</div>
      </div>
    </div>
  );
}

function AuditBinder() {
  const items = [
    { t: 'Trial balance tie-out',    d: true  },
    { t: 'Revenue recognition memo', d: true  },
    { t: 'Fixed asset rollforward',  d: true  },
    { t: 'Prepaid schedule',         d: true  },
    { t: 'Debt confirmations',       d: false },
    { t: 'Lease schedule (ASC 842)', d: false },
  ];
  return (
    <div style={{ background: 'var(--mvg-offwhite)', border: '1px solid var(--border-subtle)', borderRadius: 14, padding: 28, boxShadow: 'var(--shadow-md)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color: 'var(--mvg-slate-700)', textTransform: 'uppercase', marginBottom: 4 }}>PBC Schedule</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 700, color: 'var(--mvg-forest)' }}>{`FY${String((new Date().getFullYear() - 1) % 100).padStart(2, '0')} Audit`}</div>
        </div>
        <div style={{ background: 'var(--mvg-evergreen-50)', color: 'var(--mvg-evergreen-700)', fontSize: 11, fontWeight: 700, padding: '6px 10px', borderRadius: 999 }}>67% Ready</div>
      </div>
      <div style={{ background: 'var(--mvg-gray-100)', height: 6, borderRadius: 999, marginBottom: 20, overflow: 'hidden' }}>
        <div style={{ width: '67%', height: '100%', background: 'var(--mvg-evergreen)', borderRadius: 999 }}/>
      </div>
      <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
        {items.map((row, i) => (
          <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 13.5 }}>
            <div style={{
              width: 20, height: 20, borderRadius: 5,
              background: row.d ? 'var(--mvg-evergreen)' : 'transparent',
              border: row.d ? 'none' : '1.5px solid var(--border-default)',
              display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#fff', flexShrink: 0,
            }}>{row.d && <Icon.Check size={13}/>}</div>
            <span style={{ color: row.d ? 'var(--fg-2)' : 'var(--fg-1)', flex: 1 }}>{row.t}</span>
            <span style={{ fontSize: 11, color: row.d ? 'var(--mvg-evergreen-700)' : 'var(--mvg-slate-700)', fontWeight: 600, fontFamily: 'var(--font-mono)' }}>
              {row.d ? 'READY' : 'OPEN'}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function ForecastChart() {
  return (
    <div style={{ background: 'var(--mvg-offwhite)', border: '1px solid var(--border-subtle)', borderRadius: 14, padding: 28, boxShadow: 'var(--shadow-md)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18 }}>
        <div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color: 'var(--mvg-slate-700)', textTransform: 'uppercase', marginBottom: 4 }}>13-Week Cash Forecast</div>
          <div style={{ fontFamily: 'var(--font-serif)', fontSize: 22, fontWeight: 700, color: 'var(--mvg-forest)' }}>$1.84M projected</div>
        </div>
        <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--mvg-evergreen-700)', fontWeight: 600 }}>▲ 8.2%</div>
      </div>
      <svg viewBox="0 0 360 160" style={{ width: '100%', height: 160 }}>
        {[30, 65, 100, 135].map(y => (
          <line key={y} x1="20" x2="340" y1={y} y2={y} stroke="#E5E8EB" strokeWidth="1" strokeDasharray="2 3"/>
        ))}
        {[{y:30,l:'$2.0M'},{y:65,l:'$1.5M'},{y:100,l:'$1.0M'},{y:135,l:'$500k'}].map(({y,l}) => (
          <text key={l} x="0" y={y+3} fontSize="9" fill="#8A929B" fontFamily="JetBrains Mono">{l}</text>
        ))}
        <defs>
          <linearGradient id="actfill" x1="0" x2="0" y1="0" y2="1">
            <stop offset="0%" stopColor="#3E8E54" stopOpacity="0.22"/>
            <stop offset="100%" stopColor="#3E8E54" stopOpacity="0"/>
          </linearGradient>
        </defs>
        <path d="M30 110 L60 100 L90 105 L120 88 L150 80 L180 82" stroke="#274734" strokeWidth="2.2" fill="none" strokeLinecap="round"/>
        <path d="M180 82 L210 72 L240 58 L270 50 L300 42 L330 38" stroke="#3E8E54" strokeWidth="2.2" fill="none" strokeDasharray="4 3" strokeLinecap="round"/>
        <path d="M180 82 L330 38 L330 60 L180 82 Z" fill="url(#actfill)"/>
        <line x1="180" y1="30" x2="180" y2="140" stroke="#2C597A" strokeWidth="1.2" strokeDasharray="3 2"/>
        <text x="182" y="26" fontSize="9" fill="#2C597A" fontFamily="JetBrains Mono" fontWeight="600">TODAY</text>
        {['W1','W3','W5','W7','W9','W11','W13'].map((l, i) => (
          <text key={l} x={30 + i*50} y="155" fontSize="9" fill="#8A929B" fontFamily="JetBrains Mono" textAnchor="middle">{l}</text>
        ))}
      </svg>
      <div style={{ display: 'flex', gap: 18, marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border-subtle)', fontSize: 11, color: 'var(--fg-3)' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 16, height: 2, background: 'var(--mvg-forest)' }}/>Actual</div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}><span style={{ width: 16, height: 2, background: 'var(--mvg-evergreen)', borderTop: '1px dashed' }}/>Forecast</div>
      </div>
    </div>
  );
}

/* ============================================================
   FOUNDER / ABOUT
   ============================================================ */
function OwnerPhotoPlaceholder() {
  const [errored, setErrored] = useState(false);
  return (
    <div style={{
      aspectRatio: '4/5',
      borderRadius: 14,
      background: 'linear-gradient(160deg, #EAF0EC 0%, #DDEAF0 55%, #A9C9D6 100%)',
      position: 'relative', overflow: 'hidden',
      boxShadow: 'var(--shadow-lg)',
      border: '1px solid var(--border-subtle)',
    }}>
      <img
        src="assets/owner-photo.jpg"
        alt="Owner of Mountain View Group, LLC"
        onError={(e) => { e.currentTarget.style.display = 'none'; setErrored(true); }}
        style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
      />
      {errored && (
        <div style={{
          position: 'absolute', inset: 0,
          display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
          gap: 14, padding: 24, textAlign: 'center',
        }}>
          <div style={{
            width: 104, height: 104, borderRadius: 999,
            background: 'rgba(39,71,52,0.08)',
            color: 'var(--mvg-forest)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
            border: '1px dashed rgba(39,71,52,0.25)',
          }}>
            <Icon.User size={48}/>
          </div>
          <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.14em', color: 'var(--mvg-slate-700)', textTransform: 'uppercase' }}>Owner Photo</div>
          <div style={{ fontSize: 13, color: 'var(--fg-3)', maxWidth: 240, lineHeight: 1.5 }}>
            Add a portrait at <code style={{ fontFamily: 'var(--font-mono)', fontSize: 12, background: 'rgba(39,71,52,0.08)', padding: '1px 6px', borderRadius: 4 }}>public/assets/owner-photo.jpg</code> to replace this placeholder.
          </div>
        </div>
      )}
    </div>
  );
}

function FounderSection() {
  const { isMobile, isTablet } = useBreakpoint();
  const compact = isMobile || isTablet;
  return (
    <section id="about" style={{ background: 'var(--bg-page)', padding: isMobile ? '72px 20px' : '112px 32px' }}>
      <div style={{
        maxWidth: 1200, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: compact ? '1fr' : '1fr 1.1fr',
        gap: compact ? 48 : 88, alignItems: 'center',
      }}>
        <div style={{ position: 'relative', maxWidth: compact ? 420 : 'none', width: '100%', justifySelf: compact ? 'center' : 'stretch' }}>
          <OwnerPhotoPlaceholder/>
          <div style={{
            position: 'absolute', bottom: -24, right: compact ? 8 : -24,
            background: 'var(--mvg-slate-blue)', color: '#fff',
            padding: '18px 22px', borderRadius: 10,
            boxShadow: 'var(--shadow-lg)',
            maxWidth: 240,
          }}>
            <div style={{ fontSize: 10, fontWeight: 700, letterSpacing: '0.14em', color: 'var(--mvg-sky)', textTransform: 'uppercase', marginBottom: 4 }}>Mission</div>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: 16, lineHeight: 1.35, fontWeight: 700 }}>Helping each client reach their summit.</div>
          </div>
        </div>

        <div style={{ paddingTop: compact ? 32 : 0 }}>
          <Eyebrow>About Mike Haley, CPA</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: isMobile ? 28 : 40, fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.02em', margin: '14px 0 22px', textWrap: 'balance' }}>
            Trusted financial expertise — built over 18+ years.
          </h2>
          <p style={{ fontSize: isMobile ? 15 : 17, color: 'var(--fg-2)', lineHeight: 1.7, margin: '0 0 18px' }}>
            With more than 18 years of accounting and finance experience, Mountain View Group provides trusted financial expertise to businesses and organizations across a wide range of industries. As a Certified Public Accountant, Mike brings a comprehensive background in both public accounting and private industry, offering clients practical insight, strategic guidance, and dependable financial leadership.
          </p>
          <p style={{ fontSize: isMobile ? 15 : 17, color: 'var(--fg-2)', lineHeight: 1.7, margin: '0 0 18px' }}>
            Public accounting experience includes financial statement audits, reviews, and tax return preparation, while private industry experience spans financial close management, SOP development, software implementations, FP&amp;A, and internal and external financial reporting. This diverse background allows Mountain View Group to deliver solutions that improve financial transparency, operational efficiency, and long-term business performance.
          </p>
          <p style={{ fontSize: isMobile ? 15 : 17, color: 'var(--fg-2)', lineHeight: 1.7, margin: '0 0 24px' }}>
            Mike has significant experience serving clients in the manufacturing and distribution, non-profit, and healthcare sectors, with a strong understanding of the unique financial and operational challenges these industries face.
          </p>

          <div style={{
            display: 'grid',
            gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr',
            gap: 14,
            marginBottom: 28,
          }}>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)', padding: '14px 16px', borderRadius: 8 }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--mvg-forest-50)', color: 'var(--mvg-forest)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon.BookOpen size={16}/>
              </div>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color: 'var(--mvg-slate-700)', textTransform: 'uppercase', marginBottom: 4 }}>Education</div>
                <div style={{ fontSize: 13.5, color: 'var(--fg-1)', lineHeight: 1.45, fontWeight: 500 }}>BBA, Accounting · William &amp; Mary</div>
                <div style={{ fontSize: 13.5, color: 'var(--fg-1)', lineHeight: 1.45, fontWeight: 500 }}>MS, Accounting · Old Dominion University</div>
              </div>
            </div>
            <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start', background: 'var(--bg-surface)', border: '1px solid var(--border-subtle)', padding: '14px 16px', borderRadius: 8 }}>
              <div style={{ width: 32, height: 32, borderRadius: 8, background: 'var(--mvg-forest-50)', color: 'var(--mvg-forest)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon.Mountain size={16}/>
              </div>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', color: 'var(--mvg-slate-700)', textTransform: 'uppercase', marginBottom: 4 }}>Based In</div>
                <div style={{ fontSize: 13.5, color: 'var(--fg-1)', lineHeight: 1.45, fontWeight: 500 }}>Virginia</div>
                <div style={{ fontSize: 13.5, color: 'var(--fg-3)', lineHeight: 1.45 }}>Serving clients nationwide</div>
              </div>
            </div>
          </div>

          <blockquote style={{
            margin: 0, padding: '24px 28px',
            borderLeft: '3px solid var(--mvg-evergreen)',
            background: 'var(--bg-surface)',
            borderRadius: '0 10px 10px 0',
          }}>
            <div style={{ fontFamily: 'var(--font-serif)', fontSize: isMobile ? 16 : 18, lineHeight: 1.55, color: 'var(--fg-1)', fontStyle: 'italic' }}>
              "Whether supporting day-to-day accounting operations or helping organizations navigate complex financial decisions, Mountain View Group is committed to providing responsive, professional, and results-driven service."
            </div>
            <div style={{ marginTop: 14, fontSize: 13, fontWeight: 600, color: 'var(--mvg-slate-700)', letterSpacing: '0.04em' }}>
              — Mike Haley, CPA · Founder, Mountain View Group, LLC
            </div>
          </blockquote>
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   TESTIMONIAL
   ============================================================ */
function Testimonial() {
  const { isMobile, isTablet } = useBreakpoint();
  const compact = isMobile || isTablet;
  const [expanded, setExpanded] = useState(false);
  return (
    <section style={{
      background: 'var(--mvg-forest-50)',
      padding: isMobile ? '72px 20px' : '112px 32px',
      position: 'relative', overflow: 'hidden',
    }}>
      <svg viewBox="0 0 1200 400" preserveAspectRatio="none" aria-hidden="true" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, width: '100%', height: 200, opacity: 0.08 }}>
        <path d="M0 400 L0 320 L150 240 L300 280 L450 180 L600 230 L750 150 L900 220 L1050 140 L1200 200 L1200 400 Z" fill="#274734"/>
      </svg>

      <div style={{ maxWidth: 980, margin: '0 auto', position: 'relative' }}>
        <div style={{ textAlign: 'center', marginBottom: isMobile ? 28 : 36 }}>
          <PlaqueTag tone="forest">Client Testimonial</PlaqueTag>
        </div>

        <article style={{
          background: 'var(--mvg-white)',
          borderRadius: 'var(--radius-xl)',
          padding: isMobile ? '40px 24px 32px' : compact ? '48px 40px 36px' : '60px 64px 44px',
          boxShadow: 'var(--shadow-md)',
          border: '1px solid var(--border-subtle)',
          position: 'relative',
        }}>
          <svg viewBox="0 0 64 48" aria-hidden="true" style={{ position: 'absolute', top: isMobile ? 18 : 28, left: isMobile ? 18 : 32, width: isMobile ? 48 : 64, height: 'auto', opacity: 0.14 }}>
            <path d="M14 0 C6 0 0 8 0 18 V32 C0 40 6 46 14 46 H22 V32 H10 C8 32 6 30 6 28 V20 C6 14 10 10 14 10 V0 Z M50 0 C42 0 36 8 36 18 V32 C36 40 42 46 50 46 H58 V32 H46 C44 32 42 30 42 28 V20 C42 14 46 10 50 10 V0 Z" fill="#274734"/>
          </svg>

          <blockquote style={{ margin: 0, position: 'relative' }}>
            <p style={{
              fontFamily: 'var(--font-serif)',
              fontSize: isMobile ? 22 : compact ? 26 : 30,
              fontWeight: 700,
              lineHeight: 1.3,
              letterSpacing: '-0.015em',
              color: 'var(--fg-1)',
              margin: '0 0 24px',
              textWrap: 'balance',
            }}>
              &ldquo;Mike put our finance and accounting team in the best position it had been in the 20-year history of the company.&rdquo;
            </p>
            <p style={{
              fontFamily: 'var(--font-serif)',
              fontSize: isMobile ? 16 : 19,
              fontWeight: 500,
              fontStyle: 'italic',
              lineHeight: 1.45,
              color: 'var(--fg-2)',
              margin: 0,
              textWrap: 'balance',
            }}>
              &ldquo;No matter what company I work for, I will always reach out to Mike.&rdquo;
            </p>
          </blockquote>

          <div style={{
            marginTop: isMobile ? 28 : 36,
            paddingTop: isMobile ? 22 : 26,
            borderTop: '1px solid var(--border-subtle)',
            display: 'flex', alignItems: 'center', gap: 16, flexWrap: 'wrap',
          }}>
            <div style={{
              width: 56, height: 56, borderRadius: 999,
              background: 'linear-gradient(135deg, #2C597A 0%, #274734 100%)',
              color: '#fff',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 18, letterSpacing: '0.02em',
              flexShrink: 0, boxShadow: 'var(--shadow-sm)',
            }}>GR</div>
            <div style={{ flex: 1, minWidth: 200 }}>
              <div style={{ fontFamily: 'var(--font-sans)', fontWeight: 700, fontSize: 16, color: 'var(--fg-1)', lineHeight: 1.3 }}>Gregory Ray</div>
              <div style={{ fontSize: 13.5, color: 'var(--fg-2)', lineHeight: 1.45, marginTop: 2 }}>Senior Vice President &amp; Chief Financial Officer</div>
              <div style={{ fontSize: 13, color: 'var(--mvg-slate-700)', lineHeight: 1.45, fontWeight: 600, marginTop: 1 }}>Tate Engineering Systems, Inc.</div>
            </div>
            <button
              onClick={() => setExpanded(e => !e)}
              aria-expanded={expanded}
              style={{
                padding: '10px 16px',
                fontFamily: 'var(--font-sans)', fontSize: 13.5, fontWeight: 600,
                background: expanded ? 'var(--mvg-forest-50)' : 'transparent',
                color: 'var(--mvg-forest)',
                border: `1px solid ${expanded ? 'var(--mvg-forest)' : 'var(--border-default)'}`,
                borderRadius: 'var(--radius-md)',
                cursor: 'pointer',
                display: 'inline-flex', alignItems: 'center', gap: 8,
                transition: 'all var(--dur-fast) var(--ease-standard)',
              }}
              onMouseEnter={e => { if (!expanded) e.currentTarget.style.borderColor = 'var(--mvg-forest)'; }}
              onMouseLeave={e => { if (!expanded) e.currentTarget.style.borderColor = 'var(--border-default)'; }}
            >
              {expanded ? 'Hide full testimonial' : 'Read full testimonial'}
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0)', transition: 'transform var(--dur-base) var(--ease-standard)' }}>
                <polyline points="6 9 12 15 18 9"/>
              </svg>
            </button>
          </div>

          {expanded && (
            <div style={{
              marginTop: 24,
              paddingTop: 24,
              borderTop: '1px solid var(--border-subtle)',
              animation: 'tFade 360ms var(--ease-standard)',
            }}>
              <div style={{ fontSize: isMobile ? 14.5 : 15.5, color: 'var(--fg-2)', lineHeight: 1.75, fontFamily: 'var(--font-sans)' }}>
                <p style={{ margin: '0 0 16px' }}>
                  Our Accounting/Finance team was in a transitional phase after I first started with the company and it was clear that it lacked the true leadership it deserved. We needed a high level Accounting &amp; Finance leader to fill that gap until our new Director of Finance started nearly 5 weeks later. We needed an Accounting/Finance leader with not just with GAAP knowledge/experience, but also significant business acumen, excellent communication skills and high customer service. I had worked previously with Mike Haley at another company that needed something similar at that time and Mike was the first call I made again. Mike responded nearly immediately and once we reconnected and I brought him up to speed on what areas we needed his assistance with. During the discovery discussion, he was already using his significant business, accounting and financial acumen to create a plan that would help us for the weeks and months ahead.
                </p>
                <p style={{ margin: '0 0 16px' }}>
                  For background, I worked with Mike when I was at another organization years prior and because Mike was a significant find for us at a time when we had a tremendous gap in our accounting team. I saw firsthand how Mike quickly made great work of our month end close, reporting and ran with everything to help put the organization's finance and accounting team in the best position it had been in the 20-year history of the company. No matter what company I work for, I will always reach out to Mike if/when I see any of the finance/accounting gaps as I am highly confident he can fill high level roles as well as work well with existing teams to significantly improve nearly every aspect of it and always delivering such improvements with world class customer service in mind.
                </p>
                <p style={{ margin: 0, fontStyle: 'italic', color: 'var(--fg-1)' }}>
                  Thank you, Mike and the Mountain View Group, for everything as you once again played a critical role in our company and finance/accounting team's continued success.
                </p>
              </div>
            </div>
          )}
        </article>
      </div>

      <style>{`
        @keyframes tFade {
          from { opacity: 0; transform: translateY(-6px); }
          to   { opacity: 1; transform: translateY(0); }
        }
      `}</style>
    </section>
  );
}

/* ============================================================
   WHY MOUNTAIN VIEW GROUP
   ============================================================ */
function WhyMVG() {
  const { isMobile, isTablet } = useBreakpoint();
  const diffs = [
    { icon: <Icon.Briefcase size={20}/>,     title: 'Hands-on outsourced experience',    body: 'Senior accounting expertise applied directly to your books, not layered through multiple handoffs.' },
    { icon: <Icon.Compass size={20}/>,       title: 'Practical, business-minded support', body: 'Advice you can actually use — grounded in how your business runs day to day.' },
    { icon: <Icon.FileCheck size={20}/>,     title: 'GAAP-aware reporting',               body: 'Financial statements and documentation prepared to withstand lender, investor, and auditor review.' },
    { icon: <Icon.Layers size={20}/>,        title: 'Project + recurring support',        body: 'Flexible engagements — from one-time cleanup and special projects to ongoing monthly support.' },
    { icon: <Icon.Mountain size={20}/>,      title: 'Calm, organized approach',           body: 'Structure and steady execution replace last-minute scrambles, even on complex financial work.' },
    { icon: <Icon.MessageCircle size={20}/>, title: 'Clear communication',                body: 'Plain-language updates and reporting — no unnecessary jargon between you and your numbers.' },
  ];
  return (
    <section style={{ background: 'var(--bg-surface)', padding: isMobile ? '72px 20px' : '112px 32px' }}>
      <div style={{ maxWidth: 1200, margin: '0 auto' }}>
        <div style={{ marginBottom: isMobile ? 36 : 56, maxWidth: 720 }}>
          <Eyebrow>Why Mountain View Group</Eyebrow>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: isMobile ? 30 : 42, fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.02em', margin: '14px 0 18px', textWrap: 'balance' }}>
            Accounting support that brings the bigger picture into focus.
          </h2>
        </div>
        <div style={{
          display: 'grid',
          gridTemplateColumns: isMobile ? '1fr' : isTablet ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)',
          gap: 28, rowGap: isMobile ? 32 : 48,
        }}>
          {diffs.map((d, i) => (
            <div key={i}>
              <div style={{ width: 40, height: 40, borderRadius: 8, background: 'var(--mvg-slate-50)', color: 'var(--mvg-slate-700)', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16 }}>{d.icon}</div>
              <h3 style={{ fontSize: 17, fontWeight: 600, margin: '0 0 8px', color: 'var(--fg-1)', lineHeight: 1.35 }}>{d.title}</h3>
              <p style={{ fontSize: 14.5, color: 'var(--fg-2)', lineHeight: 1.6, margin: 0 }}>{d.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============================================================
   FINAL CTA
   ============================================================ */
function FinalCTA({ onJump, onSchedule }) {
  const { isMobile, isTablet } = useBreakpoint();
  const compact = isMobile || isTablet;
  return (
    <section id="contact" style={{ background: 'var(--bg-page)', padding: isMobile ? '64px 20px 72px' : '96px 32px 104px' }}>
      <div style={{
        maxWidth: 1100, margin: '0 auto',
        background: 'linear-gradient(135deg, #2C597A 0%, #274734 100%)',
        color: '#fff',
        padding: isMobile ? '44px 28px' : '72px 72px',
        borderRadius: 16,
        display: 'grid',
        gridTemplateColumns: compact ? '1fr' : '1.1fr 1fr',
        gap: compact ? 32 : 56, alignItems: 'center',
        position: 'relative', overflow: 'hidden',
      }}>
        <svg viewBox="0 0 300 300" aria-hidden="true" style={{ position: 'absolute', right: -40, bottom: -40, width: 320, height: 320, opacity: 0.12 }}>
          <path d="M30 260 L100 140 L150 200 L200 100 L270 260 Z" fill="#7AADC1"/>
        </svg>
        <div style={{ position: 'relative' }}>
          <div style={{ marginBottom: 18 }}><PlaqueTag tone="forest">Let's Talk</PlaqueTag></div>
          <h2 style={{ fontFamily: 'var(--font-serif)', fontSize: isMobile ? 26 : 38, fontWeight: 700, lineHeight: 1.15, letterSpacing: '-0.02em', margin: '0 0 18px', color: '#fff', textWrap: 'balance' }}>
            Ready for a clearer view of your financials?
          </h2>
          <p style={{ fontSize: isMobile ? 15 : 16.5, color: 'rgba(247,249,250,0.82)', lineHeight: 1.6, margin: 0, maxWidth: 500 }}>
            Whether you need monthly close support, audit readiness, GAAP financial statements, forecasting, or help with a special accounting project, we can help you take the next step.
          </p>
        </div>
        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: 14, alignItems: 'flex-start' }}>
          <Button size="lg" onClick={() => onSchedule && onSchedule()}>Schedule a Consultation <Icon.ArrowRight size={16}/></Button>
          <a href="mailto:hello@mountainviewgroupllc.com" style={{ textDecoration: 'none' }}>
            <Button size="lg" variant="ghost">
              <span style={{ color: 'var(--mvg-offwhite)' }}>Email Mountain View Group</span>
            </Button>
          </a>
          <div style={{ marginTop: 10, display: 'flex', gap: 20, fontSize: 13, color: 'rgba(247,249,250,0.75)' }}>
            <a href="mailto:hello@mountainviewgroupllc.com" style={{ display: 'flex', alignItems: 'center', gap: 8, color: 'rgba(247,249,250,0.75)', textDecoration: 'none' }}><Icon.Mail size={14}/> hello@mountainviewgroupllc.com</a>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, {
  Hero, TrustBand, ServicesOverview, WhoWeHelp, Approach,
  FeaturedServices, FounderSection, Testimonial, WhyMVG, FinalCTA,
});
