/* Hank for Pros — production landing page (variant A)
   Source: design handoff hank-pros.jsx
   Differences from source: removed design-canvas wrapper constraints
   (height: 100%, overflow: hidden) and the fake browser-chrome row,
   so the page renders at natural document height in a real browser. */

function HankProsSite() {
  const T = HANK_TOKENS;
  const Mark = HankLogoA;
  return (
    <div style={{background: T.paper, color: T.ink, fontFamily: "'Inter', sans-serif", minWidth: 1440}}>
      {/* Top nav */}
      <div style={{padding: "20px 56px", display: "flex", alignItems: "center", justifyContent: "space-between", borderBottom: `1px solid ${T.paperDeep}`}}>
        <div style={{display: "flex", alignItems: "center", gap: 10}}>
          <Mark size={28} color={T.ink} sw={9}/>
          <HankWordmark size={26} color={T.ink}/>
          <span style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 10, padding: "3px 8px", background: T.green, color: T.paper, borderRadius: 4, marginLeft: 6, letterSpacing: "0.06em", textTransform: "uppercase", whiteSpace: "nowrap"}}>for pros</span>
        </div>
        <div style={{display: "flex", gap: 28, fontSize: 14, color: T.ink, opacity: 0.85}}>
          <span>Why Hank</span>
          <span>Pricing</span>
          <span>Live demo</span>
          <span>Switch from →</span>
        </div>
        <div style={{display: "flex", gap: 10, alignItems: "center"}}>
          <span style={{fontSize: 14, color: T.ink, opacity: 0.7}}>Sign in</span>
          <button style={{background: T.green, color: T.paper, border: "none", padding: "10px 18px", borderRadius: 999, fontSize: 13, fontWeight: 500, fontFamily: "inherit"}}>Try free for 14 days</button>
        </div>
      </div>

      {/* HERO */}
      <section style={{padding: "100px 56px 80px", display: "grid", gridTemplateColumns: "1.15fr 1fr", gap: 56, alignItems: "center"}}>
        <div>
          <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: T.green, marginBottom: 20}}>For plumbers · electricians · HVAC · roofers · landscapers</div>
          <h1 style={{fontFamily: "'Inter Display', 'Inter', sans-serif", fontSize: 92, lineHeight: 0.92, letterSpacing: "-0.035em", fontWeight: 600, margin: 0, color: T.ink}}>
            Every missed call<br/>is a job you<br/>didn't book.
          </h1>
          <p style={{fontSize: 20, lineHeight: 1.45, color: T.ink, opacity: 0.7, marginTop: 28, maxWidth: 520}}>
            You're under a sink. On a ladder. Driving to the next job. Hank picks up the phone, talks to the customer, qualifies the work, and texts you back a job that's ready to schedule.
          </p>
          <div style={{display: "flex", gap: 12, marginTop: 32}}>
            <button style={{background: T.green, color: T.paper, border: "none", padding: "16px 26px", borderRadius: 999, fontSize: 15, fontWeight: 500, fontFamily: "inherit"}}>Get Hank set up →</button>
            <button style={{background: "transparent", color: T.ink, border: `1px solid ${T.ink}`, padding: "16px 26px", borderRadius: 999, fontSize: 15, fontWeight: 500, fontFamily: "inherit"}}>Hear Hank in action</button>
          </div>
          <div style={{display: "flex", gap: 28, marginTop: 40, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: T.ink, opacity: 0.55}}>
            <span>· no app to install</span>
            <span>· keep your number</span>
            <span>· cancel anytime</span>
          </div>
        </div>

        {/* Pro-side product surface: missed call → Hank handled it */}
        <div style={{background: T.ink, borderRadius: 24, padding: 24, color: T.paper, fontFamily: "'Inter', sans-serif"}}>
          <div style={{display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16}}>
            <div style={{display: "flex", alignItems: "center", gap: 10}}>
              <Mark size={22} color={T.paper} sw={9}/>
              <span style={{fontSize: 13, fontWeight: 500}}>Hank · jobs feed</span>
            </div>
            <span style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: 0.6, textTransform: "uppercase", letterSpacing: "0.08em"}}>live · today</span>
          </div>

          {/* Card 1 — handled */}
          <div style={{background: "rgba(82,168,122,0.12)", border: "1px solid rgba(82,168,122,0.35)", borderRadius: 14, padding: 16, marginBottom: 10}}>
            <div style={{display: "flex", justifyContent: "space-between", marginBottom: 10}}>
              <span style={{fontSize: 11, color: T.greenBright, fontFamily: "'JetBrains Mono', monospace", textTransform: "uppercase", letterSpacing: "0.06em"}}>● Hank handled · 2m ago</span>
              <span style={{fontSize: 11, opacity: 0.5, fontFamily: "'JetBrains Mono', monospace"}}>job #0142</span>
            </div>
            <div style={{fontSize: 15, fontWeight: 600, marginBottom: 4}}>Sarah Klein · water heater leak</div>
            <div style={{fontSize: 13, opacity: 0.7, lineHeight: 1.45, marginBottom: 12}}>Wants someone today. Confirmed it's a 50gal gas. House on Linden. Quoted $89 service call, she's good with it.</div>
            <div style={{display: "flex", gap: 8}}>
              <button style={{background: T.greenBright, color: T.ink, border: "none", padding: "8px 14px", borderRadius: 999, fontSize: 12, fontWeight: 600, fontFamily: "inherit"}}>Schedule 11am</button>
              <button style={{background: "transparent", color: T.paper, border: "1px solid rgba(255,255,255,0.25)", padding: "8px 14px", borderRadius: 999, fontSize: 12, fontFamily: "inherit"}}>Call back</button>
            </div>
          </div>

          {/* Card 2 — handled */}
          <div style={{background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 14, padding: 16, marginBottom: 10}}>
            <div style={{display: "flex", justifyContent: "space-between", marginBottom: 10}}>
              <span style={{fontSize: 11, color: T.greenBright, fontFamily: "'JetBrains Mono', monospace", textTransform: "uppercase", letterSpacing: "0.06em"}}>● Hank handled · 14m ago</span>
              <span style={{fontSize: 11, opacity: 0.5, fontFamily: "'JetBrains Mono', monospace"}}>job #0141</span>
            </div>
            <div style={{fontSize: 14, fontWeight: 500, marginBottom: 2}}>Mark Aoki · garbage disposal jammed</div>
            <div style={{fontSize: 12, opacity: 0.6}}>Booked Thursday 2pm · est. $140</div>
          </div>

          {/* Card 3 — needs you */}
          <div style={{background: "rgba(194,83,42,0.1)", border: "1px solid rgba(194,83,42,0.35)", borderRadius: 14, padding: 16}}>
            <div style={{display: "flex", justifyContent: "space-between", marginBottom: 10}}>
              <span style={{fontSize: 11, color: T.rust, fontFamily: "'JetBrains Mono', monospace", textTransform: "uppercase", letterSpacing: "0.06em"}}>● Needs you · 1h ago</span>
              <span style={{fontSize: 11, opacity: 0.5, fontFamily: "'JetBrains Mono', monospace"}}>job #0140</span>
            </div>
            <div style={{fontSize: 14, fontWeight: 500, marginBottom: 4}}>Diego Park · bigger commercial job</div>
            <div style={{fontSize: 12, opacity: 0.65}}>Restaurant remodel, asking for an estimate visit. Hank thinks you'd want to handle this one.</div>
          </div>
        </div>
      </section>

      {/* PROOF BAR */}
      <section style={{padding: "32px 56px", borderTop: `1px solid ${T.paperDeep}`, borderBottom: `1px solid ${T.paperDeep}`, background: T.paperWarm}}>
        <div style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 32, alignItems: "center"}}>
          <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", opacity: 0.55}}>Trusted by 4,200+ shops</div>
          {["Carrera Plumbing", "Joe's HVAC", "Sparky Electric", "Marin Roof &amp; Co."].slice(0,3).map((n,i) => (
            <div key={i} style={{fontFamily: "'Inter Display', sans-serif", fontSize: 18, fontWeight: 600, letterSpacing: "-0.015em", opacity: 0.55}} dangerouslySetInnerHTML={{__html: n}}/>
          ))}
        </div>
      </section>

      {/* THE PROBLEM */}
      <section style={{padding: "100px 56px"}}>
        <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: T.green, marginBottom: 16}}>The math</div>
        <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 64, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 56, maxWidth: 900}}>
          You miss a third of your calls. The people calling you don't call back — they call the next guy.
        </h2>
        <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16}}>
          {[
            { n: "32%", l: "of calls to service businesses go unanswered during work hours" },
            { n: "$240", l: "average value of a job lost when a customer hangs up" },
            { n: "85%", l: "of customers who don't get an answer call a competitor next" },
          ].map((m,i) => (
            <div key={i} style={{padding: 32, background: T.paperDeep}}>
              <div style={{fontFamily: "'Inter Display', sans-serif", fontSize: 88, fontWeight: 600, letterSpacing: "-0.035em", lineHeight: 0.95, color: T.green, marginBottom: 16}}>{m.n}</div>
              <div style={{fontSize: 15, lineHeight: 1.5, opacity: 0.75}}>{m.l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* HOW HANK WORKS — pro flow */}
      <section style={{padding: "80px 56px", background: T.green, color: T.paper}}>
        <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: T.greenBright, marginBottom: 16}}>How Hank works</div>
        <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 64, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 56, maxWidth: 800}}>
          Three steps. You're done before lunch.
        </h2>
        <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16}}>
          {[
            { n: "01", t: "Tell Hank about your shop", d: "Trade, hours, service area, what you charge. Takes about five minutes. Hank picks it up fast." },
            { n: "02", t: "Hand him the phones", d: "One toggle. From that moment on, Hank answers when you can't — sounds like a real receptionist who's worked at your shop for years." },
            { n: "03", t: "Get back to work", d: "New jobs land on your phone as clean cards: name, address, problem, quote, preferred time. Tap to schedule. That's the whole job." },
          ].map((s) => (
            <div key={s.n} style={{padding: 28, background: "rgba(255,255,255,0.05)", border: "1px solid rgba(255,255,255,0.1)", display: "flex", flexDirection: "column", gap: 16}}>
              <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: T.greenBright, fontWeight: 600, letterSpacing: "0.06em"}}>STEP {s.n}</div>
              <div style={{fontSize: 19, fontWeight: 600, letterSpacing: "-0.015em", lineHeight: 1.2}}>{s.t}</div>
              <div style={{fontSize: 13, opacity: 0.75, lineHeight: 1.5}}>{s.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* HEAR HANK — script section */}
      <section style={{padding: "100px 56px"}}>
        <div style={{display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: 64, alignItems: "center"}}>
          <div>
            <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: T.green, marginBottom: 16}}>Hear Hank</div>
            <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 56, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 24}}>
              He sounds like a person. Because that's the whole point.
            </h2>
            <p style={{fontSize: 17, lineHeight: 1.55, opacity: 0.75, margin: 0, marginBottom: 28}}>
              Hank doesn't read from a script. He knows your trade, your service area, your pricing, your hours. He answers like someone who's been working at your shop for ten years.
            </p>
            <div style={{display: "flex", gap: 10, alignItems: "center", padding: 16, background: T.paperDeep, borderRadius: 12}}>
              <div style={{width: 44, height: 44, borderRadius: "50%", background: T.green, color: T.paper, display: "flex", alignItems: "center", justifyContent: "center"}}>
                <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z"/></svg>
              </div>
              <div style={{flex: 1}}>
                <div style={{fontSize: 13, fontWeight: 500}}>Sample call · water heater emergency</div>
                <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, opacity: 0.55, marginTop: 2}}>0:42 · Carrera Plumbing demo</div>
              </div>
              <div style={{flex: 1, height: 24, display: "flex", alignItems: "center", gap: 2}}>
                {[6,12,18,9,15,22,18,12,8,16,20,14,9,12,18,10,6,14,18,8].map((h,i) => (
                  <div key={i} style={{flex: 1, height: h, background: i < 8 ? T.green : T.ink, opacity: i < 8 ? 1 : 0.2, borderRadius: 1}}/>
                ))}
              </div>
            </div>
          </div>

          {/* Transcript */}
          <div style={{background: T.ink, color: T.paper, padding: 32, fontFamily: "'JetBrains Mono', monospace", fontSize: 13, lineHeight: 1.7, borderRadius: 12}}>
            <div style={{fontSize: 10, opacity: 0.5, marginBottom: 16, letterSpacing: "0.08em", textTransform: "uppercase"}}>Transcript · live</div>
            <div style={{marginBottom: 14}}>
              <div style={{color: T.greenBright, fontWeight: 600, marginBottom: 2}}>Hank</div>
              <div style={{opacity: 0.85}}>Carrera Plumbing, this is Hank — what's going on?</div>
            </div>
            <div style={{marginBottom: 14}}>
              <div style={{color: "#E8C77F", fontWeight: 600, marginBottom: 2}}>Caller</div>
              <div style={{opacity: 0.85}}>Hi — uh, my water heater's leaking, there's water all over the garage.</div>
            </div>
            <div style={{marginBottom: 14}}>
              <div style={{color: T.greenBright, fontWeight: 600, marginBottom: 2}}>Hank</div>
              <div style={{opacity: 0.85}}>Okay, no fun. Have you turned the water off to it yet?</div>
            </div>
            <div style={{marginBottom: 14}}>
              <div style={{color: "#E8C77F", fontWeight: 600, marginBottom: 2}}>Caller</div>
              <div style={{opacity: 0.85}}>Yeah — there's a valve, I shut it.</div>
            </div>
            <div style={{marginBottom: 14}}>
              <div style={{color: T.greenBright, fontWeight: 600, marginBottom: 2}}>Hank</div>
              <div style={{opacity: 0.85}}>Good. Joe can come out today — service call's $89, he'll take a look and quote the repair from there. What's the address?</div>
            </div>
            <div>
              <div style={{color: "#E8C77F", fontWeight: 600, marginBottom: 2}}>Caller</div>
              <div style={{opacity: 0.85}}>2418 Linden, Apartment 2.</div>
            </div>
          </div>
        </div>
      </section>

      {/* FEATURE GRID */}
      <section style={{padding: "100px 56px", background: T.paperDeep}}>
        <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: T.green, marginBottom: 16}}>What's in the box</div>
        <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 56, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 48, maxWidth: 720}}>
          Everything a receptionist would do, except cheaper and never sick.
        </h2>
        <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16}}>
          {[
            { t: "Answers in your voice", d: "Hank knows your shop name, hours, service area, and pricing. He sounds like he works there because he does." },
            { t: "Books real jobs", d: "Not just messages — Hank takes the address, the problem, the time slot, and puts it on your calendar." },
            { t: "Knows when to escalate", d: "Big commercial gig? Customer asking weird questions? Hank flags it for you instead of guessing." },
            { t: "Texts the customer back", d: "Confirmation, ETA, and a heads-up the day-of. The customer feels handled. You don't have to type a thing." },
            { t: "Tracks every call", d: "Even the ones you used to miss. See who called, what they wanted, what Hank said, and what came of it." },
            { t: "Plays nice with your tools", d: "ServiceTitan, Housecall Pro, Jobber, Google Calendar, plain text — Hank pushes jobs wherever you already work." },
          ].map((f,i) => (
            <div key={i} style={{padding: 28, background: T.paperWarm, border: `1px solid ${T.paperDeep}`}}>
              <div style={{fontSize: 19, fontWeight: 600, letterSpacing: "-0.015em", lineHeight: 1.2, marginBottom: 10}}>{f.t}</div>
              <div style={{fontSize: 14, color: T.ink, opacity: 0.7, lineHeight: 1.5}}>{f.d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* TESTIMONIAL */}
      <section style={{padding: "100px 56px", background: T.ink, color: T.paper}}>
        <div style={{maxWidth: 900, margin: "0 auto", textAlign: "center"}}>
          <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: T.greenBright, marginBottom: 24}}>From the field</div>
          <p style={{fontFamily: "'Inter Display', sans-serif", fontSize: 44, fontWeight: 500, letterSpacing: "-0.02em", lineHeight: 1.15, margin: 0, marginBottom: 32}}>
            "I used to come home to 14 voicemails. Now I come home to a list of jobs Hank already booked. First month I added $11k in work I would've missed."
          </p>
          <div style={{display: "flex", justifyContent: "center", alignItems: "center", gap: 14}}>
            <div style={{width: 48, height: 48, borderRadius: "50%", background: T.greenBright, color: T.ink, display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "'Inter Display', sans-serif", fontWeight: 700, fontSize: 18}}>MC</div>
            <div style={{textAlign: "left"}}>
              <div style={{fontSize: 14, fontWeight: 600}}>Mike Carrera</div>
              <div style={{fontSize: 12, opacity: 0.6}}>Owner, Carrera Plumbing · Oakland, CA</div>
            </div>
          </div>
        </div>
      </section>

      {/* PRICING */}
      <section style={{padding: "100px 56px"}}>
        <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: T.green, marginBottom: 16}}>Pricing</div>
        <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 56, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 48, maxWidth: 720}}>
          One job a month covers it.
        </h2>
        <div style={{display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16}}>
          {[
            { name: "Solo", price: "$89", per: "/mo", d: "One trade, one truck, one phone line. Up to 80 calls/mo.", cta: "Start free trial", featured: false },
            { name: "Shop", price: "$189", per: "/mo", d: "Up to 4 techs. CRM integrations. Custom call routing. 300 calls/mo.", cta: "Start free trial", featured: true },
            { name: "Fleet", price: "Custom", per: "", d: "10+ trucks, multi-location, dedicated onboarding, white-glove.", cta: "Talk to sales", featured: false },
          ].map((p,i) => (
            <div key={i} style={{padding: 32, background: p.featured ? T.green : T.paperWarm, color: p.featured ? T.paper : T.ink, border: p.featured ? "none" : `1px solid ${T.paperDeep}`, position: "relative"}}>
              {p.featured && <div style={{position: "absolute", top: 20, right: 20, fontFamily: "'JetBrains Mono', monospace", fontSize: 10, padding: "3px 8px", background: T.greenBright, color: T.ink, borderRadius: 4, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase"}}>most picked</div>}
              <div style={{fontSize: 14, fontWeight: 600, opacity: 0.7, marginBottom: 16}}>{p.name}</div>
              <div style={{fontFamily: "'Inter Display', sans-serif", fontSize: 64, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1, marginBottom: 4}}>{p.price}<span style={{fontSize: 18, opacity: 0.6, fontWeight: 500}}>{p.per}</span></div>
              <div style={{fontSize: 14, opacity: 0.75, lineHeight: 1.5, marginBottom: 24, marginTop: 12}}>{p.d}</div>
              <button style={{width: "100%", background: p.featured ? T.paper : T.green, color: p.featured ? T.ink : T.paper, border: "none", padding: "14px 22px", borderRadius: 999, fontSize: 14, fontWeight: 600, fontFamily: "inherit"}}>{p.cta}</button>
            </div>
          ))}
        </div>
      </section>

      {/* FAQ */}
      <section style={{padding: "80px 56px", background: T.paperDeep}}>
        <div style={{display: "grid", gridTemplateColumns: "1fr 2fr", gap: 64, alignItems: "start"}}>
          <div>
            <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: T.green, marginBottom: 16}}>FAQ</div>
            <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 44, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0}}>
              Stuff pros ask before they sign up.
            </h2>
          </div>
          <div>
            {[
              { q: "Will it sound like a robot?", a: "No. Customers regularly don't realize they're not talking to a person. We've A/B tested it." },
              { q: "What if I want to take the call myself?", a: "Hank only picks up after 4 rings, or when you flip a switch in the app. You're always in control." },
              { q: "Can I keep my number?", a: "Yes. Customers call the same number they always have. Nothing changes on their end." },
              { q: "What about after-hours?", a: "Hank works 24/7 by default. He'll book non-emergency stuff for the next morning and escalate true emergencies to you on the phone." },
              { q: "How do I get started?", a: "Tell Hank about your shop, flip the switch. Most pros are live the same afternoon." },
            ].map((f,i) => (
              <div key={i} style={{padding: "20px 0", borderBottom: i < 4 ? `1px solid ${T.paperWarm}` : "none"}}>
                <div style={{fontSize: 17, fontWeight: 600, marginBottom: 8, letterSpacing: "-0.01em"}}>{f.q}</div>
                <div style={{fontSize: 14, color: T.ink, opacity: 0.7, lineHeight: 1.55}}>{f.a}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{padding: "120px 56px", background: T.green, color: T.paper, textAlign: "center"}}>
        <Mark size={56} color={T.paper} sw={9}/>
        <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 88, fontWeight: 600, letterSpacing: "-0.035em", lineHeight: 0.95, margin: "24px 0 16px", maxWidth: 900, marginLeft: "auto", marginRight: "auto"}}>
          Stop missing the<br/>phone.
        </h2>
        <p style={{fontSize: 18, opacity: 0.8, margin: 0, marginBottom: 36, maxWidth: 540, marginLeft: "auto", marginRight: "auto"}}>
          14 days free. No credit card. If Hank doesn't book you at least 5 jobs the first month, it's on us.
        </p>
        <div style={{display: "flex", gap: 12, justifyContent: "center"}}>
          <button style={{background: T.paper, color: T.ink, border: "none", padding: "16px 26px", borderRadius: 999, fontSize: 15, fontWeight: 600, fontFamily: "inherit"}}>Start free trial</button>
          <button style={{background: "transparent", color: T.paper, border: `1px solid ${T.paper}`, padding: "16px 26px", borderRadius: 999, fontSize: 15, fontWeight: 500, fontFamily: "inherit"}}>Book a 10-min demo</button>
        </div>
      </section>

      <footer style={{padding: "32px 56px", borderTop: `1px solid ${T.paperDeep}`, display: "flex", justifyContent: "space-between", alignItems: "center", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: T.ink, opacity: 0.55, textTransform: "uppercase", letterSpacing: "0.06em"}}>
        <div>© Hank, Inc. · for service businesses · est. 2026</div>
        <div style={{display: "flex", gap: 24}}>
          <span>privacy</span>
          <span>terms</span>
          <span>status</span>
          <span>contact</span>
        </div>
      </footer>
    </div>
  );
}

window.HankProsSite = HankProsSite;