/* Hank · sales site — press-2 narrative variant (B)
   Built from chat brief in startup-app/chats/chat1.md (final round).
   Story: missed call → voicemail "press 2 to text us" → Hank picks
   up the thread → job books itself → lands on the contractor's phone.
   Reuses brand tokens from hank-logos.jsx and chat primitives
   (ChatBubble, IPhoneShell, ThreadHeader, RichCard, etc.) from
   hank-chat-primitives.jsx — both must load before this file. */

function HankSalesSite() {
  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>How it works</span>
          <span>Pricing</span>
          <span>Live demo</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}}>
            The call you missed<br/>just booked itself.
          </h1>
          <p style={{fontSize: 20, lineHeight: 1.45, color: T.ink, opacity: 0.7, marginTop: 28, maxWidth: 540}}>
            Phone rings while you're under a sink. Old way: voicemail, you call back an hour later, customer's already called the next guy. New way: caller hears <em>"press 2 to text us right now."</em> Hank takes it from there.
          </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"}}>See how press-2 works</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>

        {/* Hero phone — missed call notification + Hank text arriving */}
        <div style={{display: "flex", justifyContent: "center"}}>
          <HeroPhone T={T}/>
        </div>
      </section>

      {/* PRESS-2 MOMENT — the product demo */}
      <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}}>How it actually works</div>
        <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 64, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 24, maxWidth: 1000}}>
          Three seconds. Missed call to booked job.
        </h2>
        <p style={{fontSize: 18, lineHeight: 1.5, color: T.ink, opacity: 0.7, maxWidth: 720, margin: "0 0 64px"}}>
          The customer hears your greeting and a "press 2 to text us right now." They press 2. Now they're texting Hank — and Hank talks like someone who's been working at your shop for ten years.
        </p>

        <div style={{display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 16, position: "relative"}}>
          <Press2Step n="01" t="Phone rings — you can't pick up" d='Customer calls Carrera Plumbing. Mike’s on a job. Old story.' icon="ring" T={T}/>
          <Press2Step n="02" t="Voicemail offers the press-2" d='"Hey, you’ve reached Carrera. Mike’s tied up. Press 2 to text us right now."' icon="vm" T={T}/>
          <Press2Step n="03" t="Customer presses 2" d="Their phone opens to a fresh text thread. A message from Hank is already waiting." icon="press" T={T}/>
          <Press2Step n="04" t="Hank picks it up" d='"Hank from Carrera. Mike’s tied up — what’s going on?" Three seconds, start to finish.' icon="text" T={T}/>
        </div>
      </section>

      {/* CONVERSATION — one phone, full booking thread */}
      <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}}>One thread. Job booked.</div>
            <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 56, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 28}}>
              He answers like he's worked at your shop for ten years.
            </h2>
            <p style={{fontSize: 17, lineHeight: 1.55, color: T.ink, opacity: 0.7, margin: "0 0 24px"}}>
              Hank knows your name, your hours, your service area, your pricing. Customer asks; Hank answers — fast. Quote on the table, time slot picked, job locked in.
            </p>
            <p style={{fontSize: 17, lineHeight: 1.55, color: T.ink, opacity: 0.7, margin: "0 0 28px"}}>
              No script. No "I'm an AI assistant." Just a person solving the problem.
            </p>
            <div style={{padding: 20, background: T.paperDeep, borderRadius: 12, fontSize: 14, lineHeight: 1.55}}>
              <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", color: T.green, marginBottom: 8, fontWeight: 600}}>Works on Android too</div>
              <div style={{opacity: 0.78}}>No app to install. The customer doesn't change a thing — they call the same number they always called.</div>
            </div>
          </div>

          <div style={{display: "flex", justifyContent: "center"}}>
            <ConversationPhone T={T}/>
          </div>
        </div>
      </section>

      {/* PRO POV — what the contractor sees */}
      <section style={{padding: "100px 56px", background: T.green, color: T.paper}}>
        <div style={{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.greenBright, marginBottom: 16}}>On your end</div>
            <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 64, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 28}}>
              You don't read the threads. You read the jobs.
            </h2>
            <p style={{fontSize: 18, lineHeight: 1.5, opacity: 0.8, margin: "0 0 36px", maxWidth: 540}}>
              Hank does the talking. Your phone gets a clean card: name, address, problem, quote, preferred time. Tap to schedule. That's the whole job.
            </p>
            <ul style={{listStyle: "none", padding: 0, margin: 0, fontSize: 15, lineHeight: 1.85, opacity: 0.85}}>
              <li>· Every call logged — even the ones you used to miss</li>
              <li>· One tap to confirm, reschedule, or call the customer back</li>
              <li>· Bigger commercial gigs flagged for you instead of guessed</li>
              <li>· Read the full thread anytime, or jump in mid-conversation</li>
            </ul>
          </div>

          <div style={{display: "flex", justifyContent: "center"}}>
            <ProJobPhone T={T}/>
          </div>
        </div>
      </section>

      {/* SETUP + PRICE */}
      <section style={{padding: "100px 56px"}}>
        <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: T.green, marginBottom: 16}}>Get Hank set up</div>
        <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 64, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 56, maxWidth: 900}}>
          Five minutes. You're back to work.
        </h2>

        <div style={{display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "start"}}>
          <div>
            {[
              {n: "01", t: "Tell Hank about your shop", d: "Trade, hours, service area, what you charge. Five minutes — Hank picks it up fast."},
              {n: "02", t: "Forward your missed calls to Hank", d: "One toggle. Customers call the same number they always have. Nothing changes on their end."},
              {n: "03", t: "Hank picks up when you can't", d: '"Press 2 to text us right now." He talks like a person who’s been working at your shop for years.'},
              {n: "04", t: "Jobs land on your phone", d: "Today. As cards: name, problem, quote, time. Tap to schedule. That's the whole job."},
            ].map((s) => (
              <div key={s.n} style={{display: "flex", gap: 24, padding: "24px 0", borderBottom: `1px solid ${T.paperDeep}`, alignItems: "flex-start"}}>
                <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 12, color: T.green, fontWeight: 600, letterSpacing: "0.06em", paddingTop: 4, minWidth: 28}}>{s.n}</div>
                <div style={{flex: 1}}>
                  <div style={{fontSize: 20, fontWeight: 600, letterSpacing: "-0.015em", marginBottom: 6}}>{s.t}</div>
                  <div style={{fontSize: 14, opacity: 0.7, lineHeight: 1.55}}>{s.d}</div>
                </div>
              </div>
            ))}
          </div>

          <div style={{display: "flex", flexDirection: "column", gap: 12}}>
            {[
              {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. 300 calls/mo.", cta: "Start free trial", featured: true},
              {name: "Fleet", price: "Custom", per: "", d: "10+ trucks, multi-location, dedicated onboarding.", cta: "Talk to sales", featured: false},
            ].map((p, i) => (
              <div key={i} style={{padding: 24, background: p.featured ? T.green : T.paperWarm, color: p.featured ? T.paper : T.ink, border: p.featured ? "none" : `1px solid ${T.paperDeep}`, borderRadius: 12, position: "relative"}}>
                {p.featured && <div style={{position: "absolute", top: 16, right: 16, fontFamily: "'JetBrains Mono', monospace", fontSize: 9, padding: "3px 7px", background: T.greenBright, color: T.ink, borderRadius: 4, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase"}}>most picked</div>}
                <div style={{fontSize: 13, fontWeight: 600, opacity: 0.7, marginBottom: 10}}>{p.name}</div>
                <div style={{fontFamily: "'Inter Display', sans-serif", fontSize: 44, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 1, marginBottom: 4}}>{p.price}<span style={{fontSize: 16, opacity: 0.6, fontWeight: 500}}>{p.per}</span></div>
                <div style={{fontSize: 13, opacity: 0.75, lineHeight: 1.5, marginBottom: 16, marginTop: 8}}>{p.d}</div>
                <button style={{width: "100%", background: p.featured ? T.paper : T.green, color: p.featured ? T.ink : T.paper, border: "none", padding: "12px 18px", borderRadius: 999, fontSize: 13, fontWeight: 600, fontFamily: "inherit"}}>{p.cta}</button>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section style={{padding: "120px 56px", background: T.ink, 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.75, margin: "0 auto 36px", maxWidth: 540}}>
          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.greenBright, 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>
  );
}

/* ---------- supporting visuals ---------- */

/* Hero phone — missed call notification card on lockscreen + a Hank text below */
function HeroPhone({ T }) {
  return (
    <IPhoneShell width={310}>
      <div style={{flex: 1, background: "linear-gradient(180deg, #1a2520 0%, #0a0f0c 100%)", overflow: "hidden", display: "flex", flexDirection: "column", padding: "20px 12px", color: "#fff", position: "relative"}}>
        <div style={{textAlign: "center", marginTop: 4, marginBottom: 30}}>
          <div style={{fontSize: 56, fontWeight: 200, fontFamily: "-apple-system, system-ui, sans-serif", letterSpacing: "-0.02em", lineHeight: 1}}>9:41</div>
          <div style={{fontSize: 13, fontWeight: 500, opacity: 0.85, marginTop: 4, fontFamily: "-apple-system, system-ui, sans-serif"}}>Tuesday, April 29</div>
        </div>

        {/* Missed call notification */}
        <div style={{background: "rgba(255,255,255,0.18)", backdropFilter: "blur(20px)", borderRadius: 18, padding: "10px 12px", marginBottom: 8, fontFamily: "-apple-system, system-ui, sans-serif"}}>
          <div style={{display: "flex", alignItems: "center", gap: 8, marginBottom: 6}}>
            <div style={{width: 18, height: 18, borderRadius: 4, background: "#34C759", display: "flex", alignItems: "center", justifyContent: "center"}}>
              <svg width="11" height="11" viewBox="0 0 24 24" fill="#fff"><path d="M20.01 15.38c-1.23 0-2.42-.2-3.53-.56-.35-.12-.74-.03-1.01.24l-1.57 1.97c-2.83-1.35-5.48-3.9-6.89-6.83l1.95-1.66c.27-.28.35-.67.24-1.02-.37-1.11-.56-2.3-.56-3.53 0-.54-.45-.99-.99-.99H4.19C3.65 3 3 3.24 3 3.99 3 13.28 10.73 21 20.01 21c.71 0 .99-.63.99-1.18v-3.45c0-.54-.45-.99-.99-.99z"/></svg>
            </div>
            <span style={{fontSize: 13, fontWeight: 600}}>Phone</span>
            <span style={{fontSize: 11, opacity: 0.7, marginLeft: "auto"}}>now</span>
          </div>
          <div style={{fontSize: 14, fontWeight: 600, marginBottom: 2}}>Missed call</div>
          <div style={{fontSize: 13, opacity: 0.85}}>Sarah Klein · 8:14 AM</div>
        </div>

        {/* Hank text notification (the magic moment) */}
        <div style={{background: "rgba(82,168,122,0.92)", backdropFilter: "blur(20px)", borderRadius: 18, padding: "10px 12px", color: "#0E1A14", fontFamily: "-apple-system, system-ui, sans-serif", boxShadow: "0 8px 24px -4px rgba(82,168,122,0.4)"}}>
          <div style={{display: "flex", alignItems: "center", gap: 8, marginBottom: 6}}>
            <div style={{width: 18, height: 18, borderRadius: 4, background: T.ink, display: "flex", alignItems: "center", justifyContent: "center"}}>
              <svg width="10" height="10" viewBox="0 0 100 100" fill="none" stroke={T.paper} strokeWidth="14" strokeLinecap="round"><path d="M 24 18 L 24 82"/><path d="M 76 18 L 76 82"/><path d="M 24 50 Q 50 36 76 50"/></svg>
            </div>
            <span style={{fontSize: 13, fontWeight: 700}}>Hank — Carrera Plumbing</span>
            <span style={{fontSize: 11, opacity: 0.7, marginLeft: "auto"}}>now</span>
          </div>
          <div style={{fontSize: 14, fontWeight: 600, marginBottom: 2}}>New job booked</div>
          <div style={{fontSize: 13, opacity: 0.9, lineHeight: 1.4}}>Sarah Klein · water heater · 11 AM today · $89 service + repair quote</div>
        </div>

        {/* tiny home indicator */}
        <div style={{marginTop: "auto", display: "flex", justifyContent: "center", paddingBottom: 4}}>
          <div style={{width: 100, height: 4, background: "rgba(255,255,255,0.6)", borderRadius: 999}}/>
        </div>
      </div>
    </IPhoneShell>
  );
}

/* Press-2 step card — used in the 4-step grid */
function Press2Step({ n, t, d, icon, T }) {
  const Icon = () => {
    if (icon === "ring") return <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={T.green} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>;
    if (icon === "vm") return <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={T.green} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="5.5" cy="14.5" r="3.5"/><circle cx="18.5" cy="14.5" r="3.5"/><line x1="9" y1="14.5" x2="15" y2="14.5"/></svg>;
    if (icon === "press") return <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={T.green} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><text x="12" y="16" textAnchor="middle" fontSize="11" fontWeight="700" fill={T.green} stroke="none" fontFamily="-apple-system, system-ui, sans-serif">2</text></svg>;
    if (icon === "text") return <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke={T.green} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>;
    return null;
  };
  return (
    <div style={{padding: 28, background: T.paperWarm, border: `1px solid ${T.paperDeep}`, borderRadius: 12, display: "flex", flexDirection: "column", gap: 16}}>
      <div style={{display: "flex", alignItems: "center", justifyContent: "space-between"}}>
        <Icon/>
        <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: T.green, fontWeight: 600, letterSpacing: "0.06em"}}>STEP {n}</div>
      </div>
      <div style={{fontSize: 18, fontWeight: 600, letterSpacing: "-0.015em", lineHeight: 1.25, color: T.ink}}>{t}</div>
      <div style={{fontSize: 13.5, opacity: 0.72, lineHeight: 1.55, color: T.ink}}>{d}</div>
    </div>
  );
}

/* The full booking thread on iPhone */
function ConversationPhone({ T }) {
  return (
    <IPhoneShell width={320}>
      <ThreadHeader platform="ios"/>
      <div style={{flex: 1, paddingTop: 6, background: "#fff", overflow: "hidden", display: "flex", flexDirection: "column"}}>
        <DateStamp platform="ios">Today · 8:14 AM</DateStamp>
        <SystemNote platform="ios">You pressed 2 from your call to Carrera Plumbing.</SystemNote>
        <div style={{height: 4}}/>
        <ChatBubble from="them" platform="ios">Hank from Carrera. Mike's tied up — what's going on?</ChatBubble>
        <ChatBubble from="me" platform="ios">water heater leaking, water all over the garage</ChatBubble>
        <div style={{display: "flex", justifyContent: "flex-end", marginBottom: 4, padding: "0 10px"}}>
          <div style={{width: 130, height: 160, background: "linear-gradient(135deg, #6b7d6e, #3a4a3d)", borderRadius: 14}}/>
        </div>
        <ChatBubble from="them" platform="ios">Yikes. 50gal gas? Joe can come out today — service call $89, repair quote on site.</ChatBubble>
        <RichCard platform="ios" accent={T.green}>
          <div style={{padding: "12px 14px"}}>
            <div style={{fontSize: 10, fontWeight: 600, color: T.green, textTransform: "uppercase", letterSpacing: "0.06em", marginBottom: 8, fontFamily: "'JetBrains Mono', monospace"}}>Pick a time today</div>
            <div style={{display: "flex", flexDirection: "column", gap: 4}}>
              <div style={{padding: "9px 11px", background: T.green, color: T.paper, borderRadius: 9, fontSize: 13, fontWeight: 600, display: "flex", justifyContent: "space-between"}}><span>11:00 AM</span><span style={{fontSize: 11, opacity: 0.85}}>in 2.5 hrs</span></div>
              <div style={{padding: "9px 11px", background: "#F2F2F7", borderRadius: 9, fontSize: 13, fontWeight: 500}}>2:30 PM</div>
            </div>
          </div>
        </RichCard>
        <ChatBubble from="me" platform="ios">11 works</ChatBubble>
        <ChatBubble from="them" platform="ios">Locked in. Joe will text you when he's 10 out.</ChatBubble>
      </div>
    </IPhoneShell>
  );
}

/* What lands on the contractor's phone — single job card on dark surface */
function ProJobPhone({ T }) {
  return (
    <IPhoneShell width={310}>
      <div style={{flex: 1, background: "#0E0D0C", overflow: "hidden", display: "flex", flexDirection: "column", color: T.paper, padding: "16px 14px"}}>
        <div style={{display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14}}>
          <div style={{display: "flex", alignItems: "center", gap: 8}}>
            <svg width="18" height="18" viewBox="0 0 100 100" fill="none" stroke={T.paper} strokeWidth="9" strokeLinecap="round"><path d="M 24 18 L 24 82"/><path d="M 76 18 L 76 82"/><path d="M 24 50 Q 50 36 76 50"/></svg>
            <span style={{fontSize: 14, fontWeight: 600}}>Hank · jobs</span>
          </div>
          <span style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 9, opacity: 0.55, textTransform: "uppercase", letterSpacing: "0.08em"}}>today</span>
        </div>

        <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 9, opacity: 0.5, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4}}>Today · Tuesday</div>
        <div style={{fontSize: 18, fontWeight: 600, fontFamily: "'Inter Display', sans-serif", marginBottom: 14, letterSpacing: "-0.02em"}}>3 jobs · $1,420 booked</div>

        {/* Featured job card */}
        <div style={{background: "rgba(82,168,122,0.1)", border: "1px solid rgba(82,168,122,0.35)", borderRadius: 12, padding: 14, marginBottom: 8}}>
          <div style={{display: "flex", justifyContent: "space-between", marginBottom: 8}}>
            <span style={{fontSize: 10, color: T.greenBright, fontFamily: "'JetBrains Mono', monospace", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600}}>● Hank handled · 2m ago</span>
            <span style={{fontSize: 9, opacity: 0.45, fontFamily: "'JetBrains Mono', monospace"}}>#0142</span>
          </div>
          <div style={{fontSize: 14, fontWeight: 600, marginBottom: 4}}>Sarah Klein</div>
          <div style={{fontSize: 12, opacity: 0.75, marginBottom: 8, lineHeight: 1.4}}>Water heater leak · 50gal gas · 2418 Linden</div>
          <div style={{display: "flex", gap: 12, fontSize: 11, opacity: 0.7, marginBottom: 12}}>
            <span>🕒 11:00 AM</span>
            <span>💵 $89 + repair</span>
          </div>
          <div style={{display: "flex", gap: 6}}>
            <button style={{flex: 1, background: T.greenBright, color: T.ink, border: "none", padding: "8px 10px", borderRadius: 999, fontSize: 11, fontWeight: 600, fontFamily: "inherit"}}>Confirm</button>
            <button style={{flex: 1, background: "transparent", color: T.paper, border: "1px solid rgba(255,255,255,0.2)", padding: "8px 10px", borderRadius: 999, fontSize: 11, fontFamily: "inherit"}}>Reschedule</button>
          </div>
        </div>

        {/* secondary jobs */}
        <div style={{background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.07)", borderRadius: 12, padding: 12, marginBottom: 6}}>
          <div style={{fontSize: 10, color: T.greenBright, fontFamily: "'JetBrains Mono', monospace", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600, marginBottom: 4}}>● Booked · 14m ago</div>
          <div style={{fontSize: 13, fontWeight: 500}}>Mark Aoki · disposal jam · Thu 2pm</div>
        </div>
        <div style={{background: "rgba(194,83,42,0.08)", border: "1px solid rgba(194,83,42,0.3)", borderRadius: 12, padding: 12}}>
          <div style={{fontSize: 10, color: T.rust, fontFamily: "'JetBrains Mono', monospace", textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600, marginBottom: 4}}>● Needs you · 1h ago</div>
          <div style={{fontSize: 13, fontWeight: 500}}>Diego Park · restaurant remodel</div>
        </div>

        <div style={{marginTop: "auto", display: "flex", justifyContent: "center", paddingTop: 8}}>
          <div style={{width: 90, height: 4, background: "rgba(255,255,255,0.4)", borderRadius: 999}}/>
        </div>
      </div>
    </IPhoneShell>
  );
}

window.HankSalesSite = HankSalesSite;