// Landing-page section components — run a call.
const { useState: useStateS } = React;

const MAX = 1240;
const PADX = 32;
const SECTION_PAD = '120px';

// ──────────────────────────────────────────────────────────────
// Reusable bits
// ──────────────────────────────────────────────────────────────

function Wrap({ children, style, className }) {
  return (
    <div className={`wrap-mobile ${className || ''}`} style={{ maxWidth: MAX, margin: '0 auto', padding: `0 ${PADX}px`, ...style }}>
      {children}
    </div>
  );
}

function Eyebrow({ children, color = 'var(--rac-ink-3)', style }) {
  return (
    <div className="rac eyebrow" style={{ color, ...style }}>{children}</div>
  );
}

function SectionHead({ eyebrow, title, max = 720, align = 'left' }) {
  return (
    <div className="section-head" style={{ maxWidth: max, marginBottom: 64, textAlign: align }}>
      <Eyebrow style={{ marginBottom: 16, color: 'var(--rac-green)' }}>{eyebrow}</Eyebrow>
      <h2 className="rac h1" style={{
        fontSize: 48, lineHeight: 1.05, letterSpacing: '-0.030em', fontWeight: 600,
      }}>{title}</h2>
    </div>
  );
}

// ──────────────────────────────────────────────────────────────
// 0. Founding band (top of page)
// ──────────────────────────────────────────────────────────────

function FoundingBand() {
  return (
    <a href="#pricing" style={{
      display: 'block', background: 'var(--rac-green-900)', color: '#e8eee9',
      textDecoration: 'none',
    }}>
      <div className="founding-band" style={{
        maxWidth: MAX, margin: '0 auto', padding: '11px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 14,
        fontSize: 13, fontWeight: 500, textAlign: 'center',
      }}>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          fontFamily: 'var(--rac-mono)', fontSize: 11.5,
          letterSpacing: '0.08em', textTransform: 'uppercase', color: '#9bc4af',
        }}>
          <span style={{
            width: 7, height: 7, borderRadius: '50%',
            background: '#3fb286', boxShadow: '0 0 0 3px rgba(63,178,134,0.18)',
          }}/>
          23 of 25 Founding spots remaining
        </span>
        <span style={{ color: '#4a7a66' }}>·</span>
        <span style={{ color: '#f6f4ee' }}>$199/mo locked in for life</span>
        <span style={{
          marginLeft: 6, color: '#9bc4af',
          transition: 'transform var(--rac-dur-fast)',
        }}>→</span>
      </div>
    </a>
  );
}

// ──────────────────────────────────────────────────────────────
// 1. Nav
// ──────────────────────────────────────────────────────────────

function Nav() {
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 30,
      background: 'rgba(246,244,238,0.88)',
      backdropFilter: 'blur(10px)',
      borderBottom: '1px solid var(--rac-line)',
    }}>
      <Wrap className="nav-row" style={{
        display: 'flex', alignItems: 'center', gap: 32,
        padding: '24px 32px',
      }}>
        <a href="#" style={{ display:'inline-flex', alignItems:'center', textDecoration:'none' }}>
          <img src="assets/run-a-call-wordmark.png" alt="run a call." style={{ height: 40, display: 'block' }}/>
        </a>
        <nav className="nav-links" style={{
          marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 28,
          fontSize: 14, fontWeight: 500,
        }}>
          <a className="rac navlink" href="#pricing">Pricing</a>
          <a className="rac navlink" href="#compare">Compare</a>
          <a className="rac navlink" href="https://app.runacall.com/auth/sign-in">Log in</a>
          <a className="rac btn btn--primary btn--sm" href="https://app.runacall.com/auth/sign-up" style={{ textDecoration: 'none' }}>Start free trial</a>
        </nav>
      </Wrap>
    </header>
  );
}

// ──────────────────────────────────────────────────────────────
// 2. Hero — type and CTAs only, no image
// ──────────────────────────────────────────────────────────────

function Hero() {
  return (
    <section className="hero-section" style={{ padding: `${SECTION_PAD} 0 96px` }}>
      <Wrap>
        <div style={{ maxWidth: 880, margin: '0 auto', textAlign: 'center' }}>
          <h1 className="rac display" style={{
            fontSize: 88, lineHeight: 1.0, letterSpacing: '-0.040em',
            fontWeight: 600, margin: 0,
          }}>
            The HVAC<br/>operating system<span style={{ color: 'var(--rac-green)' }}>.</span>
          </h1>
          <p className="rac lead" style={{
            marginTop: 28, maxWidth: 620, marginLeft: 'auto', marginRight: 'auto',
            fontSize: 21, lineHeight: 1.5, color: 'var(--rac-ink-3)',
          }}>
            Built only for HVAC shops doing $1M–$5M. Flat monthly price. Every feature included. No contracts, ever.
          </p>
          <div className="hero-ctas" style={{
            marginTop: 36, display: 'flex', gap: 12,
            alignItems: 'center', justifyContent: 'center', flexWrap: 'wrap',
          }}>
            <a className="rac btn btn--primary" href="https://app.runacall.com/auth/sign-up" style={{ height: 48, padding: '0 26px', fontSize: 15, textDecoration: 'none' }}>
              Start free trial
            </a>
            <a href="#pricing" className="rac btn btn--quiet" style={{
              height: 48, padding: '0 22px', fontSize: 15,
              color: 'var(--rac-ink)', fontWeight: 600,
              display:'inline-flex', alignItems:'center', gap: 6,
            }}>
              See pricing <span style={{ color:'var(--rac-ink-4)' }}>→</span>
            </a>
          </div>
          <div style={{
            marginTop: 22, fontSize: 13, color: 'var(--rac-ink-4)',
          }}>
            No credit card. No demo required.
          </div>
        </div>
      </Wrap>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// 3. Pain-point strip
// ──────────────────────────────────────────────────────────────

function PainStrip() {
  const items = [
    { icon: <IconPriceTag size={20}/>, label: 'One price. Every feature.' },
    { icon: <IconBan size={20}/>,      label: 'Cancel anytime.' },
    { icon: <IconNoPhone size={20}/>,  label: 'Pricing on the website. No sales calls.' },
  ];
  return (
    <section style={{ borderTop: '1px solid var(--rac-line)', borderBottom: '1px solid var(--rac-line)' }}>
      <Wrap className="pain-strip" style={{
        display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
        padding: 0,
      }}>
        {items.map((it, i) => (
          <div key={i} style={{
            padding: '32px 32px',
            display: 'flex', alignItems: 'center', gap: 14,
            borderRight: i < items.length-1 ? '1px solid var(--rac-line)' : 'none',
            color: 'var(--rac-ink-2)',
          }}>
            <span style={{ color: 'var(--rac-green)' }}>{it.icon}</span>
            <span style={{
              fontFamily: 'var(--rac-display)', fontSize: 17,
              fontWeight: 600, letterSpacing: '-0.012em', color: 'var(--rac-ink)',
            }}>{it.label}</span>
          </div>
        ))}
      </Wrap>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// 4. Product — alternating screenshots with documentation captions
// ──────────────────────────────────────────────────────────────

function ProductSection() {
  const items = [
    {
      n: '01',
      kicker: 'Dispatch',
      caption: 'See Thursday at a glance. Drag to reassign. Drive time built in.',
      frame: <PlaceholderDispatch />,
      noframe: true,
    },
    {
      n: '02',
      kicker: 'Memberships',
      caption: "Your Comfort Club, finally on one screen. See who's renewing, who's slipping, and which tune-ups are due — before you lose the member.",
      frame: <PlaceholderMembership />,
      noframe: true,
    },
    {
      n: '03',
      kicker: 'Estimates → Invoices',
      caption: 'Good, better, best — customer picks one, the invoice writes itself. Get paid faster, post to QuickBooks automatically, never re-key a number.',
      frame: <PlaceholderEstimate />,
      noframe: true,
    },
    {
      bridge: true,
      text: <>Plus price book, online booking, two-way texting, GPS tracking, QuickBooks sync, and everything else you'd expect. All included<span style={{color:'var(--rac-green)'}}>.</span></>,
    },
    {
      n: '04',
      kicker: 'Mobile',
      caption: 'The same thing on the truck. Three screens that cover the day — the schedule, the live job, and the close-out. Photos, signatures, payment, and Good-Better-Best estimates without leaving the driveway. Works offline.',
      frame: <PlaceholderMobile />,
      noframe: true,
    },
  ];
  return (
    <section id="product" style={{ padding: `${SECTION_PAD} 0` }}>
      <Wrap>
        <SectionHead
          eyebrow="The product"
          title={<>Everything you run the shop on,<br/>in one place<span style={{color:'var(--rac-green)'}}>.</span></>}
        />
      </Wrap>

      <Wrap style={{ display: 'flex', flexDirection: 'column', gap: 96 }}>
        {items.map((it, idx) => (
          it.bridge ? (
            <h2 key={`bridge-${idx}`} className="rac product-bridge" style={{
              maxWidth: 920, margin: '0 auto', textAlign: 'center',
              fontFamily: 'var(--rac-display)', fontSize: 44, lineHeight: 1.15,
              letterSpacing: '-0.022em', fontWeight: 600, color: 'var(--rac-ink)',
            }}>{it.text}</h2>
          ) : (
            <div key={it.n} className="product-item" style={{
              display: 'flex', flexDirection: 'column', gap: 32,
            }}>
              <div className="product-caption-row" style={{
                display: 'flex', alignItems: 'baseline', gap: 32,
              }}>
                <div className="caption-meta" style={{
                  display: 'flex', alignItems: 'baseline', gap: 14,
                  flex: '0 0 auto', minWidth: 260,
                }}>
                  <span style={{
                    fontFamily: 'var(--rac-mono)', fontSize: 11,
                    letterSpacing: '0.12em', color: 'var(--rac-ink-4)', fontWeight: 500,
                  }}>{it.n}</span>
                  <span style={{
                    fontFamily: 'var(--rac-display)', fontSize: 28, lineHeight: 1.1,
                    letterSpacing: '-0.022em', fontWeight: 600, color: 'var(--rac-ink)',
                  }}>{it.kicker}</span>
                </div>
                <p className="rac" style={{
                  fontSize: 18, lineHeight: 1.55, color: 'var(--rac-ink-3)',
                  maxWidth: 640, margin: 0, flex: 1,
                }}>{it.caption}</p>
              </div>
              <div className="product-mock-wrap" data-mock={it.kicker} style={{
                border: it.noframe ? '1px solid var(--rac-line)' : 'none',
                borderRadius: it.noframe ? 14 : 0,
                overflow: it.noframe ? 'hidden' : 'visible',
              }}>{it.frame}</div>
            </div>
          )
        ))}
      </Wrap>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// 5. Founder story
// ──────────────────────────────────────────────────────────────

function FounderSection() {
  return (
    <section style={{
      borderTop: '1px solid var(--rac-line)',
      borderBottom: '1px solid var(--rac-line)',
      padding: `${SECTION_PAD} 0`,
    }}>
      <Wrap className="stack-tablet" style={{
        display: 'grid', gridTemplateColumns: '0.7fr 1.4fr', gap: 64, alignItems: 'center',
      }}>
        {/* Founder portrait */}
        <figure className="founder-photo" style={{
          margin: 0,
          maxWidth: 280,
          background: 'var(--rac-surface)',
          border: '1px solid var(--rac-line)',
          borderRadius: 14,
          padding: 14,
          position: 'relative',
          overflow: 'hidden',
        }}>
          <img
            src="assets/founder-gytis.jpg"
            alt="Gytis Kandrotas, co-founder"
            style={{
              display: 'block',
              width: '100%',
              aspectRatio: '4 / 5',
              objectFit: 'cover',
              borderRadius: 8,
            }}
          />
          <figcaption style={{
            marginTop: 12, paddingTop: 10,
            borderTop: '1px solid var(--rac-line-soft)',
            display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
            gap: 10,
          }}>
            <span style={{
              fontFamily: 'var(--rac-display)', fontSize: 15, fontWeight: 600,
              letterSpacing: '-0.012em', color: 'var(--rac-ink)',
            }}>Gytis Kandrotas</span>
            <span style={{
              fontFamily: 'var(--rac-mono)', fontSize: 10,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              color: 'var(--rac-ink-4)',
            }}>Co-founder</span>
          </figcaption>
        </figure>

        <div>
          <Eyebrow style={{ marginBottom: 16, color: 'var(--rac-green)' }}>Why this exists</Eyebrow>
          <h2 className="rac h1" style={{
            fontSize: 44, lineHeight: 1.08, letterSpacing: '-0.028em',
            fontWeight: 600, margin: 0,
          }}>
            This software exists because the other stuff didn't.
          </h2>
          <div style={{ marginTop: 28, display:'flex', flexDirection:'column', gap: 18, maxWidth: 580 }}>
            <p className="rac" style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--rac-ink-2)', margin: 0 }}>
              I grew up working in HVAC. My dad ran a shop, and I spent every summer in customers' attics, crawlspaces, and mechanical rooms — learning the trade and watching him fight software that was either too clunky to use in the field or too expensive to make sense for a shop his size.
            </p>
            <p className="rac" style={{ fontSize: 17, lineHeight: 1.6, color: 'var(--rac-ink-2)', margin: 0 }}>
              Run a Call is the platform he should've had. Built by someone who knows what 110° in an attic feels like. Designed for shops that want to grow without signing a three-year contract or hiring a full-time admin just to manage their software.
            </p>
          </div>
          <div style={{
            marginTop: 32, paddingTop: 20, borderTop: '1px solid var(--rac-line)',
            display:'flex', alignItems:'center', gap: 14,
          }}>
            <span style={{
              fontFamily: 'var(--rac-display)', fontSize: 22, fontWeight: 500,
              fontStyle: 'italic', color: 'var(--rac-ink)', letterSpacing: '-0.01em',
            }}>— Gytis Kandrotas</span>
            <span style={{ color: 'var(--rac-ink-4)' }}>·</span>
            <span style={{
              fontFamily:'var(--rac-mono)', fontSize: 11,
              letterSpacing:'0.12em', color: 'var(--rac-ink-4)',
            }}>CO-FOUNDER</span>
          </div>
        </div>
      </Wrap>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// 6. Pricing — two-card founding/public
// ──────────────────────────────────────────────────────────────

function PricingSection() {
  const claimed = 2;
  const total = 25;
  const pct = (claimed / total) * 100;

  const features = [
    'Up to 15 technicians',
    'Every feature, current and future',
    'White-glove migration from your old platform',
    'Direct line to the founder',
    'Price never goes up. Ever.',
  ];
  const publicFeatures = features.slice(0, 3);

  return (
    <section id="pricing" style={{ padding: `${SECTION_PAD} 0` }}>
      <Wrap>
        <SectionHead
          eyebrow="Pricing"
          title={<>One price. Every feature. No surprises<span style={{color:'var(--rac-green)'}}>.</span></>}
        />

        <div className="pricing-grid" style={{ display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 28, alignItems: 'stretch' }}>
          {/* Founding card */}
          <div className="pricing-card" style={{
            background: 'var(--rac-surface)',
            border: '1.5px solid var(--rac-green)',
            borderRadius: 16,
            padding: '40px 40px 32px',
            position: 'relative',
            boxShadow: '0 1px 0 rgba(14,124,90,0.06)',
            display: 'flex', flexDirection: 'column',
          }}>
            <div style={{
              position: 'absolute', top: -10, left: 32,
              padding: '4px 12px', borderRadius: 999,
              background: 'var(--rac-green)', color: '#fff',
              fontFamily: 'var(--rac-mono)', fontSize: 10.5,
              letterSpacing: '0.12em', fontWeight: 600,
            }}>
              FOUNDING 25 · LIMITED
            </div>

            <div style={{ display:'flex', alignItems:'baseline', gap: 6, marginBottom: 6 }}>
              <span className="rac num pricing-num" style={{
                fontSize: 88, fontWeight: 600, lineHeight: 1,
                letterSpacing: '-0.040em', color: 'var(--rac-ink)',
              }}>$199</span>
              <span style={{ fontFamily:'var(--rac-mono)', fontSize: 14, color:'var(--rac-ink-3)' }}>
                / month
              </span>
            </div>
            <div style={{ fontSize: 16, color: 'var(--rac-ink-2)', marginBottom: 28 }}>
              Flat per shop. <span style={{ color: 'var(--rac-green)', fontWeight: 600 }}>Locked in for life.</span>
            </div>

            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display:'flex', flexDirection:'column', gap: 14,
              borderTop: '1px solid var(--rac-line-soft)', paddingTop: 24,
            }}>
              {features.map((f, i) => (
                <li key={i} style={{ display:'flex', alignItems:'flex-start', gap: 12, fontSize: 14.5, color: 'var(--rac-ink-2)' }}>
                  <span style={{ color: 'var(--rac-green)', marginTop: 2 }}><IconCheck size={16}/></span>
                  {f}
                </li>
              ))}
            </ul>

            <div style={{ marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--rac-line-soft)' }}>
              <div style={{
                display:'flex', justifyContent:'space-between', alignItems:'baseline',
                fontFamily:'var(--rac-mono)', fontSize: 11, letterSpacing:'0.08em',
                textTransform:'uppercase', color:'var(--rac-ink-3)', marginBottom: 10,
              }}>
                <span>{claimed} of {total} spots claimed</span>
                <span style={{ color: 'var(--rac-green)' }}>{total - claimed} left</span>
              </div>
              <div style={{
                height: 4, background: 'var(--rac-line-soft)',
                borderRadius: 999, overflow: 'hidden',
              }}>
                <div style={{
                  width: `${pct}%`, height: '100%',
                  background: 'var(--rac-green)',
                }}/>
              </div>
            </div>

            <a className="rac btn btn--primary" href="https://app.runacall.com/auth/sign-up" style={{
              marginTop: 28, height: 48, fontSize: 15, textDecoration: 'none',
            }}>
              Claim founding spot →
            </a>
            <div style={{
              marginTop: 12, fontSize: 12.5, color: 'var(--rac-ink-4)', textAlign:'center',
            }}>
              Founding pricing closes when we hit 25 shops.
            </div>
          </div>

          {/* Public card */}
          <div className="pricing-card" style={{
            background: 'var(--rac-surface)',
            border: '1px solid var(--rac-line)',
            borderRadius: 16,
            padding: '40px 40px 32px',
            display: 'flex', flexDirection: 'column',
          }}>
            <div className="rac eyebrow" style={{ color: 'var(--rac-ink-4)', marginBottom: 18 }}>
              After founding cohort
            </div>

            <div style={{ display:'flex', alignItems:'baseline', gap: 6, marginBottom: 6 }}>
              <span className="rac num pricing-num" style={{
                fontSize: 88, fontWeight: 600, lineHeight: 1,
                letterSpacing: '-0.040em', color: 'var(--rac-ink-3)',
              }}>$499</span>
              <span style={{ fontFamily:'var(--rac-mono)', fontSize: 14, color:'var(--rac-ink-4)' }}>
                / month
              </span>
            </div>
            <div style={{ fontSize: 16, color: 'var(--rac-ink-3)', marginBottom: 28 }}>
              Flat per shop. Same deal, no contract.
            </div>

            <ul style={{
              listStyle: 'none', padding: 0, margin: 0,
              display:'flex', flexDirection:'column', gap: 14,
              borderTop: '1px solid var(--rac-line-soft)', paddingTop: 24,
              flex: 1,
            }}>
              {publicFeatures.map((f, i) => (
                <li key={i} style={{ display:'flex', alignItems:'flex-start', gap: 12, fontSize: 14.5, color: 'var(--rac-ink-3)' }}>
                  <span style={{ color: 'var(--rac-ink-4)', marginTop: 2 }}><IconCheck size={16}/></span>
                  {f}
                </li>
              ))}
            </ul>

            <button className="rac btn btn--ghost" style={{
              marginTop: 32, height: 48, fontSize: 15,
            }}>
              Join the waitlist →
            </button>
            <div style={{
              marginTop: 12, fontSize: 12.5, color: 'var(--rac-ink-4)', textAlign:'center',
            }}>
              We'll notify you when public pricing opens.
            </div>
          </div>
        </div>

        <div style={{
          marginTop: 36, fontSize: 13.5, color: 'var(--rac-ink-3)', textAlign: 'center',
        }}>
          14-day free trial. No card required.
        </div>
      </Wrap>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// 7. Comparison table
// ──────────────────────────────────────────────────────────────

function CompareSection() {
  const cols = ['Run a Call', 'ServiceTitan', 'FieldEdge', 'Housecall Pro'];
  const rows = [
    ['Trades served',   "HVAC. That's it.",      'HVAC, plumbing, electrical, garage door, roofing, pest control', 'HVAC, plumbing, electrical', 'HVAC, plumbing, electrical, cleaning, landscaping, pest'],
    ['Pricing model',   'Flat monthly per shop', 'Per technician (quote only)', 'Per user (quote only)',       'Tiered + $35/user over cap'],
    ['Annual contract', 'No',                    'Required, 12+ mo',            'Required',                    'No'],
    ['Time to onboard', 'Days',                  'Months',                      'Weeks',                       'Days'],
    ['Built for',       'HVAC shops, $1M–$5M',   'Enterprise, 20+ trucks',      'Mid-size shops, 5–100 techs', 'Solo to small teams, all trades'],
  ];

  const cell = (v, isUs, isLast) => v;

  return (
    <section id="compare" style={{
      borderTop: '1px solid var(--rac-line)',
      padding: `${SECTION_PAD} 0`,
    }}>
      <Wrap>
        <SectionHead eyebrow="Compare" title={<>How we stack up<span style={{color:'var(--rac-green)'}}>.</span></>} />

        <div className="compare-card" style={{
          background: 'var(--rac-surface)',
          border: '1px solid var(--rac-line)',
          borderRadius: 14,
          overflow: 'hidden',
        }}>
          <table style={{ width: '100%', borderCollapse: 'collapse' }}>
            <thead>
              <tr>
                <th style={{
                  padding: '20px 24px', textAlign: 'left',
                  borderBottom: '1px solid var(--rac-line)',
                  background: 'var(--rac-surface-2)',
                  fontFamily:'var(--rac-mono)', fontSize: 10.5,
                  letterSpacing:'0.12em', textTransform:'uppercase',
                  fontWeight: 500, color: 'var(--rac-ink-4)',
                  width: '24%',
                }}>Feature</th>
                {cols.map((c, i) => (
                  <th key={c} style={{
                    padding: '20px 24px', textAlign: 'left',
                    borderBottom: '1px solid var(--rac-line)',
                    background: i === 0 ? 'var(--rac-green-50)' : 'var(--rac-surface-2)',
                    borderLeft: i === 0 ? '1px solid var(--rac-green-100)' : '1px solid var(--rac-line-soft)',
                    borderRight: i === 0 ? '1px solid var(--rac-green-100)' : 'none',
                    fontFamily:'var(--rac-display)', fontSize: 14,
                    fontWeight: 600,
                    color: i === 0 ? 'var(--rac-green-900)' : 'var(--rac-ink-2)',
                    letterSpacing:'-0.005em',
                    width: '19%',
                  }}>
                    {i === 0 ? (
                      <img
                        src="assets/run-a-call-wordmark.png"
                        alt="run a call."
                        style={{ height: 36, display: 'block' }}
                      />
                    ) : c}
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((r, ri) => (
                <tr key={ri}>
                  <td style={{
                    padding: '18px 24px',
                    borderBottom: ri < rows.length-1 ? '1px solid var(--rac-line-soft)' : 'none',
                    fontSize: 13.5, color: 'var(--rac-ink-3)',
                    background: 'var(--rac-surface-2)',
                  }}>{r[0]}</td>
                  {r.slice(1).map((v, ci) => (
                    <td key={ci} style={{
                      padding: '18px 24px',
                      borderBottom: ri < rows.length-1 ? '1px solid var(--rac-line-soft)' : 'none',
                      borderLeft: ci === 0 ? '1px solid var(--rac-green-100)' : '1px solid var(--rac-line-soft)',
                      borderRight: ci === 0 ? '1px solid var(--rac-green-100)' : 'none',
                      background: ci === 0 ? 'rgba(238,245,241,0.4)' : 'transparent',
                      fontSize: 13.5,
                      color: ci === 0 ? 'var(--rac-ink)' : 'var(--rac-ink-3)',
                      fontWeight: ci === 0 ? (ri === 0 ? 700 : 500) : 400,
                    }}>
                      {cell(v, ci === 0, ri === rows.length-1)}
                    </td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div style={{
          marginTop: 18, fontSize: 12, color: 'var(--rac-ink-4)',
          fontFamily: 'var(--rac-mono)', letterSpacing: '0.04em',
        }}>
          Comparisons based on publicly available information as of April 2026. Competitor pricing varies by configuration.
        </div>
      </Wrap>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// 8. Migration guarantee
// ──────────────────────────────────────────────────────────────

function MigrationSection() {
  return (
    <section style={{ padding: `${SECTION_PAD} 0` }}>
      <Wrap>
        <div className="stack-tablet" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 64, alignItems: 'start',
        }}>
          <div>
            <Eyebrow style={{ marginBottom: 16, color: 'var(--rac-green)' }}>Switching</Eyebrow>
            <h2 className="rac h1" style={{
              fontSize: 44, lineHeight: 1.08, letterSpacing: '-0.028em',
              fontWeight: 600, margin: 0,
            }}>
              Switching is on us.
            </h2>
          </div>
          <div>
            <p className="rac" style={{
              fontSize: 19, lineHeight: 1.55, color: 'var(--rac-ink-2)', margin: 0, maxWidth: 620,
            }}>
              Coming from ServiceTitan, FieldEdge, Housecall Pro, Jobber, or a spreadsheet held together with duct tape? We migrate everything — customers, equipment history, open jobs, invoices, your price book — at no charge. <span style={{ color: 'var(--rac-green)', fontWeight: 600 }}>If you're not fully moved over in a week, your first month's on us.</span>
            </p>
            <div style={{ marginTop: 32, display: 'flex', alignItems: 'center', gap: 28, flexWrap: 'wrap' }}>
              <a href="#migrate-form" className="rac btn btn--primary" style={{ height: 48, padding: '0 26px', fontSize: 15, textDecoration: 'none' }}>
                Start your switch →
              </a>
            </div>
          </div>
        </div>
      </Wrap>
    </section>
  );
}


// ──────────────────────────────────────────────────────────────
// 10. Integrations
// ──────────────────────────────────────────────────────────────

function FeatureRequestModal({ open, onClose }) {
  const [email, setEmail] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [status, setStatus] = React.useState('idle');
  const inputRef = React.useRef(null);

  React.useEffect(() => {
    if (!open) return;
    setStatus('idle');
    setEmail(''); setMessage('');
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    setTimeout(() => inputRef.current && inputRef.current.focus(), 50);
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = '';
    };
  }, [open, onClose]);

  if (!open) return null;

  const submit = (e) => {
    e.preventDefault();
    if (!email || !message) return;
    setStatus('sending');
    // TODO: replace with a real form endpoint (Formspree, Web3Forms, your API).
    // For now, hand off to the user's mail client with the request prefilled.
    const subject = encodeURIComponent('Integration request — run a call.');
    const body    = encodeURIComponent(`From: ${email}\n\nWhat's missing:\n${message}`);
    window.location.href = `mailto:Support@runacall.com?subject=${subject}&body=${body}`;
    setTimeout(() => setStatus('sent'), 200);
  };

  const fieldLabel = {
    fontFamily: 'var(--rac-mono)', fontSize: 10.5, letterSpacing: '0.12em',
    textTransform: 'uppercase', color: 'var(--rac-ink-4)', marginBottom: 8,
    fontWeight: 600,
  };
  const fieldStyle = {
    width: '100%', boxSizing: 'border-box',
    padding: '12px 14px',
    border: '1px solid var(--rac-line-strong)', borderRadius: 8,
    background: 'var(--rac-canvas)',
    fontFamily: 'var(--rac-sans)', fontSize: 14.5, color: 'var(--rac-ink)',
    outline: 'none',
    transition: 'border-color var(--rac-dur-fast) var(--rac-ease)',
  };

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-labelledby="feat-req-title"
      onClick={(e) => { if (e.target === e.currentTarget) onClose(); }}
      style={{
        position: 'fixed', inset: 0, zIndex: 1000,
        background: 'rgba(15,20,17,0.55)',
        backdropFilter: 'blur(4px)',
        WebkitBackdropFilter: 'blur(4px)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 24,
        animation: 'rac-fade-in 160ms var(--rac-ease)',
      }}
    >
      <div className="rac" style={{
        width: '100%', maxWidth: 480,
        background: 'var(--rac-surface)',
        border: '1px solid var(--rac-line)',
        borderRadius: 14,
        padding: 36,
        boxShadow: '0 24px 64px rgba(15,20,17,0.20)',
        animation: 'rac-pop-in 200ms var(--rac-ease)',
      }}>
        {status === 'sent' ? (
          <div>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontFamily: 'var(--rac-mono)', fontSize: 11,
              letterSpacing: '0.12em', textTransform: 'uppercase',
              color: 'var(--rac-green)', marginBottom: 14, fontWeight: 600,
            }}>
              <span className="pulse-dot" />
              Sent
            </div>
            <h3 className="rac h2" style={{ fontSize: 26, margin: '0 0 12px' }}>
              Got it — thanks.
            </h3>
            <p style={{ fontSize: 14.5, color: 'var(--rac-ink-3)', margin: '0 0 28px', lineHeight: 1.6 }}>
              We'll be in touch at <strong style={{ color: 'var(--rac-ink)' }}>{email || 'your email'}</strong> if it's something we can ship soon.
            </p>
            <button type="button" onClick={onClose} className="rac btn btn--primary" style={{ width: '100%' }}>
              Close
            </button>
          </div>
        ) : (
          <form onSubmit={submit}>
            <div style={{ marginBottom: 22 }}>
              <Eyebrow style={{ color: 'var(--rac-green)', marginBottom: 10 }}>Integration request</Eyebrow>
              <h3 id="feat-req-title" className="rac h2" style={{ fontSize: 26, margin: '0 0 8px', letterSpacing: '-0.018em' }}>
                Tell us what's missing.
              </h3>
              <p style={{ fontSize: 14, color: 'var(--rac-ink-3)', margin: 0, lineHeight: 1.55 }}>
                Drop the tool you need. If it's already on the roadmap, we'll tell you when. If it fits, we'll build it.
              </p>
            </div>

            <div style={{ marginBottom: 16 }}>
              <div style={fieldLabel}>Your email</div>
              <input
                ref={inputRef}
                type="email" required value={email}
                onChange={(e) => setEmail(e.target.value)}
                placeholder="you@yourshop.com"
                style={fieldStyle}
                onFocus={(e) => e.target.style.borderColor = 'var(--rac-green)'}
                onBlur={(e) => e.target.style.borderColor = 'var(--rac-line-strong)'}
              />
            </div>

            <div style={{ marginBottom: 24 }}>
              <div style={fieldLabel}>What's missing</div>
              <textarea
                required rows={4} value={message}
                onChange={(e) => setMessage(e.target.value)}
                placeholder="Which tool? What do you use it for?"
                style={{ ...fieldStyle, resize: 'vertical', minHeight: 110 }}
                onFocus={(e) => e.target.style.borderColor = 'var(--rac-green)'}
                onBlur={(e) => e.target.style.borderColor = 'var(--rac-line-strong)'}
              />
            </div>

            <div style={{ display: 'flex', gap: 10, justifyContent: 'flex-end', alignItems: 'center' }}>
              <button type="button" onClick={onClose} className="rac btn btn--quiet">
                Cancel
              </button>
              <button type="submit" className="rac btn btn--primary" disabled={status === 'sending'}>
                {status === 'sending' ? 'Sending…' : 'Send request →'}
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

function IntegrationPill({ name, live }) {
  return (
    <div className="integration-pill" style={{
      display: 'inline-flex', alignItems: 'center', gap: 12,
      padding: '14px 18px',
      background: live ? 'var(--rac-surface)' : 'transparent',
      border: live ? '1px solid var(--rac-green-100)' : '1px solid var(--rac-line)',
      borderRadius: 10,
      minWidth: 220,
      justifyContent: 'space-between',
    }}>
      <span style={{
        fontFamily: 'var(--rac-sans)',
        fontSize: 14.5, fontWeight: 600,
        color: live ? 'var(--rac-ink)' : 'var(--rac-ink-3)',
        letterSpacing: '-0.005em',
      }}>
        {name}
      </span>
      {live ? (
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontFamily: 'var(--rac-mono)', fontSize: 10,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: 'var(--rac-green)', fontWeight: 600,
        }}>
          <span className="pulse-dot" />
          Live
        </span>
      ) : null}
    </div>
  );
}

function IntegrationsSection() {
  const [modalOpen, setModalOpen] = React.useState(false);
  const groups = [
    {
      title: 'Supply houses',
      items: [
        { name: 'Johnstone Supply' },
        { name: 'Ferguson' },
      ],
    },
    {
      title: 'Financing',
      items: [
        { name: 'GoodLeap' },
        { name: 'Synchrony' },
        { name: 'Wells Fargo' },
      ],
    },
    {
      title: 'Accounting & payments',
      items: [
        { name: 'QuickBooks', live: true },
        { name: 'Stripe',     live: true },
      ],
    },
    {
      title: 'Marketing & ops',
      items: [
        { name: 'CallRail' },
        { name: 'Google Calendar' },
        { name: 'Zapier' },
      ],
    },
  ];

  return (
    <section id="integrations" className="rac" style={{ padding: `${SECTION_PAD} 0` }}>
      <Wrap>
        <div style={{ marginBottom: 36, maxWidth: 760 }}>
          <Eyebrow style={{ marginBottom: 18, color: 'var(--rac-green)' }}>Integrations</Eyebrow>
          <h2 className="rac h1" style={{
            fontSize: 44, lineHeight: 1.08, letterSpacing: '-0.028em',
            fontWeight: 600, margin: 0,
          }}>
            Your supply house, your bank, your books.
          </h2>
          <p className="rac" style={{
            marginTop: 18, fontSize: 17, lineHeight: 1.55,
            color: 'var(--rac-ink-3)', maxWidth: 720, margin: '18px 0 0',
          }}>
            We connect to the stuff your shop already runs on. Not a generic SaaS logo wall — the actual tools HVAC shops use to order parts, finance jobs, and keep the books straight.
          </p>
        </div>

        <div className="rac integrations-card" style={{
          background: 'var(--rac-canvas)',
          border: '1px solid var(--rac-line)',
          borderRadius: 14,
          padding: '36px 40px',
        }}>
          <div className="integrations-grid" style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '36px 56px',
          }}>
            {groups.map(g => (
              <div key={g.title}>
                <div style={{
                  fontFamily: 'var(--rac-mono)', fontSize: 11,
                  letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: 'var(--rac-ink-4)', marginBottom: 16, fontWeight: 600,
                }}>
                  {g.title}
                </div>
                <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
                  {g.items.map(it => (
                    <IntegrationPill key={it.name} name={it.name} live={!!it.live} />
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div style={{
            marginTop: 32, paddingTop: 20,
            borderTop: '1px solid var(--rac-line-soft)',
            display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap',
            fontFamily: 'var(--rac-mono)', fontSize: 11,
            letterSpacing: '0.08em', textTransform: 'uppercase',
            color: 'var(--rac-ink-4)',
          }}>
            <span className="pulse-dot" />
            <span style={{ color: 'var(--rac-green)', fontWeight: 600 }}>Live</span>
            <span>= shipping today.</span>
            <span style={{ color: 'var(--rac-line-strong)' }}>·</span>
            <span>The rest land throughout 2026.</span>
          </div>
        </div>

        <div style={{
          marginTop: 22, fontSize: 14.5, color: 'var(--rac-ink-2)',
        }}>
          <strong style={{ color: 'var(--rac-ink)', fontWeight: 600 }}>Don't see yours?</strong>{' '}
          <a
            href="#integrate-request"
            onClick={(e) => { e.preventDefault(); setModalOpen(true); }}
            className="rac"
            style={{
              color: 'var(--rac-green)', textDecoration: 'none',
              borderBottom: '1px solid var(--rac-green-100)', paddingBottom: 1,
              cursor: 'pointer',
            }}
          >
            Tell us what to build →
          </a>
        </div>
      </Wrap>

      <FeatureRequestModal open={modalOpen} onClose={() => setModalOpen(false)} />
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// 11. FAQ — accordion
// ──────────────────────────────────────────────────────────────

const FAQS = [
  ['Is the pricing really flat?',
    'Yes. One price per shop, every month, every feature included. No tiers, no add-ons, no per-feature unlocks. The price on the website is the price you pay.'],
  ['How long is the contract?',
    "There isn't one. Pay monthly, cancel any time, no penalty. We'd rather earn it every month than trap you in a contract."],
  ['Will it work for my techs in the field?',
    'The mobile app works on iOS and Android, runs offline, and syncs when you\'re back in coverage. We tested it in basements, attics, and mechanical rooms — the same places we built it for.'],
  ['How long does setup take?',
    'Most shops are running within a few days. If you\'re migrating from another platform, give us two weeks and we\'ll handle the data transfer for you.'],
  ['Do you support multi-location shops?',
    'Yes. You can run multiple locations, with separate dispatch boards and tech rosters, under one account.'],
  ['What about QuickBooks?',
    'Two-way sync with QuickBooks Online. Invoices, payments, and customers stay in lockstep.'],
  ['What if I need help?',
    'Phone, email, and chat — staffed by people who know HVAC, not a generic SaaS support team. Included in every plan.'],
  ['Can I see the product before signing up?',
    'Yes — start the free trial, no card required. Or book a demo if you\'d rather have a guided walkthrough.'],
];

function FAQItem({ q, a, isOpen, onClick, isLast }) {
  return (
    <div style={{
      borderBottom: isLast ? 'none' : '1px solid var(--rac-line)',
    }}>
      <button onClick={onClick} className="faq-question" style={{
        width: '100%', textAlign: 'left',
        padding: '28px 0',
        background: 'transparent', border: 'none', cursor: 'pointer',
        display: 'flex', alignItems: 'center', gap: 24,
        fontFamily: 'var(--rac-display)', fontSize: 19,
        fontWeight: 600, letterSpacing: '-0.012em', color: 'var(--rac-ink)',
      }}>
        <span style={{ flex: 1 }}>{q}</span>
        <span style={{
          color: 'var(--rac-ink-3)',
          transition: 'transform var(--rac-dur) var(--rac-ease)',
          transform: isOpen ? 'rotate(180deg)' : 'rotate(0)',
        }}>
          <IconChevDown size={20}/>
        </span>
      </button>
      <div style={{
        maxHeight: isOpen ? 240 : 0,
        overflow: 'hidden',
        transition: 'max-height var(--rac-dur) var(--rac-ease)',
      }}>
        <p style={{
          fontSize: 16, lineHeight: 1.6, color: 'var(--rac-ink-3)',
          maxWidth: 720, padding: '0 0 28px 0', margin: 0,
        }}>
          {a}
        </p>
      </div>
    </div>
  );
}

function FAQSection() {
  const [open, setOpen] = useStateS(0);
  return (
    <section style={{
      borderTop: '1px solid var(--rac-line)',
      padding: `${SECTION_PAD} 0`,
    }}>
      <Wrap>
        <div className="stack-tablet" style={{
          display: 'grid', gridTemplateColumns: '1fr 1.6fr', gap: 80, alignItems: 'start',
        }}>
          <div>
            <Eyebrow style={{ marginBottom: 16, color: 'var(--rac-green)' }}>Questions</Eyebrow>
            <h2 className="rac h1" style={{
              fontSize: 44, lineHeight: 1.08, letterSpacing: '-0.028em',
              fontWeight: 600, margin: 0,
            }}>
              Things shop owners ask before signing up.
            </h2>
          </div>
          <div style={{ borderTop: '1px solid var(--rac-line)' }}>
            {FAQS.map(([q,a], i) => (
              <FAQItem
                key={i} q={q} a={a}
                isOpen={open === i}
                onClick={() => setOpen(open === i ? -1 : i)}
                isLast={i === FAQS.length-1}
              />
            ))}
          </div>
        </div>
      </Wrap>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// 12. Final CTA
// ──────────────────────────────────────────────────────────────

function FinalCTA() {
  return (
    <section className="final-cta-section" style={{
      background: 'var(--rac-green-900)',
      color: '#e8eee9',
      padding: '160px 0',
      textAlign: 'center',
    }}>
      <Wrap>
        <div style={{ maxWidth: 820, margin: '0 auto' }}>
          <h2 className="final-cta-h2" style={{
            fontFamily: 'var(--rac-display)',
            fontSize: 72, lineHeight: 1.02, letterSpacing: '-0.038em',
            fontWeight: 600, color: '#f6f4ee', margin: 0,
          }}>
            The HVAC operating system<span style={{ color: '#3fb286' }}>.</span>
          </h2>
          <p style={{
            marginTop: 28, fontSize: 19, lineHeight: 1.55,
            color: '#9bc4af', maxWidth: 580, margin: '28px auto 0',
          }}>
            Flat price. Every feature. No contracts. Built by someone who's been in the attic.
          </p>
          <div style={{
            marginTop: 44, display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap',
          }}>
            <a href="https://app.runacall.com/auth/sign-up" style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              height: 52, padding: '0 28px', borderRadius: 999, border: 'none',
              background: '#f6f4ee', color: 'var(--rac-green-900)',
              fontFamily: 'var(--rac-sans)', fontSize: 15, fontWeight: 600,
              cursor: 'pointer', transition: 'background var(--rac-dur-fast)',
              textDecoration: 'none',
            }}
            onMouseOver={e => e.currentTarget.style.background = '#fff'}
            onMouseOut={e => e.currentTarget.style.background = '#f6f4ee'}>
              Start free trial
            </a>
            <a href="#pricing" style={{
              display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
              height: 52, padding: '0 24px', borderRadius: 999,
              background: 'transparent', color: '#f6f4ee',
              border: '1px solid rgba(155,196,175,0.4)',
              fontFamily: 'var(--rac-sans)', fontSize: 15, fontWeight: 600, cursor: 'pointer',
              textDecoration: 'none',
            }}>
              See pricing →
            </a>
          </div>
          <div style={{
            marginTop: 28, fontFamily: 'var(--rac-mono)', fontSize: 12,
            letterSpacing: '0.08em', textTransform: 'uppercase', color: '#7fb39c',
          }}>
            14-day free trial · No credit card · Cancel anytime
          </div>
        </div>
      </Wrap>
    </section>
  );
}

// ──────────────────────────────────────────────────────────────
// 13. Footer
// ──────────────────────────────────────────────────────────────

function StoreBadgeApple() {
  return (
    <div
      role="button"
      aria-disabled="true"
      title="Coming soon"
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        height: 44, padding: '0 14px',
        background: '#0a0a0a', color: '#fff',
        borderRadius: 8, border: '1px solid #0a0a0a',
        opacity: 0.55, cursor: 'not-allowed',
        userSelect: 'none',
      }}
    >
      <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M17.564 13.27c-.024-2.53 2.066-3.749 2.16-3.808-1.176-1.72-3.005-1.954-3.656-1.98-1.557-.158-3.04.918-3.83.918-.797 0-2.012-.896-3.31-.871-1.703.025-3.27.992-4.14 2.512-1.768 3.06-.452 7.585 1.27 10.072.84 1.218 1.842 2.583 3.158 2.534 1.27-.05 1.747-.82 3.282-.82 1.527 0 1.965.82 3.305.79 1.365-.025 2.231-1.232 3.064-2.456.96-1.408 1.354-2.776 1.378-2.847-.03-.013-2.642-1.014-2.681-4.044zM15.18 6.16c.704-.853 1.18-2.039 1.05-3.222-1.014.041-2.245.674-2.973 1.527-.652.755-1.225 1.967-1.072 3.123 1.135.087 2.293-.575 2.995-1.428z"/>
      </svg>
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: 3 }}>
        <span style={{
          fontFamily: 'var(--rac-sans)', fontSize: 9, fontWeight: 500,
          letterSpacing: '0.04em', opacity: 0.85,
        }}>Download on the</span>
        <span style={{
          fontFamily: 'var(--rac-sans)', fontSize: 16, fontWeight: 600,
          letterSpacing: '-0.01em',
        }}>App Store</span>
      </div>
    </div>
  );
}

function StoreBadgeGoogle() {
  return (
    <div
      role="button"
      aria-disabled="true"
      title="Coming soon"
      style={{
        display: 'inline-flex', alignItems: 'center', gap: 10,
        height: 44, padding: '0 14px',
        background: '#0a0a0a', color: '#fff',
        borderRadius: 8, border: '1px solid #0a0a0a',
        opacity: 0.55, cursor: 'not-allowed',
        userSelect: 'none',
      }}
    >
      <svg width="22" height="22" viewBox="0 0 48 48" aria-hidden="true">
        <path d="M7.4 5.5C6.5 6 6 6.9 6 8.1v31.8c0 1.2.5 2.1 1.4 2.6l.2.1L25.4 25v-2L7.6 5.4l-.2.1z" fill="#2196F3"/>
        <path d="M30.7 30.3l-5.3-5.3v-2l5.3-5.3.1.1 6.3 3.6c1.8 1 1.8 2.7 0 3.7l-6.3 3.6-.1.1z" fill="#FFC107"/>
        <path d="M30.8 30.2L25.4 24.8 7.4 42.6c.6.6 1.6.7 2.7.1l20.7-12.5" fill="#F44336"/>
        <path d="M30.8 19.4L10.1 7c-1.1-.6-2.1-.6-2.7.1l18 18 5.4-5.7z" fill="#4CAF50"/>
      </svg>
      <div style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: 3 }}>
        <span style={{
          fontFamily: 'var(--rac-sans)', fontSize: 9, fontWeight: 500,
          letterSpacing: '0.06em', textTransform: 'uppercase', opacity: 0.85,
        }}>Get it on</span>
        <span style={{
          fontFamily: 'var(--rac-sans)', fontSize: 16, fontWeight: 600,
          letterSpacing: '-0.01em',
        }}>Google Play</span>
      </div>
    </div>
  );
}

function SocialIcon({ label, path }) {
  return (
    <a
      href="#"
      aria-label={label}
      title={label}
      className="rac"
      style={{
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        width: 34, height: 34, borderRadius: 999,
        border: '1px solid var(--rac-line)',
        color: 'var(--rac-ink-3)', textDecoration: 'none',
        background: 'var(--rac-surface)',
        transition: 'color var(--rac-dur-fast) var(--rac-ease), border-color var(--rac-dur-fast) var(--rac-ease), background var(--rac-dur-fast) var(--rac-ease)',
      }}
      onMouseEnter={(e) => { e.currentTarget.style.color = 'var(--rac-green)'; e.currentTarget.style.borderColor = 'var(--rac-green-100)'; e.currentTarget.style.background = 'var(--rac-green-50)'; }}
      onMouseLeave={(e) => { e.currentTarget.style.color = 'var(--rac-ink-3)'; e.currentTarget.style.borderColor = 'var(--rac-line)'; e.currentTarget.style.background = 'var(--rac-surface)'; }}
    >
      <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">{path}</svg>
    </a>
  );
}

function Footer() {
  const linkStyle = {
    fontSize: 13.5, color: 'var(--rac-ink-3)',
    textDecoration: 'none',
    transition: 'color var(--rac-dur-fast) var(--rac-ease)',
  };
  const setHover = (e, on) => { e.currentTarget.style.color = on ? 'var(--rac-green)' : 'var(--rac-ink-3)'; };

  const FooterLink = ({ href, children }) => (
    <a
      href={href}
      style={linkStyle}
      onMouseEnter={(e) => setHover(e, true)}
      onMouseLeave={(e) => setHover(e, false)}
    >{children}</a>
  );

  return (
    <footer style={{
      background: 'var(--rac-canvas)',
      borderTop: '1px solid var(--rac-line)',
      padding: '88px 0 32px',
    }}>
      <Wrap>
        {/* ── Top: brand + link columns ───────────────────────────── */}
        <div className="footer-grid" style={{
          display: 'grid', gridTemplateColumns: '1.7fr 1fr 1fr 1fr',
          gap: 56, alignItems: 'start',
          paddingBottom: 56, borderBottom: '1px solid var(--rac-line)',
        }}>
          {/* Brand column */}
          <div style={{ maxWidth: 360 }}>
            <img src="assets/run-a-call-wordmark.png" alt="run a call." style={{ height: 40, marginBottom: 22, display: 'block' }} />
            <p style={{ fontSize: 14, color: 'var(--rac-ink-3)', margin: 0, lineHeight: 1.6 }}>
              The HVAC operating system. Built for shops doing $1M–$5M.
            </p>

            <div style={{ marginTop: 28 }}>
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                marginBottom: 12,
                fontFamily: 'var(--rac-mono)', fontSize: 10.5,
                letterSpacing: '0.12em', textTransform: 'uppercase',
                color: 'var(--rac-ink-4)',
              }}>
                <span style={{
                  display: 'inline-block', width: 6, height: 6, borderRadius: '50%',
                  background: 'var(--rac-amber)',
                }} />
                Coming soon — mobile app
              </div>
              <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                <StoreBadgeApple />
                <StoreBadgeGoogle />
              </div>
            </div>

            <div style={{ marginTop: 30, display: 'flex', gap: 10 }}>
              <SocialIcon label="X / Twitter" path={
                <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.16 17.52h1.833L7.084 4.126H5.117z" />
              } />
              <SocialIcon label="LinkedIn" path={
                <path d="M20.452 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.356V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.602 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 1 1 0-4.124 2.062 2.062 0 0 1 0 4.124zM7.119 20.452H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
              } />
              <SocialIcon label="YouTube" path={
                <path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
              } />
            </div>
          </div>

          {/* Product */}
          <div>
            <Eyebrow style={{ color: 'var(--rac-ink-4)', marginBottom: 18 }}>Product</Eyebrow>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
              <li><FooterLink href="#pricing">Pricing</FooterLink></li>
              <li><FooterLink href="#compare">Compare</FooterLink></li>
              <li><FooterLink href="#integrations">Integrations</FooterLink></li>
              <li><FooterLink href="#">Changelog</FooterLink></li>
              <li><FooterLink href="#">Status</FooterLink></li>
            </ul>
          </div>

          {/* Company */}
          <div>
            <Eyebrow style={{ color: 'var(--rac-ink-4)', marginBottom: 18 }}>Company</Eyebrow>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
              <li><FooterLink href="#">About</FooterLink></li>
              <li><FooterLink href="#">Contact</FooterLink></li>
              <li><FooterLink href="#">Careers</FooterLink></li>
              <li><FooterLink href="#">Press kit</FooterLink></li>
            </ul>
          </div>

          {/* Legal */}
          <div>
            <Eyebrow style={{ color: 'var(--rac-ink-4)', marginBottom: 18 }}>Legal</Eyebrow>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 11 }}>
              <li><FooterLink href="privacy.html">Privacy Policy</FooterLink></li>
              <li><FooterLink href="eula.html">EULA</FooterLink></li>
              <li><FooterLink href="#">Security</FooterLink></li>
              <li><FooterLink href="#">DPA</FooterLink></li>
            </ul>
          </div>
        </div>

        {/* ── Bottom strip: copyright + status + locale ───────────── */}
        <div style={{
          paddingTop: 24,
          display: 'flex', flexWrap: 'wrap',
          alignItems: 'center', justifyContent: 'space-between',
          gap: 16,
        }}>
          <div style={{
            display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: 14,
            fontFamily: 'var(--rac-mono)', fontSize: 11,
            letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--rac-ink-4)',
          }}>
            <span>© 2026 Linklemon Agency LLC</span>
            <span style={{ color: 'var(--rac-line-strong)' }}>·</span>
            <span>Middletown, DE</span>
            <span style={{ color: 'var(--rac-line-strong)' }}>·</span>
            <span>Made for the trades</span>
          </div>

          <a
            href="#"
            className="rac"
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              padding: '6px 12px', borderRadius: 999,
              border: '1px solid var(--rac-line)',
              background: 'var(--rac-surface)',
              fontFamily: 'var(--rac-mono)', fontSize: 11,
              letterSpacing: '0.06em', textTransform: 'uppercase',
              color: 'var(--rac-ink-3)', textDecoration: 'none',
            }}
          >
            <span style={{
              position: 'relative', display: 'inline-block',
              width: 8, height: 8, borderRadius: '50%',
              background: 'var(--rac-green)',
              boxShadow: '0 0 0 3px rgba(14,124,90,0.15)',
            }} />
            All systems operational
          </a>
        </div>
      </Wrap>
    </footer>
  );
}

Object.assign(window, {
  FoundingBand, Nav, Hero, PainStrip, ProductSection,
  FounderSection, PricingSection, CompareSection,
  MigrationSection, IntegrationsSection,
  FAQSection, FinalCTA, Footer,
});
