/* global React */

/* Types text once when scrolled into view. Used for amber "punchline" clauses
   so they feel alive without rotating forever. */
function TypeOnView({ text, speed = 40 }) {
  const [typed, setTyped] = React.useState('');
  const [started, setStarted] = React.useState(false);
  const ref = React.useRef(null);

  React.useEffect(() => {
    if (!ref.current || started) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setStarted(true);
          io.disconnect();
        }
      });
    }, { threshold: 0.4 });
    io.observe(ref.current);
    return () => io.disconnect();
  }, [started]);

  React.useEffect(() => {
    if (!started) return;
    if (typed.length >= text.length) return;
    const t = setTimeout(() => setTyped(text.slice(0, typed.length + 1)), speed);
    return () => clearTimeout(t);
  }, [started, typed, text, speed]);

  const done = typed.length >= text.length;
  return (
    <span ref={ref} className="accent" style={{ whiteSpace: 'pre' }}>
      {typed}
      {!done && <span className="cursor thin" style={{ background: 'var(--accent)' }} />}
    </span>
  );
}

const SERVICES = [
  {
    id: 'audit',
    num: '01',
    title: 'Tech Stack Optimization',
    tagline: 'Your team stops fighting the software.',
    price: '$4,500 flat. 2 weeks',
    body: "Your dispatchers, CSRs, and techs deal with bad software all day. I look at every tool you have. I cut what nobody uses. I connect the ones that should already talk to each other. Your team gets back the hours they lose to busywork.",
    deliverables: [
      'Full stack diagram (actually readable)',
      'Vendor spend audit (avg 18% savings)',
      'Integration and redundancy report',
      '12-month roadmap, ranked by ROI',
    ],
  },
  {
    id: 'ai',
    num: '02',
    title: 'AI Workflow Implementation',
    tagline: 'Time back for your team, every week.',
    price: 'from $18,000. 6 to 10 weeks',
    body: "Your CSRs and dispatchers know which jobs eat their day. We find the three worst ones. Then we build AI to do them in 10 seconds instead of 20 minutes. Call summaries. Inbox sorting. Quick estimates. Permit lookups. Your people get to focus on the work that actually needs a human.",
    deliverables: [
      '3 deployed AI workflows',
      'CRM and dispatch integration',
      'Team training and playbooks',
      '90-day support included',
    ],
  },
  {
    id: 'agent',
    num: '03',
    title: 'Agent Build',
    tagline: 'Your CSRs keep up with every call.',
    price: 'from $12,000. 4 to 8 weeks',
    body: "A custom voice or text agent that takes one job off your team's plate. After-hours booking. Estimate follow-ups. Review collection. Route changes when the weather turns. Your CSRs stop drowning. Your sales reps stop missing leads. Your techs stop getting radioed mid-job.",
    deliverables: [
      '1 production agent, 1 job',
      'Phone or chat deployment',
      'Observability dashboard',
      'Escalation rules (human-first)',
    ],
  },
  {
    id: 'fractional',
    num: '04',
    title: 'Ongoing Fractional CTO',
    tagline: 'Your team gets a tech advocate.',
    price: 'from $3,500/mo. 3 month minimum',
    body: "You get me on Slack. In your weekly ops meeting. And on any tech decision over $2,000. I'm the person your office manager calls when a vendor is trying to sell you a $40,000 platform you don't need. Your team stops making tech calls alone.",
    deliverables: [
      'Weekly 60-min standup',
      'Slack access, 24-hr turnaround',
      'Vendor evaluation memos',
      'Quarterly roadmap review',
    ],
  },
];

function ServicesSection() {
  const phrases = React.useMemo(() => [
    'Better days for your team.',
    'Better results for your customers.',
    'Better business for you.',
  ], []);
  const [idx, setIdx] = React.useState(0);
  const [text, setText] = React.useState(phrases[0]);
  const [phase, setPhase] = React.useState('hold');

  React.useEffect(() => {
    let t;
    if (phase === 'hold') {
      t = setTimeout(() => setPhase('deleting'), 2400);
    } else if (phase === 'deleting') {
      if (text.length > 0) {
        t = setTimeout(() => setText(text.slice(0, -1)), 22);
      } else {
        setIdx((idx + 1) % phrases.length);
        setPhase('typing');
      }
    } else if (phase === 'typing') {
      const target = phrases[idx];
      if (text.length < target.length) {
        t = setTimeout(() => setText(target.slice(0, text.length + 1)), 38);
      } else {
        setPhase('hold');
      }
    }
    return () => clearTimeout(t);
  }, [phase, text, idx, phrases]);

  return (
    <section id="services" className="container" style={{ paddingTop: '6rem' }}>
      <div className="mono-label">§ 02 · services</div>
      <h2 style={{ marginTop: '0.5em', marginBottom: '1rem' }}>
        Better technology.{' '}
        <span className="accent" style={{
          display: 'inline-block',
          minWidth: '24ch',
          whiteSpace: 'nowrap',
        }}>
          {text}<span className="cursor thin" style={{ background: 'var(--accent)' }} />
        </span>
      </h2>
      <p style={{ maxWidth: '62ch', color: 'var(--fg-dim)', fontSize: 18 }}>
        This isn't about tech. It's about the people who show up for you every day.
        Your techs, CSRs, dispatchers, and sales reps do better work when their
        tools stop getting in the way.
      </p>

      <div className="grid grid-2" style={{ marginTop: '3rem', gap: '3rem 2rem' }}>
        {SERVICES.map(s => (
          <div key={s.id} style={{ borderTop: '1px dashed var(--border)', paddingTop: '1.5rem' }}>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: '0.8em', marginBottom: '0.4em' }}>
              <span className="muted" style={{ fontSize: 14, fontWeight: 700 }}>{s.num}</span>
              <h3 style={{ fontSize: 24 }}>{s.title}</h3>
            </div>
            <div className="accent" style={{ fontSize: 14, marginBottom: '1em' }}>{s.price}</div>
            <p style={{ color: 'var(--fg)', fontSize: 17 }}>{s.body}</p>
            <ul style={{ listStyle: 'none', padding: 0, margin: '1em 0 1.2em' }}>
              {s.deliverables.map((d, i) => (
                <li key={i} style={{ padding: '0.2em 0', color: 'var(--fg-dim)', fontSize: 15 }}>
                  <span className="accent">▸</span> {d}
                </li>
              ))}
            </ul>
            <a href="#contact" style={{ color: 'var(--fg)', fontSize: 14 }}>→ book this</a>
          </div>
        ))}
      </div>
    </section>
  );
}

function ProcessSection() {
  const steps = [
    { n: '1', t: 'DIAGNOSTIC', d: '45 minutes. Free. Bring your worst problem. If I can fix it on the call, I will. No invoice.', dur: 'Day 0' },
    { n: '2', t: 'PROPOSAL',   d: 'One PDF. Fixed price. Plain English. No "discovery phase" that costs $15K and gives you a Notion doc.', dur: 'Day 1 to 3' },
    { n: '3', t: 'BUILD',      d: 'Demo every Thursday. You see real progress. If something is off, we know in 7 days. Not 7 weeks.', dur: 'Week 1 to 10' },
    { n: '4', t: 'HANDOFF',    d: 'Docs. Loom walkthroughs. A 30-day tune-up call. Nothing gets tossed over the fence. There is no fence.', dur: 'Final wk' },
  ];
  return (
    <section id="process" className="container" style={{ paddingTop: '6rem' }}>
      <div className="mono-label">§ 03 · process</div>
      <h2 style={{ marginTop: '0.5em', marginBottom: '1.5rem' }}>
        The whole engagement, <TypeOnView text="no surprises." />
      </h2>

      <div className="grid grid-4">
        {steps.map((s, i) => (
          <div key={i} style={{ position: 'relative' }}>
            <div style={{
              fontSize: 48, fontWeight: 700, color: 'var(--fg-dim)', lineHeight: 1,
            }}>{s.n}</div>
            <div className="mono-label" style={{ marginTop: '0.4em' }}>{s.dur}</div>
            <div style={{ fontSize: 18, fontWeight: 700, margin: '0.3em 0 0.5em', color: 'var(--fg-bright)' }}>
              {s.t}
            </div>
            <p className="small" style={{ color: 'var(--fg-dim)' }}>{s.d}</p>
            {i < steps.length - 1 && (
              <div style={{
                position: 'absolute',
                top: 20, right: -8,
                color: 'var(--border)',
                fontSize: 18,
              }} className="hide-mobile">→</div>
            )}
          </div>
        ))}
      </div>

      <div className="box" style={{ marginTop: '3rem', padding: '1.25rem 1.5rem', borderStyle: 'dashed' }}>
        <span className="accent small" style={{ letterSpacing: '0.15em' }}>↪ WARRANTY</span>
        <p style={{ marginTop: '0.4em', marginBottom: 0, color: 'var(--fg-bright)', fontSize: 16 }}>
          If what we build doesn't do what the proposal said it would, within 90 days of
          launch, I fix it free. Out of pocket. I've never had to write that check.
        </p>
      </div>
    </section>
  );
}

function CasesSection() {
  const cases = [
    { co: 'Midwest HVAC Co.', size: '$6M rev. 28 techs', tag: 'AI IMPL', metric: '+14%', metricL: 'booking rate', note: '9 hrs/wk saved on dispatch. AI call summary plus CRM auto-fill.' },
    { co: 'Regional Plumbing', size: '$3.2M rev. 14 techs', tag: 'AUDIT', metric: '$38K', metricL: 'annual savings', note: 'Cut 7 tools down to 3. Killed a marketing contract that wasn\'t tracking leads.' },
    { co: 'Lawn Co. (franchise)', size: '$9M rev. 6 locations', tag: 'AGENT', metric: '1.2 hrs', metricL: 'avg reroute time to 3 min', note: 'Weather-aware route planner. Texts techs with new stops.' },
    { co: 'PestGuard LLC', size: '$4.1M rev. 22 techs', tag: 'AGENT', metric: '92%', metricL: 'reviews requested', note: 'Post-visit SMS agent. Only 12% before we built it.' },
  ];
  return (
    <section id="cases" className="container" style={{ paddingTop: '6rem' }}>
      <div className="mono-label">§ 04 · cases</div>
      <h2 style={{ marginTop: '0.5em', marginBottom: '1.5rem' }}>
        Real work. <span className="muted">Names changed.</span>
      </h2>
      <p style={{ maxWidth: '60ch', color: 'var(--fg-dim)', fontSize: 18 }}>
        NDAs keep me from using real names. I'm happy to connect you with any of
        these references on a call.
      </p>

      <div className="grid grid-2" style={{ marginTop: '2.5rem', gap: '2rem' }}>
        {cases.map((c, i) => (
          <div key={i} style={{ borderTop: '1px dashed var(--border)', paddingTop: '1.25rem' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: '1em' }}>
              <div>
                <h3 style={{ fontSize: 17 }}>{c.co}</h3>
                <div className="small muted">{c.size}</div>
              </div>
              <span className="small muted">{c.tag}</span>
            </div>
            <div style={{ margin: '1em 0', display: 'flex', alignItems: 'baseline', gap: '0.6em' }}>
              <div style={{ fontSize: 36, fontWeight: 700, color: 'var(--fg-bright)', lineHeight: 1 }}>{c.metric}</div>
              <div className="small muted">{c.metricL}</div>
            </div>
            <p className="small" style={{ margin: 0, color: 'var(--fg-dim)' }}>{c.note}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

function PricingSection() {
  const plans = [
    {
      name: 'AUDIT',
      price: '$4,500',
      sub: 'flat · 2 weeks',
      best: false,
      features: [
        'Full stack review',
        'Written report + roadmap',
        'Vendor spend analysis',
        'Priority-ranked action list',
        'One follow-up call',
      ],
    },
    {
      name: 'PROJECT',
      price: 'from $12K',
      sub: 'fixed-price · 4–10 wk',
      best: true,
      features: [
        'Scoped build (agent or impl)',
        'Weekly demos',
        'Training + documentation',
        '90-day warranty',
        'Everything in AUDIT',
      ],
    },
    {
      name: 'FRACTIONAL',
      price: '$3,500/mo',
      sub: '3-month minimum',
      best: false,
      features: [
        'Weekly standup',
        'Slack access',
        'Vendor evaluation memos',
        'Quarterly roadmap review',
        '10% off any project work',
      ],
    },
  ];
  return (
    <section id="pricing" className="container" style={{ paddingTop: '6rem' }}>
      <div className="mono-label">§ 05 · pricing</div>
      <h2 style={{ marginTop: '0.5em', marginBottom: '1rem' }}>
        Flat fees. <TypeOnView text="Because hourly is a tax on trust." />
      </h2>

      <div className="grid grid-3" style={{ marginTop: '3rem', gap: '2rem' }}>
        {plans.map((p, i) => (
          <div key={i} style={{
            padding: '2rem 1.5rem',
            borderTop: p.best ? '2px solid var(--fg)' : '1px dashed var(--border)',
            position: 'relative',
          }}>
            {p.best && (
              <div className="mono-label accent" style={{ position: 'absolute', top: -10, left: 0, background: 'var(--bg)', paddingRight: '0.5em' }}>
                ★ most booked
              </div>
            )}
            <div className="mono-label">{p.name}</div>
            <div style={{ fontSize: 32, fontWeight: 700, margin: '0.4em 0 0.1em', color: 'var(--fg-bright)' }}>
              {p.price}
            </div>
            <div className="small muted">{p.sub}</div>
            <ul style={{ listStyle: 'none', padding: 0, margin: '1.5em 0' }}>
              {p.features.map((f, j) => (
                <li key={j} style={{ padding: '0.25em 0' }}>
                  <span className="accent">▸</span> {f}
                </li>
              ))}
            </ul>
            <a href="#contact" className={p.best ? 'btn btn-primary' : 'btn btn-ghost'}>
              start {p.name.toLowerCase()} →
            </a>
          </div>
        ))}
      </div>

      <p className="center small muted" style={{ marginTop: '2rem' }}>
        All prices in USD. US-based only. I work with 6 clients at a time, max.
      </p>
    </section>
  );
}

function AboutSection() {
  return (
    <section id="about" className="container" style={{ paddingTop: '6rem' }}>
      <div className="mono-label">§ 06 · about</div>
      <h2 style={{ marginTop: '0.5em', marginBottom: '2rem' }}>
        Who does this?
      </h2>

      <div className="grid grid-2" style={{ alignItems: 'start', gap: '3rem' }}>
        <div>
          <div className="placeholder" style={{ height: 340, aspectRatio: '4/5' }}>
            <div style={{ textAlign: 'center', lineHeight: 1.8 }}>
              <div>[ PLACEHOLDER ]</div>
              <div style={{ marginTop: '0.5em', fontSize: 10 }}>headshot.png · 400×500</div>
              <div style={{ fontSize: 10 }}>drop real photo here</div>
            </div>
          </div>
          <div className="mono-label" style={{ marginTop: '1em' }}>JAMIE REEVES · FOUNDER</div>
        </div>
        <div>
          <p style={{ fontSize: 17 }}>
            Hi, I'm <span className="bright">Jamie</span>. I spent 14 years as a staff
            engineer at two SaaS companies you've heard of. My dad ran a 4-truck HVAC shop
            in St. Louis. I grew up watching him print dispatch routes at 5am on a dot
            matrix printer because "that's just how we do it."
          </p>
          <p>
            In 2024 I quit to build him a better system. Word got around. Turns out a lot
            of mid-size home service operators have the exact same problem: software that's
            either too simple for the complexity of the business or too complex for the
            simplicity of the operators.
          </p>
          <p>
            The Home Service CTO is what I wish existed when my dad asked me, at 16, whether
            he should buy a new dispatch "system" for $9,000. (He shouldn't have.)
          </p>
          <p className="muted small" style={{ marginTop: '2em' }}>
            Based in Kansas City · Travel anywhere in the continental US · Available Q3 2026
          </p>
          <div style={{ marginTop: '1.5em', display: 'flex', gap: '0.5em', flexWrap: 'wrap' }}>
            <span className="tag">ex · Atlassian</span>
            <span className="tag">ex · Shopify</span>
            <span className="tag">BS CS · U of Illinois</span>
            <span className="tag">Son-of-an-HVAC-guy certified</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function ReadingSection() {
  const posts = [
    { tag: 'ESSAY',    t: 'You probably don\'t need another CRM.',           d: '9 min', date: 'Apr 2026' },
    { tag: 'ESSAY',    t: 'Why your dispatcher is secretly the CIO.',        d: '6 min', date: 'Mar 2026' },
    { tag: 'GUIDE',    t: 'AI call summaries: the 15-minute version.',       d: '12 min', date: 'Mar 2026' },
    { tag: 'TEARDOWN', t: 'ServiceTitan vs. HCP vs. Jobber in 2026.',        d: '22 min', date: 'Feb 2026' },
    { tag: 'RANT',     t: 'Stop paying $400/mo for a review tool.',          d: '4 min', date: 'Feb 2026' },
    { tag: 'GUIDE',    t: 'Building a voice agent for after-hours calls.',   d: '18 min', date: 'Jan 2026' },
    { tag: 'ESSAY',    t: 'The three spreadsheets that run every HVAC shop.',d: '7 min', date: 'Jan 2026' },
    { tag: 'TEARDOWN', t: 'I reviewed 41 home service AI products.',         d: '31 min', date: 'Dec 2025' },
  ];
  return (
    <section id="reading" className="container" style={{ paddingTop: '6rem' }}>
      <div className="mono-label">§ 07 · reading room</div>
      <h2 style={{ marginTop: '0.5em', marginBottom: '0.5rem' }}>
        Free content. <span className="accent">Lots of it.</span>
      </h2>
      <p style={{ color: 'var(--fg-dim)', maxWidth: '60ch' }}>
        I write an essay or teardown roughly every 10 days. No paywall. No
        "subscribe to read more." The best way to know if we'd work together is
        to read a few of these first.
      </p>

      <div style={{ marginTop: '2rem', borderTop: '1px dashed var(--border)' }}>
        {posts.map((p, i) => (
          <a key={i} href="#" style={{
            display: 'grid',
            gridTemplateColumns: '90px 1fr 80px 70px',
            alignItems: 'center',
            gap: '1.5rem',
            padding: '0.9rem 0.25rem',
            borderBottom: '1px dashed var(--border)',
            border: 'none',
            borderBottom: '1px dashed var(--border)',
            color: 'var(--fg)',
          }}
          onMouseEnter={e => e.currentTarget.style.color = 'var(--fg-bright)'}
          onMouseLeave={e => e.currentTarget.style.color = 'var(--fg)'}
          >
            <span className="small muted" style={{ letterSpacing: '0.15em' }}>{p.tag}</span>
            <span>{p.t}</span>
            <span className="small muted">{p.date}</span>
            <span className="small muted" style={{ textAlign: 'right' }}>{p.d} →</span>
          </a>
        ))}
      </div>

      <div className="center" style={{ marginTop: '2rem' }}>
        <a href="#" className="small muted">view all 47 posts →</a>
      </div>
    </section>
  );
}

function ContactSection() {
  const [submitted, setSubmitted] = React.useState(false);
  const [form, setForm] = React.useState({ name: '', company: '', size: '', need: '', pain: '' });
  const upd = (k, v) => setForm(f => ({ ...f, [k]: v }));

  if (submitted) {
    return (
      <section id="contact" className="container" style={{ paddingTop: '6rem' }}>
        <div className="mono-label">§ 08 · contact</div>
        <CRTFrame title="FORM SUBMITTED" style={{ marginTop: '1.5rem', maxWidth: 720 }}>
          <div style={{ padding: '1rem 0' }}>
            <div style={{ color: 'var(--accent)', marginBottom: '0.5em' }}>▸ Message received.</div>
            <Typewriter text={`Thanks, ${form.name || 'operator'}. I read every submission personally and reply within 1 business day. In the meantime, the reading room has 47 posts waiting for you.`} />
            <div style={{ marginTop: '1.5em' }}>
              <button className="btn btn-ghost" onClick={() => { setSubmitted(false); setForm({ name: '', company: '', size: '', need: '', pain: '' }); }}>
                ↻ send another
              </button>
            </div>
          </div>
        </CRTFrame>
      </section>
    );
  }

  const input = {
    width: '100%', background: 'var(--bg-2)', border: '1px solid var(--border)',
    color: 'var(--fg-bright)', fontFamily: 'inherit', fontSize: 14, padding: '0.7em 0.9em',
    outline: 'none',
  };
  const label = { display: 'block', fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'var(--fg-dim)', marginBottom: '0.4em' };

  return (
    <section id="contact" className="container" style={{ paddingTop: '6rem' }}>
      <div className="mono-label">§ 08 · contact</div>
      <h2 style={{ marginTop: '0.5em', marginBottom: '1rem' }}>
        Book the free diagnostic.
      </h2>
      <p style={{ maxWidth: '60ch', color: 'var(--fg-dim)' }}>
        45 minutes. No slide deck. No sales guy. Just you, me, and whatever's
        annoying you most about your software right now.
      </p>

      <div className="grid grid-2" style={{ marginTop: '2.5rem', alignItems: 'start', gap: '3rem' }}>
        <form style={{ borderTop: '1px dashed var(--border)', paddingTop: '1.5rem' }} onSubmit={e => { e.preventDefault(); setSubmitted(true); }}>
          <div style={{ marginBottom: '1.2em' }}>
            <label style={label}>&gt; name</label>
            <input style={input} required value={form.name} onChange={e => upd('name', e.target.value)} onFocus={e => e.currentTarget.style.borderColor = 'var(--fg)'} onBlur={e => e.currentTarget.style.borderColor = 'var(--border)'} />
          </div>
          <div style={{ marginBottom: '1.2em' }}>
            <label style={label}>&gt; company</label>
            <input style={input} required value={form.company} onChange={e => upd('company', e.target.value)} onFocus={e => e.currentTarget.style.borderColor = 'var(--fg)'} onBlur={e => e.currentTarget.style.borderColor = 'var(--border)'} />
          </div>
          <div className="grid grid-2" style={{ gap: '1rem', marginBottom: '1.2em' }}>
            <div>
              <label style={label}>&gt; revenue</label>
              <select style={{...input, appearance: 'none'}} value={form.size} onChange={e => upd('size', e.target.value)}>
                <option>&lt; $1M</option>
                <option>$1M–$5M</option>
                <option>$5M–$10M</option>
                <option>$10M+</option>
              </select>
            </div>
            <div>
              <label style={label}>&gt; need</label>
              <select style={{...input, appearance: 'none'}} value={form.need} onChange={e => upd('need', e.target.value)}>
                <option>Not sure yet</option>
                <option>Tech Stack Audit</option>
                <option>AI Implementation</option>
                <option>Agent Build</option>
                <option>Fractional CTO</option>
              </select>
            </div>
          </div>
          <div style={{ marginBottom: '1.2em' }}>
            <label style={label}>&gt; #1 time-suck (one sentence)</label>
            <textarea style={{...input, minHeight: 100, resize: 'vertical'}} value={form.pain} onChange={e => upd('pain', e.target.value)} placeholder="e.g. Our dispatchers spend 2 hours a day just confirming appointments" />
          </div>
          <button type="submit" className="btn btn-primary">
            ▸ send
          </button>
          <p className="small muted" style={{ marginTop: '1em', marginBottom: 0 }}>
            I reply within 1 business day. No drip sequences.
          </p>
        </form>

        <div style={{ borderTop: '1px dashed var(--border)', paddingTop: '1.5rem' }}>
          <div className="mono-label">direct</div>
          <div style={{ marginTop: '0.5em', fontSize: 15 }}>
            <div>▸ book@homeservicecto.com</div>
            <div>▸ (555) 010-RUNC</div>
            <div>▸ M–F · 8a–6p CT</div>
          </div>
          <div className="mono-label" style={{ marginTop: '2em' }}>availability</div>
          <div style={{ marginTop: '0.6em' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0.3em 0' }}>
              <span>Q2 2026</span><span style={{ color: 'var(--accent-2)' }}>full</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0.3em 0' }}>
              <span>Q3 2026</span><span style={{ color: 'var(--accent)' }}>2 slots</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', padding: '0.3em 0' }}>
              <span>Q4 2026</span><span style={{ color: 'var(--fg)' }}>open</span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ServicesSection, ProcessSection, CasesSection, PricingSection, AboutSection, ReadingSection, ContactSection });