<!-- card-scanner v2.10.4 -->
<!--
CHANGELOG
v2.10.4 - Refresh Clerk token at save time to fix 401 Unauthorized
v2.10.3 - Restored missing clerkSignOut and saveToFollo functions lost during rewrites
v2.10.2 - Fixed CORS error: changed API URL from usefolloapp.com to www.usefolloapp.com
v2.10.1 - Updated AI disclaimer to reference Follo by name
v2.10.0 - Switched to data-clerk-publishable-key attribute; Clerk auto-initializes via v5
v2.9.0  - Switched Clerk from v5 to v4 to fix window.Clerk not being set
v2.8.6  - Switched Clerk from v5 to v4 to fix window.Clerk not being set
v2.8.5  - Replaced onload pattern with polling for window.Clerk to fix undefined error
v2.8.4  - Removed async from Clerk script tag to fix window.Clerk undefined on load
v2.8.3  - Moved Clerk script to bottom of body so initClerk is defined before it fires
v2.8.2  - Added console logging to debug Clerk session state
v2.8.1  - Added session hydration delay to fix avatar not showing after redirect
v2.8.0  - Switched Clerk script to jsdelivr CDN for production compatibility
v2.7.0  - Switched to production Clerk instance (pk_live_); renamed to index.html
v2.6.0  - Switched to Clerk account-specific CDN to fix script load failure
v2.5.0  - Switched Clerk CDN from jsdelivr to unpkg to fix script load failure
v2.4.0  - Removed em dashes from all code comments and changelogs
v2.3.0  - Fixed Clerk CDN: pinned to v5, using onload/onerror handlers instead of script listener
v2.2.0  - Fixed Clerk script load timing; catch block now shows Sign in even if Clerk fails
v2.1.0  - Added nav bar (Scan / Contacts / My Card), Clerk auth integration, and Save to Follo button
v1.84.0 - Renamed app to Follo; updated title, h1, apple-web-app-title, calendar PRODID, and API URL
v1.83.0 - Added meta description tag for SEO
v1.82.0 - Tap to correct: removal suggestion generated client-side from description and phrase
v1.81.0 - Tap to correct pre-fills removal suggestion from server
v1.80.0 - Hallucination highlights get "tap to correct" hint labels; tapping pre-fills the correction box
v1.79.0 - Clock auto-flips AM/PM when selected hour is more than 6h from the original time
v1.78.0 - Double-check box capped at 80px with scroll; email draft given more vertical space
v1.77.0 - Fixed broken folder SVG in Browse button (path was clipped during manual entry edit)
v1.76.0 - Manual contact entry option added to upload screen for contacts without a card
v1.75.0 - Clock fixed: 12 at top, correct positions for all hours, hand aligns with selected number
v1.74.0 - Fixed clock hour selection off-by-one: corrected angle normalization and hand position formula
v1.73.0 - SMS defaults to cell phone number when available, falls back to first populated phone
v1.72.0 - Double-check items now sorted by order they appear in email; Adjust Date button correctly positioned
v1.71.0 - Email modal: Adjust date chip opens date picker; Date confirm modal: interactive clock button for time adjustment
v1.70.0 - Email draft silently regenerates when follow-up date changes (calendar picker, clock, date confirm modal)
v1.69.0 - vCard URL QR preview shows "Virtual Contact Card" instead of the raw URL
v1.68.0 - Date confirm modal shows interactive mini calendar; vCard URL QR codes now fetched and parsed via /fetch-vcf
v1.67.0 - SMS suggestion now refreshes dynamically when the follow-up reminder date or time is changed
v1.66.0 - Fixed SMS date race condition: extractDateFromNotes now returns date directly to generateTextSuggestion instead of relying on DOM read
v1.65.0 - SMS uses exact meeting type from notes (lunch vs coffee); date passed as full weekday string to prevent substitution
v1.64.0 - Subject line changed to "Name follow-up" format; SMS now waits for date extraction before generating so it uses the correct date
v1.63.0 - Hallucination highlights preserved after regeneration; shared renderEmailDraft function
v1.62.0 - Regenerate button moved to right of correction textarea; replaced with spinning arrow icon
v1.61.0 - Calendar and SMS dates update dynamically as notes are typed; em dash removed from subject line; Regenerate button made compact
v1.60.0 - Meeting date selector added above Scan card button (Yesterday / Today / Other)
v1.59.0 - Removed date and time chips from follow-up text message section
v1.58.0 - Email modal: Open in mail app and Copy draft condensed to one compact row
v1.57.0 - Both description list and inline phrase highlights shown together
v1.56.0 - Flagged phrases highlighted in soft amber directly in the email draft
v1.55.0 - Email modal shows hallucination flags: items in the draft not found in the notes
v1.54.0 - Fixed syntax error: copyEmailDraft function declaration was accidentally removed
v1.53.0 - Email modal: correction field + Regenerate button so user can fix AI assumptions
v1.52.0 - SMS suggestion uses reminder date as fallback when notes have no date
v1.51.0 - Polish notes chip and modal added with editable preview before committing
v1.50.0 - SMS: no emojis, up to 2 sentences, follow-up date included; date/time row hidden unless date detected
v1.49.0 - Include notes in reminder label gets question mark
v1.48.0 - Conversation notes placeholder simplified
v1.47.0 - Section order restructured: reminder → text message → email; SMS section added
v1.46.0 - Include notes in reminder toggle added (default: on)
v1.45.0 - Contact toggle defaults to email (or first phone) when switched on
v1.44.0 - Back button text simplified to arrow + Back
v1.43.0 - Right-side-up reminder added below subtitle
v1.42.0 - Card alignment overlay fully removed
v1.41.0 - Disclaimer updated to warn against uploading sensitive data
v1.40.0 - Conversation notes placeholder finalized
v1.39.0 - Back button on result card to re-open QR modal if wrong option chosen
v1.38.0 - Open in mail app button added to email modal using mailto: URI
v1.37.0 - Conversation notes placeholder updated with date/calendar hint
v1.36.0 - Card alignment overlay added (Option D: rect + crosshair) then removed
v1.35.0 - Invite chips: all on one row; only populated phone types shown
v1.34.0 - Edit chips reverted to text "Edit" (cleaner/more professional)
v1.33.0 - vCard and Wi-Fi QR types use no emoji; phone uses 📱
v1.32.0 - QR content preview badge in modal; Edit chips use pen emoji
v1.31.0 - phones[] array replaces single phone field; typed TEL lines in vCard
v1.30.0 - Follow-up date and time included in generated email body
v1.29.0 - Native time input replaced with custom clock UI (canvas-based)
v1.28.0 - Use a different date opens a date/time picker modal instead of scrolling
v1.27.0 - Time inference from context (coffee, dinner, etc.); time shown in confirm modal
v1.26.0 - Use a different date chip added; No thank you replaces Keep current date
v1.25.0 - Date confirmation modal before applying AI-detected follow-up date
v1.24.0 - Follow-up date/time passed to email prompt; included naturally in generated email
v1.23.0 - Phone number auto-formats on save and on initial render (US + international)
v1.22.0 - Editable fields with Edit chips; blank inputs for missing name/email/phone
v1.21.0 - Browse button uses folder SVG icon instead of emoji
v1.20.0 - Card thumbnail embedded in QR modal instead of showing through overlay
v1.19.0 - Retake photo / Browse buttons added after image selection
v1.18.0 - QR modal overlay opacity reduced so card shows through
v1.17.0 - Card image stays visible after QR scan result
v1.16.0 - Invite redesigned: two toggle rows (contact + other) with independent chip/input
v1.15.0 - Invite UI rebuilt: No invite button, labeled contact chips, team member toggle
v1.14.0 - Vertical separators between invite chip groups
v1.13.0 - Replaced Other chip with Team member; multi-select invite chips
v1.12.0 - Team member chip added to invite; Other input field
v1.11.0 - Generate email button matches primary button style
v1.10.0 - Invite chips reordered; cal button text updates based on invite selection
v1.9.0  - Calendar invite label dynamic with contact name; No invite default
v1.8.0  - Notes textarea taller; Save & connect header added
v1.7.0  - Notes moved above action buttons; Copy JSON removed
v1.6.0  - LinkedIn button styled with official logo and teal gradient
v1.5.0  - Conversation notes split into own section; follow-up email gets separate header
v1.4.0  - Background changed to Twilight Grape #2D1B4E
v1.3.0  - Background changed to Purple Reign #321A55
v1.2.0  - Dark coffee color scheme
v1.1.0  - Version tracking and AI disclaimer added
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="description" content="Scan. Follow up. Close. Never forget to follow up on a new lead again. This business card scanner app captures contacts from physical and virtual business cards, then automates sales follow-ups with smart reminders, personalized text messages, and email outreach. Turn every new contact into a qualified lead with powerful follow-up automation designed to help sales professionals book meetings, nurture relationships, and close more deals.">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Follo">
<title>Follo - Smart follow-ups, every time</title>
<link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<style>
  :root {
    --bg:        #2D1B4E;
    --surface:   #38215e;
    --surface2:  #42286c;
    --border:    #543580;
    --border2:   #644592;
    --accent:    #5A4FCF;
    --accent2:   #AFA8FF;
    --muted:     #9FA3B0;
    --text:      #F1F1F5;
    --text2:     #9FA3B0;
    --danger:    #c06060;
    --success:   #7ED7C1;
    --radius:    16px;
    --radius-sm: 10px;
  }
  * { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'DM Sans', sans-serif;
    background: var(--bg);
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem 5rem;
    color: var(--text);
    gap: 1.25rem;
  }

  /* Subtle grain texture */
  body::before {
    content: '';
    position: fixed; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none; z-index: 0; opacity: 0.6;
  }
  body > * { position: relative; z-index: 1; }

  h1 {
    font-family: 'DM Serif Display', serif;
    font-size: 30px; font-weight: 400;
    color: var(--text);
    letter-spacing: -0.3px;
  }
  .subtitle { font-size: 15px; color: var(--muted); margin-bottom: 0.25rem; }

  /* Upload */
  .upload-area {
    width: 100%; max-width: 440px;
    border: 1.5px dashed var(--border2); border-radius: 20px;
    background: var(--surface); padding: 2rem 1.5rem;
    display: flex; flex-direction: column; align-items: center; gap: 1rem;
  }
  .upload-icon {
    width: 64px; height: 64px; background: var(--surface2); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border);
  }  .upload-icon svg { width: 30px; height: 30px; }
  .upload-label { font-size: 17px; font-weight: 500; text-align: center; }
  .upload-hint { font-size: 14px; color: var(--muted); text-align: center; }

  /* Preview overlay container */
  .preview-wrap {
    width: 100%; max-width: 440px; display: none; position: relative;
  }
  .preview-wrap img {
    width: 100%; border-radius: var(--radius);
    max-height: 240px; object-fit: contain;
    border: 1px solid var(--border); background: var(--surface); display: block;
  }
  .scan-btn {
    width: 100%; max-width: 440px; padding: 17px;
    background: var(--accent); color: #F1F1F5; border: none; border-radius: var(--radius);
    font-size: 17px; font-weight: 600; cursor: pointer; display: none;
    font-family: 'DM Sans', sans-serif;
    transition: background 0.18s;
  }
  .scan-btn:hover { background: var(--accent2); color: #0C0C12; }
  .scan-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .status { font-size: 15px; color: var(--accent2); min-height: 20px; text-align: center; }
  .error-msg {
    width: 100%; max-width: 440px;
    background: #2d1a1a; color: var(--danger);
    border-radius: var(--radius-sm); padding: 13px 16px; font-size: 15px; display: none;
    border: 1px solid #4a2020;
  }

  /* Modals */
  .modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.72);
    display: flex; align-items: flex-end; justify-content: center;
    z-index: 100; padding: 1rem;
    backdrop-filter: blur(4px);
  }
  .modal-overlay.hidden { display: none; }
  .modal-sheet {
    background: var(--surface); border-radius: 22px;
    border: 1px solid var(--border);
    width: 100%; max-width: 440px;
    padding: 1.75rem; display: flex; flex-direction: column; gap: 12px;
    max-height: 90dvh; overflow-y: auto;
  }
  .modal-title { font-family: 'DM Serif Display', serif; font-size: 22px; font-weight: 400; text-align: center; }
  .modal-subtitle { font-size: 14px; color: var(--muted); text-align: center; margin-top: -4px; }

  /* Buttons */
  .modal-btn, .action-btn, .scan-btn, .reset-btn {
    font-family: 'DM Sans', sans-serif;
  }
  .modal-btn {
    width: 100%; padding: 15px; border-radius: var(--radius);
    font-size: 16px; font-weight: 600; cursor: pointer; border: none;
    min-height: 52px; transition: opacity 0.15s, background 0.15s;
  }
  .modal-btn:active { opacity: 0.8; }
  .modal-btn.primary { background: var(--accent); color: #F1F1F5; }
  .modal-btn.primary:hover { background: var(--accent2); color: #0C0C12; }
  .modal-btn.secondary { background: var(--surface2); color: var(--text); border: 1px solid var(--border); }
  .modal-btn.cancel { background: transparent; color: var(--muted); font-size: 15px; min-height: 44px; }

  /* Result card */
  .result-card {
    width: 100%; max-width: 440px; background: var(--surface);
    border: 1px solid var(--border); border-radius: 20px;
    padding: 1.5rem; display: none; gap: 0;
    flex-direction: column;
  }
  .result-header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
  .avatar {
    width: 54px; height: 54px; border-radius: 50%;
    background: var(--surface2);
    border: 1px solid var(--border2);
    display: flex; align-items: center; justify-content: center;
    font-family: 'DM Serif Display', serif;
    font-size: 18px; color: var(--accent2); flex-shrink: 0;
  }
  .result-name { font-size: 19px; font-weight: 600; }
  .result-title { font-size: 14px; color: var(--muted); margin-top: 2px; }
  .result-company { font-size: 14px; color: var(--success); margin-top: 2px; }
  .divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; }
  .field-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 9px 0; font-size: 15px; border-bottom: 1px solid var(--border);
  }
  .field-row:last-child { border-bottom: none; }
  .field-label { color: var(--muted); flex-shrink: 0; margin-right: 12px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; }
  .field-value { color: var(--text); text-align: right; word-break: break-all; flex: 1; }
  .field-value a { color: var(--accent2); text-decoration: none; }

  .edit-chip {
    flex-shrink: 0; margin-left: 8px;
    padding: 3px 9px; border-radius: 20px; font-size: 11px; font-weight: 500;
    border: 1px solid var(--border2); background: transparent;
    color: var(--muted); cursor: pointer; font-family: 'DM Sans', sans-serif;
    transition: all 0.15s;
  }
  .edit-chip:hover { border-color: var(--accent2); color: var(--accent2); }

  .field-input {
    flex: 1; background: var(--surface2); border: 1px solid var(--accent);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: 'DM Sans', sans-serif; font-size: 14px;
    padding: 6px 10px; outline: none; text-align: right;
    transition: border-color 0.15s; min-width: 0;
  }
  .field-input:focus { border-color: var(--accent2); }
  .field-input::placeholder { color: var(--muted); font-size: 13px; }

  .save-chip {
    flex-shrink: 0; margin-left: 6px;
    padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600;
    border: 1px solid var(--accent); background: var(--accent);
    color: #F1F1F5; cursor: pointer; font-family: 'DM Sans', sans-serif;
    transition: background 0.15s;
  }
  .save-chip:hover { background: var(--accent2); border-color: var(--accent2); color: #0C0C12; }

  .action-row { display: flex; gap: 10px; margin-top: 16px; }
  .action-btn {
    flex: 1; padding: 13px 10px; border-radius: var(--radius-sm);
    font-size: 15px; font-weight: 600;
    border: 1px solid var(--border); background: var(--surface2);
    cursor: pointer; color: var(--text); min-height: 50px;
    transition: background 0.15s, border-color 0.15s;
  }
  .action-btn:hover { background: var(--border); }
  .action-btn.primary { background: var(--accent); color: #F1F1F5; border-color: var(--accent); }
  .action-btn.primary:hover { background: var(--accent2); color: #0C0C12; }
  .action-btn.wide { width: 100%; margin-top: 8px; flex: unset; }
  .action-btn.highlight { background: var(--accent); color: #F1F1F5; border-color: var(--accent); }
  .action-btn.highlight:hover { background: var(--accent2); color: #0C0C12; }

  .reset-btn {
    width: 100%; max-width: 440px; padding: 14px;
    background: transparent; color: var(--muted);
    border: 1px solid var(--border); border-radius: var(--radius);
    font-size: 15px; cursor: pointer; display: none; min-height: 50px;
    transition: border-color 0.15s, color 0.15s;
  }
  .reset-btn:hover { border-color: var(--border2); color: var(--text2); }

  /* Nav bar */
  .nav {
    position: sticky; top: 0; z-index: 10; width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.875rem 1.25rem; background: var(--surface);
    border-bottom: 1px solid var(--border);
  }
  .nav-logo { font-family: 'DM Serif Display', serif; font-size: 22px; color: var(--text); text-decoration: none; }
  .nav-logo span { color: var(--accent2); }
  .nav-links { display: flex; gap: 6px; }
  .nav-link {
    padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
    text-decoration: none; color: var(--muted); border: 1px solid transparent;
    transition: all 0.15s;
  }
  .nav-link.active { color: var(--text); border-color: var(--border); background: var(--surface2); }
  .nav-link:hover:not(.active) { color: var(--text2); }
  .nav-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; cursor: pointer; border: none;
    font-family: 'DM Sans', sans-serif;
  }
  .nav-sign-in {
    padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
    background: var(--accent); color: #fff; border: none; cursor: pointer;
    font-family: 'DM Sans', sans-serif; text-decoration: none;
  }
  .save-follo-btn {
    flex: 1; padding: 13px 10px; border-radius: var(--radius-sm);
    font-size: 15px; font-weight: 600; border: none;
    background: var(--success); color: #0C1A17; cursor: pointer;
    font-family: 'DM Sans', sans-serif; min-height: 50px;
    transition: opacity 0.15s;
  }
  .save-follo-btn:hover { opacity: 0.88; }
  .save-follo-btn:disabled { opacity: 0.4; cursor: not-allowed; }

  .section-title {
    font-family: 'DM Serif Display', serif;
    font-size: 17px; font-weight: 400;
    color: var(--text2); margin: 14px 0 8px;
    display: flex; align-items: center; gap: 7px;
  }
  .section-title svg { width: 16px; height: 16px; }

  textarea.notes-field {
    width: 100%; background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text); font-family: 'DM Sans', sans-serif;
    font-size: 14px; padding: 12px; resize: vertical; min-height: 88px;
    outline: none; transition: border-color 0.15s;
    line-height: 1.55;
  }
  textarea.notes-field::placeholder { color: var(--muted); }
  textarea.notes-field:focus { border-color: var(--accent); }

  /* Calendar section */
  .cal-row {
    display: flex; gap: 10px; margin-top: 4px;
  }
  .cal-field {
    flex: 1; display: flex; flex-direction: column; gap: 5px;
  }
  .cal-label { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }
  input[type="date"], input[type="time"] {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); color: var(--text);
    font-family: 'DM Sans', sans-serif; font-size: 14px;
    padding: 10px 12px; width: 100%; outline: none;
    transition: border-color 0.15s;
    color-scheme: dark;
  }
  input[type="date"]:focus, input[type="time"]:focus { border-color: var(--accent); }

  /* Invite toggle */
  .invite-options { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
  .invite-chip {
    padding: 7px 14px; border-radius: 20px; font-size: 13px; font-weight: 500;
    border: 1px solid var(--border); background: var(--surface2);
    cursor: pointer; color: var(--text2); transition: all 0.15s;
    font-family: 'DM Sans', sans-serif;
  }
  .invite-chip.active { background: var(--accent); color: #F1F1F5; border-color: var(--accent); font-weight: 600; }
  .invite-chip:hover:not(.active):not(.dimmed) { border-color: var(--border2); }
  .invite-chip.dimmed { opacity: 0.35; cursor: not-allowed; border-style: dashed; }
  .invite-chip.dimmed:hover { border-color: var(--border); }

  /* Toggle switch */
  .toggle-row { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
  .toggle-label { font-size: 13px; color: var(--text2); flex: 1; }
  .toggle-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; }
  .toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
  .toggle-track {
    position: absolute; inset: 0; border-radius: 12px;
    background: var(--border2); cursor: pointer; transition: background 0.2s;
  }
  .toggle-track::after {
    content: ''; position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; transition: transform 0.2s;
  }
  .toggle-switch input:checked + .toggle-track { background: var(--accent); }
  .toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); }
  .team-input-wrap { margin-top: 8px; display: none; }

  /* Email draft modal */
  .email-draft {
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 14px;
    font-size: 14px; color: var(--text2); line-height: 1.6;
    white-space: pre-wrap; max-height: 280px; overflow-y: auto;
    margin-top: 6px;
  }
  .email-flag-highlight {
    background: rgba(210, 140, 40, 0.22);
    border-bottom: 1.5px solid rgba(210, 140, 40, 0.6);
    border-radius: 2px;
    color: var(--text);
    cursor: pointer;
  }
  .flag-hint-label {
    display: inline-block;
    font-size: 10px; color: #d4a96a;
    background: #2a2018; border: 1px solid #5a4020;
    border-radius: 4px; padding: 1px 5px;
    margin-left: 3px; vertical-align: middle;
    white-space: nowrap; cursor: pointer;
    font-family: 'DM Sans', sans-serif;
  }
  .generating-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: var(--accent2); padding: 4px 0;
  }
  .dot-spin {
    width: 8px; height: 8px; border-radius: 50%;
    border: 2px solid var(--accent2);
    border-top-color: transparent;
    animation: spin 0.7s linear infinite;
    display: inline-block;
  }
  @keyframes spin { to { transform: rotate(360deg); } }

  /* Toast */
  .toast {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(20px);
    background: var(--surface2); color: var(--text);
    border: 1px solid var(--border2); border-radius: 30px;
    padding: 10px 20px; font-size: 14px; opacity: 0;
    transition: opacity 0.25s, transform 0.25s;
    z-index: 200; white-space: nowrap;
  }
  .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

  /* Section separator */
  .section-sep {
    border: none; border-top: 1px solid var(--border);
    margin: 16px 0 4px;
  }

  /* Success color override for calendar button after creation */
  .cal-created { border-color: var(--success) !important; color: var(--success) !important; background: transparent !important; }
  /* AI disclaimer */
  .ai-disclaimer {
    width: 100%; max-width: 440px;
    display: flex; align-items: flex-start; gap: 8px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 11px 13px;
    font-size: 12px; color: var(--text2); line-height: 1.5;
  }
  .ai-disclaimer svg { flex-shrink: 0; margin-top: 1px; opacity: 0.6; }
  .ai-disclaimer strong { color: var(--accent2); font-weight: 600; }
</style>

<script>
function clerkFallback() {
  const authArea = document.getElementById('nav-auth-area');
  if (authArea) authArea.innerHTML = `<a href="/auth" class="nav-sign-in">Sign in</a>`;
}
</script>
<script src="https://cdn.jsdelivr.net/npm/jsqr@1.4.0/dist/jsQR.js"></script>
</head>
<body>

<nav class="nav">
  <a href="/" class="nav-logo">Follo<span>.</span></a>
  <div class="nav-links">
    <a href="/" class="nav-link active">Scan</a>
    <a href="/contacts" class="nav-link">Contacts</a>
    <a href="/profile" class="nav-link">My Card</a>
  </div>
  <div id="nav-auth-area"></div>
</nav>

<h1>Follo</h1>
<p class="subtitle">Scan a business card or QR code</p>
<p style="font-size:13px;color:var(--muted);text-align:center;margin-top:-6px;">Make sure the card is right-side up when scanned.</p>

<div class="upload-area" id="upload-area">
  <div class="upload-icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="#AFA8FF" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="3"/>
      <circle cx="8.5" cy="8.5" r="1.5"/>
      <polyline points="21 15 16 10 5 21"/>
    </svg>
  </div>
  <div class="upload-label">Select a card image</div>
  <div class="upload-hint">Business card or QR code</div>
  <div style="display:flex;gap:10px;margin-top:6px;width:100%;">
    <button class="action-btn" style="flex:1;" onclick="document.getElementById('file-camera').click()">📷 Take photo</button>
    <button class="action-btn" style="flex:1;" onclick="document.getElementById('file-library').click()">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-3px;margin-right:5px;"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>Browse
    </button>
  </div>
  <button class="action-btn" style="width:100%;margin-top:4px;color:var(--muted);border-style:dashed;" onclick="openManualEntry()">Enter contact manually</button>
  <input type="file" id="file-camera" accept="image/*" capture="environment" style="display:none">
  <input type="file" id="file-library" accept="image/*" style="display:none">
</div>

<div class="preview-wrap" id="preview-wrap">
  <img id="preview" alt="Card preview">
</div>
<div id="retake-row" style="display:none; width:100%; max-width:440px; display:none; gap:10px; margin-top: -4px;">
  <button class="action-btn" style="flex:1;" onclick="document.getElementById('file-camera').click()">📷 Retake photo</button>
  <button class="action-btn" style="flex:1;" onclick="document.getElementById('file-library').click()">
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:-3px;margin-right:5px;"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>Browse
  </button>
</div>
<p class="status" id="status"></p>

<!-- Meeting date selector -->
<div id="meeting-date-row" style="display:none; width:100%; max-width:440px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px;">
  <div style="font-size:13px; color:var(--text2); margin-bottom:8px;">When did you meet this contact?</div>
  <div style="display:flex; gap:8px; flex-wrap:wrap;">
    <button class="invite-chip" id="meet-yesterday" onclick="setMeetingDate('yesterday')">Yesterday</button>
    <button class="invite-chip active" id="meet-today" onclick="setMeetingDate('today')">Today</button>
    <button class="invite-chip" id="meet-other" onclick="setMeetingDate('other')">Other…</button>
  </div>
  <input type="date" id="meet-other-date" style="
    display:none; margin-top:8px; width:100%;
    background:var(--surface2); border:1px solid var(--border);
    border-radius:var(--radius-sm); color:var(--text);
    font-family:'DM Sans',sans-serif; font-size:14px;
    padding:10px 12px; outline:none; color-scheme:dark;
    transition:border-color 0.15s;
  " onfocus="this.style.borderColor='var(--accent2)'" onblur="this.style.borderColor='var(--border)'"
    onchange="meetingDate=this.value">
</div>

<button class="scan-btn" id="scan-btn">Scan card</button>
<div class="error-msg" id="error-msg"></div>

<!-- QR choice modal -->
<div class="modal-overlay hidden" id="qr-modal">
  <div class="modal-sheet">
    <img id="qr-modal-thumb" src="" alt="Card preview" style="
      width:100%; border-radius:10px; max-height:180px;
      object-fit:contain; background:var(--surface2);
      border:1px solid var(--border); display:none; margin-bottom:4px;
    ">
    <div id="qr-preview-badge" style="
      display:none; align-items:center; gap:8px;
      background:var(--surface2); border:1px solid var(--border);
      border-radius:var(--radius-sm); padding:10px 13px;
      font-size:13px; color:var(--text2); line-height:1.4;
    ">
      <span id="qr-preview-icon" style="font-size:18px; flex-shrink:0;"></span>
      <span id="qr-preview-text" style="word-break:break-all;"></span>
    </div>
    <div class="modal-title">QR Code Detected</div>
    <div class="modal-subtitle">How would you like to scan this card?</div>
    <button class="modal-btn primary" id="modal-use-qr">Scan QR code</button>
    <button class="modal-btn secondary" id="modal-use-text">Read printed text</button>
    <button class="modal-btn cancel" id="modal-cancel">Cancel</button>
  </div>
</div>

<!-- Email draft modal -->
<div class="modal-overlay hidden" id="email-modal">
  <div class="modal-sheet">
    <div class="modal-title">✉️ Suggested Follow-up</div>
    <div class="modal-subtitle">Generated from your conversation notes</div>
    <div class="email-draft" id="email-draft-content"></div>
    <div id="email-flags" style="display:none; background:#2a2018; border:1px solid #5a4020; border-radius:var(--radius-sm); padding:11px 13px; font-size:13px; color:#d4a96a; line-height:1.6; margin-top:4px; max-height:80px; overflow-y:auto;">
      <div style="font-weight:600; margin-bottom:5px;">Double-check these:</div>
      <ul id="email-flags-list" style="padding-left:16px; margin:0;"></ul>
    </div>
    <div id="mailto-truncate-notice" style="display:none;font-size:12px;color:var(--muted);text-align:center;padding:2px 0;">Draft is long  -  your mail app may truncate it. Use "Copy" to paste the full text.</div>
    <div style="border-top:1px solid var(--border);padding-top:12px;margin-top:2px;">
      <div style="font-size:12px;color:var(--muted);margin-bottom:6px;">Something off? Add a correction and regenerate.</div>
      <div style="display:flex;gap:8px;align-items:stretch;">
        <textarea id="email-correction-input" rows="3" style="
          flex:1;background:var(--surface2);border:1px solid var(--border);
          border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;
          font-size:14px;padding:10px 12px;resize:none;outline:none;
          transition:border-color 0.15s;line-height:1.5;
        " placeholder='e.g. "We were at a conference, not a shop"'
          onfocus="this.style.borderColor='var(--accent2)'"
          onblur="this.style.borderColor='var(--border)'"></textarea>
        <div style="display:flex;flex-direction:column;gap:6px;flex-shrink:0;">
          <button id="regenerate-btn" onclick="regenerateEmailDraft()" title="Regenerate" style="
            width:42px;flex:1;
            border-radius:var(--radius-sm);border:1px solid var(--border);
            background:var(--surface);cursor:pointer;
            display:flex;align-items:center;justify-content:center;
            transition:border-color 0.15s,background 0.15s;
          " onmouseover="this.style.borderColor='var(--accent2)';this.style.background='var(--surface2)'"
             onmouseout="this.style.borderColor='var(--border)';this.style.background='var(--surface)'">
            <svg id="regen-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent2)" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="1 4 1 10 7 10"/>
              <path d="M3.51 15a9 9 0 1 0 .49-4.5"/>
            </svg>
          </button>
          <button onclick="openEmailDatePicker()" title="Adjust date" style="
            width:42px;flex:1;
            border-radius:var(--radius-sm);border:1px solid var(--border);
            background:var(--surface);cursor:pointer;
            display:flex;flex-direction:column;align-items:center;justify-content:center;
            gap:1px;font-family:'DM Sans',sans-serif;font-size:10px;font-weight:600;
            color:var(--muted);line-height:1.2;transition:border-color 0.15s,background 0.15s;
          " onmouseover="this.style.borderColor='var(--accent2)';this.style.color='var(--accent2)';this.style.background='var(--surface2)'"
             onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--muted)';this.style.background='var(--surface)'">
            <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
            <span>Adjust</span>
            <span>Date</span>
          </button>
        </div>
      </div>
    </div>
    <div style="display:flex;gap:8px;margin-top:4px;">
      <button onclick="openInMailApp()" style="
        flex:1;padding:10px 8px;border-radius:var(--radius-sm);border:none;
        background:var(--accent);color:#F1F1F5;font-family:'DM Sans',sans-serif;
        font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s;
      " onmouseover="this.style.background='var(--accent2)';this.style.color='#0C0C12'"
         onmouseout="this.style.background='var(--accent)';this.style.color='#F1F1F5'">Open in mail app</button>
      <button onclick="copyEmailDraft()" style="
        flex:1;padding:10px 8px;border-radius:var(--radius-sm);
        border:1px solid var(--border);background:var(--surface2);
        color:var(--text);font-family:'DM Sans',sans-serif;
        font-size:13px;font-weight:600;cursor:pointer;transition:background 0.15s;
      " onmouseover="this.style.background='var(--border)'"
         onmouseout="this.style.background='var(--surface2)'">Copy draft</button>
    </div>
    <button onclick="closeEmailModal()" style="
      width:100%;padding:9px;border-radius:var(--radius-sm);border:none;
      background:transparent;color:var(--muted);font-family:'DM Sans',sans-serif;
      font-size:13px;cursor:pointer;margin-top:2px;
    ">Close</button>
  </div>
</div>

<!-- Date confirmation modal -->
<div class="modal-overlay hidden" id="date-confirm-modal">
  <div class="modal-sheet">
    <div class="modal-title">📅 Follow-up detected</div>
    <div class="modal-subtitle" id="date-confirm-subtitle">A date was mentioned in your notes</div>

    <!-- Mini calendar -->
    <div style="background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px;">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;">
        <button onclick="miniCalNav(-1)" style="background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;padding:0 6px;">‹</button>
        <div id="mini-cal-title" style="font-family:'DM Serif Display',serif;font-size:15px;color:var(--text);"></div>
        <button onclick="miniCalNav(1)" style="background:none;border:none;color:var(--text2);cursor:pointer;font-size:18px;padding:0 6px;">›</button>
      </div>
      <div style="display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;">
        <div style="font-size:10px;color:var(--muted);padding:2px 0;">Su</div>
        <div style="font-size:10px;color:var(--muted);padding:2px 0;">Mo</div>
        <div style="font-size:10px;color:var(--muted);padding:2px 0;">Tu</div>
        <div style="font-size:10px;color:var(--muted);padding:2px 0;">We</div>
        <div style="font-size:10px;color:var(--muted);padding:2px 0;">Th</div>
        <div style="font-size:10px;color:var(--muted);padding:2px 0;">Fr</div>
        <div style="font-size:10px;color:var(--muted);padding:2px 0;">Sa</div>
      </div>
      <div id="mini-cal-grid" style="display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center;margin-top:2px;"></div>
    </div>

    <div id="time-confirm-row" style="display:none;margin-top:4px;">
      <div style="font-size:12px;color:var(--muted);margin-bottom:5px;text-align:center;">Suggested time</div>
      <button id="confirm-time-btn" onclick="openClock('confirm')" style="
        width:100%;background:var(--surface2);border:1px solid var(--border);
        border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;
        font-size:14px;padding:10px 12px;text-align:center;cursor:pointer;
        transition:border-color 0.15s;
      " onmouseover="this.style.borderColor='var(--accent2)'" onmouseout="this.style.borderColor='var(--border)'">
        1:00 PM
      </button>
      <input type="hidden" id="confirm-time" value="13:00">
    </div>

    <button class="modal-btn primary" onclick="confirmFollowUpDate()">Use this date &amp; time</button>
    <button class="modal-btn cancel" onclick="document.getElementById('date-confirm-modal').classList.add('hidden')">No thank you</button>
  </div>
</div>

<!-- Polish notes modal -->
<div class="modal-overlay hidden" id="polish-modal">
  <div class="modal-sheet">
    <div class="modal-title">Polish notes</div>
    <div class="modal-subtitle">Review and adjust before committing</div>
    <textarea id="polish-textarea" style="
      width:100%; background:var(--surface2); border:1px solid var(--border);
      border-radius:var(--radius-sm); color:var(--text);
      font-family:'DM Sans',sans-serif; font-size:14px;
      padding:12px; resize:vertical; min-height:140px; outline:none;
      transition:border-color 0.15s; line-height:1.6;
    " onfocus="this.style.borderColor='var(--accent2)'"
       onblur="this.style.borderColor='var(--border)'"
       placeholder="Polishing your notes…"></textarea>
    <div id="polish-generating" class="generating-badge" style="display:none;">
      <span class="dot-spin"></span> Polishing…
    </div>
    <button class="modal-btn primary" id="polish-use-btn" onclick="usePolishedNotes()">Use these notes</button>
    <button class="modal-btn cancel" onclick="document.getElementById('polish-modal').classList.add('hidden')">Cancel</button>
  </div>
</div>

<!-- Date picker modal -->
<div class="modal-overlay hidden" id="date-picker-modal">  <div class="modal-sheet">
    <div class="modal-title">📅 Choose a date &amp; time</div>
    <div class="modal-subtitle">Set your preferred follow-up date and time</div>
    <div style="display:flex;flex-direction:column;gap:12px;margin-top:4px;">
      <div>
        <div class="cal-label" style="margin-bottom:6px;">Date</div>
        <input type="date" id="modal-cal-date" style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;font-size:15px;padding:12px;outline:none;color-scheme:dark;transition:border-color 0.15s;" onfocus="this.style.borderColor='var(--accent2)'" onblur="this.style.borderColor='var(--border)'">
      </div>
      <div>
        <div class="cal-label" style="margin-bottom:6px;">Time</div>
        <button id="modal-cal-time-btn" onclick="openClock('modal')" style="
          width:100%;background:var(--surface2);border:1px solid var(--border);
          border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;
          font-size:15px;padding:12px;text-align:left;cursor:pointer;
          transition:border-color 0.15s;
        " onmouseover="this.style.borderColor='var(--accent2)'" onmouseout="this.style.borderColor='var(--border)'">
          1:00 PM
        </button>
        <input type="hidden" id="modal-cal-time" value="13:00">
      </div>
    </div>
    <button class="modal-btn primary" onclick="applyCustomDate()" style="margin-top:4px;">Set date &amp; time</button>
    <button class="modal-btn cancel" onclick="document.getElementById('date-picker-modal').classList.add('hidden')">Cancel</button>
  </div>
</div>

<!-- Clock picker modal -->
<div class="modal-overlay hidden" id="clock-modal">
  <div class="modal-sheet" style="align-items:center;">
    <div class="modal-title" style="width:100%;text-align:center;">Set time</div>

    <!-- Digital readout -->
    <div style="display:flex;align-items:center;justify-content:center;gap:4px;margin:4px 0 12px;">
      <div id="clock-hour-display" onclick="setClockMode('hour')" style="
        font-family:'DM Serif Display',serif;font-size:42px;padding:8px 14px;
        border-radius:var(--radius-sm);cursor:pointer;background:var(--accent);color:#F1F1F5;
        min-width:72px;text-align:center;transition:background 0.15s;
      ">1</div>
      <div style="font-family:'DM Serif Display',serif;font-size:42px;color:var(--text2);">:</div>
      <div id="clock-min-display" onclick="setClockMode('minute')" style="
        font-family:'DM Serif Display',serif;font-size:42px;padding:8px 14px;
        border-radius:var(--radius-sm);cursor:pointer;background:var(--surface2);color:var(--text);
        min-width:72px;text-align:center;transition:background 0.15s;
      ">00</div>
      <div style="display:flex;flex-direction:column;gap:6px;margin-left:6px;">
        <button id="clock-am-btn" onclick="setAmPm('AM')" style="
          padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);
          font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;
          background:var(--accent);color:#F1F1F5;transition:all 0.15s;
        ">AM</button>
        <button id="clock-pm-btn" onclick="setAmPm('PM')" style="
          padding:6px 12px;border-radius:var(--radius-sm);border:1px solid var(--border);
          font-family:'DM Sans',sans-serif;font-size:13px;font-weight:600;cursor:pointer;
          background:var(--surface2);color:var(--text);transition:all 0.15s;
        ">PM</button>
      </div>
    </div>

    <!-- Clock face -->
    <div style="position:relative;width:220px;height:220px;margin:0 auto;">
      <canvas id="clock-canvas" width="220" height="220" onclick="clockCanvasClick(event)"
        style="cursor:pointer;border-radius:50%;background:var(--surface2);border:1px solid var(--border);">
      </canvas>
    </div>

    <div style="font-size:12px;color:var(--muted);margin-top:6px;text-align:center;" id="clock-mode-hint">Tap a hour</div>

    <button class="modal-btn primary" onclick="applyClockTime()" style="width:100%;margin-top:8px;">Confirm</button>
    <button class="modal-btn cancel" onclick="document.getElementById('clock-modal').classList.add('hidden')">Cancel</button>
  </div>
</div>

<!-- Manual entry modal -->
<div class="modal-overlay hidden" id="manual-entry-modal">
  <div class="modal-sheet">
    <div class="modal-title">Enter contact</div>
    <div class="modal-subtitle">Fill in what you know</div>
    <div style="display:flex;flex-direction:column;gap:10px;">
      <div>
        <div class="cal-label" style="margin-bottom:4px;">Name</div>
        <input type="text" id="manual-name" placeholder="Full name"
          style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;padding:10px 12px;outline:none;transition:border-color 0.15s;"
          onfocus="this.style.borderColor='var(--accent2)'" onblur="this.style.borderColor='var(--border)'">
      </div>
      <div>
        <div class="cal-label" style="margin-bottom:4px;">Title</div>
        <input type="text" id="manual-title" placeholder="Job title"
          style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;padding:10px 12px;outline:none;transition:border-color 0.15s;"
          onfocus="this.style.borderColor='var(--accent2)'" onblur="this.style.borderColor='var(--border)'">
      </div>
      <div>
        <div class="cal-label" style="margin-bottom:4px;">Company</div>
        <input type="text" id="manual-company" placeholder="Company or organization"
          style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;padding:10px 12px;outline:none;transition:border-color 0.15s;"
          onfocus="this.style.borderColor='var(--accent2)'" onblur="this.style.borderColor='var(--border)'">
      </div>
      <div>
        <div class="cal-label" style="margin-bottom:4px;">Phone</div>
        <input type="tel" id="manual-phone" placeholder="Phone number"
          style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;padding:10px 12px;outline:none;transition:border-color 0.15s;"
          onfocus="this.style.borderColor='var(--accent2)'" onblur="this.style.borderColor='var(--border)'">
      </div>
      <div>
        <div class="cal-label" style="margin-bottom:4px;">Email</div>
        <input type="email" id="manual-email" placeholder="Email address"
          style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;padding:10px 12px;outline:none;transition:border-color 0.15s;"
          onfocus="this.style.borderColor='var(--accent2)'" onblur="this.style.borderColor='var(--border)'">
      </div>
      <div>
        <div class="cal-label" style="margin-bottom:4px;">Website</div>
        <input type="url" id="manual-website" placeholder="www.example.com"
          style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;padding:10px 12px;outline:none;transition:border-color 0.15s;"
          onfocus="this.style.borderColor='var(--accent2)'" onblur="this.style.borderColor='var(--border)'">
      </div>
    </div>
    <button class="modal-btn primary" onclick="submitManualEntry()" style="margin-top:4px;">Continue</button>
    <button class="modal-btn cancel" onclick="document.getElementById('manual-entry-modal').classList.add('hidden')">Cancel</button>
  </div>
</div>

<!-- Result card -->
<div class="result-card" id="result-card">
  <!-- Back to QR option  -  shown only when QR was detected -->
  <div id="rescan-qr-row" style="display:none; margin-bottom:12px;">
    <button onclick="reopenQRModal()" style="
      width:100%; padding:10px; border-radius:var(--radius-sm);
      background:transparent; border:1px solid var(--border);
      color:var(--muted); font-family:'DM Sans',sans-serif;
      font-size:13px; cursor:pointer; transition:border-color 0.15s, color 0.15s;
    " onmouseover="this.style.borderColor='var(--border2)';this.style.color='var(--text2)'"
       onmouseout="this.style.borderColor='var(--border)';this.style.color='var(--muted)'">
      ← Back
    </button>
  </div>
  <div class="result-header">
    <div class="avatar" id="avatar">?</div>
    <div>
      <div class="result-name" id="res-name"></div>
      <div class="result-title" id="res-title"></div>
      <div class="result-company" id="res-company"></div>
    </div>
  </div>
  <hr class="divider">
  <div id="fields"></div>

  <!-- Notes -->
  <hr class="section-sep">
  <div class="section-title">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
    Conversation notes
  </div>
  <textarea class="notes-field" id="notes-field" placeholder="What did you talk about? Any key takeaways, promises, dates, or context… These notes will be used to generate your follow-ups, and will be saved to the contact on your phone." style="min-height: 140px;" oninput="scheduleTextSuggestion()"></textarea>
  <div style="display:flex; justify-content:flex-end; margin-top:6px;">
    <button class="edit-chip" id="polish-btn" onclick="polishNotes()" style="font-size:13px; padding:5px 14px;">Polish notes?</button>
  </div>

  <hr class="section-sep">
  <div class="section-title" style="margin-bottom: 10px;">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
    Save & connect
  </div>

  <!-- Actions -->
  <div class="action-row" style="margin-top: 0;">
    <button class="action-btn primary" onclick="downloadVCard()">Save contact</button>
    <button class="save-follo-btn" id="save-follo-btn" onclick="saveToFollo()">Save to Follo</button>
  </div>
  <button class="action-btn wide" onclick="findOnLinkedIn()" style="
    background: linear-gradient(135deg, #0ea5a0 0%, #0bc5b8 100%);
    border: none; color: #fff; font-size: 16px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-top: 10px; box-shadow: 0 4px 18px rgba(11,197,184,0.35);
    letter-spacing: 0.01em;
  ">
    <svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <rect width="24" height="24" rx="4" fill="#0A66C2"/>
      <path d="M7.5 9.5H5V19H7.5V9.5ZM6.25 8.5C7.08 8.5 7.75 7.83 7.75 7C7.75 6.17 7.08 5.5 6.25 5.5C5.42 5.5 4.75 6.17 4.75 7C4.75 7.83 5.42 8.5 6.25 8.5ZM19 19H16.5V14.1C16.5 12.6 15.9 12 14.9 12C13.9 12 13.25 12.75 13.25 14.1V19H10.75V9.5H13.15V10.6C13.55 9.85 14.45 9.25 15.65 9.25C17.65 9.25 19 10.5 19 13.1V19Z" fill="white"/>
    </svg>
    Find on LinkedIn
  </button>

  <!-- Follow-up reminder (calendar) -->
  <hr class="section-sep">
  <div class="section-title">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
    Follow-up reminder
  </div>
  <div class="cal-row">
    <div class="cal-field">
      <div class="cal-label">Date</div>
      <input type="date" id="cal-date" onchange="refreshSmsSuggestion()">
    </div>
    <div class="cal-field">
      <div class="cal-label">Time</div>
      <button id="cal-time-btn" onclick="openClock('cal')" style="
        width:100%;background:var(--surface2);border:1px solid var(--border);
        border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;
        font-size:14px;padding:10px 12px;text-align:left;cursor:pointer;
        transition:border-color 0.15s;
      " onmouseover="this.style.borderColor='var(--accent2)'" onmouseout="this.style.borderColor='var(--border)'">
        1:00 PM
      </button>
      <input type="hidden" id="cal-time" value="13:00">
    </div>
  </div>

  <div style="margin-top:14px;">
    <div class="cal-label" style="margin-bottom:12px;">Would you like to include anyone else on the reminder?</div>

    <!-- Contact toggle row -->
    <div class="toggle-row">
      <span class="toggle-label" id="contact-toggle-label">Contact</span>
      <label class="toggle-switch">
        <input type="checkbox" id="contact-toggle" onchange="onContactToggle(this.checked)">
        <span class="toggle-track"></span>
      </label>
    </div>
    <div id="contact-chips-wrap" style="display:none; margin-top:8px;">
      <div class="cal-label" style="margin-bottom:6px;">Send via</div>
      <div class="invite-options" id="contact-send-chips">
        <button class="invite-chip dimmed" id="chip-phone" data-invite="phone-0" onclick="toggleInvite('phone-0')">Phone</button>
        <button class="invite-chip" id="chip-email" data-invite="email" onclick="toggleInvite('email')">E-mail</button>
      </div>
    </div>

    <!-- Other/team member toggle row -->
    <div class="toggle-row" style="margin-top:10px;">
      <span class="toggle-label">Other</span>
      <label class="toggle-switch">
        <input type="checkbox" id="team-toggle" onchange="onTeamToggle(this.checked)">
        <span class="toggle-track"></span>
      </label>
    </div>
    <div class="team-input-wrap" id="team-input-wrap">
      <input type="text" id="invite-other-input" placeholder="Email or phone number…"
        style="width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;padding:10px 12px;outline:none;transition:border-color 0.15s;"
        onfocus="this.style.borderColor='var(--accent2)'"
        onblur="this.style.borderColor='var(--border)'">
    </div>
  </div>

  <!-- Include notes toggle -->
  <div class="toggle-row" style="margin-top:14px;">
    <span class="toggle-label">Include conversation notes in reminder?</span>
    <label class="toggle-switch">
      <input type="checkbox" id="include-notes-toggle" checked>
      <span class="toggle-track"></span>
    </label>
  </div>

  <button class="action-btn wide primary" id="cal-btn" onclick="createCalendarEvent()" style="margin-top:12px;">
    📅 Add to calendar
  </button>

  <!-- Follow-up text message -->
  <hr class="section-sep">
  <div class="section-title">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="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>
    Follow-up text message
  </div>
  <div id="sms-phone-row" style="display:none; margin-bottom:10px;">
    <div class="cal-label" style="margin-bottom:6px;">Send to</div>
    <div class="invite-options" id="sms-phone-chips"></div>
  </div>
  <div style="position:relative;">
    <textarea id="sms-body" rows="2" style="
      width:100%;background:var(--surface2);border:1px solid var(--border);
      border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;
      font-size:14px;padding:10px 12px;resize:none;outline:none;
      transition:border-color 0.15s;line-height:1.5;
    " placeholder="Generating suggestion…"
      oninput="const c=document.getElementById('sms-char-count');if(c)c.textContent=this.value.length+' / 160';"
      onfocus="this.style.borderColor='var(--accent2)'"
      onblur="this.style.borderColor='var(--border)'"></textarea>
    <div id="sms-char-count" style="font-size:11px;color:var(--muted);text-align:right;margin-top:3px;">0 / 160</div>
  </div>
  <button class="action-btn wide primary" id="sms-btn" onclick="openInMessagesApp()" style="margin-top:8px;">
    💬 Open in Messages
  </button>

  <!-- Follow-up email draft -->
  <hr class="section-sep">
  <div class="section-title">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/><polyline points="22,6 12,13 2,6"/></svg>
    Would you like a follow-up email drafted?
  </div>
  <p style="font-size:13px; color:var(--text2); margin: -4px 0 12px; line-height:1.5;">Choose a length and tone, then tap generate. Your conversation notes will be used to personalize it.</p>

  <div>
    <div class="cal-label" style="margin-bottom:7px;">Email length</div>
    <div class="invite-options">
      <button class="invite-chip" data-para="1" onclick="setParaCount(1)">1 paragraph</button>
      <button class="invite-chip" data-para="2" onclick="setParaCount(2)">2 paragraphs</button>
      <button class="invite-chip active" data-para="3" onclick="setParaCount(3)">3 paragraphs</button>
    </div>
  </div>

  <div style="margin-top:12px;">
    <div class="cal-label" style="margin-bottom:7px;">Tone</div>
    <div class="invite-options" id="tone-chips">
      <button class="invite-chip active" data-tone="professional" onclick="setTone('professional')">Professional</button>
      <button class="invite-chip" data-tone="casual" onclick="setTone('casual')">Casual</button>
      <button class="invite-chip" data-tone="investor" onclick="setTone('investor')">For an investor</button>
      <button class="invite-chip" data-tone="donor" onclick="setTone('donor')">For a donor</button>
      <button class="invite-chip" data-tone="other" onclick="setTone('other')">Other…</button>
    </div>
    <input type="text" id="tone-other-input" placeholder="Describe the tone…"
      style="display:none;margin-top:8px;width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:'DM Sans',sans-serif;font-size:14px;padding:10px 12px;outline:none;transition:border-color 0.15s;"
      oninput="selectedTone = this.value.trim() || 'other'"
      onfocus="this.style.borderColor='var(--accent2)'"
      onblur="this.style.borderColor='var(--border)'">
  </div>

  <button class="action-btn wide highlight" id="gen-email-btn" onclick="generateEmailDraft()" style="margin-top:10px;">Generate follow-up email</button>
</div>

<button class="reset-btn" id="reset-btn" onclick="reset()">Scan another card</button>

<div class="ai-disclaimer">
  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="var(--accent2)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/>
  </svg>
  <span>Follo uses AI to scan cards and automate follow-ups. Powered by <strong>Claude Haiku 4.5</strong> (Anthropic). Images are processed on-demand and not stored. Do not upload images containing sensitive or confidential information.</span>
</div>

<!-- Toast -->
<div class="toast" id="toast"></div>

<script>
const API = 'https://www.usefolloapp.com';
let clerkToken = null;

/* ─── Clerk auth ────────────────────────────────────── */
async function initClerk() {
  try {
    const clerk = window.Clerk;
    const authArea = document.getElementById('nav-auth-area');

    // Clerk is already loaded via data-clerk-publishable-key attribute
    let user = clerk.user;
    if (!user) {
      await new Promise(resolve => setTimeout(resolve, 500));
      user = clerk.user;
    }

    if (user) {
      clerkToken = await clerk.session.getToken();
      const initial = (user.firstName?.[0] || user.emailAddresses[0].emailAddress[0]).toUpperCase();
      authArea.innerHTML = `<button class="nav-avatar" onclick="clerkSignOut()">${initial}</button>`;
    } else {
      authArea.innerHTML = `<a href="/auth" class="nav-sign-in">Sign in</a>`;
    }
  } catch (e) {
    console.warn('Clerk init failed:', e);
    const authArea = document.getElementById('nav-auth-area');
    if (authArea) authArea.innerHTML = `<a href="/auth" class="nav-sign-in">Sign in</a>`;
  }
}

// initClerk is called via onload on the Clerk script tag above

function clerkSignOut() {
  if (confirm('Sign out of Follo?')) {
    window.Clerk.signOut().then(() => { window.location.href = '/auth'; });
  }
}

async function saveToFollo() {
  if (!currentData) return;

  // Refresh token at save time to avoid expiry
  try {
    clerkToken = await window.Clerk.session.getToken();
  } catch {
    clerkToken = null;
  }

  if (!clerkToken) {
    showToast('Sign in to save contacts to Follo');
    setTimeout(() => { window.location.href = '/auth'; }, 1200);
    return;
  }
  const btn = document.getElementById('save-follo-btn');
  btn.disabled = true;
  btn.textContent = 'Saving...';
  try {
    const res = await fetch(`${API}/api/contacts`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${clerkToken}` },
      body: JSON.stringify({
        ...currentData,
        notes: document.getElementById('notes-field').value.trim(),
        meetingDate: meetingDate || '',
        followUpDate: document.getElementById('cal-date').value || '',
        followUpTime: document.getElementById('cal-time').value || ''
      })
    });
    if (!res.ok) throw new Error(`Server error ${res.status}`);
    btn.textContent = 'Saved';
    btn.style.background = 'var(--accent)';
    btn.style.color = '#F1F1F5';
    showToast('Contact saved to Follo');
  } catch (err) {
    btn.disabled = false;
    btn.textContent = 'Save to Follo';
    showToast('Could not save: ' + err.message);
  }
}

let currentData = null;
let pendingQRText = null;
let pendingBase64 = null;
let pendingMediaType = null;
let selectedInvite = new Set(['none']);
let selectedParaCount = 3;
let selectedTone = 'professional';
let emailDraftText = '';
let pendingFollowUpDate = null;
let pendingFollowUpTime = null;
let pendingQRScanned = false;
let meetingDate = new Date().toISOString().split('T')[0]; // defaults to today // tracks if user arrived via a QR choice

const preview = document.getElementById('preview');
const scanBtn = document.getElementById('scan-btn');
const status = document.getElementById('status');
const resultCard = document.getElementById('result-card');
const resetBtn = document.getElementById('reset-btn');
const errorMsg = document.getElementById('error-msg');
const uploadArea = document.getElementById('upload-area');
const qrModal = document.getElementById('qr-modal');
let selectedFile = null;

// Set default date to tomorrow
function setDefaultDate() {
  const d = new Date();
  d.setDate(d.getDate() + 1);
  const iso = d.toISOString().split('T')[0];
  document.getElementById('cal-date').value = iso;
}

function setMeetingDate(val) {
  const otherInput = document.getElementById('meet-other-date');
  document.querySelectorAll('#meet-yesterday, #meet-today, #meet-other').forEach(c => c.classList.remove('active'));

  if (val === 'yesterday') {
    const d = new Date(); d.setDate(d.getDate() - 1);
    meetingDate = d.toISOString().split('T')[0];
    document.getElementById('meet-yesterday').classList.add('active');
    otherInput.style.display = 'none';
  } else if (val === 'today') {
    meetingDate = new Date().toISOString().split('T')[0];
    document.getElementById('meet-today').classList.add('active');
    otherInput.style.display = 'none';
  } else {
    document.getElementById('meet-other').classList.add('active');
    otherInput.style.display = 'block';
    otherInput.focus();
    if (otherInput.value) meetingDate = otherInput.value;
  }
}

function refreshSmsSuggestion() {
  const notes = document.getElementById('notes-field').value.trim();
  if (!notes || notes.length < 10) return;
  const calDate = document.getElementById('cal-date').value;
  if (!calDate) return;
  const d = new Date(calDate + 'T12:00:00');
  const fallbackDate = d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
  const smsBody = document.getElementById('sms-body');
  if (smsBody) smsBody.value = '';
  generateTextSuggestion(notes, fallbackDate);
  // Also silently update email draft if one exists
  if (emailDraftText) {
    silentlyRegenerateEmail(calDate, document.getElementById('cal-time').value || null);
  }
}

function updateCalBtn() {
  const calBtn = document.getElementById('cal-btn');
  if (!calBtn) return;
  const contactOn = document.getElementById('contact-toggle').checked;
  const teamOn = document.getElementById('team-toggle').checked;
  calBtn.textContent = (contactOn || teamOn)
    ? '📅 Add to calendar and send invite'
    : '📅 Add to calendar';
}

function toggleInvite(val) {
  if (selectedInvite.has(val)) {
    selectedInvite.delete(val);
  } else {
    selectedInvite.add(val);
  }
  document.querySelectorAll('.invite-chip').forEach(c => {
    if (c.dataset.invite) {
      c.classList.toggle('active', selectedInvite.has(c.dataset.invite));
    }
  });
}

function onContactToggle(checked) {
  const wrap = document.getElementById('contact-chips-wrap');
  wrap.style.display = checked ? 'block' : 'none';
  if (!checked) {
    selectedInvite.delete('phone');
    selectedInvite.delete('email');
    document.querySelectorAll('.invite-chip').forEach(c => c.classList.remove('active'));
  } else {
    // Default to email if available, otherwise first populated phone
    const hasEmail = !!(currentData && currentData.email);
    const phones = (currentData && currentData.phones) || [];
    const firstPhone = phones.find(p => p.number);
    if (hasEmail) {
      toggleInvite('email');
    } else if (firstPhone) {
      const idx = phones.indexOf(firstPhone);
      toggleInvite(`phone-${idx}`);
    }
  }
  updateCalBtn();
}

function onTeamToggle(checked) {
  selectedInvite.delete('other');
  if (checked) selectedInvite.add('other');
  const wrap = document.getElementById('team-input-wrap');
  wrap.style.display = checked ? 'block' : 'none';
  if (checked) document.getElementById('invite-other-input').focus();
  updateCalBtn();
}

function setInvite(val) {
  selectedInvite = new Set([val]);
}

function setParaCount(n) {
  selectedParaCount = n;
  document.querySelectorAll('[data-para]').forEach(c => {
    c.classList.toggle('active', parseInt(c.dataset.para) === n);
  });
}

function setTone(val) {
  selectedTone = val;
  document.querySelectorAll('[data-tone]').forEach(c => {
    c.classList.toggle('active', c.dataset.tone === val);
  });
  const otherInput = document.getElementById('tone-other-input');
  if (val === 'other') {
    otherInput.style.display = 'block';
    otherInput.focus();
    selectedTone = otherInput.value.trim() || 'other';
  } else {
    otherInput.style.display = 'none';
  }
}

document.getElementById('modal-use-qr').addEventListener('click', async () => {
  hideModal();
  if (!pendingQRText) return;
  pendingQRScanned = true;

  // Check if QR is a URL pointing to a vCard
  const isVcfUrl = /^https?:\/\/.+/i.test(pendingQRText) &&
    (pendingQRText.toLowerCase().includes('.vcf') ||
     pendingQRText.toLowerCase().includes('vcard'));

  if (isVcfUrl) {
    status.textContent = 'Fetching contact…';
    try {
      const res = await fetch(`${API}/fetch-vcf`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ url: pendingQRText })
      });
      if (!res.ok) throw new Error(`Server error ${res.status}`);
      const data = await res.json();
      if (data.error) throw new Error(data.error);
      currentData = data;
      showResult(data);
    } catch (err) {
      showError('Could not fetch vCard  -  try reading the card text instead.');
    }
  } else {
    const parsed = parseQRText(pendingQRText);
    if (parsed) { currentData = parsed; showResult(parsed); }
    else showError('Could not extract contact info from QR code.');
  }
  scanBtn.disabled = false;
});

document.getElementById('modal-use-text').addEventListener('click', async () => {
  hideModal();
  pendingQRScanned = true;
  await scanViaAPI(pendingBase64, pendingMediaType);
  scanBtn.disabled = false;
});

document.getElementById('modal-cancel').addEventListener('click', () => {
  hideModal();
  status.textContent = '';
  scanBtn.disabled = false;
});

function reopenQRModal() {
  // Clear current result and re-show the QR choice modal
  currentData = null;
  resultCard.style.display = 'none';
  document.getElementById('rescan-qr-row').style.display = 'none';
  document.getElementById('notes-field').value = '';
  document.getElementById('fields').innerHTML = '';
  showModal();
  scanBtn.disabled = true;
}

function classifyQR(text) {
  if (!text) return null;
  const t = text.trim();
  if (t.startsWith('BEGIN:VCARD')) {
    const fnLine = t.split(/\r?\n/).find(l => l.startsWith('FN:'));
    const name = fnLine ? fnLine.slice(3).trim() : '';
    return { icon: '', label: 'vCard contact' + (name ? `  -  ${name}` : '') };
  }
  if (t.startsWith('https://') || t.startsWith('http://')) {
    const isVcf = t.toLowerCase().includes('.vcf') || t.toLowerCase().includes('vcard');
    if (isVcf) return { icon: '', label: 'Virtual Contact Card' };
    const display = t.length > 55 ? t.slice(0, 55) + '…' : t;
    return { icon: '🔗', label: `Link  -  ${display}` };
  }
  if (t.startsWith('mailto:')) return { icon: '✉️', label: `Email  -  ${t.slice(7)}` };
  if (t.startsWith('tel:'))    return { icon: '📱', label: `Phone  -  ${t.slice(4)}` };
  if (t.toLowerCase().startsWith('smsto:') || t.toLowerCase().startsWith('sms:'))
    return { icon: '💬', label: `SMS  -  ${t.split(':').slice(1).join(':')}` };
  if (t.toUpperCase().startsWith('WIFI:')) {
    const ssid = (t.match(/S:([^;]+)/i) || [])[1] || '';
    return { icon: '', label: `Wi-Fi${ssid ? `  -  ${ssid}` : ''}` };
  }
  const preview = t.length > 60 ? t.slice(0, 60) + '…' : t;
  return { icon: '📄', label: `Text  -  ${preview}` };
}

function showModal() {
  const thumb = document.getElementById('qr-modal-thumb');
  if (thumb && preview.src) {
    thumb.src = preview.src;
    thumb.style.display = 'block';
  }
  const badge = document.getElementById('qr-preview-badge');
  const iconEl = document.getElementById('qr-preview-icon');
  const textEl = document.getElementById('qr-preview-text');
  const classified = classifyQR(pendingQRText);
  if (classified && badge && iconEl && textEl) {
    iconEl.textContent = classified.icon;
    iconEl.style.display = classified.icon ? 'inline' : 'none';
    textEl.textContent = classified.label;
    badge.style.display = 'flex';
  } else if (badge) {
    badge.style.display = 'none';
  }
  qrModal.classList.remove('hidden');
}
function hideModal() { qrModal.classList.add('hidden'); }

function handleFileSelect(file) {
  if (!file) return;
  selectedFile = file;
  const reader = new FileReader();
  reader.onload = e => {
    const img = new Image();
    img.onload = () => {
      preview.src = e.target.result;
      document.getElementById('preview-wrap').style.display = 'block';
      uploadArea.style.display = 'none';
      document.getElementById('retake-row').style.display = 'flex';
      document.getElementById('meeting-date-row').style.display = 'block';
      scanBtn.style.display = 'block';
      status.textContent = 'Ready to scan';
      errorMsg.style.display = 'none';
      resultCard.style.display = 'none';
      resetBtn.style.display = 'none';
    };
    img.onerror = () => { status.textContent = 'Could not load image, try again.'; };
    img.src = e.target.result;
  };
  reader.readAsDataURL(file);
}

document.getElementById('file-camera').addEventListener('change', e => handleFileSelect(e.target.files[0]));
document.getElementById('file-library').addEventListener('change', e => handleFileSelect(e.target.files[0]));

function compressImage(file, maxWidth = 1200) {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = e => {
      const img = new Image();
      img.onload = () => {
        const canvas = document.createElement('canvas');
        const scale = Math.min(1, maxWidth / img.width);
        canvas.width = img.width * scale;
        canvas.height = img.height * scale;
        canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
        const dataUrl = canvas.toDataURL('image/jpeg', 0.85);
        resolve({ base64: dataUrl.split(',')[1], mediaType: 'image/jpeg', canvas, scale });
      };
      img.src = e.target.result;
    };
    reader.readAsDataURL(file);
  });
}

function tryDecodeQR(canvas) {
  try {
    const ctx = canvas.getContext('2d');
    const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    const code = jsQR(imageData.data, imageData.width, imageData.height);
    return code ? code.data : null;
  } catch(e) { return null; }
}

function parseQRText(text) {
  const result = { name: '', title: '', company: '', email: '', phones: [], website: '' };
  if (text.startsWith('BEGIN:VCARD')) {
    text.split(/\r?\n/).forEach(line => {
      if (line.startsWith('FN:')) result.name = line.slice(3);
      else if (line.startsWith('ORG:')) result.company = line.slice(4);
      else if (line.startsWith('TITLE:')) result.title = line.slice(6);
      else if (line.startsWith('EMAIL')) result.email = line.split(':').slice(1).join(':');
      else if (line.startsWith('TEL')) {
        const number = line.split(':').slice(1).join(':');
        const typePart = (line.match(/TYPE=([^:;]+)/i) || [])[1] || '';
        const tl = typePart.toLowerCase();
        let type = 'office';
        if (tl.includes('cell') || tl.includes('mobile')) type = 'cell';
        else if (tl.includes('fax')) type = 'fax';
        else if (tl.includes('home')) type = 'home';
        result.phones.push({ type, number });
      }
      else if (line.startsWith('URL')) result.website = line.split(':').slice(1).join(':');
    });
    return result;
  }
  if (text.startsWith('http')) { result.website = text; return result; }
  return null;
}

async function scanViaAPI(base64, mediaType) {
  status.textContent = 'Scanning…';
  try {
    const res = await fetch(`${API}/read-card`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ base64, mediaType })
    });
    if (!res.ok) throw new Error(`Server error ${res.status}`);
    const data = await res.json();
    currentData = data;
    showResult(data);
  } catch (err) {
    showError('Error: ' + err.message);
  }
}

function showError(msg) {
  errorMsg.textContent = msg;
  errorMsg.style.display = 'block';
  status.textContent = '';
}

scanBtn.addEventListener('click', async () => {
  const file = selectedFile;
  if (!file) return;
  scanBtn.disabled = true;
  status.textContent = 'Compressing image…';
  errorMsg.style.display = 'none';
  document.getElementById('retake-row').style.display = 'none';
  try {
    const { base64, mediaType, canvas } = await compressImage(file);
    pendingBase64 = base64;
    pendingMediaType = mediaType;
    const qrText = tryDecodeQR(canvas);
    if (qrText) {
      pendingQRText = qrText;
      status.textContent = '';
      showModal();
      return;
    }
    await scanViaAPI(base64, mediaType);
  } catch (err) {
    showError('Error: ' + err.message);
  } finally {
    if (qrModal.classList.contains('hidden')) scanBtn.disabled = false;
  }
});

function initials(name) {
  if (!name) return '?';
  return name.trim().split(/\s+/).map(w => w[0]).slice(0, 2).join('').toUpperCase();
}

function showResult(d) {
  status.textContent = '';
  scanBtn.style.display = 'none';
  document.getElementById('preview-wrap').style.display = 'block';

  // Normalize: support legacy single `phone` string or new `phones` array
  if (!d.phones || !Array.isArray(d.phones)) {
    d.phones = d.phone ? [{ type: 'office', number: d.phone }] : [];
    delete d.phone;
  }
  // Format each phone number
  d.phones = d.phones.map(p => ({ ...p, number: formatPhone(p.number) }));

  document.getElementById('avatar').textContent = initials(d.name);
  document.getElementById('res-name').textContent = d.name || ' - ';
  document.getElementById('res-title').textContent = d.title || '';
  document.getElementById('res-company').textContent = d.company || '';

  // Build field rows
  const fieldDefs = [
    { key: 'name',  label: 'Name',  placeholder: 'Enter name…',  linkFn: null },
    { key: 'email', label: 'Email', placeholder: 'Enter email…', linkFn: v => `<a href="mailto:${v}">${v}</a>` },
  ];
  if (d.website) {
    fieldDefs.push({ key: 'website', label: 'Website', placeholder: 'Enter website…',
      linkFn: v => { const u = v.startsWith('http') ? v : 'https://'+v; return `<a href="${u}" target="_blank">${v}</a>`; }
    });
  }

  // Render standard fields
  let fieldsHTML = fieldDefs.map(f => {
    const val = (d[f.key] || '').trim();
    const id = `field-${f.key}`;
    if (val) {
      const display = f.linkFn ? f.linkFn(val) : val;
      return `<div class="field-row" id="row-${f.key}">
        <span class="field-label">${f.label}</span>
        <span class="field-value" id="${id}-display">${display}</span>
        <button class="edit-chip" onclick="editField('${f.key}')">Edit</button>
      </div>`;
    } else {
      return `<div class="field-row" id="row-${f.key}">
        <span class="field-label">${f.label}</span>
        <input class="field-input" id="${id}-input" placeholder="${f.placeholder}"
          onkeydown="if(event.key==='Enter') saveField('${f.key}')">
        <button class="save-chip" onclick="saveField('${f.key}')">Save</button>
      </div>`;
    }
  }).join('');

  // Render phone rows  -  one per entry, plus a blank "add phone" row if none
  if (d.phones.length > 0) {
    d.phones.forEach((p, i) => {
      const typeLabel = p.type.charAt(0).toUpperCase() + p.type.slice(1);
      fieldsHTML += `<div class="field-row" id="row-phone-${i}">
        <span class="field-label">${typeLabel}</span>
        <span class="field-value" id="field-phone-${i}-display">
          <a href="tel:${p.number}">${p.number}</a>
        </span>
        <button class="edit-chip" onclick="editPhoneField(${i})">Edit</button>
      </div>`;
    });
  } else {
    fieldsHTML += `<div class="field-row" id="row-phone-0">
      <span class="field-label">Phone</span>
      <input class="field-input" id="field-phone-0-input" placeholder="Enter phone…"
        onkeydown="if(event.key==='Enter') savePhoneField(0)">
      <button class="save-chip" onclick="savePhoneField(0)">Save</button>
    </div>`;
  }

  document.getElementById('fields').innerHTML = fieldsHTML;

  // Build phone chip options for invite section
  updatePhoneChips();

  // Set contact name on toggle label
  const firstName = (d.name || '').trim().split(/\s+/)[0];
  const contactLabel = document.getElementById('contact-toggle-label');
  if (contactLabel) contactLabel.textContent = firstName || 'Contact';

  // Dim email chip if no email
  const emailChip = document.getElementById('chip-email');
  if (emailChip) emailChip.classList.toggle('dimmed', !d.email);

  setDefaultDate();
  initSmsPhoneChips();
  // Show back-to-QR button only when user arrived via QR choice
  const rescanRow = document.getElementById('rescan-qr-row');
  if (rescanRow) rescanRow.style.display = pendingQRScanned ? 'block' : 'none';
  resultCard.style.display = 'flex';
  resultCard.style.flexDirection = 'column';
  resetBtn.style.display = 'block';
}

/* ─── Field editing ─────────────────────────────────── */

function formatPhone(raw) {
  // Strip everything except digits and leading +
  const hasPlus = raw.trim().startsWith('+');
  const digits = raw.replace(/\D/g, '');

  if (!digits) return raw;

  // International: starts with + or >10 digits  -  try to detect country
  if (hasPlus || digits.length > 10) {
    const full = (hasPlus ? '+' : '') + digits;

    // +1  -  USA/Canada: +1 (###) ###-####
    if (digits.startsWith('1') && digits.length === 11)
      return `+1 (${digits.slice(1,4)}) ${digits.slice(4,7)}-${digits.slice(7)}`;

    // +44  -  UK: +44 #### ######
    if (digits.startsWith('44') && digits.length === 12)
      return `+44 ${digits.slice(2,6)} ${digits.slice(6)}`;

    // +52  -  Mexico: +52 ## #### ####
    if (digits.startsWith('52') && digits.length === 12)
      return `+52 ${digits.slice(2,4)} ${digits.slice(4,8)} ${digits.slice(8)}`;

    // +33  -  France: +33 # ## ## ## ##
    if (digits.startsWith('33') && digits.length === 11)
      return `+33 ${digits[2]} ${digits.slice(3,5)} ${digits.slice(5,7)} ${digits.slice(7,9)} ${digits.slice(9)}`;

    // +49  -  Germany: +49 ### #######
    if (digits.startsWith('49') && digits.length >= 11)
      return `+49 ${digits.slice(2,5)} ${digits.slice(5)}`;

    // +34  -  Spain: +34 ### ### ###
    if (digits.startsWith('34') && digits.length === 11)
      return `+34 ${digits.slice(2,5)} ${digits.slice(5,8)} ${digits.slice(8)}`;

    // +39  -  Italy: +39 ### ### ####
    if (digits.startsWith('39') && digits.length === 12)
      return `+39 ${digits.slice(2,5)} ${digits.slice(5,8)} ${digits.slice(8)}`;

    // +55  -  Brazil: +55 (##) #####-####
    if (digits.startsWith('55') && digits.length === 13)
      return `+55 (${digits.slice(2,4)}) ${digits.slice(4,9)}-${digits.slice(9)}`;

    // +91  -  India: +91 ##### #####
    if (digits.startsWith('91') && digits.length === 12)
      return `+91 ${digits.slice(2,7)} ${digits.slice(7)}`;

    // +61  -  Australia: +61 ### ### ###
    if (digits.startsWith('61') && digits.length === 11)
      return `+61 ${digits.slice(2,5)} ${digits.slice(5,8)} ${digits.slice(8)}`;

    // +81  -  Japan: +81 ##-####-####
    if (digits.startsWith('81') && digits.length === 12)
      return `+81 ${digits.slice(2,4)}-${digits.slice(4,8)}-${digits.slice(8)}`;

    // +86  -  China: +86 ### #### ####
    if (digits.startsWith('86') && digits.length === 13)
      return `+86 ${digits.slice(2,5)} ${digits.slice(5,9)} ${digits.slice(9)}`;

    // Generic international fallback: +CC #... grouped as dialed
    return hasPlus ? `+${digits}` : digits;
  }

  // 10 digits  -  USA/Canada domestic: (###) ###-####
  if (digits.length === 10)
    return `(${digits.slice(0,3)}) ${digits.slice(3,6)}-${digits.slice(6)}`;

  // 7 digits  -  local US (no area code): ###-####
  if (digits.length === 7)
    return `${digits.slice(0,3)}-${digits.slice(3)}`;

  // Fallback  -  return as-is
  return raw;
}

/* ─── Clock picker ──────────────────────────────────── */
let clockTargetId = 'cal';
let clockHour = 1;
let clockMinute = 0;
let clockAmPm = 'PM';
let clockMode = 'hour';

function fmt12(h, m, ap) {
  return `${h}:${String(m).padStart(2,'0')} ${ap}`;
}
function to24(h, ap) {
  if (ap === 'AM') return h === 12 ? 0 : h;
  return h === 12 ? 12 : h + 12;
}
function from24(h24) {
  const ap = h24 < 12 ? 'AM' : 'PM';
  const h = h24 % 12 === 0 ? 12 : h24 % 12;
  return { h, ap };
}

let clockOriginal24h = 13; // original hour in 24h when clock was opened

function openClock(target) {
  clockTargetId = target;
  const hiddenId = target === 'cal' ? 'cal-time' : target === 'confirm' ? 'confirm-time' : 'modal-cal-time';
  const val = document.getElementById(hiddenId).value || '13:00';
  const [h24str, mstr] = val.split(':');
  const h24 = parseInt(h24str);
  const { h, ap } = from24(h24);
  clockHour = h;
  clockMinute = parseInt(mstr) || 0;
  clockAmPm = ap;
  clockOriginal24h = h24;
  clockMode = 'hour';
  document.getElementById('clock-modal').classList.remove('hidden');
  requestAnimationFrame(renderClock);
}

function setClockMode(mode) {
  clockMode = mode;
  renderClock();
}

function setAmPm(ap) {
  clockAmPm = ap;
  renderClock();
}

function clockCanvasClick(e) {
  const canvas = document.getElementById('clock-canvas');
  const rect = canvas.getBoundingClientRect();
  const cx = 110, cy = 110;
  const x = e.clientX - rect.left - cx;
  const y = e.clientY - rect.top - cy;
  // Rotate so 0° is at top (12 o'clock), increasing clockwise
  const angle = Math.atan2(y, x) + Math.PI / 2;
  const norm = ((angle % (Math.PI * 2)) + Math.PI * 2) % (Math.PI * 2);
  const deg = norm * 180 / Math.PI;

  if (clockMode === 'hour') {
    const idx = Math.round(deg / 30) % 12;
    clockHour = idx === 0 ? 12 : idx;

    // Auto-flip AM/PM if the new time is more than 6h from the original
    const newH24WithCurrent = to24(clockHour, clockAmPm);
    const diff = Math.abs(newH24WithCurrent - clockOriginal24h);
    const wrappedDiff = Math.min(diff, 24 - diff);
    if (wrappedDiff > 6) {
      clockAmPm = clockAmPm === 'AM' ? 'PM' : 'AM';
    }

    clockMode = 'minute';
  } else {
    clockMinute = Math.round(deg / 6) % 60;
  }
  renderClock();
}

function renderClock() {
  const canvas = document.getElementById('clock-canvas');
  if (!canvas) return;
  const ctx = canvas.getContext('2d');
  const cx = 110, cy = 110, r = 90;
  const style = getComputedStyle(document.documentElement);
  const accent  = style.getPropertyValue('--accent').trim()  || '#5A4FCF';
  const textCol = style.getPropertyValue('--text').trim()    || '#F1F1F5';
  const muted   = style.getPropertyValue('--muted').trim()   || '#9FA3B0';
  const surf2   = style.getPropertyValue('--surface2').trim()|| '#42286c';

  ctx.clearRect(0, 0, 220, 220);

  ctx.beginPath();
  ctx.arc(cx, cy, r, 0, Math.PI * 2);
  ctx.fillStyle = surf2;
  ctx.fill();

  for (let i = 0; i < 60; i++) {
    const ang = (i / 60) * Math.PI * 2 - Math.PI / 2;
    const isMajor = i % 5 === 0;
    ctx.beginPath();
    ctx.moveTo(cx + Math.cos(ang) * (r - (isMajor ? 12 : 7)),
               cy + Math.sin(ang) * (r - (isMajor ? 12 : 7)));
    ctx.lineTo(cx + Math.cos(ang) * (r - 2),
               cy + Math.sin(ang) * (r - 2));
    ctx.strokeStyle = isMajor ? muted : muted + '66';
    ctx.lineWidth = isMajor ? 1.5 : 0.8;
    ctx.stroke();
  }

  const items = clockMode === 'hour'
    ? [1,2,3,4,5,6,7,8,9,10,11,12]
    : [0,5,10,15,20,25,30,35,40,45,50,55];
  const selected = clockMode === 'hour' ? clockHour : clockMinute;

  items.forEach((val, i) => {
    // For hours: put 12 at top (i=0), then 1,2...11
    const drawVal = clockMode === 'hour' ? (i === 0 ? 12 : i) : val;
    const ang = (i / 12) * Math.PI * 2 - Math.PI / 2;
    const nr = r - 22;
    const nx = cx + Math.cos(ang) * nr;
    const ny = cy + Math.sin(ang) * nr;
    const isSel = drawVal === selected;
    if (isSel) {
      ctx.beginPath();
      ctx.arc(nx, ny, 14, 0, Math.PI * 2);
      ctx.fillStyle = accent;
      ctx.fill();
    }
    ctx.font = `${isSel ? 600 : 400} 13px 'DM Sans', sans-serif`;
    ctx.fillStyle = isSel ? '#F1F1F5' : textCol;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(clockMode === 'hour' ? drawVal : String(val).padStart(2,'0'), nx, ny);
  });

  const handAng = clockMode === 'hour'
    ? ((clockHour % 12) / 12) * Math.PI * 2 - Math.PI / 2  // 12→0°(top), 1→30°, etc.
    : (clockMinute / 60) * Math.PI * 2 - Math.PI / 2;
  ctx.beginPath();
  ctx.moveTo(cx, cy);
  ctx.lineTo(cx + Math.cos(handAng) * (r - 28), cy + Math.sin(handAng) * (r - 28));
  ctx.strokeStyle = accent;
  ctx.lineWidth = 2;
  ctx.lineCap = 'round';
  ctx.stroke();

  ctx.beginPath();
  ctx.arc(cx, cy, 4, 0, Math.PI * 2);
  ctx.fillStyle = accent;
  ctx.fill();

  const hd = document.getElementById('clock-hour-display');
  const md = document.getElementById('clock-min-display');
  const ab = document.getElementById('clock-am-btn');
  const pb = document.getElementById('clock-pm-btn');
  const ht = document.getElementById('clock-mode-hint');
  if (hd) { hd.textContent = clockHour; hd.style.background = clockMode === 'hour' ? accent : surf2; hd.style.color = clockMode === 'hour' ? '#F1F1F5' : textCol; }
  if (md) { md.textContent = String(clockMinute).padStart(2,'0'); md.style.background = clockMode === 'minute' ? accent : surf2; md.style.color = clockMode === 'minute' ? '#F1F1F5' : textCol; }
  if (ab) { ab.style.background = clockAmPm === 'AM' ? accent : surf2; ab.style.color = clockAmPm === 'AM' ? '#F1F1F5' : textCol; }
  if (pb) { pb.style.background = clockAmPm === 'PM' ? accent : surf2; pb.style.color = clockAmPm === 'PM' ? '#F1F1F5' : textCol; }
  if (ht) ht.textContent = clockMode === 'hour' ? 'Tap an hour' : 'Tap a minute';
}

function applyClockTime() {
  const h24 = to24(clockHour, clockAmPm);
  const val24 = `${String(h24).padStart(2,'0')}:${String(clockMinute).padStart(2,'0')}`;
  const display = fmt12(clockHour, clockMinute, clockAmPm);
  const hiddenId = clockTargetId === 'cal' ? 'cal-time' : clockTargetId === 'confirm' ? 'confirm-time' : 'modal-cal-time';
  const btnId    = clockTargetId === 'cal' ? 'cal-time-btn' : clockTargetId === 'confirm' ? 'confirm-time-btn' : 'modal-cal-time-btn';
  document.getElementById(hiddenId).value = val24;
  const btn = document.getElementById(btnId);
  if (btn) btn.textContent = display;
  document.getElementById('clock-modal').classList.add('hidden');
  if (clockTargetId === 'cal') refreshSmsSuggestion();
}

const fieldLinkFns = {
  name:    v => v,
  email:   v => `<a href="mailto:${v}">${v}</a>`,
  phone:   v => `<a href="tel:${v}">${v}</a>`,
  website: v => { const u = v.startsWith('http') ? v : 'https://'+v; return `<a href="${u}" target="_blank">${v}</a>`; }
};
const fieldPlaceholders = {
  name: 'Enter name…', email: 'Enter email…',
  phone: 'Enter phone…', website: 'Enter website…'
};

function editPhoneField(i) {
  const row = document.getElementById(`row-phone-${i}`);
  const p = currentData.phones[i];
  const typeLabel = p.type.charAt(0).toUpperCase() + p.type.slice(1);
  row.innerHTML = `
    <span class="field-label">${typeLabel}</span>
    <input class="field-input" id="field-phone-${i}-input" value="${p.number}"
      placeholder="Enter phone…" onkeydown="if(event.key==='Enter') savePhoneField(${i})">
    <button class="save-chip" onclick="savePhoneField(${i})">Save</button>`;
  document.getElementById(`field-phone-${i}-input`).focus();
}

function savePhoneField(i) {
  const input = document.getElementById(`field-phone-${i}-input`);
  if (!input) return;
  const val = formatPhone(input.value.trim());
  if (!currentData.phones[i]) currentData.phones[i] = { type: 'office', number: '' };
  currentData.phones[i].number = val;
  const p = currentData.phones[i];
  const typeLabel = p.type.charAt(0).toUpperCase() + p.type.slice(1);
  const row = document.getElementById(`row-phone-${i}`);
  if (val) {
    row.innerHTML = `
      <span class="field-label">${typeLabel}</span>
      <span class="field-value" id="field-phone-${i}-display"><a href="tel:${val}">${val}</a></span>
      <button class="edit-chip" onclick="editPhoneField(${i})">Edit</button>`;
  } else {
    row.innerHTML = `
      <span class="field-label">${typeLabel}</span>
      <input class="field-input" id="field-phone-${i}-input" placeholder="Enter phone…"
        onkeydown="if(event.key==='Enter') savePhoneField(${i})">
      <button class="save-chip" onclick="savePhoneField(${i})">Save</button>`;
  }
  updatePhoneChips();
}

function updatePhoneChips() {
  const phones = (currentData && currentData.phones) || [];
  const hasEmail = !!(currentData && currentData.email);
  const chipWrap = document.getElementById('contact-send-chips');
  if (!chipWrap) return;

  // Only include phones that actually have a number
  const populated = phones.filter(p => p.number);

  // Build phone chips  -  use type label if we have more than one number, else just "Phone"
  const useLabels = populated.length > 1;
  const phoneChips = populated.map((p, i) => {
    const idx = phones.indexOf(p);
    const label = useLabels
      ? p.type.charAt(0).toUpperCase() + p.type.slice(1)
      : 'Phone';
    return `<button class="invite-chip" data-invite="phone-${idx}" onclick="toggleInvite('phone-${idx}')">${label}</button>`;
  });

  // Always include email chip, dimmed if no email
  const emailChip = `<button class="invite-chip${hasEmail ? '' : ' dimmed'}" id="chip-email" data-invite="email" onclick="toggleInvite('email')">E-mail</button>`;

  // If no phones at all, show a dimmed generic Phone chip so the row isn't empty
  if (populated.length === 0) {
    chipWrap.innerHTML = `<button class="invite-chip dimmed" id="chip-phone" data-invite="phone-0">Phone</button>${emailChip}`;
  } else {
    chipWrap.innerHTML = phoneChips.join('') + emailChip;
  }
}

function editField(key) {
  const row = document.getElementById(`row-${key}`);
  const displayEl = document.getElementById(`field-${key}-display`);
  const currentVal = currentData[key] || '';
  // Swap display + edit chip for input + save chip
  displayEl.outerHTML = `<input class="field-input" id="field-${key}-input"
    value="${currentVal}" placeholder="${fieldPlaceholders[key] || ''}"
    onkeydown="if(event.key==='Enter') saveField('${key}')">`;
  row.querySelector('.edit-chip').outerHTML =
    `<button class="save-chip" onclick="saveField('${key}')">Save</button>`;
  document.getElementById(`field-${key}-input`).focus();
}

function saveField(key) {
  const input = document.getElementById(`field-${key}-input`);
  if (!input) return;
  let val = input.value.trim();
  if (key === 'phone' && val) val = formatPhone(val);
  currentData[key] = val;

  const row = document.getElementById(`row-${key}`);
  const linkFn = fieldLinkFns[key] || (v => v);
  if (val) {
    input.outerHTML = `<span class="field-value" id="field-${key}-display">${linkFn(val)}</span>`;
    row.querySelector('.save-chip').outerHTML =
      `<button class="edit-chip" onclick="editField('${key}')">Edit</button>`;
  } else {
    input.outerHTML = `<input class="field-input" id="field-${key}-input"
      placeholder="${fieldPlaceholders[key] || ''}"
      onkeydown="if(event.key==='Enter') saveField('${key}')">`;
  }

  // Re-evaluate chip dimming after edit
  const phoneChip = document.getElementById('chip-phone');
  const emailChip = document.getElementById('chip-email');
  if (phoneChip) phoneChip.classList.toggle('dimmed', !currentData.phone);
  if (emailChip) emailChip.classList.toggle('dimmed', !currentData.email);

  // Update header name if name was edited
  if (key === 'name') {
    document.getElementById('res-name').textContent = val || ' - ';
    document.getElementById('avatar').textContent = initials(val);
    const firstName = val.trim().split(/\s+/)[0];
    const contactLabel = document.getElementById('contact-toggle-label');
    if (contactLabel) contactLabel.textContent = firstName || 'Contact';
  }
}
/* ─── Mini calendar ─────────────────────────────────── */
let miniCalYear = null;
let miniCalMonth = null;

function renderMiniCal(year, month) {
  miniCalYear = year;
  miniCalMonth = month;

  const today = new Date();
  today.setHours(0,0,0,0);
  const todayStr = today.toISOString().split('T')[0];
  const suggestedStr = pendingFollowUpDate;

  const monthNames = ['January','February','March','April','May','June',
                      'July','August','September','October','November','December'];
  document.getElementById('mini-cal-title').textContent = `${monthNames[month]} ${year}`;

  const grid = document.getElementById('mini-cal-grid');
  grid.innerHTML = '';

  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  // Blank cells before first day
  for (let i = 0; i < firstDay; i++) {
    grid.appendChild(Object.assign(document.createElement('div'), {}));
  }

  for (let d = 1; d <= daysInMonth; d++) {
    const dateStr = `${year}-${String(month+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
    const isToday = dateStr === todayStr;
    const isSuggested = dateStr === suggestedStr;

    const cell = document.createElement('div');
    cell.textContent = d;
    cell.style.cssText = `
      padding:5px 2px;border-radius:50%;font-size:13px;cursor:pointer;
      font-family:'DM Sans',sans-serif;transition:background 0.1s;
      ${isSuggested
        ? `background:var(--accent);color:#F1F1F5;font-weight:600;`
        : isToday
          ? `color:var(--muted);font-size:11px;`
          : `color:var(--text);`}
    `;
    cell.addEventListener('click', () => {
      pendingFollowUpDate = dateStr;
      renderMiniCal(year, month);
    });
    if (!isSuggested) {
      cell.addEventListener('mouseover', () => { if(dateStr !== suggestedStr) cell.style.background = 'var(--border)'; });
      cell.addEventListener('mouseout', () => { if(dateStr !== suggestedStr) cell.style.background = ''; });
    }
    grid.appendChild(cell);
  }
}

function miniCalNav(dir) {
  let m = miniCalMonth + dir;
  let y = miniCalYear;
  if (m > 11) { m = 0; y++; }
  if (m < 0) { m = 11; y--; }
  renderMiniCal(y, m);
}

/* ─── Polish notes ──────────────────────────────────── */
async function polishNotes() {
  const raw = document.getElementById('notes-field').value.trim();
  if (!raw) { showToast('Add some notes first'); return; }

  const modal = document.getElementById('polish-modal');
  const ta = document.getElementById('polish-textarea');
  const badge = document.getElementById('polish-generating');
  const useBtn = document.getElementById('polish-use-btn');

  ta.value = '';
  ta.placeholder = 'Polishing your notes…';
  badge.style.display = 'flex';
  useBtn.disabled = true;
  modal.classList.remove('hidden');

  try {
    const res = await fetch(`${API}/polish-notes`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ notes: raw, contact: currentData })
    });
    if (!res.ok) throw new Error(`Server error ${res.status}`);
    const data = await res.json();
    ta.value = data.polished || '';
    ta.placeholder = '';
  } catch (err) {
    ta.placeholder = 'Could not polish notes. Try again.';
    showToast('Error: ' + err.message);
  } finally {
    badge.style.display = 'none';
    useBtn.disabled = false;
  }
}

function usePolishedNotes() {
  const polished = document.getElementById('polish-textarea').value.trim();
  if (!polished) return;
  document.getElementById('notes-field').value = polished;
  document.getElementById('polish-modal').classList.add('hidden');
  scheduleTextSuggestion();
  showToast('Notes updated ✓');
}

/* ─── Manual entry ──────────────────────────────────── */
function openManualEntry() {
  // Clear previous values
  ['name','title','company','phone','email','website'].forEach(f => {
    document.getElementById(`manual-${f}`).value = '';
  });
  document.getElementById('manual-entry-modal').classList.remove('hidden');
  setTimeout(() => document.getElementById('manual-name').focus(), 100);
}

function submitManualEntry() {
  const name    = document.getElementById('manual-name').value.trim();
  const title   = document.getElementById('manual-title').value.trim();
  const company = document.getElementById('manual-company').value.trim();
  const phone   = document.getElementById('manual-phone').value.trim();
  const email   = document.getElementById('manual-email').value.trim();
  const website = document.getElementById('manual-website').value.trim();

  if (!name && !phone && !email) {
    showToast('Please enter at least a name, phone, or email');
    return;
  }

  const phones = phone ? [{ type: 'cell', number: formatPhone(phone) }] : [];
  const data = { name, title, company, email, phones, website };

  document.getElementById('manual-entry-modal').classList.add('hidden');
  uploadArea.style.display = 'none';
  document.getElementById('meeting-date-row').style.display = 'block';
  setMeetingDate('today');
  currentData = data;
  showResult(data);
}

/* ─── SMS text message ─────────────────────────────── */
let textSuggestionTimer = null;

function scheduleTextSuggestion() {
  const body = document.getElementById('sms-body');
  const count = document.getElementById('sms-char-count');
  if (body && count) count.textContent = `${body.value.length} / 160`;
  clearTimeout(textSuggestionTimer);
  const notes = document.getElementById('notes-field').value.trim();
  if (!notes || notes.length < 10) return;
  textSuggestionTimer = setTimeout(async () => {
    const resolvedDate = await extractDateFromNotes(notes);
    generateTextSuggestion(notes, resolvedDate);
  }, 1500);
}

async function extractDateFromNotes(notes) {
  try {
    const res = await fetch(`${API}/extract-date`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ notes, meetingDate })
    });
    if (!res.ok) return null;
    const data = await res.json();
    if (data.followUpDate) {
      // Update the calendar date/time
      document.getElementById('cal-date').value = data.followUpDate;
      if (data.followUpTime) {
        document.getElementById('cal-time').value = data.followUpTime;
        const [h24, m] = data.followUpTime.split(':').map(Number);
        const { h, ap } = from24(h24);
        const btn = document.getElementById('cal-time-btn');
        if (btn) btn.textContent = fmt12(h, m, ap);
      }
      // Return formatted date string for SMS use
      const d = new Date(data.followUpDate + 'T12:00:00');
      return d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
    }
  } catch { /* silent */ }
  // Fall back to whatever is in the calendar date picker
  const calDate = document.getElementById('cal-date').value;
  if (calDate) {
    const d = new Date(calDate + 'T12:00:00');
    return d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
  }
  return null;
}

async function generateTextSuggestion(notes, fallbackDate) {
  const body = document.getElementById('sms-body');
  if (!body) return;
  body.placeholder = 'Generating suggestion…';

  // If no date passed in, read from cal-date as last resort
  if (!fallbackDate) {
    const calDate = document.getElementById('cal-date').value || null;
    if (calDate) {
      const d = new Date(calDate + 'T12:00:00');
      fallbackDate = d.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' });
    }
  }

  try {
    const res = await fetch(`${API}/generate-text`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ contact: currentData, notes, fallbackDate })
    });
    if (!res.ok) throw new Error(`Server error ${res.status}`);
    const data = await res.json();
    if (data.message) {
      body.value = data.message;
      const count = document.getElementById('sms-char-count');
      if (count) count.textContent = `${data.message.length} / 160`;
    }
  } catch (err) {
    body.placeholder = 'Enter your message…';
  }
}

function initSmsPhoneChips() {
  const phones = (currentData && currentData.phones) || [];
  const populated = phones.filter(p => p.number);
  const row = document.getElementById('sms-phone-row');
  const chipsEl = document.getElementById('sms-phone-chips');
  if (!row || !chipsEl) return;

  // Default to cell number if available, otherwise first populated phone
  const cellIdx = phones.findIndex(p => p.number && p.type === 'cell');
  const defaultPhone = cellIdx !== -1 ? phones[cellIdx] : populated[0];
  selectedSmsPhoneIdx = defaultPhone ? phones.indexOf(defaultPhone) : 0;

  if (populated.length <= 1) {
    row.style.display = 'none';
  } else {
    chipsEl.innerHTML = populated.map((p, i) => {
      const idx = phones.indexOf(p);
      const label = p.type.charAt(0).toUpperCase() + p.type.slice(1);
      const isDefault = idx === selectedSmsPhoneIdx;
      return `<button class="invite-chip${isDefault ? ' active' : ''}" id="sms-chip-${idx}"
        onclick="setSmsPhone(${idx})">${label}</button>`;
    }).join('');
    row.style.display = 'block';
  }
}

let selectedSmsPhoneIdx = 0;
function setSmsPhone(idx) {
  selectedSmsPhoneIdx = idx;
  document.querySelectorAll('[id^="sms-chip-"]').forEach(c => c.classList.remove('active'));
  const chip = document.getElementById(`sms-chip-${idx}`);
  if (chip) chip.classList.add('active');
}

function openInMessagesApp() {
  const body = document.getElementById('sms-body').value.trim();
  if (!body) { showToast('Please enter a message first'); return; }
  const phones = (currentData && currentData.phones) || [];
  const phone = phones[selectedSmsPhoneIdx];
  const number = phone ? phone.number.replace(/\D/g, '') : '';
  const isIOS = /iPhone|iPad|iPod/i.test(navigator.userAgent);
  const smsUri = number
    ? `sms:${number}${isIOS ? '&' : '?'}body=${encodeURIComponent(body)}`
    : `sms:?body=${encodeURIComponent(body)}`;
  window.location.href = smsUri;
}

function createCalendarEvent() {
  if (!currentData) return;
  const name = currentData.name || 'Contact';
  const title = `Follow up with ${name}`;
  const dateVal = document.getElementById('cal-date').value;
  const timeVal = document.getElementById('cal-time').value || '13:00';

  if (!dateVal) { showToast('Please pick a date first'); return; }

  // Build start/end ISO strings (1 hour duration)
  const start = new Date(`${dateVal}T${timeVal}:00`);
  const end = new Date(start.getTime() + 60 * 60 * 1000);

  const fmt = d => d.toISOString().replace(/[-:]/g, '').split('.')[0] + 'Z';
  const startStr = fmt(start);
  const endStr = fmt(end);

  const notes = document.getElementById('notes-field').value.trim();
  const includeNotes = document.getElementById('include-notes-toggle').checked;
  let description = (includeNotes && notes) ? `Conversation notes:\n${notes}` : '';
  if (emailDraftText) description += (description ? '\n\n' : '') + `Suggested follow-up email:\n${emailDraftText}`;

  // Build attendees
  const attendeeLines = [];
  const contactOn = document.getElementById('contact-toggle').checked;
  if (contactOn && selectedInvite.has('email') && currentData.email) {
    attendeeLines.push(`ATTENDEE;RSVP=TRUE:mailto:${currentData.email}`);
  }
  // Handle phone-N invite selections
  if (contactOn && currentData.phones) {
    currentData.phones.forEach((p, i) => {
      if (selectedInvite.has(`phone-${i}`) && p.number) {
        description += `\n\nInvite SMS to (${p.type}): ${p.number}`;
      }
    });
  }
  if (selectedInvite.has('other') || document.getElementById('team-toggle').checked) {
    const otherVal = document.getElementById('invite-other-input').value.trim();
    if (otherVal) {
      if (otherVal.includes('@')) {
        attendeeLines.push(`ATTENDEE;RSVP=TRUE:mailto:${otherVal}`);
      } else {
        description += `\n\nInvite SMS to: ${otherVal}`;
      }
    } else {
      showToast('Please enter a team member email or phone');
      return;
    }
  }

  const ics = [
    'BEGIN:VCALENDAR',
    'VERSION:2.0',
    'PRODID:-//Follo//EN',
    'BEGIN:VEVENT',
    `DTSTART:${startStr}`,
    `DTEND:${endStr}`,
    `SUMMARY:${title}`,
    description ? `DESCRIPTION:${description.replace(/\n/g, '\\n')}` : '',
    ...attendeeLines,
    'END:VEVENT',
    'END:VCALENDAR'
  ].filter(Boolean).join('\r\n');

  const blob = new Blob([ics], { type: 'text/calendar;charset=utf-8' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `${title.replace(/\s+/g, '_')}.ics`;
  a.click();
  URL.revokeObjectURL(url);

  // Visual feedback
  const btn = document.getElementById('cal-btn');
  btn.textContent = '✅ Calendar event saved';
  btn.classList.remove('primary');
  btn.classList.add('cal-created');
  showToast('Calendar event downloaded');
}

/* ─── Email Draft ───────────────────────────────────── */
async function generateEmailDraft() {
  const notes = document.getElementById('notes-field').value.trim();
  const btn = document.getElementById('gen-email-btn');

  if (!notes) {
    showToast('Add some conversation notes first');
    return;
  }

  btn.disabled = true;
  btn.innerHTML = '<span class="dot-spin"></span> Generating…';

  try {
    const res = await fetch(`${API}/generate-email`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        contact: currentData,
        notes,
        paragraphs: selectedParaCount,
        tone: selectedTone,
        followUpDate: document.getElementById('cal-date').value || null,
        followUpTime: document.getElementById('cal-time').value || null,
        meetingDate
      })
    });

    if (!res.ok) throw new Error(`Server error ${res.status}`);
    const data = await res.json();
    if (data.error) throw new Error(data.error);
    emailDraftText = data.email || '';

    const flags = data.flags || [];
    const phrases = data.phrases || [];
    renderEmailDraft(emailDraftText, flags, phrases);

    document.getElementById('email-modal').classList.remove('hidden');

    // If a follow-up date was detected, ask the user to confirm before setting
    if (data.followUpDate) {
      pendingFollowUpDate = data.followUpDate;
      pendingFollowUpTime = data.followUpTime || null;

      // Render mini calendar on the suggested date's month
      const [y, m] = data.followUpDate.split('-').map(Number);
      renderMiniCal(y, m - 1);

      const timeRow = document.getElementById('time-confirm-row');
      if (data.followUpTime) {
        const [h24, min] = data.followUpTime.split(':').map(Number);
        const ampm = h24 >= 12 ? 'PM' : 'AM';
        const h12 = h24 % 12 || 12;
        const display = `${h12}:${String(min).padStart(2,'0')} ${ampm}`;
        document.getElementById('confirm-time').value = data.followUpTime;
        document.getElementById('confirm-time-btn').textContent = display;
        if (timeRow) timeRow.style.display = 'block';
        document.getElementById('date-confirm-subtitle').textContent =
          'A date and time were mentioned in your notes. Does this look right?';
      } else {
        document.getElementById('confirm-time').value = '13:00';
        document.getElementById('confirm-time-btn').textContent = '1:00 PM';
        if (timeRow) timeRow.style.display = 'none';
        document.getElementById('date-confirm-subtitle').textContent =
          'A date was mentioned in your notes. Does this look right?';
      }

      setTimeout(() => {
        document.getElementById('date-confirm-modal').classList.remove('hidden');
      }, 400);
    }
  } catch (err) {
    showToast('Could not generate email: ' + err.message);
  } finally {
    btn.disabled = false;
    btn.innerHTML = 'Generate follow-up email';
  }
}

function confirmFollowUpDate() {
  if (pendingFollowUpDate) {
    const confirmedDate = pendingFollowUpDate;
    // Use time from the interactive clock button in the modal
    const confirmedTime = document.getElementById('confirm-time').value || pendingFollowUpTime || null;

    document.getElementById('cal-date').value = confirmedDate;
    if (confirmedTime) {
      document.getElementById('cal-time').value = confirmedTime;
      const [h24, m] = confirmedTime.split(':').map(Number);
      const { h, ap } = from24(h24);
      const calBtn = document.getElementById('cal-time-btn');
      if (calBtn) calBtn.textContent = fmt12(h, m, ap);
    }

    pendingFollowUpDate = null;
    pendingFollowUpTime = null;

    showToast('Follow-up date & time updated ✓');
    refreshSmsSuggestion();

    if (emailDraftText) {
      silentlyRegenerateEmail(confirmedDate, confirmedTime);
    }
  }
  document.getElementById('date-confirm-modal').classList.add('hidden');
}

async function silentlyRegenerateEmail(followUpDate, followUpTime) {
  const notes = document.getElementById('notes-field').value.trim();
  if (!notes) return;

  const draftEl = document.getElementById('email-draft-content');
  if (draftEl) draftEl.style.opacity = '0.4';

  try {
    const res = await fetch(`${API}/generate-email`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        contact: currentData,
        notes,
        paragraphs: selectedParaCount,
        tone: selectedTone,
        followUpDate: followUpDate || null,
        followUpTime: followUpTime || null,
        meetingDate
      })
    });
    if (!res.ok) return;
    const data = await res.json();
    if (data.email) {
      emailDraftText = data.email;
      renderEmailDraft(emailDraftText, data.flags || [], data.phrases || []);
    }
  } catch { /* silent  -  don't disrupt the user */ } finally {
    if (draftEl) draftEl.style.opacity = '1';
  }
}

function useDifferentDate() {
  document.getElementById('date-confirm-modal').classList.add('hidden');
  pendingFollowUpDate = null;
  pendingFollowUpTime = null;
  const currentDate = document.getElementById('cal-date').value;
  const currentTime = document.getElementById('cal-time').value || '13:00';
  document.getElementById('modal-cal-date').value = currentDate;
  document.getElementById('modal-cal-time').value = currentTime;
  const [h24, m] = currentTime.split(':').map(Number);
  const { h, ap } = from24(h24);
  const btn = document.getElementById('modal-cal-time-btn');
  if (btn) btn.textContent = fmt12(h, m, ap);
  document.getElementById('date-picker-modal').classList.remove('hidden');
}

function applyCustomDate() {
  const date = document.getElementById('modal-cal-date').value;
  const time = document.getElementById('modal-cal-time').value || '13:00';
  if (!date) { showToast('Please pick a date first'); return; }
  document.getElementById('cal-date').value = date;
  document.getElementById('cal-time').value = time;
  const [h24, m] = time.split(':').map(Number);
  const { h, ap } = from24(h24);
  const btn = document.getElementById('cal-time-btn');
  if (btn) btn.textContent = fmt12(h, m, ap);
  document.getElementById('date-picker-modal').classList.add('hidden');
  showToast('Follow-up date & time updated ✓');
  refreshSmsSuggestion();
}

function openEmailDatePicker() {
  const currentDate = document.getElementById('cal-date').value;
  const currentTime = document.getElementById('cal-time').value || '13:00';
  document.getElementById('modal-cal-date').value = currentDate;
  document.getElementById('modal-cal-time').value = currentTime;
  const [h24, m] = currentTime.split(':').map(Number);
  const { h, ap } = from24(h24);
  const btn = document.getElementById('modal-cal-time-btn');
  if (btn) btn.textContent = fmt12(h, m, ap);
  document.getElementById('date-picker-modal').classList.remove('hidden');
}

function openInMailApp() {
  if (!emailDraftText) return;
  const to = (currentData && currentData.email) ? encodeURIComponent(currentData.email) : '';
  const name = (currentData && currentData.name) ? currentData.name : '';
  const subject = encodeURIComponent(name ? `${name} follow-up` : 'Follow-up');

  // mailto body is limited to ~1900 chars to stay safe across OS/browsers
  const LIMIT = 1900;
  let body = emailDraftText;
  let truncated = false;
  if (body.length > LIMIT) {
    body = body.slice(0, LIMIT) + '\n\n[continued...]';
    truncated = true;
  }

  const notice = document.getElementById('mailto-truncate-notice');
  if (notice) notice.style.display = truncated ? 'block' : 'none';

  const mailto = `mailto:${to}?subject=${subject}&body=${encodeURIComponent(body)}`;
  window.location.href = mailto;
}

function renderEmailDraft(text, flags, phrases) {
  const draftEl = document.getElementById('email-draft-content');
  const flagsEl = document.getElementById('email-flags');
  const flagsList = document.getElementById('email-flags-list');
  if (!draftEl) return;

  if (flags && flags.length > 0) {
    const paired = flags.map((f, i) => ({ flag: f, phrase: (phrases || [])[i] || '' }));
    paired.sort((a, b) => {
      const posA = a.phrase ? text.toLowerCase().indexOf(a.phrase.toLowerCase()) : Infinity;
      const posB = b.phrase ? text.toLowerCase().indexOf(b.phrase.toLowerCase()) : Infinity;
      return posA - posB;
    });
    const sortedFlags = paired.map(p => p.flag);
    const sortedPhrases = paired.map(p => p.phrase);

    if (flagsList) flagsList.innerHTML = sortedFlags.map(f => `<li>${f}</li>`).join('');
    if (flagsEl) flagsEl.style.display = 'block';

    let html = text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
    sortedPhrases.forEach((phrase, i) => {
      if (!phrase) return;
      const escaped = phrase.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      const hint = encodeURIComponent(removalSuggestion(sortedFlags[i] || '', phrase));
      html = html.replace(
        new RegExp(`(${escaped})`, 'gi'),
        `<mark class="email-flag-highlight" data-hint="${hint}" onclick="tapFlagHint(this)">$1</mark><span class="flag-hint-label" onclick="tapFlagHint(this.previousElementSibling)">tap to correct</span>`
      );
    });
    draftEl.innerHTML = html.replace(/\n/g, '<br>');
  } else {
    draftEl.textContent = text;
    if (flagsEl) flagsEl.style.display = 'none';
    if (flagsList) flagsList.innerHTML = '';
  }
}

function removalSuggestion(description, phrase) {
  if (!phrase) return description;
  const d = description.toLowerCase();
  // "Notes say X but email says Y" pattern → "Change Y to X"
  const changeMatch = description.match(/notes say (.+?) but email says (.+)/i) ||
                      description.match(/should be (.+?) not (.+)/i);
  if (changeMatch) return `Change "${changeMatch[2].trim()}" to "${changeMatch[1].trim()}"`;
  // "X  -  not in your notes" / "mentions X" / "references X" → "Remove [phrase]"
  return `Remove "${phrase}"`;
}

function tapFlagHint(markEl) {
  const hint = decodeURIComponent(markEl.getAttribute('data-hint') || '');
  const input = document.getElementById('email-correction-input');
  if (!input) return;
  input.value = hint;
  input.focus();
  input.setSelectionRange(0, input.value.length);
}

async function regenerateEmailDraft() {
  const correction = document.getElementById('email-correction-input').value.trim();
  if (!correction) { showToast('Add a correction first'); return; }

  const btn = document.getElementById('regenerate-btn');
  const icon = document.getElementById('regen-icon');
  btn.disabled = true;
  if (icon) icon.style.animation = 'spin 0.7s linear infinite';

  const draftEl = document.getElementById('email-draft-content');
  const previousDraft = emailDraftText;
  draftEl.style.opacity = '0.4';

  try {
    const res = await fetch(`${API}/generate-email`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        contact: currentData,
        notes: document.getElementById('notes-field').value.trim(),
        paragraphs: selectedParaCount,
        tone: selectedTone,
        followUpDate: document.getElementById('cal-date').value || null,
        followUpTime: document.getElementById('cal-time').value || null,
        correction,
        meetingDate
      })
    });
    if (!res.ok) throw new Error(`Server error ${res.status}`);
    const data = await res.json();
    if (data.error) throw new Error(data.error);
    emailDraftText = data.email || '';
    renderEmailDraft(emailDraftText, data.flags || [], data.phrases || []);
    document.getElementById('email-correction-input').value = '';
  } catch (err) {
    emailDraftText = previousDraft;
    showToast('Could not regenerate: ' + err.message);
  } finally {
    draftEl.style.opacity = '1';
    btn.disabled = false;
    const icon = document.getElementById('regen-icon');
    if (icon) icon.style.animation = '';
  }
}

function closeEmailModal() {
  document.getElementById('email-modal').classList.add('hidden');
  document.getElementById('email-correction-input').value = '';
  const flagsEl = document.getElementById('email-flags');
  if (flagsEl) flagsEl.style.display = 'none';
  const flagsList = document.getElementById('email-flags-list');
  if (flagsList) flagsList.innerHTML = '';
}

function copyEmailDraft() {
  if (!emailDraftText) return;
  navigator.clipboard.writeText(emailDraftText);
  showToast('Email draft copied!');
}

/* ─── Misc ──────────────────────────────────────────── */
function findOnLinkedIn() {
  if (!currentData) return;
  const query = [currentData.name, currentData.company].filter(Boolean).join(' ');
  window.open('https://www.linkedin.com/search/results/people/?keywords=' + encodeURIComponent(query), '_blank');
}

function copyContact() {
  if (!currentData) return;
  navigator.clipboard.writeText(JSON.stringify(currentData, null, 2));
  showToast('Copied to clipboard');
}

function downloadVCard() {
  if (!currentData) return;
  const d = currentData;
  const notes = document.getElementById('notes-field').value.trim();

  const typeMap = { office: 'WORK,VOICE', cell: 'CELL', fax: 'FAX', 'toll-free': 'WORK,VOICE', home: 'HOME,VOICE', other: 'VOICE' };
  const phoneLines = (d.phones || [])
    .filter(p => p.number)
    .map(p => `TEL;TYPE=${typeMap[p.type] || 'VOICE'}:${p.number}`);

  const lines = [
    'BEGIN:VCARD', 'VERSION:3.0',
    `FN:${d.name || ''}`,
    d.title ? `TITLE:${d.title}` : '',
    d.company ? `ORG:${d.company}` : '',
    d.email ? `EMAIL:${d.email}` : '',
    ...phoneLines,
    d.website ? `URL:${d.website.startsWith('http') ? d.website : 'https://' + d.website}` : '',
    notes ? `NOTE:${notes.replace(/\n/g, '\\n')}` : '',
    'END:VCARD'
  ].filter(Boolean).join('\r\n');

  const blob = new Blob([lines], { type: 'text/vcard' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url; a.download = `${(d.name || 'contact').replace(/\s+/g, '_')}.vcf`;
  a.click(); URL.revokeObjectURL(url);
}

function reset() {
  selectedFile = null; pendingQRText = null; pendingBase64 = null; pendingMediaType = null;
  emailDraftText = '';
  pendingFollowUpDate = null;
  pendingFollowUpTime = null;
  pendingQRScanned = false;
  selectedParaCount = 3;
  selectedTone = 'professional';
  document.querySelectorAll('[data-para]').forEach(c => {
    c.classList.toggle('active', parseInt(c.dataset.para) === 3);
  });
  document.querySelectorAll('[data-tone]').forEach(c => {
    c.classList.toggle('active', c.dataset.tone === 'professional');
  });
  const otherInput = document.getElementById('tone-other-input');
  otherInput.style.display = 'none';
  otherInput.value = '';
  selectedInvite = new Set(['none']);
  document.querySelectorAll('.invite-chip').forEach(c => {
    c.classList.remove('active', 'dimmed');
  });
  const contactToggle = document.getElementById('contact-toggle');
  if (contactToggle) { contactToggle.checked = false; }
  document.getElementById('contact-chips-wrap').style.display = 'none';
  const teamToggle = document.getElementById('team-toggle');
  if (teamToggle) { teamToggle.checked = false; }
  document.getElementById('team-input-wrap').style.display = 'none';
  document.getElementById('invite-other-input').value = '';
  const includeNotesToggle = document.getElementById('include-notes-toggle');
  if (includeNotesToggle) includeNotesToggle.checked = true;
  meetingDate = new Date().toISOString().split('T')[0];
  document.getElementById('meeting-date-row').style.display = 'none';
  setMeetingDate('today');
  ['name','title','company','phone','email','website'].forEach(f => {
    const el = document.getElementById(`manual-${f}`);
    if (el) el.value = '';
  });
  document.getElementById('file-camera').value = '';
  document.getElementById('file-library').value = '';
  document.getElementById('notes-field').value = '';
  clearTimeout(textSuggestionTimer);
  const smsBody = document.getElementById('sms-body');
  if (smsBody) { smsBody.value = ''; smsBody.placeholder = 'Generating suggestion…'; }
  const smsCount = document.getElementById('sms-char-count');
  if (smsCount) smsCount.textContent = '0 / 160';
  const smsPhoneRow = document.getElementById('sms-phone-row');
  if (smsPhoneRow) smsPhoneRow.style.display = 'none';
  selectedSmsPhoneIdx = 0;
  document.getElementById('gen-email-btn').innerHTML = 'Generate follow-up email';
  document.getElementById('gen-email-btn').disabled = false;
  const correctionInput = document.getElementById('email-correction-input');
  if (correctionInput) correctionInput.value = '';
  const calBtn = document.getElementById('cal-btn');
  calBtn.textContent = '📅 Add to calendar';
  calBtn.classList.add('primary'); calBtn.classList.remove('cal-created');
  document.getElementById('preview-wrap').style.display = 'none';
  document.getElementById('retake-row').style.display = 'none';
  uploadArea.style.display = 'flex';
  scanBtn.style.display = 'none';
  resultCard.style.display = 'none';
  resetBtn.style.display = 'none';
  errorMsg.style.display = 'none';
  status.textContent = '';
  currentData = null;
  const saveFolloBtn = document.getElementById('save-follo-btn');
  if (saveFolloBtn) {
    saveFolloBtn.disabled = false;
    saveFolloBtn.textContent = 'Save to Follo';
    saveFolloBtn.style.background = '';
    saveFolloBtn.style.color = '';
  }
}

function showToast(msg, duration = 2200) {
  const t = document.getElementById('toast');
  t.textContent = msg;
  t.classList.add('show');
  setTimeout(() => t.classList.remove('show'), duration);
}
</script>
<script
  data-clerk-publishable-key="pk_live_Y2xlcmsudXNlZm9sbG9hcHAuY29tJA"
  src="https://cdn.jsdelivr.net/npm/@clerk/clerk-js@5/dist/clerk.browser.js"
  onload="window.Clerk.load().then(initClerk)"
></script>
</body>
</html>