/* Hank for Pros — sales pitch focused on the dual-platform texting product
   Audience: service business owners (Mike). Frame: "your customers text from both
   iPhones and Androids — Hank handles both, looking native on each." */

const HT = window.HANK_TOKENS || {
  ink: "#161514", paper: "#F5EFE3", paperDeep: "#EDE5D2", paperWarm: "#FAF5EA",
  green: "#2C4A3A", greenDeep: "#1A3025", greenBright: "#52A87A",
  rust: "#C2532A", sky: "#3B6F8C",
};

/* ---------- Shared chat primitives, parameterized per platform ---------- */

function ChatBubble({ from, children, platform = "ios", color }) {
  const isMe = from === "me";
  if (platform === "ios") {
    const bg = isMe ? "#1F8AFF" : "#E9E9EB";
    const fg = isMe ? "#fff" : "#000";
    return (
      <div style={{display: "flex", justifyContent: isMe ? "flex-end" : "flex-start", marginBottom: 2, padding: "0 10px"}}>
        <div style={{maxWidth: "78%", background: color || bg, color: fg, padding: "7px 12px", borderRadius: 18, fontSize: 14, lineHeight: 1.32, fontFamily: "-apple-system, system-ui, sans-serif", letterSpacing: "-0.005em"}}>{children}</div>
      </div>
    );
  }
  // android RCS — Material 3 style: customer outgoing in brand-tinted, business incoming in surface
  const bg = isMe ? "#3F6E54" : "#E7E0D5";
  const fg = isMe ? "#fff" : "#1B1B1B";
  return (
    <div style={{display: "flex", justifyContent: isMe ? "flex-end" : "flex-start", marginBottom: 3, padding: "0 12px"}}>
      <div style={{maxWidth: "78%", background: color || bg, color: fg, padding: "9px 14px", borderRadius: isMe ? "20px 20px 6px 20px" : "20px 20px 20px 6px", fontSize: 14, lineHeight: 1.35, fontFamily: "Roboto, system-ui, sans-serif"}}>{children}</div>
    </div>
  );
}

function SystemNote({ children, platform = "ios" }) {
  const c = platform === "ios" ? "rgba(0,0,0,0.45)" : "rgba(0,0,0,0.55)";
  const f = platform === "ios" ? "-apple-system, system-ui, sans-serif" : "Roboto, system-ui, sans-serif";
  return <div style={{textAlign: "center", fontSize: 11, color: c, margin: "8px 16px", fontFamily: f}}>{children}</div>;
}

function DateStamp({ children, platform = "ios" }) {
  const c = platform === "ios" ? "rgba(0,0,0,0.45)" : "rgba(0,0,0,0.55)";
  const f = platform === "ios" ? "-apple-system, system-ui, sans-serif" : "Roboto, system-ui, sans-serif";
  return <div style={{textAlign: "center", fontSize: 11, color: c, margin: "10px 0 6px", fontFamily: f, fontWeight: 500}}>{children}</div>;
}

/* ---------- Verified business header (per platform) ---------- */

function HankAvatar({ size = 56 }) {
  return (
    <div style={{width: size, height: size, borderRadius: 14, background: HT.green, display: "flex", alignItems: "center", justifyContent: "center", position: "relative", flexShrink: 0}}>
      <svg width={size * 0.55} height={size * 0.55} viewBox="0 0 100 100" fill="none" stroke={HT.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>
    </div>
  );
}

function VerifiedBadge({ platform = "ios", size = 18 }) {
  const bg = platform === "ios" ? "#1F8AFF" : "#1A73E8";
  return (
    <div style={{width: size, height: size, borderRadius: "50%", background: bg, display: "flex", alignItems: "center", justifyContent: "center", flexShrink: 0}}>
      <svg width={size * 0.55} height={size * 0.55} viewBox="0 0 11 11" fill="none"><path d="M2 5.5L4.5 8L9 3" stroke="#fff" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></svg>
    </div>
  );
}

function ThreadHeader({ business = "Carrera Plumbing", platform = "ios" }) {
  if (platform === "ios") {
    return (
      <div style={{padding: "10px 16px 14px", display: "flex", flexDirection: "column", alignItems: "center", gap: 4, borderBottom: "0.5px solid rgba(0,0,0,0.1)", background: "#F6F6F6"}}>
        <div style={{position: "relative", marginTop: 2}}>
          <HankAvatar size={56}/>
          <div style={{position: "absolute", bottom: -3, right: -3, border: "2px solid #F6F6F6", borderRadius: "50%"}}>
            <VerifiedBadge platform="ios" size={20}/>
          </div>
        </div>
        <div style={{fontSize: 13, fontWeight: 600, marginTop: 4, fontFamily: "-apple-system, system-ui, sans-serif", display: "flex", alignItems: "center", gap: 4}}>
          {business} <span style={{opacity: 0.4, fontWeight: 400}}>›</span>
        </div>
        <div style={{fontSize: 11, color: "rgba(0,0,0,0.5)", fontFamily: "-apple-system, system-ui, sans-serif"}}>verified business · iMessage</div>
      </div>
    );
  }
  // Android RCS — toolbar with avatar inline, brand color band
  return (
    <div style={{background: "#FFFFFF", borderBottom: "1px solid rgba(0,0,0,0.06)"}}>
      <div style={{height: 4, background: HT.green}}/>
      <div style={{padding: "8px 12px", display: "flex", alignItems: "center", gap: 10}}>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="#1B1B1B"><path d="M19 11H7.83l4.88-4.88-1.41-1.41L4 12l7.29 7.29 1.41-1.41L7.83 13H19z"/></svg>
        <HankAvatar size={36}/>
        <div style={{flex: 1, minWidth: 0}}>
          <div style={{fontSize: 14, fontWeight: 500, color: "#1B1B1B", fontFamily: "Roboto, system-ui, sans-serif", display: "flex", alignItems: "center", gap: 4}}>
            {business}
            <VerifiedBadge platform="android" size={14}/>
          </div>
          <div style={{fontSize: 11, color: "rgba(0,0,0,0.55)", fontFamily: "Roboto, system-ui, sans-serif"}}>verified business · RCS</div>
        </div>
        <svg width="22" height="22" viewBox="0 0 24 24" fill="rgba(0,0,0,0.6)"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/></svg>
      </div>
    </div>
  );
}

/* Suggested reply chips (RCS native) */
function SuggestedChips({ chips, platform = "ios" }) {
  const isAndroid = platform === "android";
  return (
    <div style={{display: "flex", gap: 8, padding: isAndroid ? "8px 12px 10px" : "6px 12px 10px", flexWrap: "wrap", justifyContent: isAndroid ? "flex-end" : "flex-start"}}>
      {chips.map((c,i) => (
        <div key={i} style={{
          padding: isAndroid ? "8px 14px" : "7px 13px",
          background: isAndroid ? "transparent" : "#F2F2F7",
          border: isAndroid ? "1px solid rgba(0,0,0,0.2)" : "none",
          borderRadius: 999,
          fontSize: 13,
          fontWeight: 500,
          color: isAndroid ? "#3F6E54" : "#1F8AFF",
          fontFamily: isAndroid ? "Roboto, system-ui, sans-serif" : "-apple-system, system-ui, sans-serif",
        }}>{c}</div>
      ))}
    </div>
  );
}

/* Rich card — lives in both, slightly different chrome */
function RichCard({ children, platform = "ios", accent }) {
  const isAndroid = platform === "android";
  return (
    <div style={{display: "flex", justifyContent: isAndroid ? "flex-start" : "flex-start", marginBottom: 6, padding: isAndroid ? "0 12px" : "0 10px"}}>
      <div style={{maxWidth: "84%", background: "#fff", border: isAndroid ? "1px solid rgba(0,0,0,0.08)" : "1px solid rgba(0,0,0,0.07)", borderRadius: isAndroid ? 16 : 18, overflow: "hidden", boxShadow: "0 1px 3px rgba(0,0,0,0.04)"}}>
        {accent && <div style={{height: 3, background: accent}}/>}
        {children}
      </div>
    </div>
  );
}

/* ---------- Phone shells ---------- */

function IPhoneShell({ children, width = 290 }) {
  return (
    <div style={{width, height: width * 2.06, background: "#0A0A0A", borderRadius: 40, padding: 7, boxShadow: "0 30px 60px -20px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.08)"}}>
      <div style={{width: "100%", height: "100%", background: "#fff", borderRadius: 34, overflow: "hidden", display: "flex", flexDirection: "column", position: "relative"}}>
        <div style={{height: 36, position: "relative", flexShrink: 0, background: "#F6F6F6"}}>
          <div style={{position: "absolute", top: 11, left: 22, fontSize: 12, fontWeight: 600, fontFamily: "-apple-system, system-ui, sans-serif"}}>9:41</div>
          <div style={{position: "absolute", top: 5, left: "50%", transform: "translateX(-50%)", width: 84, height: 22, background: "#0A0A0A", borderRadius: 11}}/>
        </div>
        {children}
      </div>
    </div>
  );
}

function AndroidShell({ children, width = 290 }) {
  return (
    <div style={{width, height: width * 2.06, background: "#1B1B1B", borderRadius: 32, padding: 5, boxShadow: "0 30px 60px -20px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,0,0,0.08)"}}>
      <div style={{width: "100%", height: "100%", background: "#fff", borderRadius: 27, overflow: "hidden", display: "flex", flexDirection: "column", position: "relative"}}>
        <div style={{height: 30, position: "relative", flexShrink: 0, background: "#fff", borderBottom: "1px solid rgba(0,0,0,0.04)"}}>
          <div style={{position: "absolute", top: 9, left: 18, fontSize: 12, fontWeight: 500, fontFamily: "Roboto, system-ui, sans-serif", color: "#1B1B1B"}}>9:41</div>
          <div style={{position: "absolute", top: 6, left: "50%", transform: "translateX(-50%)", width: 12, height: 12, background: "#0A0A0A", borderRadius: "50%"}}/>
          <div style={{position: "absolute", top: 11, right: 18, display: "flex", gap: 4, alignItems: "center"}}>
            <svg width="13" height="9" viewBox="0 0 13 9" fill="#1B1B1B"><path d="M1 8h2V5H1v3zm4 0h2V3H5v5zm4 0h2V0H9v8z"/></svg>
            <svg width="14" height="9" viewBox="0 0 14 9" fill="#1B1B1B"><rect x="0" y="2" width="11" height="5" rx="1"/><rect x="11.5" y="3.5" width="1.5" height="2" rx="0.5"/></svg>
          </div>
        </div>
        {children}
      </div>
    </div>
  );
}

/* ---------- BOARDS ---------- */

/* HERO — split screen: same job, two phones */
function HankSalesHero() {
  return (
    <div style={{padding: "72px 64px", background: HT.paper, color: HT.ink, height: "100%", display: "flex", flexDirection: "column"}}>
      {/* Top nav */}
      <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 64}}>
        <div style={{display: "flex", alignItems: "center", gap: 10}}>
          <svg width="28" height="28" viewBox="0 0 100 100" fill="none" stroke={HT.ink} 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={{fontFamily: "'Inter Display', sans-serif", fontSize: 22, fontWeight: 600, letterSpacing: "-0.02em"}}>Hank</span>
          <span style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 10, padding: "3px 8px", background: HT.green, color: HT.paper, borderRadius: 4, marginLeft: 4, letterSpacing: "0.06em", textTransform: "uppercase", whiteSpace: "nowrap"}}>for pros</span>
        </div>
        <div style={{display: "flex", gap: 28, fontSize: 14, opacity: 0.85}}>
          <span>Why Hank</span><span>Live demo</span><span>Pricing</span>
        </div>
        <div style={{display: "flex", gap: 12, alignItems: "center"}}>
          <span style={{fontSize: 14, opacity: 0.7}}>Sign in</span>
          <button style={{background: HT.green, color: HT.paper, border: "none", padding: "10px 18px", borderRadius: 999, fontSize: 13, fontWeight: 500, fontFamily: "inherit"}}>Try free for 14 days</button>
        </div>
      </div>

      <div style={{display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 64, alignItems: "center", flex: 1}}>
        <div>
          <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: HT.green, marginBottom: 20}}>The texting receptionist for service pros</div>
          <h1 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 84, lineHeight: 0.92, letterSpacing: "-0.035em", fontWeight: 600, margin: 0}}>
            Your customers text.<br/>Hank texts back.
          </h1>
          <p style={{fontSize: 19, lineHeight: 1.5, opacity: 0.72, marginTop: 28, maxWidth: 520}}>
            Half your customers are on iPhones, half on Androids. Hank books jobs in <strong>iMessage and RCS</strong> — verified, branded, in your voice — so the conversation looks like it's coming from your shop, no matter who's calling.
          </p>
          <div style={{display: "flex", gap: 12, marginTop: 36}}>
            <button style={{background: HT.green, color: HT.paper, border: "none", padding: "16px 26px", borderRadius: 999, fontSize: 15, fontWeight: 500, fontFamily: "inherit"}}>Try Hank free →</button>
            <button style={{background: "transparent", color: HT.ink, border: `1px solid ${HT.ink}`, padding: "16px 26px", borderRadius: 999, fontSize: 15, fontWeight: 500, fontFamily: "inherit"}}>See it in both threads</button>
          </div>
          <div style={{display: "flex", gap: 28, marginTop: 36, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", opacity: 0.55}}>
            <span>· verified iMessage</span>
            <span>· RCS Business Messaging</span>
            <span>· SMS fallback</span>
          </div>
        </div>

        {/* Side-by-side phones, same conversation */}
        <div style={{display: "flex", gap: 18, justifyContent: "center", alignItems: "flex-start"}}>
          <div style={{display: "flex", flexDirection: "column", alignItems: "center", gap: 10}}>
            <IPhoneShell width={260}>
              <ThreadHeader platform="ios"/>
              <div style={{flex: 1, paddingTop: 6, background: "#fff", overflow: "hidden"}}>
                <DateStamp platform="ios">Today · 8:14 AM</DateStamp>
                <ChatBubble from="me" platform="ios">water heater leaking</ChatBubble>
                <ChatBubble from="them" platform="ios">Yikes. Joe can be there at 11. Send me a photo?</ChatBubble>
                <SuggestedChips platform="ios" chips={["Send photo", "Pick a time"]}/>
              </div>
            </IPhoneShell>
            <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", opacity: 0.55}}>iMessage</div>
          </div>
          <div style={{display: "flex", flexDirection: "column", alignItems: "center", gap: 10, marginTop: 32}}>
            <AndroidShell width={260}>
              <ThreadHeader platform="android"/>
              <div style={{flex: 1, paddingTop: 4, background: "#fff", overflow: "hidden"}}>
                <DateStamp platform="android">Today · 8:14 AM</DateStamp>
                <ChatBubble from="me" platform="android">water heater leaking</ChatBubble>
                <ChatBubble from="them" platform="android">Yikes. Joe can be there at 11. Send me a photo?</ChatBubble>
                <SuggestedChips platform="android" chips={["Send photo", "Pick a time"]}/>
              </div>
            </AndroidShell>
            <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: "0.08em", textTransform: "uppercase", opacity: 0.55}}>Android RCS</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* WHY THIS MATTERS — the real problem with most "AI text" tools */
function HankSalesProblem() {
  return (
    <div style={{padding: "80px 64px", background: HT.ink, color: HT.paper, height: "100%"}}>
      <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: HT.greenBright, marginBottom: 16}}>Why most texting tools fail you</div>
      <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 60, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 12, maxWidth: 1100}}>
        Half your customers get a sketchy SMS from a 10-digit number they don't recognize.
      </h2>
      <p style={{fontSize: 18, lineHeight: 1.5, opacity: 0.65, maxWidth: 700, marginBottom: 56}}>
        That's not a brand. That's a deliverability problem with your name on it. Hank shows up <em>verified</em> — your business name, your logo, in the customer's native messaging app.
      </p>

      <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 24}}>
        {/* Bad */}
        <div style={{padding: 28, background: "rgba(194,83,42,0.08)", border: "1px solid rgba(194,83,42,0.3)", borderRadius: 12}}>
          <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: HT.rust, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 14}}>What competitors send</div>
          <div style={{display: "flex", gap: 14, alignItems: "flex-start"}}>
            <div style={{width: 44, height: 44, borderRadius: "50%", background: "#888", color: "#fff", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: 12, flexShrink: 0}}>?</div>
            <div style={{flex: 1}}>
              <div style={{fontSize: 14, fontWeight: 500, opacity: 0.85, marginBottom: 4}}>+1 (415) 555-7728</div>
              <div style={{padding: 12, background: "rgba(255,255,255,0.06)", borderRadius: 12, fontSize: 13, lineHeight: 1.5}}>"Hi this is the AI assistant for Carrera Plumbing. Reply STOP to opt out. Standard msg rates apply."</div>
              <div style={{fontSize: 11, opacity: 0.55, marginTop: 8}}>Generic gray bubble · no logo · reads like spam · 22% never reply</div>
            </div>
          </div>
        </div>

        {/* Good */}
        <div style={{padding: 28, background: "rgba(82,168,122,0.1)", border: "1px solid rgba(82,168,122,0.4)", borderRadius: 12}}>
          <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: HT.greenBright, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 14}}>What Hank sends</div>
          <div style={{display: "flex", gap: 14, alignItems: "flex-start"}}>
            <div style={{position: "relative", flexShrink: 0}}>
              <HankAvatar size={44}/>
              <div style={{position: "absolute", bottom: -2, right: -2, border: "2px solid #161514", borderRadius: "50%"}}><VerifiedBadge platform="ios" size={16}/></div>
            </div>
            <div style={{flex: 1}}>
              <div style={{fontSize: 14, fontWeight: 600, marginBottom: 4, display: "flex", alignItems: "center", gap: 6}}>Carrera Plumbing <span style={{fontSize: 11, opacity: 0.55, fontWeight: 400}}>· verified</span></div>
              <div style={{padding: 12, background: "rgba(82,168,122,0.15)", borderRadius: 12, fontSize: 13, lineHeight: 1.5}}>"Hank from Carrera here. Mike's tied up — what's going on? I can usually book you faster than a callback."</div>
              <div style={{fontSize: 11, opacity: 0.65, marginTop: 8, color: HT.greenBright}}>Verified sender · branded · 84% reply within 60 sec</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* DUAL PLATFORM DEEP-DIVE — same conversation, on iMessage and RCS, fully built out */
function HankDualPlatformBoard() {
  return (
    <div style={{padding: "72px 64px", background: HT.paper, color: HT.ink, height: "100%"}}>
      <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: HT.green, marginBottom: 16}}>One Hank, two threads · same job</div>
      <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 60, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 16, maxWidth: 1000}}>
        Native on iPhone. Native on Android. Branded on both.
      </h2>
      <p style={{fontSize: 17, lineHeight: 1.5, opacity: 0.72, maxWidth: 700, marginBottom: 56}}>
        Hank routes the same conversation through Apple's <strong>Messages for Business</strong> and Google's <strong>RCS Business Messaging</strong>. Customers get the verified header, your logo, and rich cards — in the app they already use. If they're on a phone old enough that neither works, Hank falls back to plain SMS without missing a beat.
      </p>

      <div style={{display: "grid", gridTemplateColumns: "1fr 1fr", gap: 56, justifyItems: "center"}}>

        {/* iMessage */}
        <div style={{display: "flex", flexDirection: "column", alignItems: "center", gap: 20}}>
          <IPhoneShell width={310}>
            <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 in 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">50gal gas? Joe can come out today. Service call $89 + repair quote on site.</ChatBubble>
              <RichCard platform="ios" accent={HT.green}>
                <div style={{padding: "12px 14px"}}>
                  <div style={{fontSize: 10, fontWeight: 600, color: HT.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: HT.green, color: HT.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>
              <SuggestedChips platform="ios" chips={["Book 11 AM", "Reschedule"]}/>
            </div>
          </IPhoneShell>
          <div style={{textAlign: "center"}}>
            <div style={{fontSize: 14, fontWeight: 600}}>iMessage · Apple Messages for Business</div>
            <div style={{fontSize: 12, opacity: 0.6, marginTop: 4, maxWidth: 320}}>Verified blue checkmark, your business name as the sender, rich list pickers, native quick replies.</div>
          </div>
        </div>

        {/* Android RCS */}
        <div style={{display: "flex", flexDirection: "column", alignItems: "center", gap: 20}}>
          <AndroidShell width={310}>
            <ThreadHeader platform="android"/>
            <div style={{flex: 1, paddingTop: 4, background: "#fff", overflow: "hidden", display: "flex", flexDirection: "column"}}>
              <DateStamp platform="android">Today · 8:14 AM</DateStamp>
              <SystemNote platform="android">Verified sender · Carrera Plumbing</SystemNote>
              <div style={{height: 4}}/>
              <ChatBubble from="them" platform="android">Hank from Carrera. Mike's tied up — what's going on?</ChatBubble>
              <ChatBubble from="me" platform="android">water heater leaking, water in the garage</ChatBubble>
              <div style={{display: "flex", justifyContent: "flex-end", marginBottom: 4, padding: "0 12px"}}>
                <div style={{width: 130, height: 160, background: "linear-gradient(135deg, #6b7d6e, #3a4a3d)", borderRadius: 12}}/>
              </div>
              <ChatBubble from="them" platform="android">50gal gas? Joe can come out today. Service call $89 + repair quote on site.</ChatBubble>
              <RichCard platform="android" accent={HT.green}>
                <div style={{padding: "12px 14px"}}>
                  <div style={{fontSize: 10, fontWeight: 600, color: HT.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: HT.green, color: HT.paper, borderRadius: 8, fontSize: 13, fontWeight: 600, fontFamily: "Roboto, system-ui, sans-serif", 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: "#F1ECE1", borderRadius: 8, fontSize: 13, fontWeight: 500, fontFamily: "Roboto, system-ui, sans-serif"}}>2:30 PM</div>
                  </div>
                </div>
              </RichCard>
              <SuggestedChips platform="android" chips={["Book 11 AM", "Reschedule"]}/>
            </div>
          </AndroidShell>
          <div style={{textAlign: "center"}}>
            <div style={{fontSize: 14, fontWeight: 600}}>Android · RCS Business Messaging</div>
            <div style={{fontSize: 12, opacity: 0.6, marginTop: 4, maxWidth: 320}}>Verified Google checkmark, business logo in the toolbar, brand color, suggested replies, rich cards — native to Google Messages.</div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* PARITY MATRIX + SMS FALLBACK */
function HankParityBoard() {
  const Row = ({label, ios, android, sms}) => (
    <div style={{display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 16, padding: "16px 0", borderBottom: `1px solid ${HT.paperDeep}`, alignItems: "center"}}>
      <div style={{fontSize: 14, fontWeight: 500}}>{label}</div>
      <div style={{fontSize: 13, opacity: 0.75}}>{ios}</div>
      <div style={{fontSize: 13, opacity: 0.75}}>{android}</div>
      <div style={{fontSize: 13, opacity: 0.75}}>{sms}</div>
    </div>
  );

  return (
    <div style={{padding: "80px 64px", background: HT.paperWarm, color: HT.ink, height: "100%"}}>
      <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: HT.green, marginBottom: 16}}>Platform parity</div>
      <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 56, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 16, maxWidth: 900}}>
        What you get on every phone your customers actually use.
      </h2>
      <p style={{fontSize: 17, lineHeight: 1.5, opacity: 0.7, maxWidth: 700, marginBottom: 48}}>
        Hank degrades cleanly. Rich cards on iMessage and RCS. If a customer's stuck on plain SMS, Hank still books the job — just with text and links instead of taps.
      </p>

      <div style={{background: HT.paper, padding: "8px 32px 32px", borderRadius: 12, border: `1px solid ${HT.paperDeep}`}}>
        <div style={{display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 16, padding: "20px 0", borderBottom: `2px solid ${HT.ink}`, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.06em", opacity: 0.65}}>
          <div>Capability</div><div>iMessage</div><div>Android RCS</div><div>SMS fallback</div>
        </div>
        <Row label="Verified business sender" ios="Blue check + business name" android="Google check + logo" sms="Sender ID only"/>
        <Row label="Your logo & brand color" ios="Yes — header avatar" android="Yes — toolbar + accent" sms="—"/>
        <Row label="Rich time-slot picker" ios="List picker card" android="List picker card" sms="Reply with a time"/>
        <Row label="Photo from customer" ios="Native attach" android="Native attach" sms="MMS"/>
        <Row label="Quote estimate card" ios="Inline card" android="Inline card" sms="Plain text"/>
        <Row label="Suggested replies" ios="Quick replies" android="Suggested action chips" sms="—"/>
        <Row label="Read receipts" ios="Yes" android="Yes" sms="Delivery only"/>
        <Row label="Calendar handoff" ios="One-tap add" android="One-tap add" sms=".ics link"/>
      </div>

      <div style={{marginTop: 32, padding: 24, background: HT.green, color: HT.paper, borderRadius: 12, fontSize: 14, lineHeight: 1.6}}>
        <strong style={{color: HT.greenBright, fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.08em", display: "block", marginBottom: 8}}>What this means for you</strong>
        You don't pick a platform. You don't ask the customer what phone they have. Hank detects it, picks the richest thread that works, and falls back automatically. <strong>You just see one job land in your dashboard, same as always.</strong>
      </div>
    </div>
  );
}

/* WHAT THE PRO SEES — the dashboard surface (their POV, watching Hank work) */
function HankProDashboardBoard() {
  return (
    <div style={{padding: "72px 64px", background: HT.ink, color: HT.paper, height: "100%"}}>
      <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: HT.greenBright, marginBottom: 16}}>What you see · the pro side</div>
      <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 60, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 16, maxWidth: 950}}>
        You don't read the threads. You read the jobs.
      </h2>
      <p style={{fontSize: 17, lineHeight: 1.5, opacity: 0.7, maxWidth: 700, marginBottom: 48}}>
        Hank does the typing. The dashboard shows you what landed: who, what, where, when, how much. iMessage or RCS — same card, no platform tax on your attention.
      </p>

      <div style={{display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 28}}>

        {/* Dashboard mock */}
        <div style={{background: "#0E0D0C", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 14, padding: 24}}>
          <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20}}>
            <div>
              <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: 0.55, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 4}}>Today · Tuesday</div>
              <div style={{fontSize: 22, fontWeight: 600, fontFamily: "'Inter Display', sans-serif"}}>7 jobs · $4,820 booked</div>
            </div>
            <div style={{display: "flex", gap: 8}}>
              {["All", "Hank handled", "Needs you"].map((t,i) => (
                <div key={i} style={{padding: "6px 12px", borderRadius: 999, fontSize: 12, fontWeight: 500, background: i === 0 ? HT.greenBright : "transparent", color: i === 0 ? HT.ink : HT.paper, border: i === 0 ? "none" : "1px solid rgba(255,255,255,0.15)"}}>{t}</div>
              ))}
            </div>
          </div>

          {[
            {plat: "ios", status: "handled", time: "2m ago", name: "Sarah Klein", problem: "Water heater leak · 50gal gas", quote: "$89 service + ~$1,500 repair", slot: "11:00 AM", id: "0142"},
            {plat: "android", status: "handled", time: "14m ago", name: "Mark Aoki", problem: "Garbage disposal jammed", quote: "$140 flat", slot: "Thu 2:00 PM", id: "0141"},
            {plat: "android", status: "needs", time: "1h ago", name: "Diego Park", problem: "Restaurant remodel · estimate visit", quote: "Custom — flagged for you", slot: "Awaiting your call", id: "0140"},
            {plat: "ios", status: "handled", time: "2h ago", name: "Lena Vasquez", problem: "Faucet drip · kitchen", quote: "$120", slot: "Wed 9:00 AM", id: "0139"},
          ].map((j, i) => {
            const isHandled = j.status === "handled";
            return (
              <div key={i} style={{padding: 16, marginBottom: 8, background: isHandled ? "rgba(82,168,122,0.06)" : "rgba(194,83,42,0.08)", border: `1px solid ${isHandled ? "rgba(82,168,122,0.2)" : "rgba(194,83,42,0.3)"}`, borderRadius: 10}}>
                <div style={{display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8}}>
                  <div style={{display: "flex", gap: 10, alignItems: "center"}}>
                    <span style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: isHandled ? HT.greenBright : HT.rust, textTransform: "uppercase", letterSpacing: "0.06em", fontWeight: 600}}>● {isHandled ? "Hank handled" : "Needs you"}</span>
                    <span style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: 0.45}}>{j.time}</span>
                    <span style={{fontSize: 9, padding: "2px 6px", background: j.plat === "ios" ? "rgba(31,138,255,0.15)" : "rgba(63,110,84,0.25)", color: j.plat === "ios" ? "#5BA9FF" : HT.greenBright, borderRadius: 3, fontFamily: "'JetBrains Mono', monospace", textTransform: "uppercase", letterSpacing: "0.06em"}}>{j.plat === "ios" ? "iMsg" : "RCS"}</span>
                  </div>
                  <span style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: 0.4}}>#{j.id}</span>
                </div>
                <div style={{fontSize: 14, fontWeight: 600, marginBottom: 2}}>{j.name} · {j.problem}</div>
                <div style={{fontSize: 12, opacity: 0.65, display: "flex", gap: 16, marginTop: 4}}>
                  <span>💰 {j.quote.replace("💰","")}</span>
                  <span>🕒 {j.slot}</span>
                </div>
              </div>
            );
          })}
        </div>

        {/* Right column: inline thread peek + override */}
        <div style={{display: "flex", flexDirection: "column", gap: 16}}>
          <div style={{background: "#0E0D0C", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 14, padding: 18}}>
            <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 10, opacity: 0.55, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 12}}>Job #0142 · live thread</div>
            <div style={{background: "#1A1918", borderRadius: 10, padding: "10px 0", marginBottom: 12, fontFamily: "-apple-system, system-ui, sans-serif"}}>
              <div style={{padding: "0 12px 8px", fontSize: 11, opacity: 0.5}}>Sarah · iMessage</div>
              <div style={{padding: "4px 12px", fontSize: 13}}><span style={{opacity: 0.55}}>Hank: </span>50gal gas? Joe can come out today...</div>
              <div style={{padding: "4px 12px", fontSize: 13}}><span style={{opacity: 0.55}}>Sarah: </span>yes, 11 works</div>
              <div style={{padding: "4px 12px", fontSize: 13, color: HT.greenBright}}>● booked</div>
            </div>
            <button style={{width: "100%", padding: "10px 14px", background: "transparent", border: `1px solid ${HT.greenBright}`, color: HT.greenBright, borderRadius: 999, fontSize: 12, fontWeight: 500, fontFamily: "inherit"}}>Jump in &amp; take over →</button>
          </div>

          <div style={{background: HT.green, color: HT.paper, borderRadius: 14, padding: 24}}>
            <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: HT.greenBright, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 12}}>This week</div>
            <div style={{fontFamily: "'Inter Display', sans-serif", fontSize: 56, fontWeight: 600, letterSpacing: "-0.03em", lineHeight: 0.95, marginBottom: 8}}>+$11,240</div>
            <div style={{fontSize: 13, opacity: 0.85, lineHeight: 1.5}}>booked from calls you would've missed. 28 jobs Hank handled. 4 you stepped into.</div>
          </div>
        </div>

      </div>
    </div>
  );
}

/* TRUST + SETUP */
function HankTrustBoard() {
  return (
    <div style={{padding: "80px 64px", background: HT.paperDeep, color: HT.ink, height: "100%"}}>
      <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, textTransform: "uppercase", letterSpacing: "0.1em", color: HT.green, marginBottom: 16}}>Set up in 5 minutes</div>
      <h2 style={{fontFamily: "'Inter Display', sans-serif", fontSize: 56, fontWeight: 600, letterSpacing: "-0.025em", lineHeight: 1.0, margin: 0, marginBottom: 48, maxWidth: 900}}>
        We do the platform paperwork. You answer four questions.
      </h2>

      <div style={{display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 56, alignItems: "center"}}>
        <div>
          {[
            {n: "01", t: "Tell us your shop", d: "Trade, hours, service area, what you charge. Hank picks it up fast."},
            {n: "02", t: "We register your business", d: "Apple Messages for Business and RCS Brand verification — we file the paperwork, you sign once. Takes ~3 business days."},
            {n: "03", t: "Forward your missed calls", d: "One toggle. Customers press 2 to text. Hank picks it up from there — on whatever phone they're on."},
            {n: "04", t: "Watch jobs land", d: "iMessage. RCS. SMS. Same dashboard. Same job cards. Tap to schedule."},
          ].map((s) => (
            <div key={s.n} style={{display: "flex", gap: 20, padding: "20px 0", borderBottom: `1px solid ${HT.paper}`, alignItems: "flex-start"}}>
              <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: HT.green, fontWeight: 600, letterSpacing: "0.06em", paddingTop: 2}}>{s.n}</div>
              <div style={{flex: 1}}>
                <div style={{fontSize: 19, fontWeight: 600, letterSpacing: "-0.015em", marginBottom: 4}}>{s.t}</div>
                <div style={{fontSize: 14, opacity: 0.7, lineHeight: 1.5}}>{s.d}</div>
              </div>
            </div>
          ))}
        </div>

        <div style={{background: HT.ink, color: HT.paper, padding: 36, borderRadius: 16}}>
          <div style={{fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: HT.greenBright, textTransform: "uppercase", letterSpacing: "0.08em", marginBottom: 16}}>What we handle for you</div>
          <div style={{display: "flex", flexDirection: "column", gap: 14}}>
            {[
              "Apple Messages for Business registration",
              "Google Business Messages / RCS brand verification",
              "10DLC SMS registration & opt-in compliance",
              "Logo formatting for both platforms",
              "Number provisioning if you want a separate Hank line",
              "TCPA-compliant consent on every first text",
            ].map((x,i) => (
              <div key={i} style={{display: "flex", gap: 10, alignItems: "center"}}>
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><circle cx="8" cy="8" r="8" fill={HT.greenBright}/><path d="M4.5 8.2L6.8 10.5L11.5 5.8" stroke={HT.ink} strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round"/></svg>
                <span style={{fontSize: 14, opacity: 0.9}}>{x}</span>
              </div>
            ))}
          </div>
          <button style={{marginTop: 28, width: "100%", padding: "16px", background: HT.greenBright, color: HT.ink, border: "none", borderRadius: 999, fontSize: 15, fontWeight: 600, fontFamily: "inherit"}}>Start free trial →</button>
          <div style={{textAlign: "center", marginTop: 12, fontSize: 11, opacity: 0.55, fontFamily: "'JetBrains Mono', monospace", letterSpacing: "0.06em"}}>14 days · no card · cancel anytime</div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  HankSalesHero, HankSalesProblem, HankDualPlatformBoard,
  HankParityBoard, HankProDashboardBoard, HankTrustBoard,
});