<!--
╔══════════════════════════════════════════════════════════════════════════════╗
║         TITLEVERIFIED — APP CONSTITUTION V1.0                              ║
║         TV 1-30 | Governs all builds. Read before changing anything.       ║
╚══════════════════════════════════════════════════════════════════════════════╝

CONSTITUTION SUMMARY — Full document: TitleVerified-Constitution-V1.docx

PART A — INTAKE INTEGRITY
  Rule 01: Client Information Accuracy — Client owns their data accuracy. Wrong data in = wrong result out.
  Rule 02: Requester Type Declaration — Owner / Buyer / Professional. Defines scope and access.

PART B — SERVICE STANDARDS
  Rule 03: Source Integrity — Documents from official authorities only. Never from client.
  Rule 04: GPS Accuracy — Must physically match title description. Never estimate. Never hide.
  Rule 05: Chain of Custody — Traceable path for every document. Break = void.
  Rule 06: Official Seal Standard — CTC must have RD seal before dispatch. Photo proof mandatory.
  Rule 07: Inspector Safety First — Safety overrides completion. Hostile = stop immediately.
  Rule 08: Community Report Mandatory — Min 2 neighbors + 1 barangay official. Always.
  Rule 09: Photo Standard — Raw Land 12 | Exterior 16 | Interior+Ext 28. GPS-tagged. No filters.
  Rule 10: Licensed Partners Only — PRC-licensed GE. IBP lawyer. Verified annually.
  Rule 11: Variance Must Be Reported — Never hide. Never minimize. Always flag.
  Rule 12: No Legal Advice Ever — Compile only. Client uses own lawyer. No exceptions.
  Rule 13: DAR/DENR for Agricultural Land — Clearances before any listing.
  Rule 14: OFW Buyer = Exterior Only Always — No SPA = no interior. Ever.

PART C — REPORTING STANDARDS
  Rule 15: No Report Without Approval — L1/L1b → L2 → L3/L4 → Client. Always.
  Rule 16: Standard Disclaimer on Everything — Cannot be removed or shortened.
  Rule 17: Payment Before Release — 50% down starts. 50% balance releases. No exceptions.
  Rule 18: Referral Integrity — Triggered at FULLY PAID only. Never early.
  Rule 19: Conflict of Interest — Declare and recuse. Family = different team.
  Rule 20: Report Integrity — Approved report cannot be altered. New request = new report.

PART D — OPERATIONAL INTEGRITY
  Rule 21: No Unauthorized Subcontracting — Accredited staff only. Proxy = termination.
  Rule 22: Data Retention — 5 years client data. 7 years financial. Secure deletion after.
  Rule 23: Report Validity — 6 months from issue. Marketplace listings expire at 12 months.
  Rule 24: Escalation Protocol — Fraud/dispute → L1 → L2 → L3 → L4 → Client. 2 hours max.
  Rule 25: Right to Refuse — False info / safety risk / active litigation = refuse + document.

PART E — MARKETPLACE STANDARDS (VerifiedListed.ph)
  E1: Listing Eligibility — VERIFIED + MATCHES TITLE + no hostile flag + owner requester.
  E2: Listing Data Standards — Photos from inspection only. GPS from inspection. Expires 12mo.
  E3: Seller Verification — Verified owner or authenticated SPA. L2a-accredited brokers only.
  E4: Buyer Protection — Full report visible before purchase. Own lawyer always advised.
  E5: Listing Integrity — Status updates within 48hrs. SOLD within 24hrs. Records permanent.
  E6: Broker Standards — L2a accreditation required. Signed agreement. Annual review.
  E7: Data Continuity — Supabase feeds VerifiedListed directly. No manual re-entry. Forever.

PART F — BUILD STANDARDS (SMP Protocol)
  SMP1: Production is Sacred — TV1-STABLE-CHECKPOINT is SMP1. Never touch directly.
  SMP2: Fix in Isolation — Build in TV1-XX-dev files. Test mobile before merging.
  SMP3: Deploy When Tested — Android phone + tablet + all roles tested. Then deploy.
  MOBILE RULES: No emojis in JSX. No single Babel script over 100KB. No &amp; in JSX.

PART G — USER EXPERIENCE STANDARDS
  G1: Accessibility for All Ages — Min 14px font. Light background. 44px touch targets.
  G2: Role-Based Dashboard Clarity — Each role sees only what they need. Immediately.
  G3: Loading Performance — Public site 3-4sec. Dashboard 5-8sec. No blank white screen.

PART H — SECURITY STANDARDS
  H1: Two-Factor Authentication — TV2: 2FA mandatory. TV1: PIN per role minimum.
  H2: Session Timeout — 15 minutes inactivity = automatic logout. All roles. All devices.
  H3: PIN Security — Never plain text. Lock after 3 fails. L4 unlocks. Change default before production.
  H4: Settings = Owner (L4) Only — App configuration. L4 exclusively. L3 and L4 must be different people.
  H5: Data Protection — Supabase AES-256. TLS 1.3. RLS per role. Deactivate on termination.

NEVER CHANGE WITHOUT EXPLICIT INSTRUCTION:
  GCash: 09171074906 · Edgardo Castro
  Status flow: ON QUEUE → PAID → IN PROCESS → FOR PAYMENT → FULLY PAID → SHIPPED → DELIVERED
  Referral: P100 at FULLY PAID only
  Base pricing: Title P2,500 · CTC P1,500
  Interior access: Owner SPA required always
  L1/L1b/L1c/L1d: Never see fee amounts
  Settings: L4 only
  Marketplace brand: VerifiedListed.ph — LOCKED

CONSTITUTION VERSION: V1.0 | March 2026
FULL DOCUMENT: TitleVerified-Constitution-V1.docx
══════════════════════════════════════════════════════════════════════════════
-->
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+CiAgPHJlY3Qgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHJ4PSIxMTAiIHJ5PSIxMTAiIGZpbGw9IiMxQzE5MTciLz4KICA8cmVjdCB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgcng9IjExMCIgcnk9IjExMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg4NjBCIiBzdHJva2Utd2lkdGg9IjEwIi8+CiAgPHRleHQgeD0iNjgiIHk9IjM0MCIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtd2VpZ2h0PSI3MDAiIGZvbnQtc2l6ZT0iMjU1IiBmaWxsPSIjRkZGRkZGIj5UPC90ZXh0PgogIDxwb2x5bGluZSBwb2ludHM9IjI1MiwxNzUgMzI1LDM0NSA0NjUsMTM1IiBmaWxsPSJub25lIiBzdHJva2U9IiNENEE4NDMiIHN0cm9rZS13aWR0aD0iMzYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=">
<link rel="apple-touch-icon" href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MTIiIGhlaWdodD0iNTEyIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+CiAgPHJlY3Qgd2lkdGg9IjUxMiIgaGVpZ2h0PSI1MTIiIHJ4PSIxMTAiIHJ5PSIxMTAiIGZpbGw9IiMxQzE5MTciLz4KICA8cmVjdCB3aWR0aD0iNTEyIiBoZWlnaHQ9IjUxMiIgcng9IjExMCIgcnk9IjExMCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjQjg4NjBCIiBzdHJva2Utd2lkdGg9IjEwIi8+CiAgPHRleHQgeD0iNjgiIHk9IjM0MCIgZm9udC1mYW1pbHk9Ikdlb3JnaWEsc2VyaWYiIGZvbnQtd2VpZ2h0PSI3MDAiIGZvbnQtc2l6ZT0iMjU1IiBmaWxsPSIjRkZGRkZGIj5UPC90ZXh0PgogIDxwb2x5bGluZSBwb2ludHM9IjI1MiwxNzUgMzI1LDM0NSA0NjUsMTM1IiBmaWxsPSJub25lIiBzdHJva2U9IiNENEE4NDMiIHN0cm9rZS13aWR0aD0iMzYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4=">
<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="TitleVerified">
<meta name="theme-color" content="#1C1917">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TitleVerified — Official Property Title Verification, Pangasinan</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.2/babel.min.js"></script>
<script>const _cw=console.warn;console.warn=(...a)=>{if(a[0]&&a[0].includes&&a[0].includes('Babel'))return;_cw(...a);};</script>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:wght@300;400;500;600;700&family=DM+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'DM Sans',sans-serif; background:#FAF7F2; color:#1C1917; overflow-x:hidden; }
#root { min-height:100vh; }
@keyframes fadeUp { from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)} }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.5} }
@keyframes slideIn { from{opacity:0;transform:translateX(120px)}to{opacity:1;transform:translateX(0)} }
@keyframes fadeOut { from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(120px)} }
.fade-up{animation:fadeUp 0.6s ease both}
.fade-up-1{animation:fadeUp 0.6s 0.1s ease both}
.fade-up-2{animation:fadeUp 0.6s 0.2s ease both}
.fade-up-3{animation:fadeUp 0.6s 0.3s ease both}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#F0EAE0}
::-webkit-scrollbar-thumb{background:#B8860B;border-radius:3px}
.nav-link{transition:color 0.2s}
.nav-link:hover{color:#D4A843 !important}
.hover-card{transition:all 0.2s;cursor:pointer}
.hover-card:hover{transform:translateY(-2px);box-shadow:0 16px 48px rgba(28,25,23,0.1);border-color:#B8860B !important}
.btn-gold:hover{background:#D4A843 !important;transform:translateY(-1px)}
.btn-outline:hover{border-color:#D4A843 !important;color:#D4A843 !important}
.btn-dark:hover{background:#44312A !important}
.req-row:hover{box-shadow:0 4px 16px rgba(28,25,23,0.08) !important}
.tab-btn:hover{background:#44312A !important;color:#FFFFFF !important}
.tg-toast{animation:slideIn 0.4s ease both}
.tg-toast.hiding{animation:fadeOut 0.4s ease both}
.copy-btn:hover{opacity:0.85}
.ref-row:hover{background:#FFFBEB !important}
</style>

<style>
#tvload{position:fixed;inset:0;background:#1C1917;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;}
#tvload h1{font-family:Georgia,serif;font-size:42px;font-weight:700;color:#fff;margin-bottom:6px;}
#tvload span{color:#D4A843;}
#tvload p{font-family:monospace;font-size:11px;color:#B8860B;letter-spacing:0.2em;margin-bottom:40px;}
#tvload .sp{width:36px;height:36px;border:2px solid rgba(184,134,11,0.2);border-top-color:#B8860B;border-radius:50%;animation:sp 0.8s linear infinite;}
@keyframes sp{to{transform:rotate(360deg);}}
#root{display:none;}
</style>
<script>
window.tvReady=function(){
  var l=document.getElementById("tvload"),r=document.getElementById("root");
  if(l){l.style.opacity="0";setTimeout(function(){l.style.display="none";},400);}
  if(r){r.style.display="block";}
};
</script>
</head>
<body>
<div id="tvload"><h1>Title<span>Verified</span></h1><p>VERIFIED BEFORE LISTED.</p><div class="sp"></div></div>
<div id="root"></div>
<script type="text/babel">

const { useState, useEffect } = React;

const C = {
  ink:"#1C1917", brown:"#44312A", gold:"#B8860B", gold2:"#D4A843",
  cream:"#FAF7F2", warm:"#F0EAE0", white:"#FFFFFF",
  gray:"#78716C", lgray:"#E7E0D8", green:"#14532D", green2:"#16A34A",
  red:"#7F1D1D", blue:"#1E3A5F", purple:"#7C3AED", fb:"#1877F2"
};

const PROVINCES = ["Pangasinan","La Union","Baguio","Ilocos Norte","Ilocos Sur"];

const STATUS_FLOW = ["ON QUEUE","PAID","IN PROCESS","FOR PAYMENT","FULLY PAID","SHIPPED","DELIVERED"];

const STATUS_CFG = {
  "ON QUEUE":   {bg:"#FEF3C7",text:"#92400E",dot:"#F59E0B"},
  "PAID":       {bg:"#D1FAE5",text:"#065F46",dot:"#10B981"},
  "IN PROCESS": {bg:"#DBEAFE",text:"#1E40AF",dot:"#3B82F6"},
  "FOR PAYMENT":{bg:"#FEE2E2",text:"#991B1B",dot:"#F87171"},
  "FULLY PAID": {bg:"#D1FAE5",text:"#14532D",dot:"#16A34A"},
  "SHIPPED":    {bg:"#EDE9FE",text:"#4C1D95",dot:"#8B5CF6"},
  "DELIVERED":  {bg:"#F0FDF4",text:"#14532D",dot:"#22C55E"},
};

const STATUS_BTN = {
  "ON QUEUE":   {label:"Mark Paid",            color:"#10B981",next:"PAID"},
  "PAID":       {label:"Start Processing",     color:"#3B82F6",next:"IN PROCESS"},
  "IN PROCESS": {label:"Request Balance",      color:"#F87171",next:"FOR PAYMENT"},
  "FOR PAYMENT":{label:"Confirm Full Payment", color:"#16A34A",next:"FULLY PAID"},
  "FULLY PAID": {label:"Mark Shipped",         color:"#8B5CF6",next:"SHIPPED"},
  "SHIPPED":    {label:"Confirm Delivered",    color:"#22C55E",next:"DELIVERED"},
  "DELIVERED":  {label:"View",                 color:"#B8860B",next:null},
};

const TG_MSGS = {
  "ON QUEUE":   (r) => "[doc] *NEW REQUEST — " + r.id + "*\n[user] " + r.client + "\n[home] " + r.property + "\n[box] " + r.service + "\n[money] Fee: ₱" + r.fee.toLocaleString() + (r.refCode ? "\n[link] Referred by: " + r.refName + " (" + r.refCode + ")" : "") + "\n\n->️ Awaiting 50% downpayment via GCash.",
  "PAID":       (r) => "[OK] *DOWNPAYMENT RECEIVED — " + r.id + "*\n[user] " + r.client + "\n[money] ₱" + (r.fee*0.5).toLocaleString() + " received via GCash\n\n->️ Request queued for RD processing.",
  "IN PROCESS": (r) => "[find] *PROCESSING STARTED — " + r.id + "*\n[user] " + r.client + "\n[home] " + r.property + "\n[person]‍[work] RD Processor — " + r.territory + "\n\n->️ Document now at Register of Deeds.",
  "FOR PAYMENT":(r) => "[mail] *READY FOR RELEASE — " + r.id + "*\n[user] " + r.client + "\n[money] Balance due: ₱" + (r.fee*0.5).toLocaleString() + " + Shipping\n\n->️ Please complete final payment via GCash.",
  "FULLY PAID": (r) => "[money] *FULL PAYMENT CONFIRMED — " + r.id + "*\n[user] " + r.client + "\n[OK] Total: ₱" + r.fee.toLocaleString() + (r.refCode ? "\n\n[gift] *REFERRAL REWARD TRIGGERED*\n[user] Referrer: " + r.refName + "\n[cash] Reward: ₱100 via GCash\n[key] Code: " + r.refCode : "") + "\n\n->️ Preparing document for shipment.",
  "SHIPPED":    (r) => "[box] *DOCUMENT SHIPPED — " + r.id + "*\n[user] " + r.client + "\n[truck] " + (r.courier||"PhilPost") + "\n[pin] Tracking: TV-" + r.id + "-TRK\n\n->️ Expected: 5–10 days (PhilPost) or 2–5 days (LBC).",
  "DELIVERED":  (r) => "[done] *DELIVERED — " + r.id + "*\n[user] " + r.client + "\n[OK] Document successfully delivered.\n\n->️ Request complete. Thank you for using TitleVerified!",
};

const initReferrers = [
  {code:"REF-SANTOS01",name:"Ana Santos",       type:"public",gcash:"09171234567",earned:0,paid:false},
  {code:"REF-RDKEV01", name:"Kevin Reyes (L1)", type:"staff", gcash:"09281234567",earned:0,paid:false},
  {code:"REF-BELEN01", name:"Belen Cruz",       type:"public",gcash:"09391234567",earned:0,paid:false},
];

const initRequests = [
  {id:"TV-0441",client:"Maria Santos",     property:"Lot 12 Blk 4, Dagupan City",   service:"Title Verification", status:"ON QUEUE",   submitted:"Today 8:14 AM",   fee:2500,province:"Pangasinan",territory:"Pangasinan",days:0,courier:"PhilPost",refCode:"REF-SANTOS01",refName:"Ana Santos",titleNo:"TCT No. T-98765",taxDec:"TD-2024-0023",telegram:"09171112222",photos:[],report:{rd:{findings:"",result:"",notes:"",status:"DRAFT"},inspection:{propertyType:"",scope:"",gps:"",findings:"",result:"",notes:"",status:"DRAFT"},geosite:{gpsPlot:"",variance:"",geNotes:"",result:"",status:"DRAFT"},reviewedBy:null,sentToClient:false}},
  {id:"TV-0442",client:"Roberto Dela Cruz",property:"TCT No. T-88821, Lingayen",     service:"Certified True Copy",status:"PAID",       submitted:"Today 9:02 AM",   fee:1500,province:"Pangasinan",territory:"Pangasinan",days:0,courier:"LBC Express",refCode:"REF-RDKEV01", refName:"Kevin Reyes (L1)",titleNo:"TCT No. T-88821",taxDec:"TD-2023-0157",telegram:"09182223333",photos:[],report:{rd:{findings:"",result:"PENDING",notes:"",status:"DRAFT"},inspection:{propertyType:"",scope:"",gps:"",findings:"",result:"PENDING",notes:"",status:"DRAFT"},geosite:{gpsPlot:"",variance:"",geNotes:"",result:"PENDING",status:"DRAFT"},reviewedBy:null,sentToClient:false}},
  {id:"TV-0443",client:"Luz Fernandez",    property:"Lot 7, San Carlos City",        service:"Title Verification", status:"IN PROCESS", submitted:"Today 9:45 AM",   fee:2500,province:"Pangasinan",territory:"Pangasinan",days:0,courier:"PhilPost",refCode:null,refName:null,titleNo:"OCT No. O-4421",taxDec:"TD-2024-0089",telegram:"09193334444",photos:[],report:{rd:{findings:"",result:"PENDING",notes:"",status:"DRAFT"},inspection:{propertyType:"",scope:"",gps:"",findings:"",result:"PENDING",notes:"",status:"DRAFT"},geosite:{gpsPlot:"",variance:"",geNotes:"",result:"PENDING",status:"DRAFT"},reviewedBy:null,sentToClient:false}},
  {id:"TV-0444",client:"Antonio Reyes",    property:"OCT No. O-1122, Urdaneta",      service:"Certified True Copy",status:"FOR PAYMENT",submitted:"Today 7:30 AM",   fee:1500,province:"Pangasinan",territory:"Pangasinan",days:0,courier:"LBC Express",refCode:"REF-BELEN01", refName:"Belen Cruz",titleNo:"OCT No. O-1122",taxDec:"TD-2022-0334",telegram:"09174445555",photos:[],report:{rd:{findings:"",result:"PENDING",notes:"",status:"DRAFT"},inspection:{propertyType:"",scope:"",gps:"",findings:"",result:"PENDING",notes:"",status:"DRAFT"},geosite:{gpsPlot:"",variance:"",geNotes:"",result:"PENDING",status:"DRAFT"},reviewedBy:null,sentToClient:false}},
  {id:"TV-0445",client:"Carmen Villanueva",property:"Lot 23, Alaminos City",         service:"Title Verification", status:"FULLY PAID", submitted:"Today 10:15 AM",  fee:2500,province:"Pangasinan",territory:"Pangasinan",days:0,courier:"PhilPost",refCode:null,refName:null,titleNo:"TCT No. T-55102",taxDec:"TD-2024-0201",telegram:"09165556666",photos:[],report:{rd:{findings:"",result:"PENDING",notes:"",status:"DRAFT"},inspection:{propertyType:"",scope:"",gps:"",findings:"",result:"PENDING",notes:"",status:"DRAFT"},geosite:{gpsPlot:"",variance:"",geNotes:"",result:"PENDING",status:"DRAFT"},reviewedBy:null,sentToClient:false}},
  {id:"TV-0446",client:"Jose Mendoza",     property:"TCT No. T-44521, San Fernando", service:"Title Verification", status:"ON QUEUE",   submitted:"Today 10:38 AM",  fee:2500,province:"La Union",  territory:"La Union",  days:0,courier:"LBC Express",refCode:null,refName:null,titleNo:"TCT No. T-44521",taxDec:"TD-2023-0098",telegram:"09196667777",photos:[],report:{rd:{findings:"",result:"PENDING",notes:"",status:"DRAFT"},inspection:{propertyType:"",scope:"",gps:"",findings:"",result:"PENDING",notes:"",status:"DRAFT"},geosite:{gpsPlot:"",variance:"",geNotes:"",result:"PENDING",status:"DRAFT"},reviewedBy:null,sentToClient:false}},
  {id:"TV-0447",client:"Ana Pascual",      property:"Lot 3 Blk 8, Baguio City",      service:"Certified True Copy",status:"IN PROCESS", submitted:"Today 11:02 AM",  fee:1500,province:"Baguio",    territory:"Baguio",    days:0,courier:"PhilPost",refCode:null,refName:null,titleNo:"TCT No. T-77843",taxDec:"TD-2024-0045",telegram:"09177778888",photos:[],report:{rd:{findings:"",result:"PENDING",notes:"",status:"DRAFT"},inspection:{propertyType:"",scope:"",gps:"",findings:"",result:"PENDING",notes:"",status:"DRAFT"},geosite:{gpsPlot:"",variance:"",geNotes:"",result:"PENDING",status:"DRAFT"},reviewedBy:null,sentToClient:false}},
  {id:"TV-0438",client:"Pedro Aquino",     property:"TCT No. T-12345, Dagupan",      service:"Title Verification", status:"SHIPPED",    submitted:"Mar 20, 2:15 PM", fee:2500,province:"Pangasinan",territory:"Pangasinan",days:1,courier:"LBC Express",refCode:"REF-SANTOS01",refName:"Ana Santos",titleNo:"TCT No. T-12345",taxDec:"TD-2023-0412",telegram:"09188889999",photos:[],report:{rd:{findings:"",result:"PENDING",notes:"",status:"DRAFT"},inspection:{propertyType:"",scope:"",gps:"",findings:"",result:"PENDING",notes:"",status:"DRAFT"},geosite:{gpsPlot:"",variance:"",geNotes:"",result:"PENDING",status:"DRAFT"},reviewedBy:null,sentToClient:false}},
  {id:"TV-0439",client:"Rosa Castillo",    property:"Lot 9, Urdaneta City",          service:"Certified True Copy",status:"DELIVERED",  submitted:"Mar 20, 3:40 PM", fee:1500,province:"Pangasinan",territory:"Pangasinan",days:1,courier:"PhilPost",refCode:null,refName:null,titleNo:"OCT No. O-8821",taxDec:"TD-2022-0567",telegram:"09199990000",photos:[],report:{rd:{findings:"",result:"PENDING",notes:"",status:"DRAFT"},inspection:{propertyType:"",scope:"",gps:"",findings:"",result:"PENDING",notes:"",status:"DRAFT"},geosite:{gpsPlot:"",variance:"",geNotes:"",result:"PENDING",status:"DRAFT"},reviewedBy:null,sentToClient:false}},
];

const USERS = {
  L4:{name:"Eddie Castro",          role:"Owner / CEO",                   level:4,province:"ALL"},
  L3:{name:"Maria Admin",           role:"TitleVerified Admin",           level:3,province:"ALL"},
  L2:{name:"Territory Manager",     role:"Territory Manager — Pangasinan",level:2,province:"Pangasinan"},
  L1:{name:"RD Representative",     role:"RD Processor — Pangasinan",     level:1,province:"Pangasinan"},
};

const TERRITORIES = [
  {name:"Pangasinan", manager:"Accredited RD Processor", status:"LIVE",requests:7,revenue:14500,completion:85},
  {name:"La Union",   manager:"Unassigned",             status:"OPEN",requests:1,revenue:0,    completion:0},
  {name:"Baguio",     manager:"Unassigned",             status:"OPEN",requests:1,revenue:0,    completion:0},
  {name:"Ilocos Norte",manager:"Unassigned",            status:"OPEN",requests:0,revenue:0,    completion:0},
  {name:"Ilocos Sur", manager:"Unassigned",             status:"OPEN",requests:0,revenue:0,    completion:0},
];

const levelColors = {4:C.gold,3:C.purple,2:C.brown,1:C.green2};

function genCode() { return "REF-"+Math.random().toString(36).substring(2,8).toUpperCase(); }

function fbPost(code,name) {
  return "[home][OK] NEED TO VERIFY A PROPERTY TITLE IN PANGASINAN?\n\nDon't buy land or property without checking the title first!\n\nTitleVerified connects you to an accredited Register of Deeds processor — fast, official, and affordable.\n\n[doc] Title Verification — ₱2,500\n[page] Certified True Copy — ₱1,500\n[truck] Delivered to your door (PhilPost or LBC)\n[card] 50/50 payment via GCash — no upfront full payment!\n\n[OK] Legit. Official. Trusted.\n\n>> Request now: https://titleverified.ph/ref/"+code+"\n\n#TitleVerified #PangasinanProperties #PropertyTitle #RealEstatePH #VerifiedBeforeListed";
}

// TOASTS
function TelegramToast({msg,onDone}) {
  const [hiding,setHiding]=useState(false);
  useEffect(()=>{
    const t1=setTimeout(()=>setHiding(true),4500);
    const t2=setTimeout(()=>onDone(),5000);
    return()=>{clearTimeout(t1);clearTimeout(t2);};
  },[]);
  return (
    <div className={"tg-toast"+(hiding?" hiding":"")} style={{position:"fixed",bottom:72,right:20,zIndex:999,background:"#1C2333",border:"1px solid #2D9436",borderLeft:"3px solid #2D9436",padding:"14px 16px",maxWidth:320,boxShadow:"0 8px 32px rgba(0,0,0,0.4)"}}>
      <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:8}}>
        <span style={{fontSize:18}}>[tg]</span>
        <div>
          <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:"#2D9436",letterSpacing:"0.12em"}}>TELEGRAM SENT</div>
          <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:"rgba(255,255,255,0.35)"}}>@TitleVerifiedOps</div>
        </div>
        <button onClick={onDone} style={{marginLeft:"auto",background:"none",border:"none",color:"rgba(255,255,255,0.3)",fontSize:16,cursor:"pointer"}}>×</button>
      </div>
      <pre style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:"rgba(255,255,255,0.75)",lineHeight:1.6,whiteSpace:"pre-wrap",wordBreak:"break-word"}}>{msg}</pre>
    </div>
  );
}

function RewardToast({refName,onDone}) {
  const [hiding,setHiding]=useState(false);
  useEffect(()=>{
    const t1=setTimeout(()=>setHiding(true),5500);
    const t2=setTimeout(()=>onDone(),6000);
    return()=>{clearTimeout(t1);clearTimeout(t2);};
  },[]);
  return (
    <div className={"tg-toast"+(hiding?" hiding":"")} style={{position:"fixed",bottom:148,right:20,zIndex:998,background:"#1C2333",border:"1px solid #D4A843",borderLeft:"3px solid #D4A843",padding:"14px 16px",maxWidth:280,boxShadow:"0 8px 32px rgba(0,0,0,0.4)"}}>
      <div style={{display:"flex",alignItems:"center",gap:10}}>
        <span style={{fontSize:24}}>[gift]</span>
        <div>
          <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gold2,letterSpacing:"0.12em"}}>₱100 REFERRAL REWARD</div>
          <div style={{fontSize:13,color:"rgba(255,255,255,0.8)",marginTop:3,fontWeight:600}}>{refName} earned ₱100!</div>
          <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:"rgba(255,255,255,0.35)",marginTop:2}}>Payout via GCash on next cutoff</div>
        </div>
      </div>
    </div>
  );
}

function FBModal({refCode,refName,onClose}) {
  const post=fbPost(refCode,refName);
  const [copied,setCopied]=useState(false);
  const [linkCopied,setLinkCopied]=useState(false);
  const copyPost=()=>{navigator.clipboard.writeText(post);setCopied(true);setTimeout(()=>setCopied(false),2000);};
  const copyLink=()=>{navigator.clipboard.writeText("https://titleverified.ph/ref/"+refCode);setLinkCopied(true);setTimeout(()=>setLinkCopied(false),2000);};
  return (
    <div onClick={onClose} style={{position:"fixed",inset:0,background:"rgba(0,0,0,0.85)",zIndex:400,display:"flex",alignItems:"center",justifyContent:"center"}}>
      <div onClick={e=>e.stopPropagation()} style={{background:C.white,maxWidth:560,width:"94%",maxHeight:"92vh",overflowY:"auto",boxShadow:"0 24px 80px rgba(0,0,0,0.5)"}}>
        <div style={{background:C.fb,padding:"20px 24px",display:"flex",alignItems:"center",justifyContent:"space-between"}}>
          <div style={{display:"flex",alignItems:"center",gap:10}}>
            <span style={{fontSize:22}}>[book]</span>
            <div>
              <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:"rgba(255,255,255,0.7)",letterSpacing:"0.12em"}}>FACEBOOK POST GENERATOR</div>
              <div style={{color:C.white,fontWeight:700,fontSize:15}}>Share & Earn ₱100</div>
            </div>
          </div>
          <button onClick={onClose} style={{background:"none",border:"none",color:"rgba(255,255,255,0.7)",fontSize:22,cursor:"pointer"}}>×</button>
        </div>
        <div style={{padding:"24px"}}>
          <div style={{background:"#EFF6FF",border:"2px solid #BFDBFE",padding:"14px 16px",marginBottom:20}}>
            <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.fb,letterSpacing:"0.14em",marginBottom:6}}>YOUR REFERRAL LINK</div>
            <div style={{display:"flex",alignItems:"center",gap:8}}>
              <div style={{flex:1,fontFamily:"'DM Mono',monospace",fontSize:11,color:C.ink,background:C.white,padding:"8px 12px",border:"1px solid #BFDBFE",wordBreak:"break-all"}}>
                https://titleverified.ph/ref/{refCode}
              </div>
              <button className="copy-btn" onClick={copyLink} style={{background:linkCopied?"#16A34A":C.fb,color:C.white,fontWeight:700,fontSize:11,padding:"8px 14px",border:"none",cursor:"pointer",flexShrink:0,transition:"background 0.2s"}}>
                {linkCopied?"[OK] Copied":"Copy Link"}
              </button>
            </div>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:8,marginBottom:20}}>
            {[{icon:"[gift]",label:"Your Reward",val:"₱100"},{icon:"[fast]",label:"Triggered When",val:"FULLY PAID"},{icon:"[card]",label:"Payout Via",val:"GCash"}].map(r=>(
              <div key={r.label} style={{background:C.cream,border:"1px solid "+C.lgray,padding:"12px 14px",textAlign:"center"}}>
                <div style={{fontSize:20,marginBottom:4}}>{r.icon}</div>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:8,color:C.gray,letterSpacing:"0.1em",marginBottom:2}}>{r.label.toUpperCase()}</div>
                <div style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:18,color:C.gold}}>{r.val}</div>
              </div>
            ))}
          </div>
          <div style={{marginBottom:16}}>
            <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.14em",marginBottom:8}}>POST PREVIEW</div>
            <div style={{background:"#F0F2F5",border:"1px solid #CDD1D4",padding:"16px",borderRadius:4}}>
              <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:12}}>
                <div style={{width:38,height:38,background:C.gold,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",fontWeight:700,color:C.ink,fontSize:14,flexShrink:0}}>TV</div>
                <div>
                  <div style={{fontWeight:700,fontSize:14,color:"#1C1E21"}}>TitleVerified</div>
                  <div style={{fontSize:12,color:"#65676B"}}>Just now · [web]</div>
                </div>
              </div>
              <pre style={{fontFamily:"'Segoe UI',Arial,sans-serif",fontSize:13,color:"#1C1E21",lineHeight:1.7,whiteSpace:"pre-wrap",wordBreak:"break-word"}}>{post}</pre>
            </div>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
            <button className="copy-btn" onClick={copyPost} style={{background:copied?"#16A34A":C.fb,color:C.white,fontWeight:700,fontSize:13,padding:"14px 0",border:"none",cursor:"pointer",letterSpacing:"0.04em",transition:"background 0.2s"}}>
              {copied?"[OK] Copied!":"[doc] Copy Post Text"}
            </button>
            <button onClick={onClose} style={{background:"transparent",color:C.gray,border:"1px solid "+C.lgray,fontWeight:700,fontSize:13,padding:"14px 0",cursor:"pointer"}}>Close</button>
          </div>
          <div style={{textAlign:"center",fontSize:11,color:C.gray,marginTop:10}}>Paste this post to your Facebook timeline, story, or group. Your referral link is embedded.</div>
        </div>
      </div>
    </div>
  );
}

// APP ROOT


// PUBLIC SITE
function PublicSite({province,setProv,showModal,setModal,onLogin}) {
  const [myCode]=useState(genCode);
  const [selectedService,setSelectedService]=useState("Title Verification — ₱2,500");
  const [myName,setMyName]=useState("");
  const [myGcash,setMyGcash]=useState("");
  const [showFB,setShowFB]=useState(false);
  const [generated,setGenerated]=useState(false);

  return (
    <div style={{fontFamily:"'DM Sans',sans-serif",background:C.cream}}>
      <nav style={{position:"fixed",top:0,left:0,right:0,zIndex:100,background:"rgba(28,25,23,0.97)",backdropFilter:"blur(12px)",borderBottom:"2px solid "+C.gold,padding:"0 48px",height:64,display:"flex",alignItems:"center",justifyContent:"space-between"}}>
        <div style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:22,color:C.white}}>Title<span style={{color:C.gold2}}>Verified</span></div>
        <div style={{display:"flex",gap:28,alignItems:"center"}}>
          {[["Services","#services"],["How It Works","#howitworks"],["Refer & Earn","#refer"],["Provinces","#provinces"]].map(([l,href])=>(
            <a key={l} href={href} className="nav-link" style={{fontSize:13,color:"rgba(255,255,255,0.6)",textDecoration:"none"}}>{l}</a>
          ))}
          <button onClick={onLogin} className="btn-gold" style={{background:C.gold,color:C.ink,fontWeight:700,fontSize:12,padding:"8px 22px",border:"none",cursor:"pointer",letterSpacing:"0.06em"}}>Admin Login</button>
        </div>
      </nav>

      {/* HERO */}
      <section style={{background:C.ink,minHeight:"100vh",display:"flex",flexDirection:"column",justifyContent:"center",padding:"100px 60px 80px",position:"relative",overflow:"hidden"}}>
        <div style={{position:"absolute",width:600,height:600,borderRadius:"50%",background:"radial-gradient(circle, rgba(184,134,11,0.07), transparent 70%)",right:-80,top:-80,pointerEvents:"none"}}/>
        <div style={{position:"absolute",inset:0,backgroundImage:"repeating-linear-gradient(0deg,transparent,transparent 60px,rgba(184,134,11,0.03) 60px,rgba(184,134,11,0.03) 61px),repeating-linear-gradient(90deg,transparent,transparent 60px,rgba(184,134,11,0.03) 60px,rgba(184,134,11,0.03) 61px)",pointerEvents:"none"}}/>
        <div className="fade-up" style={{display:"inline-flex",alignItems:"center",gap:8,fontFamily:"'DM Mono',monospace",fontSize:11,color:C.gold2,letterSpacing:"0.18em",marginBottom:20}}>
          <div style={{width:6,height:6,background:C.gold2,borderRadius:"50%",animation:"pulse 2s infinite"}}/>
          OFFICIAL PROPERTY TITLE VERIFICATION — PANGASINAN & NEARBY PROVINCES
        </div>
        <div className="fade-up-1" style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:"clamp(36px,9vw,82px)",color:C.white,lineHeight:0.95,letterSpacing:"-0.02em",marginBottom:24}}>
          Your property title.<br/><em style={{color:C.gold2}}>Verified.</em><br/>Officially.
        </div>
        <div className="fade-up-2" style={{fontSize:17,color:"rgba(255,255,255,0.5)",maxWidth:520,lineHeight:1.75,marginBottom:44,fontWeight:300}}>
          TitleVerified connects you to accredited Register of Deeds processors in your province. Title verification and certified true copies — fast, official, and documented.
        </div>
        <div className="fade-up-3" style={{display:"flex",gap:14,flexWrap:"wrap",marginBottom:48}}>
          <button onClick={()=>setModal(true)} className="btn-gold" style={{background:C.gold,color:C.ink,fontWeight:700,fontSize:13,letterSpacing:"0.06em",padding:"15px 36px",border:"none",cursor:"pointer"}}>Request Verification</button>
          <a href="#refer" style={{textDecoration:"none"}}>
            <button style={{background:"transparent",color:C.gold2,fontWeight:600,fontSize:13,padding:"15px 28px",border:"1px solid "+C.gold,cursor:"pointer",letterSpacing:"0.03em"}}>[gift] Refer & Earn ₱100 →</button>
          </a>
        </div>
        <div style={{background:"rgba(255,255,255,0.04)",border:"1px solid rgba(184,134,11,0.2)",padding:"20px 28px",maxWidth:600}}>
          <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:C.gold2,letterSpacing:"0.16em",marginBottom:12}}>SELECT YOUR PROVINCE</div>
          <div style={{display:"flex",gap:10,flexWrap:"wrap"}}>
            {PROVINCES.map(p=>(
              <button key={p} onClick={()=>{if(p==="Pangasinan")setProv(p);}} style={{padding:"8px 20px",background:province===p?C.gold:p==="Pangasinan"?"rgba(255,255,255,0.06)":"rgba(255,255,255,0.02)",color:province===p?C.ink:p==="Pangasinan"?"rgba(255,255,255,0.6)":"rgba(255,255,255,0.2)",border:"1px solid "+(province===p?C.gold:p==="Pangasinan"?"rgba(255,255,255,0.12)":"rgba(255,255,255,0.06)"),fontSize:12,fontWeight:600,cursor:p==="Pangasinan"?"pointer":"default",transition:"all 0.15s",display:p!=="Pangasinan"?"none":"inline-block"}}>{p}</button>
            ))}
          </div>
          <div style={{marginTop:12,fontSize:13,color:"rgba(255,255,255,0.4)"}}>
            Accredited processor: <span style={{color:C.gold2,fontWeight:600}}>{province==="Pangasinan"?"Pangasinan — Accredited RD Processor":"Partner processor — coming soon"}</span>
          </div>
        </div>
        <div style={{display:"flex",gap:48,marginTop:60,paddingTop:36,borderTop:"1px solid rgba(255,255,255,0.08)"}}>
          {[["₱2,500","Title Verification"],["₱1,500","Certified True Copy"],["3 Days","Processing Time"],["₱100","Referral Reward"]].map(([n,l])=>(
            <div key={l}>
              <div style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:32,color:C.gold2,lineHeight:1}}>{n}</div>
              <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:"rgba(255,255,255,0.35)",marginTop:4,letterSpacing:"0.08em"}}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      <div style={{background:C.gold,padding:"13px 60px",display:"flex",gap:20,alignItems:"center",overflow:"hidden"}}>
        {["ACCREDITED RD PROCESSORS","OFFICIAL TITLE VERIFICATION","CERTIFIED TRUE COPY","REFER & EARN ₱100","PANGASINAN · LA UNION · BAGUIO"].map(t=>(
          <span key={t} style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:C.ink,fontWeight:600,letterSpacing:"0.14em",whiteSpace:"nowrap"}}>◆ {t}</span>
        ))}
      </div>

      {/* SERVICES */}
      <section id="services" style={{padding:"80px 60px",background:C.cream}}>
        <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:C.gold,letterSpacing:"0.2em",marginBottom:10}}>OUR SERVICES</div>
        <div style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:40,color:C.ink,marginBottom:48,lineHeight:1.1}}>Four services. Done right.</div>
        <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr 1fr",gap:2}}>
          {[
            {num:"01",icon:"[doc]",name:"Title Verification",featured:true,desc:"We verify the authenticity of any property title through our accredited RD processor. Confirm it is legitimate, untampered, and has no encumbrances before you buy.",items:["Physical title document inspection","Cross-check against RD official records","Encumbrance and annotation check","Adverse claim verification","Written verification report issued"],fee:"₱2,500",tag:"Per Title"},
            {num:"02",icon:"[page]",name:"Certified True Copy",featured:false,desc:"We process the official Certified True Copy of any title from the Register of Deeds on your behalf. No more long queues at the RD office.",items:["Official CTC from Register of Deeds","Processing within 3–5 business days","Valid for all legal and bank transactions","Multiple copies available","Delivery or pickup at our office"],fee:"₱1,500",tag:"Per Copy"},
            {num:"03",icon:"[pin]",name:"Onsite Inspection",featured:false,desc:"Our trained field inspector visits the property, takes GPS-geotagged photos and video anchored to the title description, and delivers a complete inspection report.",items:["GPS-geotagged boundary photos","Video walkthrough of property","Report anchored to title description","Structure & improvement assessment","Discrepancy flagging vs title","Marketplace-ready listing photos"],fee:"From ₱3,500",tag:"Package-based"},
            {num:"04",icon:"[map]",name:"Geosite Services",featured:false,desc:"We map your property using GPS coordinates and connect you with a licensed Geodetic Engineer for surveys, technical descriptions, and subdivision work.",items:["GPS coordinate plotting & report","Property boundary vs title comparison","Satellite/aerial view confirmation","Licensed Geodetic Engineer referral","Lot survey & subdivision support","Technical Description preparation"],fee:"By Scope",tag:"GPS + Survey"},
          ].map(svc=>(
            <div key={svc.num} className={!svc.featured?"hover-card":""} style={{background:svc.featured?C.ink:C.white,border:"1px solid "+(svc.featured?C.gold:C.lgray),padding:"36px 40px"}}>
              <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:svc.featured?C.gold2:C.gold,letterSpacing:"0.18em",marginBottom:8}}>SERVICE {svc.num}</div>
              <div style={{fontSize:32,marginBottom:12}}>{svc.icon}</div>
              <div style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:26,color:svc.featured?C.white:C.ink,marginBottom:14,lineHeight:1.1}}>{svc.name}</div>
              <div style={{fontSize:14,color:svc.featured?"rgba(255,255,255,0.85)":C.ink,lineHeight:1.7,marginBottom:20}}>{svc.desc}</div>
              <div style={{borderTop:"1px solid "+(svc.featured?"rgba(255,255,255,0.1)":C.lgray),paddingTop:16}}>
                {svc.items.map((item,i)=>(
                  <div key={i} style={{fontSize:13,color:svc.featured?"rgba(255,255,255,0.85)":"#44312A",padding:"4px 0",display:"flex",gap:8,borderBottom:"1px solid "+(svc.featured?"rgba(255,255,255,0.06)":C.lgray),lineHeight:1.5}}>
                    <span style={{color:C.gold,fontSize:11,flexShrink:0,marginTop:2}}>→</span>{item}
                  </div>
                ))}
              </div>
              <div style={{marginTop:20,display:"flex",alignItems:"baseline",gap:6}}>
                <span style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:32,color:C.gold2,lineHeight:1}}>{svc.fee}</span>
                <span style={{fontSize:12,color:svc.featured?"rgba(255,255,255,0.4)":C.gray}}>{svc.tag}</span>
              </div>
              <button onClick={()=>setModal(true)} className="btn-gold" style={{background:svc.featured?C.gold:"transparent",color:svc.featured?C.ink:C.gold,border:"1px solid "+C.gold,fontWeight:700,fontSize:13,padding:"14px 0",cursor:"pointer",letterSpacing:"0.05em",marginTop:20,width:"100%"}}>Request This Service</button>
            </div>
          ))}
        </div>
      </section>

      {/* REFER & EARN */}
      <section id="refer" style={{background:C.ink,padding:"80px 60px",position:"relative",overflow:"hidden"}}>
        <div style={{position:"absolute",width:500,height:500,borderRadius:"50%",background:"radial-gradient(circle, rgba(212,168,67,0.06), transparent 70%)",left:-100,bottom:-100,pointerEvents:"none"}}/>
        <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:C.gold,letterSpacing:"0.2em",marginBottom:10}}>REFERRAL PROGRAM</div>
        <div style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:40,color:C.white,marginBottom:8,lineHeight:1.1}}>Share. Refer. Earn <em style={{color:C.gold2}}>₱100.</em></div>
        <div style={{fontSize:15,color:"rgba(255,255,255,0.45)",marginBottom:48,maxWidth:500}}>Anyone can refer — public or staff. Share your unique link on Facebook, Viber, or SMS. When your referral pays in full, you earn ₱100 via GCash.</div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(4,1fr)",gap:2,marginBottom:48}}>
          {[
            {n:"01",icon:"[edit]",title:"Enter your name",   body:"Generate your personal referral link below."},
            {n:"02",icon:"[book]",title:"Share on Facebook", body:"Use the auto-generated post with your link embedded."},
            {n:"03",icon:"[home]",title:"Friend requests",   body:"They submit a title verification or CTC request."},
            {n:"04",icon:"[money]",title:"You earn ₱100",     body:"Paid to your GCash when their request is Fully Paid."},
          ].map(step=>(
            <div key={step.n} style={{background:"rgba(255,255,255,0.04)",border:"1px solid rgba(184,134,11,0.15)",padding:"24px 20px"}}>
              <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gold,letterSpacing:"0.14em",marginBottom:10}}>STEP {step.n}</div>
              <div style={{fontSize:26,marginBottom:10}}>{step.icon}</div>
              <div style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:17,color:C.white,marginBottom:6}}>{step.title}</div>
              <div style={{fontSize:13,color:"rgba(255,255,255,0.4)",lineHeight:1.6}}>{step.body}</div>
            </div>
          ))}
        </div>
        <div style={{background:"rgba(255,255,255,0.05)",border:"1px solid rgba(184,134,11,0.3)",padding:"32px 36px",maxWidth:520}}>
          <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:C.gold2,letterSpacing:"0.16em",marginBottom:16}}>GENERATE YOUR REFERRAL LINK</div>
          {!generated ? (
            <div>
              <div style={{marginBottom:14}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:"rgba(255,255,255,0.4)",letterSpacing:"0.12em",marginBottom:8}}>YOUR NAME</div>
                <input value={myName} onChange={e=>setMyName(e.target.value)} placeholder="e.g. Juan Dela Cruz" style={{width:"100%",padding:"12px 14px",background:"rgba(255,255,255,0.08)",border:"1px solid rgba(184,134,11,0.3)",color:C.white,fontSize:14,outline:"none",fontFamily:"'DM Sans',sans-serif"}}/>
              </div>
              <div style={{marginBottom:20}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:"rgba(255,255,255,0.4)",letterSpacing:"0.12em",marginBottom:8}}>GCASH NUMBER (for payout)</div>
                <input value={myGcash} onChange={e=>setMyGcash(e.target.value)} placeholder="09XX XXX XXXX" style={{width:"100%",padding:"12px 14px",background:"rgba(255,255,255,0.08)",border:"1px solid rgba(184,134,11,0.3)",color:C.white,fontSize:14,outline:"none",fontFamily:"'DM Sans',sans-serif"}}/>
              </div>
              <button className="btn-gold" onClick={()=>{if(myName.trim())setGenerated(true);}} style={{background:C.gold,color:C.ink,fontWeight:700,fontSize:13,padding:"14px 0",border:"none",cursor:"pointer",width:"100%",letterSpacing:"0.06em"}}>Generate My Referral Link</button>
            </div>
          ) : (
            <div>
              <div style={{marginBottom:14}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:"rgba(255,255,255,0.4)",letterSpacing:"0.12em",marginBottom:8}}>YOUR REFERRAL LINK</div>
                <div style={{display:"flex",gap:8}}>
                  <div style={{flex:1,background:"rgba(0,0,0,0.3)",border:"1px solid rgba(184,134,11,0.4)",padding:"10px 14px",fontFamily:"'DM Mono',monospace",fontSize:11,color:C.gold2,wordBreak:"break-all"}}>https://titleverified.ph/ref/{myCode}</div>
                  <button className="copy-btn" onClick={()=>navigator.clipboard.writeText("https://titleverified.ph/ref/"+myCode)} style={{background:C.gold,color:C.ink,fontWeight:700,fontSize:11,padding:"0 16px",border:"none",cursor:"pointer",flexShrink:0}}>Copy</button>
                </div>
              </div>
              <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:"rgba(255,255,255,0.3)",letterSpacing:"0.1em",marginBottom:16}}>CODE: {myCode} · Hi, {myName}! [hi]</div>
              <button onClick={()=>setShowFB(true)} style={{background:C.fb,color:C.white,fontWeight:700,fontSize:13,padding:"14px 0",border:"none",cursor:"pointer",width:"100%",letterSpacing:"0.04em",display:"flex",alignItems:"center",justifyContent:"center",gap:8}}>
                <span>[book]</span> Generate Facebook Post
              </button>
            </div>
          )}
        </div>
      </section>

      {/* HOW IT WORKS */}
      <section id="howitworks" style={{background:"#0F0E0C",padding:"80px 60px"}}>
        <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:C.gold,letterSpacing:"0.2em",marginBottom:10}}>THE PROCESS</div>
        <div style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:36,color:C.white,marginBottom:48,lineHeight:1.1}}>From request to certificate.</div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(7,1fr)",gap:0,position:"relative"}}>
          <div style={{position:"absolute",top:26,left:"3%",right:"3%",height:1,background:"linear-gradient(90deg,transparent,rgba(184,134,11,0.3),transparent)"}}/>
          {[{n:"01",icon:"[doc]",title:"On Queue",body:"Submit + 50% GCash"},{n:"02",icon:"[money]",title:"Paid",body:"Downpayment confirmed"},{n:"03",icon:"[find]",title:"In Process",body:"RD Rep at RD office"},{n:"04",icon:"[mail]",title:"For Payment",body:"Pay balance + shipping"},{n:"05",icon:"[OK]",title:"Fully Paid",body:"Full payment done"},{n:"06",icon:"[box]",title:"Shipped",body:"Via PhilPost or LBC"},{n:"07",icon:"[done]",title:"Delivered",body:"Document received"}].map(step=>(
            <div key={step.n} style={{padding:"0 8px",textAlign:"center"}}>
              <div style={{width:50,height:50,border:"2px solid "+C.gold,borderRadius:"50%",display:"flex",alignItems:"center",justifyContent:"center",margin:"0 auto 12px",background:"#0F0E0C",position:"relative",zIndex:1}}>
                <span style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:16,color:C.gold}}>{step.n}</span>
              </div>
              <div style={{fontSize:17,marginBottom:6}}>{step.icon}</div>
              <div style={{fontWeight:700,fontSize:12,color:C.white,marginBottom:4,fontFamily:"'Cormorant Garamond',serif"}}>{step.title}</div>
              <div style={{fontSize:10,color:"rgba(255,255,255,0.35)",lineHeight:1.5}}>{step.body}</div>
            </div>
          ))}
        </div>
      </section>

      {/* PROVINCE NETWORK */}
      <section id="provinces" style={{padding:"72px 60px",background:C.warm}}>
        <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:C.gold,letterSpacing:"0.2em",marginBottom:10}}>PROVINCE NETWORK</div>
        <div style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:36,color:C.ink,marginBottom:40,lineHeight:1.1}}>One platform. Every province.</div>
        <div style={{display:"grid",gridTemplateColumns:"repeat(5,1fr)",gap:2}}>
          {[{province:"Pangasinan",sub:"pangasinan.titleverified.ph",status:"LIVE",processor:"Accredited RD Processor"},{province:"La Union",sub:"launion.titleverified.ph",status:"COMING SOON",processor:"Partner needed"},{province:"Baguio",sub:"baguio.titleverified.ph",status:"COMING SOON",processor:"Partner needed"},{province:"Ilocos Norte",sub:"ilocosnorte.titleverified.ph",status:"COMING SOON",processor:"Partner needed"},{province:"Ilocos Sur",sub:"ilocossur.titleverified.ph",status:"COMING SOON",processor:"Partner needed"}].map(p=>(
            <div key={p.province} style={{background:p.status==="LIVE"?C.ink:C.white,border:"1px solid "+(p.status==="LIVE"?C.gold:C.lgray),padding:"24px 20px",opacity:p.status==="LIVE"?1:0.5,cursor:"default",pointerEvents:p.status==="LIVE"?"auto":"none"}}>
              <div style={{background:p.status==="LIVE"?"rgba(20,83,45,0.3)":"#F3F4F6",color:p.status==="LIVE"?C.green2:"#9CA3AF",fontFamily:"'DM Mono',monospace",fontSize:9,letterSpacing:"0.12em",padding:"3px 10px",display:"inline-block",marginBottom:12}}>{p.status}</div>
              <div style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:18,color:p.status==="LIVE"?C.white:C.ink,marginBottom:6}}>{p.province}</div>
              <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:p.status==="LIVE"?C.gold2:"#9CA3AF",letterSpacing:"0.06em",marginBottom:10}}>{p.sub}</div>
              <div style={{fontSize:12,color:p.status==="LIVE"?"rgba(255,255,255,0.45)":C.gray}}>{p.processor}</div>
            </div>
          ))}
        </div>
      </section>

      <footer style={{background:C.ink,padding:"48px 60px 28px",borderTop:"2px solid "+C.gold}}>
        <div style={{display:"grid",gridTemplateColumns:"1.5fr 1fr 1fr",gap:48,paddingBottom:40,borderBottom:"1px solid rgba(255,255,255,0.08)",marginBottom:28}}>
          <div>
            <div style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:24,color:C.white,marginBottom:10}}>Title<span style={{color:C.gold2}}>Verified</span></div>
            <div style={{fontSize:13,color:"rgba(255,255,255,0.4)",lineHeight:1.7,maxWidth:260}}>Official property title verification and certified true copy processing — Pangasinan and nearby provinces.</div>
            <div style={{marginTop:16,background:"rgba(212,168,67,0.1)",border:"1px solid rgba(212,168,67,0.2)",padding:"10px 14px",display:"inline-block"}}>
              <span style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gold,letterSpacing:"0.12em"}}>[gift] REFER & EARN </span>
              <span style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:18,color:C.gold2,marginLeft:6}}>₱100 per referral</span>
            </div>
          </div>
          <div>
            <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gold,letterSpacing:"0.18em",marginBottom:14}}>SERVICES</div>
            {["Title Verification","Certified True Copy","Refer & Earn","Province Network"].map(l=>(
              <div key={l} style={{fontSize:13,color:"rgba(255,255,255,0.45)",padding:"5px 0",cursor:"pointer"}}>{l}</div>
            ))}
          </div>
          <div>
            <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gold,letterSpacing:"0.18em",marginBottom:14}}>CONTACT</div>
            <div style={{fontSize:13,color:"rgba(255,255,255,0.45)",lineHeight:1.8}}>info@titleverified.ph<br/>Helium Marketing Corp<br/>Brgy. Tandoc, San Carlos City<br/>Pangasinan, Philippines<br/>Mon–Fri 8AM–5PM</div>
            <button onClick={onLogin} className="btn-gold" style={{background:C.gold,color:C.ink,fontWeight:700,fontSize:12,padding:"8px 20px",border:"none",cursor:"pointer",marginTop:16,letterSpacing:"0.05em"}}>Admin Login →</button>
          </div>
        </div>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
          <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:"rgba(255,255,255,0.25)",letterSpacing:"0.1em"}}>© 2026 TITLEVERIFIED · HELIUM MARKETING CORP · BRGY. TANDOC, SAN CARLOS CITY, PANGASINAN</div>
          <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:C.gold2,letterSpacing:"0.1em",opacity:0.6}}>VERIFIED BEFORE LISTED.</div>
        </div>
      </footer>

      {/* REQUEST MODAL */}
      {showModal && (
        <div onClick={()=>setModal(false)} style={{position:"fixed",inset:0,background:"rgba(0,0,0,0.75)",zIndex:200,display:"flex",alignItems:"center",justifyContent:"center"}}>
          <div onClick={e=>e.stopPropagation()} style={{background:C.white,maxWidth:520,width:"90%",maxHeight:"90vh",overflowY:"auto"}}>
            <div style={{background:C.ink,padding:"28px 32px",position:"relative"}}>
              <button onClick={()=>setModal(false)} style={{position:"absolute",top:16,right:20,background:"none",border:"none",color:"rgba(255,255,255,0.5)",fontSize:24,cursor:"pointer",lineHeight:1}}>×</button>
              <div style={{fontFamily:"'Cormorant Garamond',serif",fontWeight:700,fontSize:24,color:C.white,marginBottom:4}}>Request Verification</div>
              <div style={{fontSize:13,color:"rgba(255,255,255,0.45)"}}>We'll process your request within 3–5 business days.</div>
            </div>
            <div style={{padding:"28px 32px"}}>
              {[["FULL NAME","Juan Dela Cruz"],["CONTACT NUMBER","09XX XXX XXXX"],["EMAIL ADDRESS","your@email.com"],["PROPERTY LOCATION","Lot No., Block No., City/Municipality"]].map(([label,ph])=>(
                <div key={label} style={{marginBottom:16}}>
                  <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:C.ink,marginBottom:6}}>{label}</div>
                  <input placeholder={ph} style={{width:"100%",padding:"12px 14px",border:"1px solid "+C.lgray,fontSize:14,outline:"none",fontFamily:"'DM Sans',sans-serif"}}/>
                </div>
              ))}
              <div style={{marginBottom:16}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:C.ink,marginBottom:6}}>SERVICE NEEDED</div>
                <select value={selectedService} onChange={e=>setSelectedService(e.target.value)} style={{width:"100%",padding:"12px 14px",border:"1px solid "+C.lgray,fontSize:14,fontFamily:"'DM Sans',sans-serif",cursor:"pointer"}}>
                  <option>Title Verification — ₱2,500</option>
                  <option>Certified True Copy — ₱1,500</option>
                  <option>Both Services (01+02) — ₱3,500</option>
                  <option>Onsite Inspection — Package-based</option>
                  <option>Geosite Services — By Scope</option>
                  <option>Full Package (01+02+03+04) — By Quote</option>
                </select>
              </div>
              {selectedService.includes("Onsite")&&(
                <div style={{background:"#F0FDF4",border:"2px solid "+C.green2,padding:"16px",marginBottom:16}}>
                  <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:C.green,letterSpacing:"0.12em",marginBottom:12}}>[pin] ONSITE INSPECTION DETAILS</div>
                  <div style={{marginBottom:10}}>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.1em",marginBottom:6}}>PROPERTY TYPE</div>
                    <select style={{width:"100%",padding:"10px 12px",border:"1px solid "+C.lgray,fontSize:13,fontFamily:"'DM Sans',sans-serif",cursor:"pointer"}}>
                      <option>Raw Land</option>
                      <option>House and Lot</option>
                    </select>
                  </div>
                  <div style={{marginBottom:10}}>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.1em",marginBottom:6}}>INSPECTION SCOPE</div>
                    <select style={{width:"100%",padding:"10px 12px",border:"1px solid "+C.lgray,fontSize:13,fontFamily:"'DM Sans',sans-serif",cursor:"pointer"}}>
                      <option>Exterior Only</option>
                      <option>Exterior + Interior (owner authorization required)</option>
                    </select>
                  </div>
                  <div style={{marginBottom:10}}>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.1em",marginBottom:6}}>REQUESTER TYPE</div>
                    <select style={{width:"100%",padding:"10px 12px",border:"1px solid "+C.lgray,fontSize:13,fontFamily:"'DM Sans',sans-serif",cursor:"pointer"}}>
                      <option>I am the Owner</option>
                      <option>I am a Buyer / Prospective Buyer</option>
                      <option>OFW Owner (with SPA)</option>
                      <option>OFW Buyer (exterior only)</option>
                    </select>
                  </div>
                  <div style={{marginBottom:10}}>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.1em",marginBottom:6}}>LOT AREA (approximate sqm)</div>
                    <input placeholder="e.g. 250 sqm" style={{width:"100%",padding:"10px 12px",border:"1px solid "+C.lgray,fontSize:13,outline:"none",fontFamily:"'DM Sans',sans-serif"}}/>
                  </div>
                  <div style={{marginBottom:10}}>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.1em",marginBottom:6}}>ACCESS NOTES</div>
                    <input placeholder="e.g. Contact barangay captain, dirt road, gated" style={{width:"100%",padding:"10px 12px",border:"1px solid "+C.lgray,fontSize:13,outline:"none",fontFamily:"'DM Sans',sans-serif"}}/>
                  </div>
                  <div style={{fontSize:11,color:C.green,lineHeight:1.6,marginTop:8}}>[note] Inspector will contact you via Telegram to confirm schedule and pricing.</div>
                  <div style={{fontSize:11,color:"#991B1B",lineHeight:1.6,marginTop:6}}>[!] Buyer requests = exterior only. Interior requires written owner authorization or SPA.</div>
                </div>
              )}
              {selectedService.includes("Geosite")&&(
                <div style={{background:"#EFF6FF",border:"2px solid #3B82F6",padding:"16px",marginBottom:16}}>
                  <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:"#1E40AF",letterSpacing:"0.12em",marginBottom:12}}>[map] GEOSITE SERVICE DETAILS</div>
                  <div style={{marginBottom:10}}>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.1em",marginBottom:6}}>SERVICE NEEDED</div>
                    <select style={{width:"100%",padding:"10px 12px",border:"1px solid #BFDBFE",fontSize:13,fontFamily:"'DM Sans',sans-serif",cursor:"pointer"}}>
                      <option>GPS Mapping Only</option>
                      <option>GPS Mapping + Geodetic Survey</option>
                      <option>Lot Survey</option>
                      <option>Subdivision Survey</option>
                      <option>Technical Description Preparation</option>
                      <option>Full Geosite Package</option>
                    </select>
                  </div>
                  <div style={{marginBottom:10}}>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.1em",marginBottom:6}}>LOT AREA (sqm)</div>
                    <input placeholder="e.g. 500 sqm" style={{width:"100%",padding:"10px 12px",border:"1px solid #BFDBFE",fontSize:13,outline:"none",fontFamily:"'DM Sans',sans-serif"}}/>
                  </div>
                  <div style={{marginBottom:10}}>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.1em",marginBottom:6}}>CURRENT TITLE DESCRIPTION (paste if available)</div>
                    <input placeholder="e.g. Bounded on the North by Road, South by Lot 4..." style={{width:"100%",padding:"10px 12px",border:"1px solid #BFDBFE",fontSize:13,outline:"none",fontFamily:"'DM Sans',sans-serif"}}/>
                  </div>
                  <div style={{fontSize:11,color:"#1E40AF",lineHeight:1.6,marginTop:8}}>[note] Our team will contact you via Telegram to assess scope and provide a quotation before proceeding.</div>
                </div>
              )}
              <div style={{marginBottom:16}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:C.ink,marginBottom:6}}>PROVINCE</div>
                <select style={{width:"100%",padding:"12px 14px",border:"1px solid "+C.lgray,fontSize:14,fontFamily:"'DM Sans',sans-serif",cursor:"pointer"}}>
                  {PROVINCES.map(p=><option key={p}>{p}</option>)}
                </select>
              </div>
              <div style={{marginBottom:16}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:C.ink,marginBottom:6}}>COMPLETE MAILING ADDRESS</div>
                <input placeholder="House/Lot No., Street, Barangay, City/Municipality" style={{width:"100%",padding:"12px 14px",border:"1px solid "+C.lgray,fontSize:14,outline:"none",fontFamily:"'DM Sans',sans-serif",marginBottom:8}}/>
                <input placeholder="Province, ZIP Code" style={{width:"100%",padding:"12px 14px",border:"1px solid "+C.lgray,fontSize:14,outline:"none",fontFamily:"'DM Sans',sans-serif"}}/>
              </div>
              <div style={{marginBottom:16}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:C.ink,marginBottom:6}}>REFERRAL CODE (optional)</div>
                <input placeholder="e.g. REF-SANTOS01" style={{width:"100%",padding:"12px 14px",border:"1px solid "+C.lgray,fontSize:14,outline:"none",fontFamily:"'DM Mono',monospace",letterSpacing:"0.06em"}}/>
                <div style={{fontSize:11,color:C.green2,marginTop:4}}>[gift] Have a referral code? Your referrer earns ₱100 when you pay in full.</div>
              </div>
              <div style={{marginBottom:16}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:C.ink,marginBottom:6}}>TELEGRAM NUMBER</div>
                <input placeholder="09XX XXX XXXX" style={{width:"100%",padding:"12px 14px",border:"1px solid "+C.lgray,fontSize:14,outline:"none",fontFamily:"'DM Sans',sans-serif"}}/>
                <div style={{fontSize:11,color:"#1E40AF",marginTop:4}}>[tg] Our representative will update you via Telegram.</div>
              </div>
              <div style={{marginBottom:16,background:"#FFFBEB",border:"2px solid "+C.gold,padding:"14px 16px"}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:C.brown,letterSpacing:"0.12em",marginBottom:10}}>[doc] TITLE DETAILS — Check your document carefully</div>
                <div style={{marginBottom:10}}>
                  <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.1em",marginBottom:6}}>TITLE NO.</div>
                  <input placeholder="e.g. TCT No. T-12345 or OCT No. O-1122" style={{width:"100%",padding:"10px 12px",border:"1px solid "+C.lgray,fontSize:13,outline:"none",fontFamily:"'DM Mono',monospace"}}/>
                </div>
                <div>
                  <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.1em",marginBottom:6}}>TAX DEC NO.</div>
                  <input placeholder="e.g. TD-2024-0001" style={{width:"100%",padding:"10px 12px",border:"1px solid "+C.lgray,fontSize:13,outline:"none",fontFamily:"'DM Mono',monospace"}}/>
                </div>
                <div style={{fontSize:11,color:C.brown,marginTop:10,lineHeight:1.6}}>[!] Copy these numbers exactly as they appear on your title document.</div>
              </div>
              <div style={{marginBottom:16}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:C.ink,marginBottom:6}}>DOCUMENT PHOTOS (up to 3)</div>
                <input type="file" accept="image/*" multiple style={{width:"100%",padding:"10px",border:"1px solid "+C.lgray,fontSize:13,background:C.cream,cursor:"pointer"}}/>
                <div style={{fontSize:11,color:C.gray,marginTop:4}}>[photo] Attach photos of your title or supporting documents. Max 3.</div>
              </div>
              <div style={{marginBottom:16}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,letterSpacing:"0.14em",color:C.ink,marginBottom:8}}>DELIVERY METHOD</div>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
                  <div style={{border:"2px solid "+C.gold,padding:"14px 16px",cursor:"pointer",background:"#FFFBEB"}}>
                    <div style={{fontWeight:700,fontSize:13,color:C.ink,marginBottom:4}}>[post] PhilPost Registered Mail</div>
                    <div style={{fontSize:12,color:C.gray,marginBottom:6}}>5–10 business days.</div>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:11,color:C.gold,fontWeight:700}}>₱150 – ₱350</div>
                  </div>
                  <div style={{border:"1px solid "+C.lgray,padding:"14px 16px",cursor:"pointer",background:C.white}}>
                    <div style={{fontWeight:700,fontSize:13,color:C.ink,marginBottom:4}}>[box] LBC Express</div>
                    <div style={{fontSize:12,color:C.gray,marginBottom:6}}>Door to door. 2–5 days.</div>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:11,color:C.gold,fontWeight:700}}>₱200 – ₱450</div>
                  </div>
                </div>
              </div>
              <div style={{background:"#F0EAE0",border:"1px solid "+C.lgray,padding:"14px 16px",marginBottom:16}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.brown,letterSpacing:"0.12em",marginBottom:8}}>PAYMENT TERMS</div>
                <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8}}>
                  <div style={{background:C.white,padding:"10px 12px",border:"1px solid "+C.lgray}}>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.1em",marginBottom:4}}>UPON SUBMISSION</div>
                    <div style={{fontFamily:"Georgia,serif",fontWeight:700,fontSize:18,color:C.brown}}>50%</div>
                    <div style={{fontSize:11,color:C.gray}}>Service fee downpayment via GCash</div>
                  </div>
                  <div style={{background:C.white,padding:"10px 12px",border:"1px solid "+C.lgray}}>
                    <div style={{fontFamily:"'DM Mono',monospace",fontSize:9,color:C.gray,letterSpacing:"0.1em",marginBottom:4}}>UPON COMPLETION</div>
                    <div style={{fontFamily:"Georgia,serif",fontWeight:700,fontSize:18,color:C.green}}>50% + Shipping</div>
                    <div style={{fontSize:11,color:C.gray}}>Balance + shipping before release</div>
                  </div>
                </div>
              </div>
              <div style={{background:"#FEF2F2",border:"2px solid #FECACA",borderLeft:"4px solid #EF4444",padding:"16px 18px",marginBottom:16}}>
                <div style={{fontFamily:"'DM Mono',monospace",fontSize:10,color:"#991B1B",letterSpacing:"0.1em",marginBottom:8}}>[!] PLEASE READ BEFORE SUBMITTING</div>
                <div style={{fontSize:13,color:"#7F1D1D",lineHeight:1.7}}>All information — especially <strong>Title No.</strong> and <strong>Tax Dec No.</strong> — must be copied exactly from your physical document. We cannot verify if these are correct. <strong>Corrections after submission may require additional payment.</strong></div>
              </div>
              <button className="btn-gold" onClick={()=>{setModal(false);alert("[OK] Request Submitted!\n\nSend your 50% downpayment to:\n\n[mobile] GCash: 09171074906\n[user] Edgardo Castro\n\nOur representative will update you via Telegram once payment is confirmed.");}} style={{background:C.gold,color:C.ink,fontWeight:700,fontSize:14,padding:16,border:"none",cursor:"pointer",width:"100%",letterSpacing:"0.05em"}}>
                SUBMIT & PAY 50% DOWNPAYMENT
              </button>
              <div style={{textAlign:"center",fontSize:12,color:C.gray,marginTop:12}}>Certificate shipped upon full payment. Tracking number provided.</div>
            </div>
          </div>
        </div>
      )}
      {showFB && <FBModal refCode={myCode} refName={myName} onClose={()=>setShowFB(false)}/>}
    </div>
  );
}


function App() {
  const [province,setProvince]=useState("Pangasinan");
  const [showModal,setShowModal]=useState(false);
  return (
    <PublicSite
      province={province}
      setProv={setProvince}
      showModal={showModal}
      setModal={setShowModal}
      onLogin={()=>window.location.href="admin.html"}
    />
  );
}
ReactDOM.createRoot(document.getElementById("root")).render(<App/>);
window.tvReady&&window.tvReady();

</script>


<div style="position:fixed;bottom:0;left:0;right:0;background:#1C1917;border-top:2px solid #B8860B;padding:6px 16px;display:flex;justify-content:space-between;align-items:center;z-index:99999;pointer-events:none;">
  <div style="display:flex;align-items:center;gap:10px;">
    <span style="font-family:monospace;font-size:14px;font-weight:700;color:#D4A843;letter-spacing:0.1em;background:rgba(184,134,11,0.2);border:1px solid #B8860B;padding:2px 10px;">TV1-30</span>
    <span style="font-family:monospace;font-size:11px;color:rgba(255,255,255,0.4);letter-spacing:0.1em;">PUBLIC</span>
  </div>
  <span style="font-family:monospace;font-size:10px;color:rgba(255,255,255,0.25);letter-spacing:0.08em;">CONSTITUTION V1.0 · MAR 2026</span>
</div>
</body>
</html>