ArchitectAI Pro \u2014 AI Floor Plan Generator<\/title>\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ARCHITECTAI PRO \u00b7 COMPLETE SINGLE FILE\r\n Red #E63946 | Blue #1D3557 | Yellow #FFB703 | Green #2DC653\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n --red:#E63946; --red-dk:#C1121F; --red-lt:#FFF0F1;\r\n --blue:#1D3557; --blue-md:#457B9D; --blue-lt:#A8DADC; --blue-pale:#F0F7FF;\r\n --yellow:#FFB703; --yellow-dk:#D4920A; --yellow-lt:#FFFBEB;\r\n --green:#2DC653; --green-dk:#1A8C36; --green-lt:#EDFAF1;\r\n --white:#fff; --off:#F8F9FA; --light:#F0F2F5;\r\n --border:#DEE3EA; --text:#1A202C; --muted:#6B7280;\r\n --sh-sm:0 1px 3px rgba(0,0,0,.08); --sh-md:0 4px 16px rgba(0,0,0,.10);\r\n --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;\r\n --font:'Segoe UI',system-ui,-apple-system,sans-serif;\r\n --mono:'Courier New',Consolas,monospace;\r\n}\r\n*{box-sizing:border-box;margin:0;padding:0}\r\nhtml{scroll-behavior:smooth}\r\nbody{font-family:var(--font);background:var(--off);color:var(--text);line-height:1.6;font-size:15px}\r\na{color:var(--blue-md);text-decoration:none}\r\nh1{font-size:2.25rem;font-weight:700;line-height:1.2}\r\nh2{font-size:1.75rem;font-weight:600;line-height:1.3}\r\nh3{font-size:1.25rem;font-weight:600}\r\n\r\n\/* NAV *\/\r\n.nav{background:var(--blue);padding:0 1.5rem;position:sticky;top:0;z-index:100;box-shadow:var(--sh-md)}\r\n.nav-inner{max-width:1060px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:58px;gap:1rem}\r\n.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;color:white;cursor:pointer}\r\n.brand-icon{width:34px;height:34px;background:var(--red);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}\r\n.nav-links{display:flex;align-items:center;gap:6px}\r\n.nav-links button{background:transparent;border:none;color:rgba(255,255,255,.8);font-size:13px;padding:6px 12px;border-radius:var(--r-sm);cursor:pointer;font-family:var(--font);transition:background .15s}\r\n.nav-links button:hover{background:rgba(255,255,255,.12);color:white}\r\n.nav-links .nav-cta{background:var(--red);color:white;font-weight:600}\r\n.nav-links .nav-cta:hover{background:var(--red-dk)}\r\n\r\n\/* BUTTONS *\/\r\n.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 22px;border-radius:var(--r-md);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .15s;font-family:var(--font);line-height:1}\r\n.btn-primary{background:var(--red);color:white}\r\n.btn-primary:hover{background:var(--red-dk);transform:translateY(-1px);box-shadow:var(--sh-md)}\r\n.btn-blue{background:var(--blue);color:white}\r\n.btn-blue:hover{background:#162843}\r\n.btn-green{background:var(--green);color:white}\r\n.btn-outline{background:white;color:var(--blue);border:1.5px solid var(--blue)}\r\n.btn-outline:hover{background:var(--blue-pale)}\r\n.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}\r\n.btn-ghost:hover{background:var(--light)}\r\n.btn-sm{padding:7px 14px;font-size:13px}\r\n.btn-lg{padding:14px 28px;font-size:16px}\r\n.btn-xl{padding:16px 36px;font-size:17px;border-radius:var(--r-lg)}\r\n.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}\r\n\r\n\/* PAGES *\/\r\n.page{display:none}\r\n.page.active{display:block}\r\n\r\n\/* \u2500\u2500 HERO PAGE \u2500\u2500 *\/\r\n.hero{background:var(--blue);color:white;padding:5rem 1.5rem 3.5rem;text-align:center;position:relative;overflow:hidden}\r\n.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:50px 50px}\r\n.hero>*{position:relative}\r\n.hero h1 span{color:var(--yellow)}\r\n.hero p{font-size:1.1rem;color:rgba(255,255,255,.82);max-width:560px;margin:.9rem auto 2rem}\r\n.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}\r\n.hero-pills{display:flex;gap:1.25rem;justify-content:center;flex-wrap:wrap;margin-top:1.75rem}\r\n.hero-pills span{color:rgba(255,255,255,.7);font-size:13px}\r\n.out-bar{background:rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.12);padding:1.25rem 1.5rem}\r\n.out-grid{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem}\r\n.out-pill{display:flex;align-items:center;gap:8px;padding:.6rem 1rem;background:rgba(255,255,255,.1);border-radius:var(--r-md);font-size:13px;font-weight:600;color:white;border:1px solid rgba(255,255,255,.12)}\r\n.out-pill.highlight{background:rgba(255,183,3,.18);border-color:rgba(255,183,3,.4);color:#FFB703}\r\n\r\n\/* SECTION *\/\r\n.section{padding:3.5rem 1.5rem}\r\n.section-alt{background:white}\r\n.container{max-width:1060px;margin:0 auto}\r\n.sec-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:.75rem}\r\n.sec-title{margin-bottom:.75rem}\r\n.sec-sub{color:var(--muted);max-width:500px;margin:.5rem auto 0;font-size:14px}\r\n.text-center{text-align:center}\r\n\r\n\/* FEATURES *\/\r\n.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:2.5rem}\r\n.feat-card{padding:1.5rem;background:white;border:1px solid var(--border);border-radius:var(--r-lg)}\r\n.feat-card .fi{font-size:30px;margin-bottom:.75rem}\r\n.feat-card h4{margin-bottom:.5rem;color:var(--blue)}\r\n.feat-card p{color:var(--muted);font-size:13.5px;line-height:1.6}\r\n\r\n\/* STEPS *\/\r\n.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:2rem;counter-reset:steps}\r\n.step-item{padding:1.25rem;background:white;border:1px solid var(--border);border-radius:var(--r-lg);counter-increment:steps;position:relative;padding-top:1.75rem}\r\n.step-item::before{content:counter(steps);position:absolute;top:-12px;left:16px;background:var(--blue);color:white;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}\r\n.step-item h4{margin-bottom:.4rem;font-size:1rem}\r\n.step-item p{font-size:13px;color:var(--muted)}\r\n\r\n\/* PRICING *\/\r\n.pricing-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:740px;margin:2.5rem auto 0}\r\n.pc{background:white;border:2px solid var(--border);border-radius:var(--r-xl);padding:2rem;position:relative;transition:box-shadow .2s}\r\n.pc:hover{box-shadow:var(--sh-md)}\r\n.pc.featured{border-color:var(--blue)}\r\n.pop-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--blue);color:white;padding:4px 18px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}\r\n.pc .price{font-size:2.4rem;font-weight:800;color:var(--blue);margin:.9rem 0 .2rem}\r\n.pc .price sub{font-size:1rem;font-weight:400;color:var(--muted)}\r\n.pc .period{font-size:13px;color:var(--muted);margin-bottom:1.5rem}\r\n.pc ul{list-style:none;margin-bottom:1.5rem}\r\n.pc ul li{display:flex;align-items:flex-start;gap:7px;padding:5px 0;font-size:13.5px;border-bottom:1px dashed var(--border)}\r\n.pc ul li:last-child{border:none}\r\n.chk{color:var(--green);font-weight:700;flex-shrink:0}\r\n.xmark{color:var(--muted);flex-shrink:0}\r\n\r\n\/* TESTIMONIALS *\/\r\n.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:2rem}\r\n.testi{background:white;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem}\r\n.testi p{font-size:14px;font-style:italic;color:var(--muted);margin-bottom:1rem}\r\n.testi-author{display:flex;align-items:center;gap:10px}\r\n.testi-avatar{width:38px;height:38px;background:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:13px;flex-shrink:0}\r\n.testi-name{font-weight:700;font-size:14px}\r\n.testi-role{font-size:11px;color:var(--muted)}\r\n\r\n\/* FAQ *\/\r\n.faq{max-width:680px;margin:2rem auto 0}\r\n.faq-item{border-bottom:1px solid var(--border)}\r\n.faq-q{padding:1rem 0;cursor:pointer;font-weight:600;display:flex;justify-content:space-between;align-items:center;font-size:14.5px}\r\n.faq-a{padding:0 0 1rem;color:var(--muted);font-size:13.5px;display:none;line-height:1.7}\r\n.faq-item.open .faq-a{display:block}\r\n.faq-item.open .arr{transform:rotate(180deg)}\r\n.arr{transition:transform .2s;flex-shrink:0;color:var(--muted)}\r\n\r\n\/* CTA BAND *\/\r\n.cta-band{background:var(--red);text-align:center;padding:3rem 1.5rem}\r\n.cta-band h2{color:white;margin-bottom:.6rem}\r\n.cta-band p{color:rgba(255,255,255,.85);margin-bottom:1.5rem}\r\n\r\n\/* FOOTER *\/\r\nfooter{background:var(--blue);color:rgba(255,255,255,.75);padding:2.5rem 1.5rem}\r\n.ft-grid{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}\r\nfooter h4{color:white;margin-bottom:.75rem;font-size:14px}\r\nfooter a{color:rgba(255,255,255,.7);font-size:13px;display:block;margin-bottom:4px}\r\n.ft-bottom{max-width:1060px;margin:2rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;font-size:12px;flex-wrap:wrap;gap:1rem}\r\n\r\n\/* \u2500\u2500 APP PAGE \u2500\u2500 *\/\r\n.app-wrap{max-width:860px;margin:0 auto;padding:1.5rem}\r\n.tier-banner{background:var(--yellow-lt);border:1px solid #fddba5;border-radius:var(--r-md);padding:.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}\r\n.tier-banner.pro{background:var(--blue-pale);border-color:var(--blue-lt)}\r\n.tier-info{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--yellow-dk)}\r\n.tier-banner.pro .tier-info{color:var(--blue)}\r\n\r\n\/* STEP WIZARD *\/\r\n.step-bar{display:flex;gap:3px;margin-bottom:1.25rem;overflow-x:auto;padding:2px 0;-webkit-overflow-scrolling:touch}\r\n.sp{flex:1;min-width:60px;padding:8px 5px;text-align:center;font-size:10px;font-weight:600;letter-spacing:.02em;border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;color:var(--muted);background:white;transition:all .15s;white-space:nowrap;font-family:var(--font)}\r\n.sp:hover{border-color:var(--blue-md);color:var(--blue-md)}\r\n.sp.active{border-color:var(--blue);background:var(--blue);color:white}\r\n.sp.done{border-color:var(--green);background:var(--green-lt);color:var(--green-dk)}\r\n.wiz-card{background:white;border:1px solid var(--border);border-radius:var(--r-xl);padding:2rem;box-shadow:var(--sh-sm)}\r\n.step-hdr{display:flex;align-items:center;gap:14px;margin-bottom:1.75rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}\r\n.step-icon-box{width:48px;height:48px;background:var(--blue-pale);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}\r\n.step-hdr-txt .step-num{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}\r\n.step-hdr-txt h2{font-size:1.15rem;color:var(--blue)}\r\n.step-hdr-txt p{font-size:13px;color:var(--muted);margin-top:2px}\r\n.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:1rem}\r\n.fg{display:flex;flex-direction:column;gap:5px}\r\n.flbl{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}\r\n.req{color:var(--red)}\r\n.fc{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:14px;font-family:var(--font);background:white;color:var(--text);outline:none;transition:border-color .15s;appearance:none}\r\n.fc:focus{border-color:var(--blue-md);box-shadow:0 0 0 3px rgba(69,123,157,.12)}\r\n.inp-grp{position:relative}\r\n.inp-grp .fc{padding-right:46px}\r\n.inp-addon{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted);font-family:var(--mono);font-weight:700;pointer-events:none}\r\n.nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border)}\r\n.err-box{display:none;padding:.875rem 1rem;background:var(--red-lt);color:var(--red-dk);border:1px solid #fac5c8;border-radius:var(--r-md);font-size:13px;margin-top:1rem;align-items:flex-start;gap:8px}\r\n\r\n\/* LOADING *\/\r\n.load-screen{text-align:center;padding:3rem 1rem}\r\n.load-icon{font-size:52px;animation:pulse 1.5s ease-in-out infinite;display:block;margin:0 auto 1rem}\r\n@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}\r\n.load-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin:1.5rem auto 0;max-width:220px}\r\n.load-fill{height:100%;background:var(--red);border-radius:2px;animation:fillB 3.5s ease-in-out infinite}\r\n@keyframes fillB{0%{width:0}70%{width:82%}100%{width:92%}}\r\n\r\n\/* RESULTS *\/\r\n.res-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}\r\n.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:1.5rem}\r\n.mc{padding:.875rem 1rem;background:white;border:1px solid var(--border);border-radius:var(--r-md)}\r\n.ml{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px}\r\n.mv{font-size:1.1rem;font-weight:700;font-family:var(--mono);color:var(--text)}\r\n.tab-bar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:1.25rem}\r\n.tb{padding:7px 14px;font-size:12px;font-weight:600;border:1.5px solid var(--border);border-radius:var(--r-sm);background:white;color:var(--muted);cursor:pointer;font-family:var(--font);transition:all .15s}\r\n.tb:hover{border-color:var(--blue-md);color:var(--blue)}\r\n.tb.on{border-color:var(--blue);background:var(--blue);color:white}\r\n.tp{display:none}\r\n.tp.on{display:block;animation:fadeIn .2s ease}\r\n@keyframes fadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}\r\n.fp-wrap{border:2px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:#F0F7FF}\r\n.util-box{padding:1.5rem;border:1px solid var(--border);border-radius:var(--r-lg);background:white}\r\n.util-hdr{display:flex;align-items:center;gap:10px;margin-bottom:1rem}\r\n.util-hdr h3{margin:0}\r\n.util-body{font-family:var(--mono);font-size:13px;line-height:1.75;color:var(--muted);white-space:pre-wrap;padding:1rem;background:var(--off);border-radius:var(--r-md);border:1px solid var(--border);max-height:380px;overflow-y:auto}\r\n.mat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}\r\n.mat-card{padding:1.25rem;background:white;border:1px solid var(--border);border-radius:var(--r-lg);text-align:center}\r\n.mat-icon{font-size:28px;margin-bottom:8px}\r\n.mat-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}\r\n.mat-val{font-size:1.25rem;font-weight:700;font-family:var(--mono);color:var(--blue)}\r\n.sched-wrap{overflow-x:auto}\r\n.sched-tbl{width:100%;border-collapse:collapse;font-size:13px}\r\n.sched-tbl th{padding:9px 12px;text-align:left;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:white;background:var(--blue)}\r\n.sched-tbl td{padding:8px 12px;border-bottom:1px solid var(--border)}\r\n.sched-tbl tr:nth-child(even) td{background:var(--off)}\r\n.sched-tbl .mono{font-family:var(--mono);color:var(--blue);font-size:11px;font-weight:700}\r\n.locked-tab{text-align:center;padding:3rem 1rem;border:2px dashed var(--border);border-radius:var(--r-lg)}\r\n.sep{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--border)}\r\n.sep h3{margin-bottom:1rem;color:var(--blue)}\r\n.info-strip{background:var(--blue-pale);border:1px solid var(--blue-lt);border-radius:var(--r-md);padding:.875rem 1rem;font-size:13px;color:var(--blue);margin-top:1rem}\r\n.alert-w{background:var(--yellow-lt);border:1px solid #fddba5;border-radius:var(--r-md);padding:.875rem 1rem;font-size:13px;color:var(--yellow-dk)}\r\n\r\n\/* MODAL *\/\r\n.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(2px);animation:fadeIn .15s ease}\r\n.modal-box{background:white;border-radius:var(--r-xl);max-width:440px;width:100%;padding:2rem;box-shadow:0 8px 32px rgba(0,0,0,.18);position:relative;animation:slideUp .2s ease}\r\n@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}\r\n.modal-close{position:absolute;top:1rem;right:1rem;background:var(--light);border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}\r\n.modal-close:hover{background:var(--border)}\r\n.auth-div{display:flex;align-items:center;gap:1rem;margin:1.25rem 0;color:var(--muted);font-size:13px}\r\n.auth-div::before,.auth-div::after{content:'';flex:1;height:1px;background:var(--border)}\r\n.g-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;border:1.5px solid var(--border);border-radius:var(--r-md);background:white;font-weight:600;font-size:14px;cursor:pointer;font-family:var(--font);transition:background .15s}\r\n.g-btn:hover{background:var(--off)}\r\n.a-err{padding:.75rem 1rem;background:var(--red-lt);color:var(--red-dk);border:1px solid #fac5c8;border-radius:var(--r-md);font-size:13px;display:none;margin-bottom:.75rem}\r\n\r\n\/* PAGE FOOTER *\/\r\n.pg-ftr{text-align:center;margin-top:2.5rem;padding:1.5rem;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}\r\n\r\n\/* SVG floor plan colors *\/\r\n.rf-bedroom{fill:#DBEAFE;stroke:#1D4ED8}\r\n.rf-bathroom{fill:#D1FAE5;stroke:#065F46}\r\n.rf-kitchen{fill:#FEF3C7;stroke:#92400E}\r\n.rf-living{fill:#EDE9FE;stroke:#4C1D95}\r\n.rf-drawing{fill:#FCE7F3;stroke:#831843}\r\n.rf-garage{fill:#F3F4F6;stroke:#374151}\r\n.rf-veranda{fill:#DCFCE7;stroke:#14532D}\r\n.rf-store{fill:#F3F4F6;stroke:#374151}\r\n.rf-staircase{fill:#DBEAFE;stroke:#1E3A8A}\r\n.rf-dining{fill:#FEF3C7;stroke:#78350F}\r\n.rf-other{fill:#EFF6FF;stroke:#1E40AF}\r\n\r\n@media(max-width:768px){\r\n h1{font-size:1.75rem} h2{font-size:1.35rem}\r\n .hero h1{font-size:2rem} .pricing-wrap{grid-template-columns:1fr}\r\n .ft-grid{grid-template-columns:1fr} .nav-links button:not(.nav-cta){display:none}\r\n .metric-grid{grid-template-columns:1fr 1fr}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<nav class=\"nav\">\r\n <div class=\"nav-inner\">\r\n <div class=\"brand\" onclick=\"showPage('home')\">\r\n <div class=\"brand-icon\">\ud83c\udfd7\ufe0f<\/div>\r\n ArchitectAI Pro\r\n <\/div>\r\n <div class=\"nav-links\">\r\n <button onclick=\"showPage('home')\">Home<\/button>\r\n <button onclick=\"showSection('pricing')\">Pricing<\/button>\r\n <button onclick=\"showPage('app')\" class=\"nav-cta\">\ud83c\udfd7\ufe0f Design Now<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/nav>\r\n\r\n\r\n<div id=\"page-home\" class=\"page active\">\r\n\r\n \r\n <div class=\"hero\">\r\n <div style=\"display:inline-flex;align-items:center;gap:8px;background:rgba(255,183,3,.15);border:1px solid rgba(255,183,3,.3);color:#FFB703;padding:5px 16px;border-radius:20px;font-size:13px;font-weight:600;margin-bottom:1.25rem\">\r\n \u2728 AI-Powered \u00b7 Pakistani Standards \u00b7 8 Output Types\r\n <\/div>\r\n <h1>Generate <span>Complete Blueprints<\/span><br>in Minutes<\/h1>\r\n <p>From plot dimensions to printable floor plans \u2014 with water, gas, electrical, and material estimates. Powered by Claude AI.<\/p>\r\n <div class=\"hero-btns\">\r\n <button class=\"btn btn-primary btn-xl\" onclick=\"showPage('app')\">\ud83c\udfd7\ufe0f Start Free Design<\/button>\r\n <button class=\"btn btn-xl\" style=\"background:rgba(255,255,255,.12);color:white;border:1.5px solid rgba(255,255,255,.3)\" onclick=\"showSection('pricing')\">View Pricing<\/button>\r\n <\/div>\r\n <div class=\"hero-pills\">\r\n <span>\u2713 5 free designs<\/span><span>\u2713 No credit card<\/span>\r\n <span>\u2713 8 output types<\/span><span>\u2713 PDF export<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"out-bar\">\r\n <div class=\"out-grid\">\r\n <div class=\"out-pill\">\ud83d\uddfa\ufe0f 2D Floor Plan<\/div>\r\n <div class=\"out-pill\">\ud83d\udca7 Water Supply<\/div>\r\n <div class=\"out-pill\">\ud83d\udd25 Gas Pipeline<\/div>\r\n <div class=\"out-pill\">\u26a1 Electrical<\/div>\r\n <div class=\"out-pill\">\ud83d\udccb Door & Window<\/div>\r\n <div class=\"out-pill\">\ud83e\uddf1 Materials<\/div>\r\n <div class=\"out-pill\">\ud83d\udcdd Design Notes<\/div>\r\n <div class=\"out-pill highlight\">\ud83d\udcc4 Printable PDF<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section section-alt\">\r\n <div class=\"container text-center\">\r\n <div class=\"sec-label\">Why ArchitectAI Pro<\/div>\r\n <h2 class=\"sec-title\">Professional Tools. AI Speed.<\/h2>\r\n <p class=\"sec-sub\">Everything an architect provides \u2014 in minutes, not weeks.<\/p>\r\n <div class=\"feat-grid\">\r\n <div class=\"feat-card\"><div class=\"fi\">\ud83d\udcd0<\/div><h4>Pakistani Standards<\/h4><p>9-inch external walls, Roshan Dan ventilation, correct setbacks and standard room minimums built-in.<\/p><\/div>\r\n <div class=\"feat-card\"><div class=\"fi\">\ud83e\udd16<\/div><h4>Claude AI Powered<\/h4><p>Anthropic's Claude analyzes requirements and generates optimized layouts with proper traffic flow and ventilation.<\/p><\/div>\r\n <div class=\"feat-card\"><div class=\"fi\">\ud83d\udcc4<\/div><h4>Print-Ready PDFs<\/h4><p>A2-size blueprints with title block, scale bar, north arrow, and all utility plans \u2014 ready for contractors.<\/p><\/div>\r\n <div class=\"feat-card\"><div class=\"fi\">\ud83d\udd27<\/div><h4>All Utility Plans<\/h4><p>Water supply routing, gas pipeline layout, and electrical wiring diagrams \u2014 not just the floor plan.<\/p><\/div>\r\n <div class=\"feat-card\"><div class=\"fi\">\u26a1<\/div><h4>Instant Results<\/h4><p>Fill in your requirements and receive a complete set of drawings in under 30 seconds.<\/p><\/div>\r\n <div class=\"feat-card\"><div class=\"fi\">\ud83d\udcbe<\/div><h4>Design History<\/h4><p>All designs saved locally. Return, download, or share any previous project anytime.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\">\r\n <div class=\"container text-center\">\r\n <div class=\"sec-label\">How It Works<\/div>\r\n <h2 class=\"sec-title\">3 Simple Steps<\/h2>\r\n <div class=\"steps-grid\">\r\n <div class=\"step-item\"><h4>Enter Your Requirements<\/h4><p>Tell us plot size, bedrooms, living spaces, kitchen, outdoor areas, and utility needs through our 7-step wizard.<\/p><\/div>\r\n <div class=\"step-item\"><h4>AI Generates Your Design<\/h4><p>Claude AI analyzes your specs and generates an optimized floor plan following Pakistani architectural standards.<\/p><\/div>\r\n <div class=\"step-item\"><h4>Review All Plans<\/h4><p>Floor plan, water, gas, electrical, material estimates \u2014 all in one place with tabs.<\/p><\/div>\r\n <div class=\"step-item\"><h4>Download & Build<\/h4><p>Export professional PDFs ready to share with your contractor and start construction.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section section-alt\" id=\"pricing\">\r\n <div class=\"container text-center\">\r\n <div class=\"sec-label\">Simple Pricing<\/div>\r\n <h2 class=\"sec-title\">Start Free. Upgrade When Ready.<\/h2>\r\n <div class=\"pricing-wrap\">\r\n <div class=\"pc\">\r\n <h3>Free<\/h3>\r\n <div class=\"price\">$0 <sub>forever<\/sub><\/div>\r\n <div class=\"period\">No credit card required<\/div>\r\n <ul>\r\n <li><span class=\"chk\">\u2713<\/span> 5 designs lifetime<\/li>\r\n <li><span class=\"chk\">\u2713<\/span> 2D Floor Plan (SVG)<\/li>\r\n <li><span class=\"chk\">\u2713<\/span> Design Notes<\/li>\r\n <li><span class=\"chk\">\u2713<\/span> PDF export (watermarked)<\/li>\r\n <li><span class=\"xmark\">\u2715<\/span> <span style=\"color:var(--muted)\">Water \/ Gas \/ Electrical plans<\/span><\/li>\r\n <li><span class=\"xmark\">\u2715<\/span> <span style=\"color:var(--muted)\">Material estimates<\/span><\/li>\r\n <li><span class=\"xmark\">\u2715<\/span> <span style=\"color:var(--muted)\">Door & Window schedules<\/span><\/li>\r\n <\/ul>\r\n <button class=\"btn btn-outline\" style=\"width:100%\" onclick=\"showPage('app')\">Start Free \u2192<\/button>\r\n <\/div>\r\n <div class=\"pc featured\">\r\n <div class=\"pop-badge\">\u2b50 Most Popular<\/div>\r\n <h3 style=\"color:var(--blue)\">Pro<\/h3>\r\n <div class=\"price\" style=\"color:var(--red)\">$19 <sub>\/mo<\/sub><\/div>\r\n <div class=\"period\">or $149\/year \u00b7 Cancel anytime<\/div>\r\n <ul>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>Unlimited designs<\/strong><\/li>\r\n <li><span class=\"chk\">\u2713<\/span> Full 2D Floor Plan<\/li>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>Water Supply Plan<\/strong><\/li>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>Gas Pipeline Plan<\/strong><\/li>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>Electrical Layout<\/strong><\/li>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>Material Estimates<\/strong><\/li>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>Door & Window Schedules<\/strong><\/li>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>A2 PDF \u2014 no watermark<\/strong><\/li>\r\n <\/ul>\r\n <button class=\"btn btn-primary\" style=\"width:100%;margin-bottom:8px\" onclick=\"alert('Configure Stripe in config section at bottom of file')\">Get Pro \u2014 $19\/mo<\/button>\r\n <button class=\"btn btn-outline\" style=\"width:100%;font-size:13px\" onclick=\"alert('Configure Stripe in config section at bottom of file')\">Annual \u2014 $149\/yr (Save $79)<\/button>\r\n <\/div>\r\n <\/div>\r\n <p style=\"margin-top:1.25rem;font-size:13px;color:var(--muted)\">Payments by Stripe \u00b7 30-day money-back guarantee<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\">\r\n <div class=\"container text-center\">\r\n <div class=\"sec-label\">Testimonials<\/div>\r\n <h2 class=\"sec-title\">Trusted Across Pakistan<\/h2>\r\n <div class=\"testi-grid\">\r\n <div class=\"testi\"><p>\"Generated a complete 5-marla house plan in 3 minutes. The water supply routing was exactly what my plumber needed.\"<\/p><div class=\"testi-author\"><div class=\"testi-avatar\">AK<\/div><div><div class=\"testi-name\">Ahmed Khan<\/div><div class=\"testi-role\">Contractor, Lahore<\/div><\/div><\/div><\/div>\r\n <div class=\"testi\"><p>\"I designed my 10-marla house layout myself. Saved Rs. 50,000 in architect fees for the initial drafts.\"<\/p><div class=\"testi-author\"><div class=\"testi-avatar\">SA<\/div><div><div class=\"testi-name\">Sara Ahmed<\/div><div class=\"testi-role\">Homeowner, Islamabad<\/div><\/div><\/div><\/div>\r\n <div class=\"testi\"><p>\"The electrical plan was detailed enough to brief my electrician \u2014 included DB panel location and circuit breakdown.\"<\/p><div class=\"testi-author\"><div class=\"testi-avatar\">MR<\/div><div><div class=\"testi-name\">Muhammad Raza<\/div><div class=\"testi-role\">Engineer, Karachi<\/div><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section section-alt\">\r\n <div class=\"container text-center\">\r\n <div class=\"sec-label\">FAQ<\/div>\r\n <h2 class=\"sec-title\">Common Questions<\/h2>\r\n <div class=\"faq\">\r\n <div class=\"faq-item\"><div class=\"faq-q\" onclick=\"this.parentElement.classList.toggle('open')\">Is this a real architectural drawing or just a sketch? <span class=\"arr\">\u25bc<\/span><\/div><div class=\"faq-a\">ArchitectAI Pro generates professional-grade 2D floor plans following Pakistani construction standards. While AI-generated plans should be reviewed by a licensed architect before construction, they are detailed enough to plan, budget, and brief your contractor.<\/div><\/div>\r\n <div class=\"faq-item\"><div class=\"faq-q\" onclick=\"this.parentElement.classList.toggle('open')\">What plot sizes are supported? <span class=\"arr\">\u25bc<\/span><\/div><div class=\"faq-a\">Any plot size \u2014 from 3-marla houses to large farmhouses, villas, and commercial buildings. The AI adapts the layout to your exact dimensions.<\/div><\/div>\r\n <div class=\"faq-item\"><div class=\"faq-q\" onclick=\"this.parentElement.classList.toggle('open')\">Can I get a double-story design? <span class=\"arr\">\u25bc<\/span><\/div><div class=\"faq-a\">Yes! Select \"Double Story\" in the wizard. The AI generates separate floor plans for each level with staircase placement shown on both floors.<\/div><\/div>\r\n <div class=\"faq-item\"><div class=\"faq-q\" onclick=\"this.parentElement.classList.toggle('open')\">What does the Pro PDF include? <span class=\"arr\">\u25bc<\/span><\/div><div class=\"faq-a\">Floor plan, Water supply system, Gas pipeline, Electrical layout, Material estimates, Door\/window schedule, and Design notes \u2014 all formatted for A2 paper with a professional title block.<\/div><\/div>\r\n <div class=\"faq-item\"><div class=\"faq-q\" onclick=\"this.parentElement.classList.toggle('open')\">Where is my API key stored? <span class=\"arr\">\u25bc<\/span><\/div><div class=\"faq-a\">Your Anthropic API key is stored only in the CONFIG section at the bottom of this HTML file and never sent anywhere except directly to api.anthropic.com. For production, use a backend proxy instead.<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"cta-band\">\r\n <h2>Ready to Design Your Dream Home?<\/h2>\r\n <p>Start free \u2014 no credit card, no download, just results.<\/p>\r\n <button class=\"btn btn-xl\" style=\"background:white;color:var(--red)\" onclick=\"showPage('app')\">\ud83c\udfd7\ufe0f Start Designing Free \u2192<\/button>\r\n <\/div>\r\n\r\n \r\n <footer>\r\n <div class=\"ft-grid\">\r\n <div>\r\n <div style=\"display:flex;align-items:center;gap:10px;margin-bottom:.75rem\"><div class=\"brand-icon\">\ud83c\udfd7\ufe0f<\/div><span style=\"font-weight:700;color:white\">ArchitectAI Pro<\/span><\/div>\r\n <p style=\"font-size:13px;line-height:1.7;max-width:230px\">Professional architectural floor plans powered by Claude AI. Built for Pakistani homebuilders and contractors.<\/p>\r\n <\/div>\r\n <div><h4>Product<\/h4><a href=\"#\" onclick=\"showPage('app')\">Design Tool<\/a><a href=\"#\" onclick=\"showSection('pricing')\">Pricing<\/a><\/div>\r\n <div><h4>Design Types<\/h4><a href=\"#\" onclick=\"showPage('app')\">Houses<\/a><a href=\"#\" onclick=\"showPage('app')\">Apartments<\/a><a href=\"#\" onclick=\"showPage('app')\">Farmhouses<\/a><\/div>\r\n <div><h4>Support<\/h4><a href=\"mailto:support@architectaipro.com\">Email Support<\/a><a href=\"#\">Privacy Policy<\/a><\/div>\r\n <\/div>\r\n <div class=\"ft-bottom\">\r\n <span>\u00a9 2025 ArchitectAI Pro \u00b7 All rights reserved<\/span>\r\n <span>Powered by Anthropic Claude AI<\/span>\r\n <\/div>\r\n <\/footer>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div id=\"page-app\" class=\"page\">\r\n<div class=\"app-wrap\">\r\n\r\n \r\n <div id=\"tier-banner\" class=\"tier-banner\">\r\n <div class=\"tier-info\">\ud83c\udd93 <span id=\"tier-text\">Free Plan \u2014 5 designs remaining<\/span><\/div>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"showSection('pricing');showPage('home')\">Upgrade to Pro \u2728<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"wiz-panel\">\r\n <div class=\"step-bar\" id=\"step-bar\"><\/div>\r\n <div class=\"wiz-card\">\r\n <div class=\"step-hdr\">\r\n <div class=\"step-icon-box\" id=\"step-icon\">\ud83d\udcd0<\/div>\r\n <div class=\"step-hdr-txt\">\r\n <div class=\"step-num\" id=\"step-num\">Step 1 of 7<\/div>\r\n <h2 id=\"step-title\">Plot Information<\/h2>\r\n <p id=\"step-desc\">Tell us about your plot<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-grid\" id=\"step-fields\"><\/div>\r\n <div class=\"nav-row\">\r\n <button class=\"btn btn-ghost\" id=\"btn-prev\" onclick=\"prevStep()\">\u2190 Back<\/button>\r\n <button class=\"btn btn-blue\" id=\"btn-next\" onclick=\"nextStep()\">Next Step \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"err-box\" id=\"err-box\">\u26a0\ufe0f <span id=\"err-msg\"><\/span><\/div>\r\n <div style=\"margin-top:1rem;padding:.875rem 1rem;background:var(--blue-pale);border-radius:var(--r-md);border:1px solid var(--blue-lt);font-size:13px;color:var(--blue)\">\r\n \ud83d\udca1 <strong>Tip:<\/strong> 5-marla = 25\u00d745 ft \u00b7 10-marla = 35\u00d765 ft \u00b7 1-kanal = 60\u00d7120 ft\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"load-panel\" style=\"display:none\" class=\"load-screen\">\r\n <div class=\"wiz-card\" style=\"text-align:center;padding:3rem\">\r\n <span class=\"load-icon\">\ud83c\udfd7\ufe0f<\/span>\r\n <h3 style=\"color:var(--blue);margin-bottom:.5rem\">Generating Your Floor Plan<\/h3>\r\n <p id=\"load-msg\" style=\"color:var(--muted);font-size:14px\">Analyzing plot dimensions...<\/p>\r\n <div class=\"load-bar\"><div class=\"load-fill\"><\/div><\/div>\r\n <p style=\"margin-top:1.25rem;font-size:12px;color:var(--muted)\">Usually takes 10\u201325 seconds<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"res-panel\" style=\"display:none\">\r\n <div class=\"res-hdr\">\r\n <div>\r\n <h2 style=\"color:var(--blue)\">Your Floor Plan is Ready \ud83c\udf89<\/h2>\r\n <p style=\"color:var(--muted);font-size:14px\">Review all tabs below<\/p>\r\n <\/div>\r\n <div style=\"display:flex;gap:8px;flex-wrap:wrap\">\r\n <button class=\"btn btn-ghost btn-sm\" onclick=\"resetWizard()\">\u21a9 New Design<\/button>\r\n <button class=\"btn btn-outline btn-sm\" onclick=\"showPage('home')\">\ud83c\udfe0 Home<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"metric-grid\" id=\"res-metrics\"><\/div>\r\n <div class=\"tab-bar\" id=\"res-tabs\"><\/div>\r\n <div id=\"res-content\"><\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n<div class=\"pg-ftr\">ArchitectAI Pro \u00b7 Powered by Claude AI \u00b7 Professional Architectural Design<br><small style=\"opacity:.6\">AI-generated plans should be reviewed by a licensed architect before construction.<\/small><\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n\r\n<script>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \u2699\ufe0f CONFIG \u2014 ADD YOUR API KEY HERE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nconst CONFIG = {\r\n apiKey: \"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\", \/\/ \u2190 paste your key from console.anthropic.com\r\n model: \"claude-sonnet-4-20250514\",\r\n maxTokens: 4000,\r\n freeTierLimit: 5,\r\n \/\/ Stripe (optional)\r\n stripeMonthly: \"https:\/\/buy.stripe.com\/YOUR_LINK\",\r\n stripeAnnual: \"https:\/\/buy.stripe.com\/YOUR_LINK\"\r\n};\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PAGE NAVIGATION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction showPage(id) {\r\n document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));\r\n document.getElementById('page-' + id).classList.add('active');\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n if (id === 'app') { updateTierBanner(); renderStep(); }\r\n}\r\nfunction showSection(id) {\r\n const el = document.getElementById(id);\r\n if (el) el.scrollIntoView({ behavior: 'smooth' });\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n STATE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nlet curStep = 0;\r\nconst formData = {};\r\nlet currentResult = null;\r\nlet isPro = false; \/\/ set to true after Stripe webhook confirms payment\r\nlet designsUsed = parseInt(localStorage.getItem('arch_designs_used') || '0');\r\n\r\nfunction updateTierBanner() {\r\n const remaining = Math.max(0, CONFIG.freeTierLimit - designsUsed);\r\n const tb = document.getElementById('tier-banner');\r\n const tt = document.getElementById('tier-text');\r\n if (isPro) {\r\n tb.className = 'tier-banner pro';\r\n tt.textContent = '\u2b50 Pro Plan \u2014 Unlimited designs unlocked';\r\n } else {\r\n tb.className = 'tier-banner';\r\n tt.textContent = `Free Plan \u2014 ${remaining} design${remaining !== 1 ? 's' : ''} remaining`;\r\n }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n WIZARD STEPS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nconst STEPS = [\r\n { id:'plot', title:'Plot Information', icon:'\ud83d\udcd0', desc:'Your land plot dimensions and orientation',\r\n fields:[\r\n {id:'plotWidth', label:'Plot Width', type:'number', ph:'30', unit:'ft', req:true},\r\n {id:'plotLength',label:'Plot Length',type:'number', ph:'60', unit:'ft', req:true},\r\n {id:'plotShape', label:'Plot Shape', type:'select', opts:['Rectangular','Square','L-Shaped','Irregular']},\r\n {id:'plotType', label:'Plot Type', type:'select', opts:['Corner Plot','Middle Plot']},\r\n {id:'gateDir', label:'Gate Faces', type:'select', opts:['North','South','East','West']},\r\n {id:'floors', label:'Floors', type:'select', opts:['Single Story','Double Story','Triple Story']},\r\n ]},\r\n { id:'rooms', title:'Bedrooms & Rooms', icon:'\ud83d\udecf\ufe0f', desc:'Configure your sleeping spaces',\r\n fields:[\r\n {id:'bedrooms', label:'Bedrooms', type:'number', ph:'3', req:true},\r\n {id:'bedroomSize',label:'Bedroom Size', type:'select', opts:['Small (10\u00d710ft)','Medium (12\u00d712ft)','Large (14\u00d714ft)','Master Suite (16\u00d714ft)']},\r\n {id:'attBath', label:'Attached Bathrooms',type:'select', opts:['All bedrooms','Master only','None']},\r\n {id:'dressing', label:'Dressing Area', type:'select', opts:['Master only','All bedrooms','None']},\r\n {id:'acPoints', label:'AC Points', type:'select', opts:['All rooms','Master only','None']},\r\n {id:'fanPoints', label:'Fan Points\/Room', type:'select', opts:['1 fan','2 fans','3 fans']},\r\n {id:'roshanDan', label:'Skylights (Roshan Dan)',type:'select', opts:['Yes \u2013 all bedrooms','Bathrooms only','None']},\r\n ]},\r\n { id:'baths', title:'Bathrooms', icon:'\ud83d\udebf', desc:'Plan your wash areas',\r\n fields:[\r\n {id:'extraBaths', label:'Extra Bathrooms (non-attached)', type:'number', ph:'1'},\r\n {id:'toiletType', label:'Toilet Style', type:'select', opts:['Western','Eastern','Both']},\r\n {id:'bathWin', label:'Bath Windows', type:'select', opts:['Yes \u2013 all','Yes \u2013 some','No']},\r\n {id:'bathSize', label:'Bathroom Size', type:'select', opts:['Small (5\u00d77ft)','Medium (6\u00d78ft)','Large (7\u00d79ft)']},\r\n {id:'hotWater', label:'Hot Water', type:'select', opts:['Geyser per bathroom','Central geyser','Solar heater','None']},\r\n ]},\r\n { id:'living', title:'Living Spaces', icon:'\ud83d\udecb\ufe0f', desc:'Drawing rooms, lounge, dining',\r\n fields:[\r\n {id:'drawingRooms',label:'Drawing Rooms', type:'number', ph:'1'},\r\n {id:'drawingSize', label:'Drawing Room Size', type:'select', opts:['Standard (12\u00d714ft)','Large (14\u00d718ft)','Extra Large (18\u00d720ft)']},\r\n {id:'drawingBath', label:'Drawing Room Bath', type:'select', opts:['Yes','No']},\r\n {id:'tvLounge', label:'TV Lounge', type:'select', opts:['Open plan','Separate room','None']},\r\n {id:'loungeSize', label:'Lounge Size', type:'select', opts:['Small (12\u00d712ft)','Medium (14\u00d714ft)','Large (16\u00d718ft)']},\r\n {id:'dining', label:'Dining Area', type:'select', opts:['Separate room','Combined with living','None']},\r\n {id:'prayerRoom', label:'Prayer Room', type:'select', opts:['Yes','No']},\r\n ]},\r\n { id:'kitchen', title:'Kitchen & Utility', icon:'\ud83c\udf73', desc:'Kitchen style and utility rooms',\r\n fields:[\r\n {id:'kitchens', label:'Kitchens', type:'number', ph:'1'},\r\n {id:'kitchenSize', label:'Kitchen Size', type:'select', opts:['Small (8\u00d710ft)','Medium (10\u00d712ft)','Large (12\u00d714ft)']},\r\n {id:'kitchenStyle',label:'Kitchen Style', type:'select', opts:['Closed (separate)','Open plan','Semi-open']},\r\n {id:'washArea', label:'Wash Area', type:'select', opts:['Separate room','Combined with kitchen','None']},\r\n {id:'laundry', label:'Laundry Room', type:'select', opts:['Separate','Combined with wash','None']},\r\n ]},\r\n { id:'outdoor', title:'Outdoor & Utility', icon:'\ud83c\udf3f', desc:'Exterior spaces and service areas',\r\n fields:[\r\n {id:'veranda', label:'Veranda (Brambda)', type:'select', opts:['Front only','Back only','Both sides','None']},\r\n {id:'verandaDep', label:'Veranda Depth', type:'select', opts:['5 ft deep','8 ft deep','10 ft deep']},\r\n {id:'courtyard', label:'Courtyard (Sehan)', type:'select', opts:['Yes','No']},\r\n {id:'garage', label:'Garage', type:'select', opts:['1 car','2 cars','None']},\r\n {id:'servantQtr', label:\"Servant's Quarter\", type:'select', opts:['Yes \u2013 with bath','Yes \u2013 no bath','No']},\r\n {id:'storeRoom', label:'Store Room', type:'select', opts:['Yes','No']},\r\n {id:'boundWall', label:'Boundary Wall', type:'select', opts:['All 4 sides','3 sides','Front only']},\r\n ]},\r\n { id:'systems', title:'Systems & Details', icon:'\u26a1', desc:'Staircase, utilities, project info',\r\n fields:[\r\n {id:'stairPos', label:'Staircase Location', type:'select', opts:['Front','Back','Right side','Left side','Center','N\/A']},\r\n {id:'stairStyle', label:'Staircase Style', type:'select', opts:['Straight','L-Shaped','U-Shape','Spiral','N\/A']},\r\n {id:'waterSrc', label:'Water Source', type:'select', opts:['WASA\/Municipal','Borehole\/Well','Both']},\r\n {id:'ohTank', label:'Overhead Tank', type:'select', opts:['1000 gallons','500 gallons','None']},\r\n {id:'ugTank', label:'Underground Tank', type:'select', opts:['Yes \u2013 5000 gal','Yes \u2013 2000 gal','No']},\r\n {id:'gasSupply', label:'Gas Supply', type:'select', opts:['SNGPL piped gas','LPG cylinders','None']},\r\n {id:'solar', label:'Solar Provision', type:'select', opts:['Yes \u2013 5KW','Yes \u2013 10KW','No']},\r\n {id:'projName', label:'Project Name', type:'text', ph:'My Dream Home'},\r\n {id:'ownerName', label:'Owner Name', type:'text', ph:'Your Name'},\r\n ]},\r\n];\r\n\r\nconst LOAD_MSGS = [\r\n 'Analyzing plot dimensions and setbacks...','Calculating optimal room placement...',\r\n 'Planning traffic flow and circulation...','Routing water supply lines...',\r\n 'Designing gas pipeline network...','Wiring electrical circuits...',\r\n 'Generating material estimates...','Preparing door & window schedules...',\r\n 'Finalizing your floor plan...'\r\n];\r\n\r\nfunction renderStep() {\r\n const s = STEPS[curStep];\r\n const total = STEPS.length;\r\n\r\n \/\/ Step bar\r\n document.getElementById('step-bar').innerHTML = STEPS.map((st, i) => {\r\n let cls = 'sp';\r\n if (i === curStep) cls += ' active';\r\n else if (i < curStep) cls += ' done';\r\n return `<button class=\"${cls}\" onclick=\"goStep(${i})\">${i < curStep ? '\u2713 ' : ''}${st.title.split(' ')[0]}<\/button>`;\r\n }).join('');\r\n\r\n document.getElementById('step-icon').textContent = s.icon;\r\n document.getElementById('step-title').textContent = s.title;\r\n document.getElementById('step-desc').textContent = s.desc;\r\n document.getElementById('step-num').textContent = `Step ${curStep + 1} of ${total}`;\r\n\r\n \/\/ Fields\r\n document.getElementById('step-fields').innerHTML = s.fields.map(f => {\r\n const val = formData[f.id] || '';\r\n let ctrl = '';\r\n if (f.type === 'select') {\r\n ctrl = `<select id=\"f_${f.id}\" class=\"fc\" onchange=\"formData['${f.id}']=this.value\">\r\n <option value=\"\">Choose...<\/option>\r\n ${f.opts.map(o => `<option value=\"${o}\"${val===o?' selected':''}>${o}<\/option>`).join('')}\r\n <\/select>`;\r\n } else {\r\n ctrl = `<div class=\"inp-grp\">\r\n <input type=\"${f.type}\" id=\"f_${f.id}\" class=\"fc\" value=\"${val}\"\r\n placeholder=\"${f.ph||''}\" oninput=\"formData['${f.id}']=this.value\"\r\n ${f.unit ? 'style=\"padding-right:46px\"' : ''}>\r\n ${f.unit ? `<span class=\"inp-addon\">${f.unit}<\/span>` : ''}\r\n <\/div>`;\r\n }\r\n return `<div class=\"fg\">\r\n <label class=\"flbl\">${f.label}${f.req ? '<span class=\"req\"> *<\/span>' : ''}<\/label>\r\n ${ctrl}\r\n <\/div>`;\r\n }).join('');\r\n\r\n document.getElementById('btn-prev').disabled = curStep === 0;\r\n const nb = document.getElementById('btn-next');\r\n if (curStep === total - 1) {\r\n nb.textContent = '\ud83c\udfd7\ufe0f Generate Floor Plan';\r\n nb.className = 'btn btn-primary btn-lg';\r\n nb.onclick = startGenerate;\r\n } else {\r\n nb.textContent = 'Next Step \u2192';\r\n nb.className = 'btn btn-blue';\r\n nb.onclick = nextStep;\r\n }\r\n hideErr();\r\n}\r\n\r\nfunction goStep(i) { if (i <= curStep) { curStep = i; renderStep(); } }\r\nfunction prevStep() { if (curStep > 0) { curStep--; renderStep(); } }\r\nfunction nextStep() { if (validate()) { curStep++; renderStep(); window.scrollTo({top:0,behavior:'smooth'}); } }\r\n\r\nfunction validate() {\r\n for (const f of STEPS[curStep].fields) {\r\n if (f.req && !formData[f.id]) { showErr(`Please fill in: ${f.label}`); document.getElementById(`f_${f.id}`)?.focus(); return false; }\r\n }\r\n return true;\r\n}\r\nfunction showErr(msg) { const e = document.getElementById('err-box'); e.style.display = 'flex'; document.getElementById('err-msg').textContent = msg; }\r\nfunction hideErr() { document.getElementById('err-box').style.display = 'none'; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n GENERATION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nasync function startGenerate() {\r\n if (!validate()) return;\r\n if (!isPro && designsUsed >= CONFIG.freeTierLimit) {\r\n alert(`You've used all ${CONFIG.freeTierLimit} free designs. Upgrade to Pro for unlimited!`);\r\n showPage('home'); showSection('pricing'); return;\r\n }\r\n if (!CONFIG.apiKey || CONFIG.apiKey === 'YOUR_ANTHROPIC_API_KEY') {\r\n alert('\u26a0\ufe0f Please open this HTML file in a text editor and set your Anthropic API key in the CONFIG section near the bottom of the file.');\r\n return;\r\n }\r\n\r\n document.getElementById('wiz-panel').style.display = 'none';\r\n document.getElementById('load-panel').style.display = 'block';\r\n document.getElementById('res-panel').style.display = 'none';\r\n\r\n let li = 0;\r\n const lt = setInterval(() => {\r\n li = (li + 1) % LOAD_MSGS.length;\r\n const el = document.getElementById('load-msg');\r\n if (el) el.textContent = LOAD_MSGS[li];\r\n }, 2800);\r\n\r\n try {\r\n const result = await callClaude();\r\n clearInterval(lt);\r\n designsUsed++;\r\n localStorage.setItem('arch_designs_used', designsUsed);\r\n \/\/ Save to localStorage\r\n const saved = JSON.parse(localStorage.getItem('arch_saved_designs') || '[]');\r\n saved.unshift({ id: 'des_' + Date.now(), projectName: formData.projName || 'Untitled', plotSize: `${formData.plotWidth}\u00d7${formData.plotLength} ft`, createdAt: new Date().toISOString(), formData: {...formData}, result });\r\n localStorage.setItem('arch_saved_designs', JSON.stringify(saved.slice(0, 20)));\r\n currentResult = result;\r\n renderResults(result);\r\n } catch (err) {\r\n clearInterval(lt);\r\n document.getElementById('load-panel').style.display = 'none';\r\n document.getElementById('wiz-panel').style.display = 'block';\r\n showErr('Generation failed: ' + err.message + '. Check your API key and try again.');\r\n }\r\n}\r\n\r\nasync function callClaude() {\r\n const specs = Object.entries(formData).filter(([k,v]) => v).map(([k,v]) => `${k}: ${v}`).join('\\n');\r\n const prompt = `Generate a complete architectural floor plan for these specifications:\\n\\n${specs}\\n\\nReturn ONLY valid JSON (no markdown, no code blocks) with this structure:\\n{\"floorPlan\":{\"totalWidth\":<10 units per foot based on plotWidth>,\"totalHeight\":<10 units per foot based on plotLength>,\"scale\":\"1:100\",\"rooms\":[{\"id\":\"r1\",\"label\":\"Living Room\",\"x\":<units from left>,\"y\":<units from top>,\"w\":<width>,\"h\":<height>,\"type\":\"living\",\"dims\":\"16 \u00d7 18 ft\"}],\"doors\":[{\"x\":50,\"y\":0,\"width\":28,\"wall\":\"top\"}],\"windows\":[{\"x\":100,\"y\":0,\"width\":35,\"wall\":\"top\"}]},\"summary\":{\"totalBuiltArea\":\"1800 sq ft\",\"plotArea\":\"1800 sq ft\",\"coverage\":\"65%\",\"setbacks\":{\"front\":\"5 ft\",\"back\":\"3 ft\",\"left\":\"3 ft\",\"right\":\"3 ft\"}},\"materialEstimate\":{\"bricks\":18000,\"cementBags\":320,\"steelTons\":3.2,\"tilesArea\":1400},\"doorSchedule\":[{\"id\":\"D1\",\"location\":\"Main Entrance\",\"size\":\"4\u00d77 ft\",\"material\":\"Solid Teak Wood\",\"direction\":\"Inward-Left\"}],\"windowSchedule\":[{\"id\":\"W1\",\"location\":\"Bedroom 1 North\",\"size\":\"4\u00d74 ft\",\"wall\":\"North\",\"heightFromFloor\":\"3 ft\"}],\"waterPlan\":\"WATER SUPPLY SYSTEM:\\\\n\\\\nMain connection enters from front boundary...\",\"gasPlan\":\"GAS SUPPLY SYSTEM:\\\\n\\\\nGas meter at boundary wall...\",\"electricalPlan\":\"ELECTRICAL SYSTEM:\\\\n\\\\nMain DB panel in lobby...\",\"designNotes\":\"DESIGN NOTES:\\\\n\\\\n1. Plot utilization...\"}\r\n\r\nRules: All rooms must fit inside plot. External walls 9 inch, internal 4.5 inch. Min bedroom 10\u00d710ft, bathroom 5\u00d77ft, kitchen 8\u00d710ft. Place veranda at front, garage near gate, bathrooms grouped. Use Pakistani architectural standards.`;\r\n\r\n const res = await fetch('https:\/\/api.anthropic.com\/v1\/messages', {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json', 'x-api-key': CONFIG.apiKey, 'anthropic-version': '2023-06-01' },\r\n body: JSON.stringify({ model: CONFIG.model, max_tokens: CONFIG.maxTokens,\r\n system: 'You are ArchitectAI Pro, expert in Pakistani residential architecture. Generate floor plans as JSON only. No markdown, no code blocks.',\r\n messages: [{ role: 'user', content: prompt }] })\r\n });\r\n if (!res.ok) throw new Error(`API error ${res.status}: ${await res.text()}`);\r\n const data = await res.json();\r\n const text = (data.content || []).map(c => c.text || '').join('').replace(\/```json\\s*\/g,'').replace(\/```\\s*\/g,'').trim();\r\n return JSON.parse(text);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FLOOR PLAN SVG RENDERER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nconst ROOM_FILL = { bedroom:'#DBEAFE',bathroom:'#D1FAE5',kitchen:'#FEF3C7',living:'#EDE9FE',drawing:'#FCE7F3',garage:'#F3F4F6',veranda:'#DCFCE7',store:'#F3F4F6',staircase:'#DBEAFE',dining:'#FEF3C7',servant:'#F9FAFB',other:'#EFF6FF' };\r\nconst ROOM_STROKE = { bedroom:'#1D4ED8',bathroom:'#065F46',kitchen:'#92400E',living:'#4C1D95',drawing:'#831843',garage:'#374151',veranda:'#14532D',store:'#374151',staircase:'#1E3A8A',dining:'#78350F',servant:'#4B5563',other:'#1E40AF' };\r\n\r\nfunction buildSVG(fp, pro) {\r\n if (!fp || !fp.rooms) return '<p style=\"text-align:center;padding:3rem;color:var(--muted)\">No floor plan data<\/p>';\r\n const { rooms=[], doors=[], windows=[], totalWidth=500, totalHeight=400, scale='1:100' } = fp;\r\n const PAD = 60, W = totalWidth + PAD*2, H = totalHeight + PAD*2 + 50;\r\n let s = `<svg viewBox=\"0 0 ${W} ${H}\" style=\"width:100%;display:block\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">`;\r\n s += `<defs><pattern id=\"gm\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\"><path d=\"M10 0L0 0 0 10\" fill=\"none\" stroke=\"#E2E8F0\" stroke-width=\".4\"\/><\/pattern><pattern id=\"gM\" width=\"50\" height=\"50\" patternUnits=\"userSpaceOnUse\"><rect width=\"50\" height=\"50\" fill=\"url(#gm)\"\/><path d=\"M50 0L0 0 0 50\" fill=\"none\" stroke=\"#CBD5E1\" stroke-width=\".8\"\/><\/pattern><\/defs>`;\r\n s += `<rect width=\"${W}\" height=\"${H}\" fill=\"#F0F7FF\"\/>`;\r\n s += `<rect x=\"${PAD}\" y=\"${PAD}\" width=\"${totalWidth}\" height=\"${totalHeight}\" fill=\"url(#gM)\"\/>`;\r\n \/\/ Header\r\n s += `<rect width=\"${W}\" height=\"${PAD-10}\" fill=\"#1D3557\"\/>`;\r\n s += `<text x=\"${W\/2}\" y=\"${(PAD-10)\/2+4}\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-size=\"12\" font-weight=\"700\" font-family=\"Segoe UI,sans-serif\" fill=\"white\">ARCHITECTURAL FLOOR PLAN \u00b7 SCALE ${scale}<\/text>`;\r\n if (!pro) s += `<text x=\"${W-10}\" y=\"${(PAD-10)\/2+4}\" text-anchor=\"end\" dominant-baseline=\"middle\" font-size=\"9\" font-family=\"Segoe UI,sans-serif\" fill=\"#FFB703\">FREE PLAN<\/text>`;\r\n \/\/ Plot boundary\r\n s += `<rect x=\"${PAD}\" y=\"${PAD}\" width=\"${totalWidth}\" height=\"${totalHeight}\" fill=\"none\" stroke=\"#1D3557\" stroke-width=\"2.5\" stroke-dasharray=\"10,5\"\/>`;\r\n \/\/ Setback hint\r\n s += `<rect x=\"${PAD+15}\" y=\"${PAD+15}\" width=\"${totalWidth-30}\" height=\"${totalHeight-30}\" fill=\"none\" stroke=\"#94A3B8\" stroke-width=\".7\" stroke-dasharray=\"4,3\" opacity=\".5\"\/>`;\r\n\r\n rooms.forEach(r => {\r\n const f = ROOM_FILL[r.type]||'#EFF6FF', st = ROOM_STROKE[r.type]||'#1E40AF';\r\n const rx = PAD+r.x, ry = PAD+r.y, cx = rx+r.w\/2, cy = ry+r.h\/2;\r\n s += `<rect x=\"${rx}\" y=\"${ry}\" width=\"${r.w}\" height=\"${r.h}\" fill=\"${f}\" stroke=\"${st}\" stroke-width=\"1.8\" rx=\"2\"\/>`;\r\n const ly = r.dims ? cy-8 : cy;\r\n s += `<text x=\"${cx}\" y=\"${ly}\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-size=\"9.5\" font-weight=\"700\" font-family=\"Segoe UI,sans-serif\" fill=\"${st}\">${r.label}<\/text>`;\r\n if (r.dims) s += `<text x=\"${cx}\" y=\"${cy+10}\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-size=\"8\" font-family=\"Courier New,monospace\" fill=\"${st}\" opacity=\".8\">${r.dims}<\/text>`;\r\n });\r\n\r\n doors.forEach(d => {\r\n const x = PAD+d.x, y = PAD+d.y, dw = d.width||28, h = d.wall==='top'||d.wall==='bottom';\r\n s += `<line x1=\"${x}\" y1=\"${y}\" x2=\"${h?x+dw:x}\" y2=\"${h?y:y+dw}\" stroke=\"#E63946\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/>`;\r\n s += h ? `<path d=\"M${x},${y} a${dw},${dw} 0 0,1 ${dw},0\" fill=\"none\" stroke=\"#E63946\" stroke-width=\"1\" stroke-dasharray=\"3,2\" opacity=\".5\"\/>`\r\n : `<path d=\"M${x},${y} a${dw},${dw} 0 0,1 0,${dw}\" fill=\"none\" stroke=\"#E63946\" stroke-width=\"1\" stroke-dasharray=\"3,2\" opacity=\".5\"\/>`;\r\n });\r\n\r\n windows.forEach(w => {\r\n const x = PAD+w.x, y = PAD+w.y, ww = w.width||32, h = w.wall==='top'||w.wall==='bottom';\r\n for (let i=0;i<3;i++){const o=i*3-3;\r\n if(h) s+=`<line x1=\"${x}\" y1=\"${y+o}\" x2=\"${x+ww}\" y2=\"${y+o}\" stroke=\"#457B9D\" stroke-width=\"${i===1?2:1}\" opacity=\"${i===1?1:.5}\"\/>`;\r\n else s+=`<line x1=\"${x+o}\" y1=\"${y}\" x2=\"${x+o}\" y2=\"${y+ww}\" stroke=\"#457B9D\" stroke-width=\"${i===1?2:1}\" opacity=\"${i===1?1:.5}\"\/>`;\r\n }\r\n });\r\n\r\n \/\/ North arrow\r\n const nx = W-38, ny = PAD+38;\r\n s += `<circle cx=\"${nx}\" cy=\"${ny}\" r=\"20\" fill=\"white\" stroke=\"#1D3557\" stroke-width=\"1.5\"\/>`;\r\n s += `<polygon points=\"${nx},${ny-16} ${nx-5},${ny-4} ${nx+5},${ny-4}\" fill=\"#1D3557\"\/>`;\r\n s += `<polygon points=\"${nx},${ny+16} ${nx-5},${ny+4} ${nx+5},${ny+4}\" fill=\"#94A3B8\"\/>`;\r\n s += `<text x=\"${nx}\" y=\"${ny-19}\" text-anchor=\"middle\" font-size=\"9\" font-weight=\"800\" font-family=\"Segoe UI,sans-serif\" fill=\"#1D3557\">N<\/text>`;\r\n\r\n \/\/ Legend\r\n [['bedroom','Bedroom'],['bathroom','Bathroom'],['kitchen','Kitchen'],['living','Living'],['veranda','Veranda']].forEach(([t,l],i) => {\r\n const lx = PAD + i*110;\r\n if (lx+105 > W-PAD) return;\r\n s += `<rect x=\"${lx}\" y=\"${H-28}\" width=\"13\" height=\"11\" fill=\"${ROOM_FILL[t]}\" stroke=\"${ROOM_STROKE[t]}\" stroke-width=\"1\" rx=\"2\"\/>`;\r\n s += `<text x=\"${lx+17}\" y=\"${H-19}\" font-size=\"9\" font-family=\"Segoe UI,sans-serif\" fill=\"#374151\">${l}<\/text>`;\r\n });\r\n\r\n \/\/ Scale bar\r\n const sbx = W-140, sby = H-22;\r\n s += `<line x1=\"${sbx}\" y1=\"${sby}\" x2=\"${sbx+100}\" y2=\"${sby}\" stroke=\"#374151\" stroke-width=\"1.5\"\/>`;\r\n [0,50,100].forEach(px => s += `<line x1=\"${sbx+px}\" y1=\"${sby-5}\" x2=\"${sbx+px}\" y2=\"${sby+5}\" stroke=\"#374151\" stroke-width=\"1.5\"\/>`);\r\n s += `<text x=\"${sbx}\" y=\"${sby-8}\" font-size=\"8\" font-family=\"Courier New,monospace\" fill=\"#374151\" text-anchor=\"middle\">0<\/text>`;\r\n s += `<text x=\"${sbx+50}\" y=\"${sby-8}\" font-size=\"8\" font-family=\"Courier New,monospace\" fill=\"#374151\" text-anchor=\"middle\">10ft<\/text>`;\r\n s += `<text x=\"${sbx+100}\" y=\"${sby-8}\" font-size=\"8\" font-family=\"Courier New,monospace\" fill=\"#374151\" text-anchor=\"middle\">20ft<\/text>`;\r\n\r\n \/\/ Watermark\r\n if (!pro) s += `<text x=\"${W\/2}\" y=\"${H\/2+40}\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-size=\"55\" font-weight=\"900\" font-family=\"Courier New,monospace\" fill=\"#1D3557\" opacity=\".065\" transform=\"rotate(-35,${W\/2},${H\/2})\">ARCHITECTAI FREE<\/text>`;\r\n\r\n s += '<\/svg>';\r\n return s;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESULTS RENDERER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction renderResults(result) {\r\n document.getElementById('load-panel').style.display = 'none';\r\n document.getElementById('res-panel').style.display = 'block';\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n\r\n const sum = result.summary || {};\r\n document.getElementById('res-metrics').innerHTML = [\r\n { l:'Built Area', v: sum.totalBuiltArea||'\u2014' },\r\n { l:'Plot Area', v: sum.plotArea||'\u2014' },\r\n { l:'Coverage', v: sum.coverage||'\u2014' },\r\n { l:'Setback (F)',v: sum.setbacks?.front||'5 ft' },\r\n { l:'Bedrooms', v: formData.bedrooms||'\u2014' },\r\n { l:'Floors', v: formData.floors||'\u2014' },\r\n ].map(m => `<div class=\"mc\"><div class=\"ml\">${m.l}<\/div><div class=\"mv\">${m.v}<\/div><\/div>`).join('');\r\n\r\n const TABS = [\r\n { id:'floor', l:'\ud83d\uddfa\ufe0f Floor Plan', free:true },\r\n { id:'water', l:'\ud83d\udca7 Water', free:false },\r\n { id:'gas', l:'\ud83d\udd25 Gas', free:false },\r\n { id:'elec', l:'\u26a1 Electrical', free:false },\r\n { id:'mats', l:'\ud83e\uddf1 Materials', free:false },\r\n { id:'sched', l:'\ud83d\udccb Schedules', free:false },\r\n { id:'notes', l:'\ud83d\udcdd Notes', free:true },\r\n ];\r\n\r\n document.getElementById('res-tabs').innerHTML = TABS.map(t => {\r\n const lk = !t.free && !isPro;\r\n return `<button class=\"tb${t.id==='floor'?' on':''}\" onclick=\"switchTab('${t.id}',${lk})\">${t.l}${lk?' \ud83d\udd12':''}<\/button>`;\r\n }).join('');\r\n\r\n const est = result.materialEstimate || {};\r\n const ds = result.doorSchedule || [];\r\n const ws = result.windowSchedule || [];\r\n\r\n const html = {\r\n floor: `<div class=\"fp-wrap\" id=\"fp-svg\">${buildSVG(result.floorPlan, isPro)}<\/div>\r\n <div style=\"display:flex;gap:10px;margin-top:1rem;flex-wrap:wrap\">\r\n <button class=\"btn btn-blue\" id=\"pdf-btn\" onclick=\"exportPDF()\">\u2b07\ufe0f Export PDF${isPro?'':' (Watermarked)'}<\/button>\r\n ${isPro?'':'<button class=\"btn btn-primary\" onclick=\"showPage(\\'home\\');showSection(\\'pricing\\')\">\u2728 Upgrade for Full PDF<\/button>'}\r\n <\/div>\r\n <div class=\"info-strip\">\ud83d\udccc <strong>Legend:<\/strong> <span style=\"color:#E63946\">\u2501\u2501 Door swing<\/span> <span style=\"color:#457B9D\">\u2504\u2504 Window<\/span> <span style=\"color:#888\">\u2014 \u2014 Plot boundary<\/span><\/div>`,\r\n\r\n water: isPro ? `<div class=\"util-box\"><div class=\"util-hdr\"><span style=\"font-size:24px\">\ud83d\udca7<\/span><h3 style=\"color:var(--blue)\">Water Supply System<\/h3><\/div><div class=\"util-body\">${esc(result.waterPlan||'No data.')}<\/div><\/div>` : lockedTab('Water Supply System','\ud83d\udca7'),\r\n gas: isPro ? `<div class=\"util-box\"><div class=\"util-hdr\"><span style=\"font-size:24px\">\ud83d\udd25<\/span><h3 style=\"color:var(--red)\">Gas Supply System<\/h3><\/div><div class=\"util-body\">${esc(result.gasPlan||'No data.')}<\/div><\/div>` : lockedTab('Gas Supply System','\ud83d\udd25'),\r\n elec: isPro ? `<div class=\"util-box\"><div class=\"util-hdr\"><span style=\"font-size:24px\">\u26a1<\/span><h3 style=\"color:var(--yellow-dk)\">Electrical System<\/h3><\/div><div class=\"util-body\">${esc(result.electricalPlan||'No data.')}<\/div><\/div>` : lockedTab('Electrical Plan','\u26a1'),\r\n\r\n mats: isPro ? `<div class=\"mat-grid\">\r\n <div class=\"mat-card\"><div class=\"mat-icon\">\ud83e\uddf1<\/div><div class=\"mat-lbl\">Bricks<\/div><div class=\"mat-val\">${n(est.bricks)} <span style=\"font-size:.75rem;font-weight:400\">units<\/span><\/div><\/div>\r\n <div class=\"mat-card\"><div class=\"mat-icon\">\ud83c\udfd7\ufe0f<\/div><div class=\"mat-lbl\">Cement Bags<\/div><div class=\"mat-val\">${n(est.cementBags)} <span style=\"font-size:.75rem;font-weight:400\">bags<\/span><\/div><\/div>\r\n <div class=\"mat-card\"><div class=\"mat-icon\">\u2699\ufe0f<\/div><div class=\"mat-lbl\">Steel \/ Rebar<\/div><div class=\"mat-val\">${est.steelTons||0} <span style=\"font-size:.75rem;font-weight:400\">tons<\/span><\/div><\/div>\r\n <div class=\"mat-card\"><div class=\"mat-icon\">\u2b1c<\/div><div class=\"mat-lbl\">Tiles Area<\/div><div class=\"mat-val\">${n(est.tilesArea)} <span style=\"font-size:.75rem;font-weight:400\">sq ft<\/span><\/div><\/div>\r\n <\/div>\r\n <div class=\"alert-w\" style=\"margin-top:1rem\">\u2139\ufe0f Estimates are approximate \u00b115%. Actual quantities vary by site conditions and finish quality.<\/div>` : lockedTab('Material Estimates','\ud83e\uddf1'),\r\n\r\n sched: isPro ? `\r\n <h3 style=\"margin-bottom:1rem;color:var(--blue)\">Door Schedule<\/h3>\r\n <div class=\"sched-wrap\"><table class=\"sched-tbl\"><thead><tr><th>ID<\/th><th>Location<\/th><th>Size<\/th><th>Material<\/th><th>Direction<\/th><\/tr><\/thead><tbody>\r\n ${ds.length ? ds.map(d=>`<tr><td class=\"mono\">${d.id||'\u2014'}<\/td><td>${d.location||'\u2014'}<\/td><td class=\"mono\">${d.size||'\u2014'}<\/td><td>${d.material||'\u2014'}<\/td><td>${d.direction||'\u2014'}<\/td><\/tr>`).join('') : '<tr><td colspan=\"5\" style=\"text-align:center;padding:1.5rem;color:var(--muted)\">No data<\/td><\/tr>'}\r\n <\/tbody><\/table><\/div>\r\n <div class=\"sep\"><h3>Window Schedule<\/h3>\r\n <div class=\"sched-wrap\"><table class=\"sched-tbl\"><thead><tr><th>ID<\/th><th>Location<\/th><th>Size<\/th><th>Wall<\/th><th>Height from Floor<\/th><\/tr><\/thead><tbody>\r\n ${ws.length ? ws.map(w=>`<tr><td class=\"mono\">${w.id||'\u2014'}<\/td><td>${w.location||'\u2014'}<\/td><td class=\"mono\">${w.size||'\u2014'}<\/td><td>${w.wall||'\u2014'}<\/td><td class=\"mono\">${w.heightFromFloor||'\u2014'}<\/td><\/tr>`).join('') : '<tr><td colspan=\"5\" style=\"text-align:center;padding:1.5rem;color:var(--muted)\">No data<\/td><\/tr>'}\r\n <\/tbody><\/table><\/div><\/div>` : lockedTab('Door & Window Schedules','\ud83d\udccb'),\r\n\r\n notes: `<div class=\"util-box\"><div class=\"util-hdr\"><span style=\"font-size:24px\">\ud83d\udcdd<\/span><h3 style=\"color:var(--blue)\">Design Notes & Recommendations<\/h3><\/div><div class=\"util-body\">${esc(result.designNotes||'No notes generated.')}<\/div><\/div>`\r\n };\r\n\r\n document.getElementById('res-content').innerHTML = Object.entries(html)\r\n .map(([id,h]) => `<div class=\"tp${id==='floor'?' on':''}\" id=\"tp-${id}\">${h}<\/div>`).join('');\r\n}\r\n\r\nfunction lockedTab(name, icon) {\r\n return `<div class=\"locked-tab\"><div style=\"font-size:48px;margin-bottom:1rem\">${icon}<\/div><h3 style=\"margin-bottom:.5rem;color:var(--blue)\">${name}<\/h3><p style=\"color:var(--muted);font-size:14px;margin-bottom:1.5rem\">Available on Pro plan<\/p><button class=\"btn btn-primary btn-lg\" onclick=\"showPage('home');showSection('pricing')\">\u2728 Upgrade to Pro<\/button><\/div>`;\r\n}\r\n\r\nfunction switchTab(id, locked) {\r\n if (locked) { showPage('home'); showSection('pricing'); return; }\r\n document.querySelectorAll('.tb').forEach(b => b.classList.remove('on'));\r\n document.querySelectorAll('.tp').forEach(p => p.classList.remove('on'));\r\n event.target.classList.add('on');\r\n document.getElementById('tp-' + id)?.classList.add('on');\r\n}\r\n\r\nfunction esc(s) { return String(s).replace(\/<\/g,'<').replace(\/\\n\/g,'<br>'); }\r\nfunction n(v) { return (v||0).toLocaleString(); }\r\n\r\nfunction resetWizard() {\r\n curStep = 0;\r\n Object.keys(formData).forEach(k => delete formData[k]);\r\n currentResult = null;\r\n document.getElementById('res-panel').style.display = 'none';\r\n document.getElementById('wiz-panel').style.display = 'block';\r\n renderStep();\r\n updateTierBanner();\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PDF EXPORT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nasync function exportPDF() {\r\n if (typeof jsPDF === 'undefined') { alert('PDF library loading... please try again in a moment.'); return; }\r\n const btn = document.getElementById('pdf-btn');\r\n if (btn) { btn.disabled = true; btn.textContent = '\u23f3 Generating PDF...'; }\r\n\r\n try {\r\n const doc = new jsPDF({ orientation:'landscape', unit:'mm', format:'a2' });\r\n const PW = doc.internal.pageSize.getWidth();\r\n const PH = doc.internal.pageSize.getHeight();\r\n\r\n \/\/ Header bar\r\n doc.setFillColor(29, 53, 87);\r\n doc.rect(0, 0, PW, 28, 'F');\r\n doc.setTextColor(255, 255, 255);\r\n doc.setFontSize(18); doc.setFont('helvetica', 'bold');\r\n doc.text('ARCHITECTURAL FLOOR PLAN', 20, 12);\r\n doc.setFontSize(10); doc.setFont('helvetica', 'normal');\r\n doc.setTextColor(168, 218, 220);\r\n doc.text(`Project: ${formData.projName || 'Untitled'} | Owner: ${formData.ownerName || 'N\/A'} | Plot: ${formData.plotWidth||'?'}\u00d7${formData.plotLength||'?'} ft | ${formData.floors || ''}`, 20, 20);\r\n doc.setTextColor(255, 183, 3);\r\n doc.setFont('helvetica', 'bold'); doc.setFontSize(10);\r\n doc.text('ArchitectAI Pro', PW-20, 10, { align:'right' });\r\n doc.setFont('helvetica', 'normal'); doc.setTextColor(200, 220, 240);\r\n doc.text(`Date: ${new Date().toLocaleDateString('en-PK',{year:'numeric',month:'long',day:'numeric'})} | Scale: 1:100`, PW-20, 18, { align:'right' });\r\n\r\n \/\/ Capture SVG as image\r\n const svgEl = document.querySelector('#fp-svg svg');\r\n if (svgEl && typeof html2canvas !== 'undefined') {\r\n const clone = svgEl.cloneNode(true);\r\n clone.style.cssText = 'width:900px;height:650px;position:absolute;left:-9999px;top:0';\r\n document.body.appendChild(clone);\r\n try {\r\n const canvas = await html2canvas(clone, { scale:2, backgroundColor:'#F0F7FF', logging:false });\r\n const img = canvas.toDataURL('image\/png');\r\n const maxW = PW-40, maxH = PH-80;\r\n const r = Math.min(maxW\/canvas.width, maxH\/canvas.height)*2;\r\n doc.addImage(img, 'PNG', 20, 34, canvas.width*r\/2, canvas.height*r\/2);\r\n } finally { document.body.removeChild(clone); }\r\n }\r\n\r\n \/\/ Watermark for free\r\n if (!isPro) {\r\n doc.setFont('helvetica', 'bold'); doc.setFontSize(55);\r\n doc.setTextColor(29, 53, 87);\r\n doc.setGState(doc.GState({ opacity:0.07 }));\r\n doc.text('ARCHITECTAI FREE', PW\/2, PH\/2, { angle:35, align:'center' });\r\n doc.setGState(doc.GState({ opacity:1 }));\r\n }\r\n\r\n \/\/ Summary strip\r\n const sum = currentResult?.summary || {};\r\n const stripY = PH - 50;\r\n doc.setFillColor(240, 247, 255);\r\n doc.roundedRect(20, stripY, PW-40, 40, 3, 3, 'F');\r\n doc.setDrawColor(29, 53, 87); doc.setLineWidth(0.5);\r\n doc.roundedRect(20, stripY, PW-40, 40, 3, 3, 'S');\r\n const mets = [\r\n ['Built Area', sum.totalBuiltArea||'N\/A'],['Plot Area', sum.plotArea||'N\/A'],\r\n ['Coverage', sum.coverage||'N\/A'],['Front Setback', sum.setbacks?.front||'5 ft'],\r\n ['Bedrooms', formData.bedrooms||'N\/A'],['Floors', formData.floors||'N\/A']\r\n ];\r\n const cw = (PW-40)\/mets.length;\r\n mets.forEach((m,i) => {\r\n const mx = 20 + i*cw + cw\/2;\r\n doc.setFont('helvetica','bold'); doc.setFontSize(7); doc.setTextColor(100,116,139);\r\n doc.text(m[0].toUpperCase(), mx, stripY+10, { align:'center' });\r\n doc.setFontSize(12); doc.setTextColor(29,53,87);\r\n doc.text(String(m[1]), mx, stripY+24, { align:'center' });\r\n });\r\n\r\n \/\/ Pro: utility sheets\r\n if (isPro && currentResult) {\r\n const utils = [\r\n { title:'WATER SUPPLY SYSTEM', content: currentResult.waterPlan, r:69, g:123, b:157 },\r\n { title:'GAS SUPPLY SYSTEM', content: currentResult.gasPlan, r:230, g:57, b:70 },\r\n { title:'ELECTRICAL PLAN', content: currentResult.electricalPlan, r:180, g:100, b:0 },\r\n ];\r\n utils.forEach(u => {\r\n doc.addPage();\r\n doc.setFillColor(u.r, u.g, u.b); doc.rect(0, 0, PW, 20, 'F');\r\n doc.setTextColor(255,255,255); doc.setFontSize(14); doc.setFont('helvetica','bold');\r\n doc.text(u.title, 20, 13);\r\n doc.setTextColor(30,30,30); doc.setFontSize(10); doc.setFont('helvetica','normal');\r\n doc.text(doc.splitTextToSize(u.content||'No data.', PW-40), 20, 30);\r\n });\r\n\r\n \/\/ Materials\r\n doc.addPage();\r\n doc.setFillColor(45,198,83); doc.rect(0,0,PW,20,'F');\r\n doc.setTextColor(255,255,255); doc.setFontSize(14); doc.setFont('helvetica','bold');\r\n doc.text('MATERIAL ESTIMATE REPORT', 20, 13);\r\n const e = currentResult.materialEstimate || {};\r\n [['\ud83e\uddf1 Bricks', n(e.bricks)+' units'],['\ud83c\udfd7\ufe0f Cement', n(e.cementBags)+' bags'],['\u2699\ufe0f Steel', (e.steelTons||0)+' tons'],['\u2b1c Tiles', n(e.tilesArea)+' sq ft']].forEach((m,i) => {\r\n const mx = 20 + i*80;\r\n doc.setFillColor(240,247,255); doc.roundedRect(mx,28,72,36,3,3,'F');\r\n doc.setFont('helvetica','bold'); doc.setFontSize(8); doc.setTextColor(100,116,139);\r\n doc.text(m[0].toUpperCase(), mx+36, 38, { align:'center' });\r\n doc.setFontSize(13); doc.setTextColor(29,53,87);\r\n doc.text(m[1], mx+36, 54, { align:'center' });\r\n });\r\n\r\n \/\/ Notes\r\n doc.addPage();\r\n doc.setFillColor(29,53,87); doc.rect(0,0,PW,20,'F');\r\n doc.setTextColor(255,255,255); doc.setFontSize(14); doc.setFont('helvetica','bold');\r\n doc.text('DESIGN NOTES & RECOMMENDATIONS', 20, 13);\r\n doc.setTextColor(30,30,30); doc.setFontSize(10); doc.setFont('helvetica','normal');\r\n doc.text(doc.splitTextToSize(currentResult.designNotes||'No notes.', PW-40), 20, 30);\r\n }\r\n\r\n const fname = `${(formData.projName||'ArchitectAI-Plan').replace(\/\\s+\/g,'-')}-${new Date().toISOString().slice(0,10)}.pdf`;\r\n doc.save(fname);\r\n\r\n } catch(e) {\r\n alert('PDF export failed: ' + e.message);\r\n } finally {\r\n if (btn) { btn.disabled = false; btn.textContent = '\u2b07\ufe0f Export PDF' + (isPro ? '' : ' (Watermarked)'); }\r\n }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n INIT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n updateTierBanner();\r\n renderStep();\r\n updateTierBanner();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":17,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-22","page","type-page","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1.jpg",2000,1200,false],"thumbnail":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1-150x150.jpg",150,150,true],"medium":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1-300x180.jpg",300,180,true],"medium_large":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1-768x461.jpg",640,384,true],"large":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1-1024x614.jpg",640,384,true],"1536x1536":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1-1536x922.jpg",1536,922,true],"2048x2048":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1.jpg",2000,1200,false]},"uagb_author_info":{"display_name":"qaisarawan0944@gmail.com","author_link":"https:\/\/qaisarsocialedits.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22"}],"version-history":[{"count":3,"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":86,"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions\/86"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/media\/17"}],"wp:attachment":[{"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":22,"date":"2025-06-13T05:59:23","date_gmt":"2025-06-13T05:59:23","guid":{"rendered":"https:\/\/qaisarsocialedits.com\/?page_id=22"},"modified":"2026-03-31T12:10:08","modified_gmt":"2026-03-31T11:10:08","slug":"contact","status":"publish","type":"page","link":"https:\/\/qaisarsocialedits.com\/?page_id=22","title":{"rendered":"Contact"},"content":{"rendered":"\r\n\r\n\r\n\r\n\r\nArchitectAI Pro \u2014 AI Floor Plan Generator<\/title>\r\n<style>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n ARCHITECTAI PRO \u00b7 COMPLETE SINGLE FILE\r\n Red #E63946 | Blue #1D3557 | Yellow #FFB703 | Green #2DC653\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n:root {\r\n --red:#E63946; --red-dk:#C1121F; --red-lt:#FFF0F1;\r\n --blue:#1D3557; --blue-md:#457B9D; --blue-lt:#A8DADC; --blue-pale:#F0F7FF;\r\n --yellow:#FFB703; --yellow-dk:#D4920A; --yellow-lt:#FFFBEB;\r\n --green:#2DC653; --green-dk:#1A8C36; --green-lt:#EDFAF1;\r\n --white:#fff; --off:#F8F9FA; --light:#F0F2F5;\r\n --border:#DEE3EA; --text:#1A202C; --muted:#6B7280;\r\n --sh-sm:0 1px 3px rgba(0,0,0,.08); --sh-md:0 4px 16px rgba(0,0,0,.10);\r\n --r-sm:6px; --r-md:10px; --r-lg:14px; --r-xl:20px;\r\n --font:'Segoe UI',system-ui,-apple-system,sans-serif;\r\n --mono:'Courier New',Consolas,monospace;\r\n}\r\n*{box-sizing:border-box;margin:0;padding:0}\r\nhtml{scroll-behavior:smooth}\r\nbody{font-family:var(--font);background:var(--off);color:var(--text);line-height:1.6;font-size:15px}\r\na{color:var(--blue-md);text-decoration:none}\r\nh1{font-size:2.25rem;font-weight:700;line-height:1.2}\r\nh2{font-size:1.75rem;font-weight:600;line-height:1.3}\r\nh3{font-size:1.25rem;font-weight:600}\r\n\r\n\/* NAV *\/\r\n.nav{background:var(--blue);padding:0 1.5rem;position:sticky;top:0;z-index:100;box-shadow:var(--sh-md)}\r\n.nav-inner{max-width:1060px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:58px;gap:1rem}\r\n.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.05rem;color:white;cursor:pointer}\r\n.brand-icon{width:34px;height:34px;background:var(--red);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}\r\n.nav-links{display:flex;align-items:center;gap:6px}\r\n.nav-links button{background:transparent;border:none;color:rgba(255,255,255,.8);font-size:13px;padding:6px 12px;border-radius:var(--r-sm);cursor:pointer;font-family:var(--font);transition:background .15s}\r\n.nav-links button:hover{background:rgba(255,255,255,.12);color:white}\r\n.nav-links .nav-cta{background:var(--red);color:white;font-weight:600}\r\n.nav-links .nav-cta:hover{background:var(--red-dk)}\r\n\r\n\/* BUTTONS *\/\r\n.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:10px 22px;border-radius:var(--r-md);font-size:14px;font-weight:600;cursor:pointer;border:none;transition:all .15s;font-family:var(--font);line-height:1}\r\n.btn-primary{background:var(--red);color:white}\r\n.btn-primary:hover{background:var(--red-dk);transform:translateY(-1px);box-shadow:var(--sh-md)}\r\n.btn-blue{background:var(--blue);color:white}\r\n.btn-blue:hover{background:#162843}\r\n.btn-green{background:var(--green);color:white}\r\n.btn-outline{background:white;color:var(--blue);border:1.5px solid var(--blue)}\r\n.btn-outline:hover{background:var(--blue-pale)}\r\n.btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border)}\r\n.btn-ghost:hover{background:var(--light)}\r\n.btn-sm{padding:7px 14px;font-size:13px}\r\n.btn-lg{padding:14px 28px;font-size:16px}\r\n.btn-xl{padding:16px 36px;font-size:17px;border-radius:var(--r-lg)}\r\n.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}\r\n\r\n\/* PAGES *\/\r\n.page{display:none}\r\n.page.active{display:block}\r\n\r\n\/* \u2500\u2500 HERO PAGE \u2500\u2500 *\/\r\n.hero{background:var(--blue);color:white;padding:5rem 1.5rem 3.5rem;text-align:center;position:relative;overflow:hidden}\r\n.hero::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:50px 50px}\r\n.hero>*{position:relative}\r\n.hero h1 span{color:var(--yellow)}\r\n.hero p{font-size:1.1rem;color:rgba(255,255,255,.82);max-width:560px;margin:.9rem auto 2rem}\r\n.hero-btns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}\r\n.hero-pills{display:flex;gap:1.25rem;justify-content:center;flex-wrap:wrap;margin-top:1.75rem}\r\n.hero-pills span{color:rgba(255,255,255,.7);font-size:13px}\r\n.out-bar{background:rgba(255,255,255,.08);border-top:1px solid rgba(255,255,255,.12);padding:1.25rem 1.5rem}\r\n.out-grid{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:.75rem}\r\n.out-pill{display:flex;align-items:center;gap:8px;padding:.6rem 1rem;background:rgba(255,255,255,.1);border-radius:var(--r-md);font-size:13px;font-weight:600;color:white;border:1px solid rgba(255,255,255,.12)}\r\n.out-pill.highlight{background:rgba(255,183,3,.18);border-color:rgba(255,183,3,.4);color:#FFB703}\r\n\r\n\/* SECTION *\/\r\n.section{padding:3.5rem 1.5rem}\r\n.section-alt{background:white}\r\n.container{max-width:1060px;margin:0 auto}\r\n.sec-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--red);margin-bottom:.75rem}\r\n.sec-title{margin-bottom:.75rem}\r\n.sec-sub{color:var(--muted);max-width:500px;margin:.5rem auto 0;font-size:14px}\r\n.text-center{text-align:center}\r\n\r\n\/* FEATURES *\/\r\n.feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:2.5rem}\r\n.feat-card{padding:1.5rem;background:white;border:1px solid var(--border);border-radius:var(--r-lg)}\r\n.feat-card .fi{font-size:30px;margin-bottom:.75rem}\r\n.feat-card h4{margin-bottom:.5rem;color:var(--blue)}\r\n.feat-card p{color:var(--muted);font-size:13.5px;line-height:1.6}\r\n\r\n\/* STEPS *\/\r\n.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:2rem;counter-reset:steps}\r\n.step-item{padding:1.25rem;background:white;border:1px solid var(--border);border-radius:var(--r-lg);counter-increment:steps;position:relative;padding-top:1.75rem}\r\n.step-item::before{content:counter(steps);position:absolute;top:-12px;left:16px;background:var(--blue);color:white;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}\r\n.step-item h4{margin-bottom:.4rem;font-size:1rem}\r\n.step-item p{font-size:13px;color:var(--muted)}\r\n\r\n\/* PRICING *\/\r\n.pricing-wrap{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;max-width:740px;margin:2.5rem auto 0}\r\n.pc{background:white;border:2px solid var(--border);border-radius:var(--r-xl);padding:2rem;position:relative;transition:box-shadow .2s}\r\n.pc:hover{box-shadow:var(--sh-md)}\r\n.pc.featured{border-color:var(--blue)}\r\n.pop-badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%);background:var(--blue);color:white;padding:4px 18px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}\r\n.pc .price{font-size:2.4rem;font-weight:800;color:var(--blue);margin:.9rem 0 .2rem}\r\n.pc .price sub{font-size:1rem;font-weight:400;color:var(--muted)}\r\n.pc .period{font-size:13px;color:var(--muted);margin-bottom:1.5rem}\r\n.pc ul{list-style:none;margin-bottom:1.5rem}\r\n.pc ul li{display:flex;align-items:flex-start;gap:7px;padding:5px 0;font-size:13.5px;border-bottom:1px dashed var(--border)}\r\n.pc ul li:last-child{border:none}\r\n.chk{color:var(--green);font-weight:700;flex-shrink:0}\r\n.xmark{color:var(--muted);flex-shrink:0}\r\n\r\n\/* TESTIMONIALS *\/\r\n.testi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.25rem;margin-top:2rem}\r\n.testi{background:white;border:1px solid var(--border);border-radius:var(--r-lg);padding:1.5rem}\r\n.testi p{font-size:14px;font-style:italic;color:var(--muted);margin-bottom:1rem}\r\n.testi-author{display:flex;align-items:center;gap:10px}\r\n.testi-avatar{width:38px;height:38px;background:var(--blue);border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:13px;flex-shrink:0}\r\n.testi-name{font-weight:700;font-size:14px}\r\n.testi-role{font-size:11px;color:var(--muted)}\r\n\r\n\/* FAQ *\/\r\n.faq{max-width:680px;margin:2rem auto 0}\r\n.faq-item{border-bottom:1px solid var(--border)}\r\n.faq-q{padding:1rem 0;cursor:pointer;font-weight:600;display:flex;justify-content:space-between;align-items:center;font-size:14.5px}\r\n.faq-a{padding:0 0 1rem;color:var(--muted);font-size:13.5px;display:none;line-height:1.7}\r\n.faq-item.open .faq-a{display:block}\r\n.faq-item.open .arr{transform:rotate(180deg)}\r\n.arr{transition:transform .2s;flex-shrink:0;color:var(--muted)}\r\n\r\n\/* CTA BAND *\/\r\n.cta-band{background:var(--red);text-align:center;padding:3rem 1.5rem}\r\n.cta-band h2{color:white;margin-bottom:.6rem}\r\n.cta-band p{color:rgba(255,255,255,.85);margin-bottom:1.5rem}\r\n\r\n\/* FOOTER *\/\r\nfooter{background:var(--blue);color:rgba(255,255,255,.75);padding:2.5rem 1.5rem}\r\n.ft-grid{max-width:1060px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}\r\nfooter h4{color:white;margin-bottom:.75rem;font-size:14px}\r\nfooter a{color:rgba(255,255,255,.7);font-size:13px;display:block;margin-bottom:4px}\r\n.ft-bottom{max-width:1060px;margin:2rem auto 0;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-between;font-size:12px;flex-wrap:wrap;gap:1rem}\r\n\r\n\/* \u2500\u2500 APP PAGE \u2500\u2500 *\/\r\n.app-wrap{max-width:860px;margin:0 auto;padding:1.5rem}\r\n.tier-banner{background:var(--yellow-lt);border:1px solid #fddba5;border-radius:var(--r-md);padding:.75rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.25rem}\r\n.tier-banner.pro{background:var(--blue-pale);border-color:var(--blue-lt)}\r\n.tier-info{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--yellow-dk)}\r\n.tier-banner.pro .tier-info{color:var(--blue)}\r\n\r\n\/* STEP WIZARD *\/\r\n.step-bar{display:flex;gap:3px;margin-bottom:1.25rem;overflow-x:auto;padding:2px 0;-webkit-overflow-scrolling:touch}\r\n.sp{flex:1;min-width:60px;padding:8px 5px;text-align:center;font-size:10px;font-weight:600;letter-spacing:.02em;border:1.5px solid var(--border);border-radius:var(--r-sm);cursor:pointer;color:var(--muted);background:white;transition:all .15s;white-space:nowrap;font-family:var(--font)}\r\n.sp:hover{border-color:var(--blue-md);color:var(--blue-md)}\r\n.sp.active{border-color:var(--blue);background:var(--blue);color:white}\r\n.sp.done{border-color:var(--green);background:var(--green-lt);color:var(--green-dk)}\r\n.wiz-card{background:white;border:1px solid var(--border);border-radius:var(--r-xl);padding:2rem;box-shadow:var(--sh-sm)}\r\n.step-hdr{display:flex;align-items:center;gap:14px;margin-bottom:1.75rem;padding-bottom:1.25rem;border-bottom:1px solid var(--border)}\r\n.step-icon-box{width:48px;height:48px;background:var(--blue-pale);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}\r\n.step-hdr-txt .step-num{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}\r\n.step-hdr-txt h2{font-size:1.15rem;color:var(--blue)}\r\n.step-hdr-txt p{font-size:13px;color:var(--muted);margin-top:2px}\r\n.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:1rem}\r\n.fg{display:flex;flex-direction:column;gap:5px}\r\n.flbl{display:block;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}\r\n.req{color:var(--red)}\r\n.fc{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:14px;font-family:var(--font);background:white;color:var(--text);outline:none;transition:border-color .15s;appearance:none}\r\n.fc:focus{border-color:var(--blue-md);box-shadow:0 0 0 3px rgba(69,123,157,.12)}\r\n.inp-grp{position:relative}\r\n.inp-grp .fc{padding-right:46px}\r\n.inp-addon{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:11px;color:var(--muted);font-family:var(--mono);font-weight:700;pointer-events:none}\r\n.nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid var(--border)}\r\n.err-box{display:none;padding:.875rem 1rem;background:var(--red-lt);color:var(--red-dk);border:1px solid #fac5c8;border-radius:var(--r-md);font-size:13px;margin-top:1rem;align-items:flex-start;gap:8px}\r\n\r\n\/* LOADING *\/\r\n.load-screen{text-align:center;padding:3rem 1rem}\r\n.load-icon{font-size:52px;animation:pulse 1.5s ease-in-out infinite;display:block;margin:0 auto 1rem}\r\n@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}\r\n.load-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin:1.5rem auto 0;max-width:220px}\r\n.load-fill{height:100%;background:var(--red);border-radius:2px;animation:fillB 3.5s ease-in-out infinite}\r\n@keyframes fillB{0%{width:0}70%{width:82%}100%{width:92%}}\r\n\r\n\/* RESULTS *\/\r\n.res-hdr{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}\r\n.metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:1.5rem}\r\n.mc{padding:.875rem 1rem;background:white;border:1px solid var(--border);border-radius:var(--r-md)}\r\n.ml{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin-bottom:3px}\r\n.mv{font-size:1.1rem;font-weight:700;font-family:var(--mono);color:var(--text)}\r\n.tab-bar{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:1.25rem}\r\n.tb{padding:7px 14px;font-size:12px;font-weight:600;border:1.5px solid var(--border);border-radius:var(--r-sm);background:white;color:var(--muted);cursor:pointer;font-family:var(--font);transition:all .15s}\r\n.tb:hover{border-color:var(--blue-md);color:var(--blue)}\r\n.tb.on{border-color:var(--blue);background:var(--blue);color:white}\r\n.tp{display:none}\r\n.tp.on{display:block;animation:fadeIn .2s ease}\r\n@keyframes fadeIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}\r\n.fp-wrap{border:2px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:#F0F7FF}\r\n.util-box{padding:1.5rem;border:1px solid var(--border);border-radius:var(--r-lg);background:white}\r\n.util-hdr{display:flex;align-items:center;gap:10px;margin-bottom:1rem}\r\n.util-hdr h3{margin:0}\r\n.util-body{font-family:var(--mono);font-size:13px;line-height:1.75;color:var(--muted);white-space:pre-wrap;padding:1rem;background:var(--off);border-radius:var(--r-md);border:1px solid var(--border);max-height:380px;overflow-y:auto}\r\n.mat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}\r\n.mat-card{padding:1.25rem;background:white;border:1px solid var(--border);border-radius:var(--r-lg);text-align:center}\r\n.mat-icon{font-size:28px;margin-bottom:8px}\r\n.mat-lbl{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-bottom:4px}\r\n.mat-val{font-size:1.25rem;font-weight:700;font-family:var(--mono);color:var(--blue)}\r\n.sched-wrap{overflow-x:auto}\r\n.sched-tbl{width:100%;border-collapse:collapse;font-size:13px}\r\n.sched-tbl th{padding:9px 12px;text-align:left;font-weight:700;font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:white;background:var(--blue)}\r\n.sched-tbl td{padding:8px 12px;border-bottom:1px solid var(--border)}\r\n.sched-tbl tr:nth-child(even) td{background:var(--off)}\r\n.sched-tbl .mono{font-family:var(--mono);color:var(--blue);font-size:11px;font-weight:700}\r\n.locked-tab{text-align:center;padding:3rem 1rem;border:2px dashed var(--border);border-radius:var(--r-lg)}\r\n.sep{margin-top:1.75rem;padding-top:1.5rem;border-top:1px solid var(--border)}\r\n.sep h3{margin-bottom:1rem;color:var(--blue)}\r\n.info-strip{background:var(--blue-pale);border:1px solid var(--blue-lt);border-radius:var(--r-md);padding:.875rem 1rem;font-size:13px;color:var(--blue);margin-top:1rem}\r\n.alert-w{background:var(--yellow-lt);border:1px solid #fddba5;border-radius:var(--r-md);padding:.875rem 1rem;font-size:13px;color:var(--yellow-dk)}\r\n\r\n\/* MODAL *\/\r\n.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;display:flex;align-items:center;justify-content:center;padding:1rem;backdrop-filter:blur(2px);animation:fadeIn .15s ease}\r\n.modal-box{background:white;border-radius:var(--r-xl);max-width:440px;width:100%;padding:2rem;box-shadow:0 8px 32px rgba(0,0,0,.18);position:relative;animation:slideUp .2s ease}\r\n@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}\r\n.modal-close{position:absolute;top:1rem;right:1rem;background:var(--light);border:none;border-radius:50%;width:30px;height:30px;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}\r\n.modal-close:hover{background:var(--border)}\r\n.auth-div{display:flex;align-items:center;gap:1rem;margin:1.25rem 0;color:var(--muted);font-size:13px}\r\n.auth-div::before,.auth-div::after{content:'';flex:1;height:1px;background:var(--border)}\r\n.g-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:11px;border:1.5px solid var(--border);border-radius:var(--r-md);background:white;font-weight:600;font-size:14px;cursor:pointer;font-family:var(--font);transition:background .15s}\r\n.g-btn:hover{background:var(--off)}\r\n.a-err{padding:.75rem 1rem;background:var(--red-lt);color:var(--red-dk);border:1px solid #fac5c8;border-radius:var(--r-md);font-size:13px;display:none;margin-bottom:.75rem}\r\n\r\n\/* PAGE FOOTER *\/\r\n.pg-ftr{text-align:center;margin-top:2.5rem;padding:1.5rem;border-top:1px solid var(--border);font-size:12px;color:var(--muted)}\r\n\r\n\/* SVG floor plan colors *\/\r\n.rf-bedroom{fill:#DBEAFE;stroke:#1D4ED8}\r\n.rf-bathroom{fill:#D1FAE5;stroke:#065F46}\r\n.rf-kitchen{fill:#FEF3C7;stroke:#92400E}\r\n.rf-living{fill:#EDE9FE;stroke:#4C1D95}\r\n.rf-drawing{fill:#FCE7F3;stroke:#831843}\r\n.rf-garage{fill:#F3F4F6;stroke:#374151}\r\n.rf-veranda{fill:#DCFCE7;stroke:#14532D}\r\n.rf-store{fill:#F3F4F6;stroke:#374151}\r\n.rf-staircase{fill:#DBEAFE;stroke:#1E3A8A}\r\n.rf-dining{fill:#FEF3C7;stroke:#78350F}\r\n.rf-other{fill:#EFF6FF;stroke:#1E40AF}\r\n\r\n@media(max-width:768px){\r\n h1{font-size:1.75rem} h2{font-size:1.35rem}\r\n .hero h1{font-size:2rem} .pricing-wrap{grid-template-columns:1fr}\r\n .ft-grid{grid-template-columns:1fr} .nav-links button:not(.nav-cta){display:none}\r\n .metric-grid{grid-template-columns:1fr 1fr}\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<nav class=\"nav\">\r\n <div class=\"nav-inner\">\r\n <div class=\"brand\" onclick=\"showPage('home')\">\r\n <div class=\"brand-icon\">\ud83c\udfd7\ufe0f<\/div>\r\n ArchitectAI Pro\r\n <\/div>\r\n <div class=\"nav-links\">\r\n <button onclick=\"showPage('home')\">Home<\/button>\r\n <button onclick=\"showSection('pricing')\">Pricing<\/button>\r\n <button onclick=\"showPage('app')\" class=\"nav-cta\">\ud83c\udfd7\ufe0f Design Now<\/button>\r\n <\/div>\r\n <\/div>\r\n<\/nav>\r\n\r\n\r\n<div id=\"page-home\" class=\"page active\">\r\n\r\n \r\n <div class=\"hero\">\r\n <div style=\"display:inline-flex;align-items:center;gap:8px;background:rgba(255,183,3,.15);border:1px solid rgba(255,183,3,.3);color:#FFB703;padding:5px 16px;border-radius:20px;font-size:13px;font-weight:600;margin-bottom:1.25rem\">\r\n \u2728 AI-Powered \u00b7 Pakistani Standards \u00b7 8 Output Types\r\n <\/div>\r\n <h1>Generate <span>Complete Blueprints<\/span><br>in Minutes<\/h1>\r\n <p>From plot dimensions to printable floor plans \u2014 with water, gas, electrical, and material estimates. Powered by Claude AI.<\/p>\r\n <div class=\"hero-btns\">\r\n <button class=\"btn btn-primary btn-xl\" onclick=\"showPage('app')\">\ud83c\udfd7\ufe0f Start Free Design<\/button>\r\n <button class=\"btn btn-xl\" style=\"background:rgba(255,255,255,.12);color:white;border:1.5px solid rgba(255,255,255,.3)\" onclick=\"showSection('pricing')\">View Pricing<\/button>\r\n <\/div>\r\n <div class=\"hero-pills\">\r\n <span>\u2713 5 free designs<\/span><span>\u2713 No credit card<\/span>\r\n <span>\u2713 8 output types<\/span><span>\u2713 PDF export<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"out-bar\">\r\n <div class=\"out-grid\">\r\n <div class=\"out-pill\">\ud83d\uddfa\ufe0f 2D Floor Plan<\/div>\r\n <div class=\"out-pill\">\ud83d\udca7 Water Supply<\/div>\r\n <div class=\"out-pill\">\ud83d\udd25 Gas Pipeline<\/div>\r\n <div class=\"out-pill\">\u26a1 Electrical<\/div>\r\n <div class=\"out-pill\">\ud83d\udccb Door & Window<\/div>\r\n <div class=\"out-pill\">\ud83e\uddf1 Materials<\/div>\r\n <div class=\"out-pill\">\ud83d\udcdd Design Notes<\/div>\r\n <div class=\"out-pill highlight\">\ud83d\udcc4 Printable PDF<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section section-alt\">\r\n <div class=\"container text-center\">\r\n <div class=\"sec-label\">Why ArchitectAI Pro<\/div>\r\n <h2 class=\"sec-title\">Professional Tools. AI Speed.<\/h2>\r\n <p class=\"sec-sub\">Everything an architect provides \u2014 in minutes, not weeks.<\/p>\r\n <div class=\"feat-grid\">\r\n <div class=\"feat-card\"><div class=\"fi\">\ud83d\udcd0<\/div><h4>Pakistani Standards<\/h4><p>9-inch external walls, Roshan Dan ventilation, correct setbacks and standard room minimums built-in.<\/p><\/div>\r\n <div class=\"feat-card\"><div class=\"fi\">\ud83e\udd16<\/div><h4>Claude AI Powered<\/h4><p>Anthropic's Claude analyzes requirements and generates optimized layouts with proper traffic flow and ventilation.<\/p><\/div>\r\n <div class=\"feat-card\"><div class=\"fi\">\ud83d\udcc4<\/div><h4>Print-Ready PDFs<\/h4><p>A2-size blueprints with title block, scale bar, north arrow, and all utility plans \u2014 ready for contractors.<\/p><\/div>\r\n <div class=\"feat-card\"><div class=\"fi\">\ud83d\udd27<\/div><h4>All Utility Plans<\/h4><p>Water supply routing, gas pipeline layout, and electrical wiring diagrams \u2014 not just the floor plan.<\/p><\/div>\r\n <div class=\"feat-card\"><div class=\"fi\">\u26a1<\/div><h4>Instant Results<\/h4><p>Fill in your requirements and receive a complete set of drawings in under 30 seconds.<\/p><\/div>\r\n <div class=\"feat-card\"><div class=\"fi\">\ud83d\udcbe<\/div><h4>Design History<\/h4><p>All designs saved locally. Return, download, or share any previous project anytime.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\">\r\n <div class=\"container text-center\">\r\n <div class=\"sec-label\">How It Works<\/div>\r\n <h2 class=\"sec-title\">3 Simple Steps<\/h2>\r\n <div class=\"steps-grid\">\r\n <div class=\"step-item\"><h4>Enter Your Requirements<\/h4><p>Tell us plot size, bedrooms, living spaces, kitchen, outdoor areas, and utility needs through our 7-step wizard.<\/p><\/div>\r\n <div class=\"step-item\"><h4>AI Generates Your Design<\/h4><p>Claude AI analyzes your specs and generates an optimized floor plan following Pakistani architectural standards.<\/p><\/div>\r\n <div class=\"step-item\"><h4>Review All Plans<\/h4><p>Floor plan, water, gas, electrical, material estimates \u2014 all in one place with tabs.<\/p><\/div>\r\n <div class=\"step-item\"><h4>Download & Build<\/h4><p>Export professional PDFs ready to share with your contractor and start construction.<\/p><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section section-alt\" id=\"pricing\">\r\n <div class=\"container text-center\">\r\n <div class=\"sec-label\">Simple Pricing<\/div>\r\n <h2 class=\"sec-title\">Start Free. Upgrade When Ready.<\/h2>\r\n <div class=\"pricing-wrap\">\r\n <div class=\"pc\">\r\n <h3>Free<\/h3>\r\n <div class=\"price\">$0 <sub>forever<\/sub><\/div>\r\n <div class=\"period\">No credit card required<\/div>\r\n <ul>\r\n <li><span class=\"chk\">\u2713<\/span> 5 designs lifetime<\/li>\r\n <li><span class=\"chk\">\u2713<\/span> 2D Floor Plan (SVG)<\/li>\r\n <li><span class=\"chk\">\u2713<\/span> Design Notes<\/li>\r\n <li><span class=\"chk\">\u2713<\/span> PDF export (watermarked)<\/li>\r\n <li><span class=\"xmark\">\u2715<\/span> <span style=\"color:var(--muted)\">Water \/ Gas \/ Electrical plans<\/span><\/li>\r\n <li><span class=\"xmark\">\u2715<\/span> <span style=\"color:var(--muted)\">Material estimates<\/span><\/li>\r\n <li><span class=\"xmark\">\u2715<\/span> <span style=\"color:var(--muted)\">Door & Window schedules<\/span><\/li>\r\n <\/ul>\r\n <button class=\"btn btn-outline\" style=\"width:100%\" onclick=\"showPage('app')\">Start Free \u2192<\/button>\r\n <\/div>\r\n <div class=\"pc featured\">\r\n <div class=\"pop-badge\">\u2b50 Most Popular<\/div>\r\n <h3 style=\"color:var(--blue)\">Pro<\/h3>\r\n <div class=\"price\" style=\"color:var(--red)\">$19 <sub>\/mo<\/sub><\/div>\r\n <div class=\"period\">or $149\/year \u00b7 Cancel anytime<\/div>\r\n <ul>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>Unlimited designs<\/strong><\/li>\r\n <li><span class=\"chk\">\u2713<\/span> Full 2D Floor Plan<\/li>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>Water Supply Plan<\/strong><\/li>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>Gas Pipeline Plan<\/strong><\/li>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>Electrical Layout<\/strong><\/li>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>Material Estimates<\/strong><\/li>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>Door & Window Schedules<\/strong><\/li>\r\n <li><span class=\"chk\">\u2713<\/span> <strong>A2 PDF \u2014 no watermark<\/strong><\/li>\r\n <\/ul>\r\n <button class=\"btn btn-primary\" style=\"width:100%;margin-bottom:8px\" onclick=\"alert('Configure Stripe in config section at bottom of file')\">Get Pro \u2014 $19\/mo<\/button>\r\n <button class=\"btn btn-outline\" style=\"width:100%;font-size:13px\" onclick=\"alert('Configure Stripe in config section at bottom of file')\">Annual \u2014 $149\/yr (Save $79)<\/button>\r\n <\/div>\r\n <\/div>\r\n <p style=\"margin-top:1.25rem;font-size:13px;color:var(--muted)\">Payments by Stripe \u00b7 30-day money-back guarantee<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section\">\r\n <div class=\"container text-center\">\r\n <div class=\"sec-label\">Testimonials<\/div>\r\n <h2 class=\"sec-title\">Trusted Across Pakistan<\/h2>\r\n <div class=\"testi-grid\">\r\n <div class=\"testi\"><p>\"Generated a complete 5-marla house plan in 3 minutes. The water supply routing was exactly what my plumber needed.\"<\/p><div class=\"testi-author\"><div class=\"testi-avatar\">AK<\/div><div><div class=\"testi-name\">Ahmed Khan<\/div><div class=\"testi-role\">Contractor, Lahore<\/div><\/div><\/div><\/div>\r\n <div class=\"testi\"><p>\"I designed my 10-marla house layout myself. Saved Rs. 50,000 in architect fees for the initial drafts.\"<\/p><div class=\"testi-author\"><div class=\"testi-avatar\">SA<\/div><div><div class=\"testi-name\">Sara Ahmed<\/div><div class=\"testi-role\">Homeowner, Islamabad<\/div><\/div><\/div><\/div>\r\n <div class=\"testi\"><p>\"The electrical plan was detailed enough to brief my electrician \u2014 included DB panel location and circuit breakdown.\"<\/p><div class=\"testi-author\"><div class=\"testi-avatar\">MR<\/div><div><div class=\"testi-name\">Muhammad Raza<\/div><div class=\"testi-role\">Engineer, Karachi<\/div><\/div><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"section section-alt\">\r\n <div class=\"container text-center\">\r\n <div class=\"sec-label\">FAQ<\/div>\r\n <h2 class=\"sec-title\">Common Questions<\/h2>\r\n <div class=\"faq\">\r\n <div class=\"faq-item\"><div class=\"faq-q\" onclick=\"this.parentElement.classList.toggle('open')\">Is this a real architectural drawing or just a sketch? <span class=\"arr\">\u25bc<\/span><\/div><div class=\"faq-a\">ArchitectAI Pro generates professional-grade 2D floor plans following Pakistani construction standards. While AI-generated plans should be reviewed by a licensed architect before construction, they are detailed enough to plan, budget, and brief your contractor.<\/div><\/div>\r\n <div class=\"faq-item\"><div class=\"faq-q\" onclick=\"this.parentElement.classList.toggle('open')\">What plot sizes are supported? <span class=\"arr\">\u25bc<\/span><\/div><div class=\"faq-a\">Any plot size \u2014 from 3-marla houses to large farmhouses, villas, and commercial buildings. The AI adapts the layout to your exact dimensions.<\/div><\/div>\r\n <div class=\"faq-item\"><div class=\"faq-q\" onclick=\"this.parentElement.classList.toggle('open')\">Can I get a double-story design? <span class=\"arr\">\u25bc<\/span><\/div><div class=\"faq-a\">Yes! Select \"Double Story\" in the wizard. The AI generates separate floor plans for each level with staircase placement shown on both floors.<\/div><\/div>\r\n <div class=\"faq-item\"><div class=\"faq-q\" onclick=\"this.parentElement.classList.toggle('open')\">What does the Pro PDF include? <span class=\"arr\">\u25bc<\/span><\/div><div class=\"faq-a\">Floor plan, Water supply system, Gas pipeline, Electrical layout, Material estimates, Door\/window schedule, and Design notes \u2014 all formatted for A2 paper with a professional title block.<\/div><\/div>\r\n <div class=\"faq-item\"><div class=\"faq-q\" onclick=\"this.parentElement.classList.toggle('open')\">Where is my API key stored? <span class=\"arr\">\u25bc<\/span><\/div><div class=\"faq-a\">Your Anthropic API key is stored only in the CONFIG section at the bottom of this HTML file and never sent anywhere except directly to api.anthropic.com. For production, use a backend proxy instead.<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"cta-band\">\r\n <h2>Ready to Design Your Dream Home?<\/h2>\r\n <p>Start free \u2014 no credit card, no download, just results.<\/p>\r\n <button class=\"btn btn-xl\" style=\"background:white;color:var(--red)\" onclick=\"showPage('app')\">\ud83c\udfd7\ufe0f Start Designing Free \u2192<\/button>\r\n <\/div>\r\n\r\n \r\n <footer>\r\n <div class=\"ft-grid\">\r\n <div>\r\n <div style=\"display:flex;align-items:center;gap:10px;margin-bottom:.75rem\"><div class=\"brand-icon\">\ud83c\udfd7\ufe0f<\/div><span style=\"font-weight:700;color:white\">ArchitectAI Pro<\/span><\/div>\r\n <p style=\"font-size:13px;line-height:1.7;max-width:230px\">Professional architectural floor plans powered by Claude AI. Built for Pakistani homebuilders and contractors.<\/p>\r\n <\/div>\r\n <div><h4>Product<\/h4><a href=\"#\" onclick=\"showPage('app')\">Design Tool<\/a><a href=\"#\" onclick=\"showSection('pricing')\">Pricing<\/a><\/div>\r\n <div><h4>Design Types<\/h4><a href=\"#\" onclick=\"showPage('app')\">Houses<\/a><a href=\"#\" onclick=\"showPage('app')\">Apartments<\/a><a href=\"#\" onclick=\"showPage('app')\">Farmhouses<\/a><\/div>\r\n <div><h4>Support<\/h4><a href=\"mailto:support@architectaipro.com\">Email Support<\/a><a href=\"#\">Privacy Policy<\/a><\/div>\r\n <\/div>\r\n <div class=\"ft-bottom\">\r\n <span>\u00a9 2025 ArchitectAI Pro \u00b7 All rights reserved<\/span>\r\n <span>Powered by Anthropic Claude AI<\/span>\r\n <\/div>\r\n <\/footer>\r\n\r\n<\/div>\r\n\r\n\r\n\r\n<div id=\"page-app\" class=\"page\">\r\n<div class=\"app-wrap\">\r\n\r\n \r\n <div id=\"tier-banner\" class=\"tier-banner\">\r\n <div class=\"tier-info\">\ud83c\udd93 <span id=\"tier-text\">Free Plan \u2014 5 designs remaining<\/span><\/div>\r\n <button class=\"btn btn-primary btn-sm\" onclick=\"showSection('pricing');showPage('home')\">Upgrade to Pro \u2728<\/button>\r\n <\/div>\r\n\r\n \r\n <div id=\"wiz-panel\">\r\n <div class=\"step-bar\" id=\"step-bar\"><\/div>\r\n <div class=\"wiz-card\">\r\n <div class=\"step-hdr\">\r\n <div class=\"step-icon-box\" id=\"step-icon\">\ud83d\udcd0<\/div>\r\n <div class=\"step-hdr-txt\">\r\n <div class=\"step-num\" id=\"step-num\">Step 1 of 7<\/div>\r\n <h2 id=\"step-title\">Plot Information<\/h2>\r\n <p id=\"step-desc\">Tell us about your plot<\/p>\r\n <\/div>\r\n <\/div>\r\n <div class=\"form-grid\" id=\"step-fields\"><\/div>\r\n <div class=\"nav-row\">\r\n <button class=\"btn btn-ghost\" id=\"btn-prev\" onclick=\"prevStep()\">\u2190 Back<\/button>\r\n <button class=\"btn btn-blue\" id=\"btn-next\" onclick=\"nextStep()\">Next Step \u2192<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"err-box\" id=\"err-box\">\u26a0\ufe0f <span id=\"err-msg\"><\/span><\/div>\r\n <div style=\"margin-top:1rem;padding:.875rem 1rem;background:var(--blue-pale);border-radius:var(--r-md);border:1px solid var(--blue-lt);font-size:13px;color:var(--blue)\">\r\n \ud83d\udca1 <strong>Tip:<\/strong> 5-marla = 25\u00d745 ft \u00b7 10-marla = 35\u00d765 ft \u00b7 1-kanal = 60\u00d7120 ft\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"load-panel\" style=\"display:none\" class=\"load-screen\">\r\n <div class=\"wiz-card\" style=\"text-align:center;padding:3rem\">\r\n <span class=\"load-icon\">\ud83c\udfd7\ufe0f<\/span>\r\n <h3 style=\"color:var(--blue);margin-bottom:.5rem\">Generating Your Floor Plan<\/h3>\r\n <p id=\"load-msg\" style=\"color:var(--muted);font-size:14px\">Analyzing plot dimensions...<\/p>\r\n <div class=\"load-bar\"><div class=\"load-fill\"><\/div><\/div>\r\n <p style=\"margin-top:1.25rem;font-size:12px;color:var(--muted)\">Usually takes 10\u201325 seconds<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div id=\"res-panel\" style=\"display:none\">\r\n <div class=\"res-hdr\">\r\n <div>\r\n <h2 style=\"color:var(--blue)\">Your Floor Plan is Ready \ud83c\udf89<\/h2>\r\n <p style=\"color:var(--muted);font-size:14px\">Review all tabs below<\/p>\r\n <\/div>\r\n <div style=\"display:flex;gap:8px;flex-wrap:wrap\">\r\n <button class=\"btn btn-ghost btn-sm\" onclick=\"resetWizard()\">\u21a9 New Design<\/button>\r\n <button class=\"btn btn-outline btn-sm\" onclick=\"showPage('home')\">\ud83c\udfe0 Home<\/button>\r\n <\/div>\r\n <\/div>\r\n <div class=\"metric-grid\" id=\"res-metrics\"><\/div>\r\n <div class=\"tab-bar\" id=\"res-tabs\"><\/div>\r\n <div id=\"res-content\"><\/div>\r\n <\/div>\r\n\r\n<\/div>\r\n<div class=\"pg-ftr\">ArchitectAI Pro \u00b7 Powered by Claude AI \u00b7 Professional Architectural Design<br><small style=\"opacity:.6\">AI-generated plans should be reviewed by a licensed architect before construction.<\/small><\/div>\r\n<\/div>\r\n\r\n\r\n\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jspdf\/2.5.1\/jspdf.umd.min.js\"><\/script>\r\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2canvas\/1.4.1\/html2canvas.min.js\"><\/script>\r\n\r\n<script>\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n \u2699\ufe0f CONFIG \u2014 ADD YOUR API KEY HERE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nconst CONFIG = {\r\n apiKey: \"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\", \/\/ \u2190 paste your key from console.anthropic.com\r\n model: \"claude-sonnet-4-20250514\",\r\n maxTokens: 4000,\r\n freeTierLimit: 5,\r\n \/\/ Stripe (optional)\r\n stripeMonthly: \"https:\/\/buy.stripe.com\/YOUR_LINK\",\r\n stripeAnnual: \"https:\/\/buy.stripe.com\/YOUR_LINK\"\r\n};\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PAGE NAVIGATION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction showPage(id) {\r\n document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));\r\n document.getElementById('page-' + id).classList.add('active');\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n if (id === 'app') { updateTierBanner(); renderStep(); }\r\n}\r\nfunction showSection(id) {\r\n const el = document.getElementById(id);\r\n if (el) el.scrollIntoView({ behavior: 'smooth' });\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n STATE\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nlet curStep = 0;\r\nconst formData = {};\r\nlet currentResult = null;\r\nlet isPro = false; \/\/ set to true after Stripe webhook confirms payment\r\nlet designsUsed = parseInt(localStorage.getItem('arch_designs_used') || '0');\r\n\r\nfunction updateTierBanner() {\r\n const remaining = Math.max(0, CONFIG.freeTierLimit - designsUsed);\r\n const tb = document.getElementById('tier-banner');\r\n const tt = document.getElementById('tier-text');\r\n if (isPro) {\r\n tb.className = 'tier-banner pro';\r\n tt.textContent = '\u2b50 Pro Plan \u2014 Unlimited designs unlocked';\r\n } else {\r\n tb.className = 'tier-banner';\r\n tt.textContent = `Free Plan \u2014 ${remaining} design${remaining !== 1 ? 's' : ''} remaining`;\r\n }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n WIZARD STEPS\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nconst STEPS = [\r\n { id:'plot', title:'Plot Information', icon:'\ud83d\udcd0', desc:'Your land plot dimensions and orientation',\r\n fields:[\r\n {id:'plotWidth', label:'Plot Width', type:'number', ph:'30', unit:'ft', req:true},\r\n {id:'plotLength',label:'Plot Length',type:'number', ph:'60', unit:'ft', req:true},\r\n {id:'plotShape', label:'Plot Shape', type:'select', opts:['Rectangular','Square','L-Shaped','Irregular']},\r\n {id:'plotType', label:'Plot Type', type:'select', opts:['Corner Plot','Middle Plot']},\r\n {id:'gateDir', label:'Gate Faces', type:'select', opts:['North','South','East','West']},\r\n {id:'floors', label:'Floors', type:'select', opts:['Single Story','Double Story','Triple Story']},\r\n ]},\r\n { id:'rooms', title:'Bedrooms & Rooms', icon:'\ud83d\udecf\ufe0f', desc:'Configure your sleeping spaces',\r\n fields:[\r\n {id:'bedrooms', label:'Bedrooms', type:'number', ph:'3', req:true},\r\n {id:'bedroomSize',label:'Bedroom Size', type:'select', opts:['Small (10\u00d710ft)','Medium (12\u00d712ft)','Large (14\u00d714ft)','Master Suite (16\u00d714ft)']},\r\n {id:'attBath', label:'Attached Bathrooms',type:'select', opts:['All bedrooms','Master only','None']},\r\n {id:'dressing', label:'Dressing Area', type:'select', opts:['Master only','All bedrooms','None']},\r\n {id:'acPoints', label:'AC Points', type:'select', opts:['All rooms','Master only','None']},\r\n {id:'fanPoints', label:'Fan Points\/Room', type:'select', opts:['1 fan','2 fans','3 fans']},\r\n {id:'roshanDan', label:'Skylights (Roshan Dan)',type:'select', opts:['Yes \u2013 all bedrooms','Bathrooms only','None']},\r\n ]},\r\n { id:'baths', title:'Bathrooms', icon:'\ud83d\udebf', desc:'Plan your wash areas',\r\n fields:[\r\n {id:'extraBaths', label:'Extra Bathrooms (non-attached)', type:'number', ph:'1'},\r\n {id:'toiletType', label:'Toilet Style', type:'select', opts:['Western','Eastern','Both']},\r\n {id:'bathWin', label:'Bath Windows', type:'select', opts:['Yes \u2013 all','Yes \u2013 some','No']},\r\n {id:'bathSize', label:'Bathroom Size', type:'select', opts:['Small (5\u00d77ft)','Medium (6\u00d78ft)','Large (7\u00d79ft)']},\r\n {id:'hotWater', label:'Hot Water', type:'select', opts:['Geyser per bathroom','Central geyser','Solar heater','None']},\r\n ]},\r\n { id:'living', title:'Living Spaces', icon:'\ud83d\udecb\ufe0f', desc:'Drawing rooms, lounge, dining',\r\n fields:[\r\n {id:'drawingRooms',label:'Drawing Rooms', type:'number', ph:'1'},\r\n {id:'drawingSize', label:'Drawing Room Size', type:'select', opts:['Standard (12\u00d714ft)','Large (14\u00d718ft)','Extra Large (18\u00d720ft)']},\r\n {id:'drawingBath', label:'Drawing Room Bath', type:'select', opts:['Yes','No']},\r\n {id:'tvLounge', label:'TV Lounge', type:'select', opts:['Open plan','Separate room','None']},\r\n {id:'loungeSize', label:'Lounge Size', type:'select', opts:['Small (12\u00d712ft)','Medium (14\u00d714ft)','Large (16\u00d718ft)']},\r\n {id:'dining', label:'Dining Area', type:'select', opts:['Separate room','Combined with living','None']},\r\n {id:'prayerRoom', label:'Prayer Room', type:'select', opts:['Yes','No']},\r\n ]},\r\n { id:'kitchen', title:'Kitchen & Utility', icon:'\ud83c\udf73', desc:'Kitchen style and utility rooms',\r\n fields:[\r\n {id:'kitchens', label:'Kitchens', type:'number', ph:'1'},\r\n {id:'kitchenSize', label:'Kitchen Size', type:'select', opts:['Small (8\u00d710ft)','Medium (10\u00d712ft)','Large (12\u00d714ft)']},\r\n {id:'kitchenStyle',label:'Kitchen Style', type:'select', opts:['Closed (separate)','Open plan','Semi-open']},\r\n {id:'washArea', label:'Wash Area', type:'select', opts:['Separate room','Combined with kitchen','None']},\r\n {id:'laundry', label:'Laundry Room', type:'select', opts:['Separate','Combined with wash','None']},\r\n ]},\r\n { id:'outdoor', title:'Outdoor & Utility', icon:'\ud83c\udf3f', desc:'Exterior spaces and service areas',\r\n fields:[\r\n {id:'veranda', label:'Veranda (Brambda)', type:'select', opts:['Front only','Back only','Both sides','None']},\r\n {id:'verandaDep', label:'Veranda Depth', type:'select', opts:['5 ft deep','8 ft deep','10 ft deep']},\r\n {id:'courtyard', label:'Courtyard (Sehan)', type:'select', opts:['Yes','No']},\r\n {id:'garage', label:'Garage', type:'select', opts:['1 car','2 cars','None']},\r\n {id:'servantQtr', label:\"Servant's Quarter\", type:'select', opts:['Yes \u2013 with bath','Yes \u2013 no bath','No']},\r\n {id:'storeRoom', label:'Store Room', type:'select', opts:['Yes','No']},\r\n {id:'boundWall', label:'Boundary Wall', type:'select', opts:['All 4 sides','3 sides','Front only']},\r\n ]},\r\n { id:'systems', title:'Systems & Details', icon:'\u26a1', desc:'Staircase, utilities, project info',\r\n fields:[\r\n {id:'stairPos', label:'Staircase Location', type:'select', opts:['Front','Back','Right side','Left side','Center','N\/A']},\r\n {id:'stairStyle', label:'Staircase Style', type:'select', opts:['Straight','L-Shaped','U-Shape','Spiral','N\/A']},\r\n {id:'waterSrc', label:'Water Source', type:'select', opts:['WASA\/Municipal','Borehole\/Well','Both']},\r\n {id:'ohTank', label:'Overhead Tank', type:'select', opts:['1000 gallons','500 gallons','None']},\r\n {id:'ugTank', label:'Underground Tank', type:'select', opts:['Yes \u2013 5000 gal','Yes \u2013 2000 gal','No']},\r\n {id:'gasSupply', label:'Gas Supply', type:'select', opts:['SNGPL piped gas','LPG cylinders','None']},\r\n {id:'solar', label:'Solar Provision', type:'select', opts:['Yes \u2013 5KW','Yes \u2013 10KW','No']},\r\n {id:'projName', label:'Project Name', type:'text', ph:'My Dream Home'},\r\n {id:'ownerName', label:'Owner Name', type:'text', ph:'Your Name'},\r\n ]},\r\n];\r\n\r\nconst LOAD_MSGS = [\r\n 'Analyzing plot dimensions and setbacks...','Calculating optimal room placement...',\r\n 'Planning traffic flow and circulation...','Routing water supply lines...',\r\n 'Designing gas pipeline network...','Wiring electrical circuits...',\r\n 'Generating material estimates...','Preparing door & window schedules...',\r\n 'Finalizing your floor plan...'\r\n];\r\n\r\nfunction renderStep() {\r\n const s = STEPS[curStep];\r\n const total = STEPS.length;\r\n\r\n \/\/ Step bar\r\n document.getElementById('step-bar').innerHTML = STEPS.map((st, i) => {\r\n let cls = 'sp';\r\n if (i === curStep) cls += ' active';\r\n else if (i < curStep) cls += ' done';\r\n return `<button class=\"${cls}\" onclick=\"goStep(${i})\">${i < curStep ? '\u2713 ' : ''}${st.title.split(' ')[0]}<\/button>`;\r\n }).join('');\r\n\r\n document.getElementById('step-icon').textContent = s.icon;\r\n document.getElementById('step-title').textContent = s.title;\r\n document.getElementById('step-desc').textContent = s.desc;\r\n document.getElementById('step-num').textContent = `Step ${curStep + 1} of ${total}`;\r\n\r\n \/\/ Fields\r\n document.getElementById('step-fields').innerHTML = s.fields.map(f => {\r\n const val = formData[f.id] || '';\r\n let ctrl = '';\r\n if (f.type === 'select') {\r\n ctrl = `<select id=\"f_${f.id}\" class=\"fc\" onchange=\"formData['${f.id}']=this.value\">\r\n <option value=\"\">Choose...<\/option>\r\n ${f.opts.map(o => `<option value=\"${o}\"${val===o?' selected':''}>${o}<\/option>`).join('')}\r\n <\/select>`;\r\n } else {\r\n ctrl = `<div class=\"inp-grp\">\r\n <input type=\"${f.type}\" id=\"f_${f.id}\" class=\"fc\" value=\"${val}\"\r\n placeholder=\"${f.ph||''}\" oninput=\"formData['${f.id}']=this.value\"\r\n ${f.unit ? 'style=\"padding-right:46px\"' : ''}>\r\n ${f.unit ? `<span class=\"inp-addon\">${f.unit}<\/span>` : ''}\r\n <\/div>`;\r\n }\r\n return `<div class=\"fg\">\r\n <label class=\"flbl\">${f.label}${f.req ? '<span class=\"req\"> *<\/span>' : ''}<\/label>\r\n ${ctrl}\r\n <\/div>`;\r\n }).join('');\r\n\r\n document.getElementById('btn-prev').disabled = curStep === 0;\r\n const nb = document.getElementById('btn-next');\r\n if (curStep === total - 1) {\r\n nb.textContent = '\ud83c\udfd7\ufe0f Generate Floor Plan';\r\n nb.className = 'btn btn-primary btn-lg';\r\n nb.onclick = startGenerate;\r\n } else {\r\n nb.textContent = 'Next Step \u2192';\r\n nb.className = 'btn btn-blue';\r\n nb.onclick = nextStep;\r\n }\r\n hideErr();\r\n}\r\n\r\nfunction goStep(i) { if (i <= curStep) { curStep = i; renderStep(); } }\r\nfunction prevStep() { if (curStep > 0) { curStep--; renderStep(); } }\r\nfunction nextStep() { if (validate()) { curStep++; renderStep(); window.scrollTo({top:0,behavior:'smooth'}); } }\r\n\r\nfunction validate() {\r\n for (const f of STEPS[curStep].fields) {\r\n if (f.req && !formData[f.id]) { showErr(`Please fill in: ${f.label}`); document.getElementById(`f_${f.id}`)?.focus(); return false; }\r\n }\r\n return true;\r\n}\r\nfunction showErr(msg) { const e = document.getElementById('err-box'); e.style.display = 'flex'; document.getElementById('err-msg').textContent = msg; }\r\nfunction hideErr() { document.getElementById('err-box').style.display = 'none'; }\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n GENERATION\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nasync function startGenerate() {\r\n if (!validate()) return;\r\n if (!isPro && designsUsed >= CONFIG.freeTierLimit) {\r\n alert(`You've used all ${CONFIG.freeTierLimit} free designs. Upgrade to Pro for unlimited!`);\r\n showPage('home'); showSection('pricing'); return;\r\n }\r\n if (!CONFIG.apiKey || CONFIG.apiKey === 'YOUR_ANTHROPIC_API_KEY') {\r\n alert('\u26a0\ufe0f Please open this HTML file in a text editor and set your Anthropic API key in the CONFIG section near the bottom of the file.');\r\n return;\r\n }\r\n\r\n document.getElementById('wiz-panel').style.display = 'none';\r\n document.getElementById('load-panel').style.display = 'block';\r\n document.getElementById('res-panel').style.display = 'none';\r\n\r\n let li = 0;\r\n const lt = setInterval(() => {\r\n li = (li + 1) % LOAD_MSGS.length;\r\n const el = document.getElementById('load-msg');\r\n if (el) el.textContent = LOAD_MSGS[li];\r\n }, 2800);\r\n\r\n try {\r\n const result = await callClaude();\r\n clearInterval(lt);\r\n designsUsed++;\r\n localStorage.setItem('arch_designs_used', designsUsed);\r\n \/\/ Save to localStorage\r\n const saved = JSON.parse(localStorage.getItem('arch_saved_designs') || '[]');\r\n saved.unshift({ id: 'des_' + Date.now(), projectName: formData.projName || 'Untitled', plotSize: `${formData.plotWidth}\u00d7${formData.plotLength} ft`, createdAt: new Date().toISOString(), formData: {...formData}, result });\r\n localStorage.setItem('arch_saved_designs', JSON.stringify(saved.slice(0, 20)));\r\n currentResult = result;\r\n renderResults(result);\r\n } catch (err) {\r\n clearInterval(lt);\r\n document.getElementById('load-panel').style.display = 'none';\r\n document.getElementById('wiz-panel').style.display = 'block';\r\n showErr('Generation failed: ' + err.message + '. Check your API key and try again.');\r\n }\r\n}\r\n\r\nasync function callClaude() {\r\n const specs = Object.entries(formData).filter(([k,v]) => v).map(([k,v]) => `${k}: ${v}`).join('\\n');\r\n const prompt = `Generate a complete architectural floor plan for these specifications:\\n\\n${specs}\\n\\nReturn ONLY valid JSON (no markdown, no code blocks) with this structure:\\n{\"floorPlan\":{\"totalWidth\":<10 units per foot based on plotWidth>,\"totalHeight\":<10 units per foot based on plotLength>,\"scale\":\"1:100\",\"rooms\":[{\"id\":\"r1\",\"label\":\"Living Room\",\"x\":<units from left>,\"y\":<units from top>,\"w\":<width>,\"h\":<height>,\"type\":\"living\",\"dims\":\"16 \u00d7 18 ft\"}],\"doors\":[{\"x\":50,\"y\":0,\"width\":28,\"wall\":\"top\"}],\"windows\":[{\"x\":100,\"y\":0,\"width\":35,\"wall\":\"top\"}]},\"summary\":{\"totalBuiltArea\":\"1800 sq ft\",\"plotArea\":\"1800 sq ft\",\"coverage\":\"65%\",\"setbacks\":{\"front\":\"5 ft\",\"back\":\"3 ft\",\"left\":\"3 ft\",\"right\":\"3 ft\"}},\"materialEstimate\":{\"bricks\":18000,\"cementBags\":320,\"steelTons\":3.2,\"tilesArea\":1400},\"doorSchedule\":[{\"id\":\"D1\",\"location\":\"Main Entrance\",\"size\":\"4\u00d77 ft\",\"material\":\"Solid Teak Wood\",\"direction\":\"Inward-Left\"}],\"windowSchedule\":[{\"id\":\"W1\",\"location\":\"Bedroom 1 North\",\"size\":\"4\u00d74 ft\",\"wall\":\"North\",\"heightFromFloor\":\"3 ft\"}],\"waterPlan\":\"WATER SUPPLY SYSTEM:\\\\n\\\\nMain connection enters from front boundary...\",\"gasPlan\":\"GAS SUPPLY SYSTEM:\\\\n\\\\nGas meter at boundary wall...\",\"electricalPlan\":\"ELECTRICAL SYSTEM:\\\\n\\\\nMain DB panel in lobby...\",\"designNotes\":\"DESIGN NOTES:\\\\n\\\\n1. Plot utilization...\"}\r\n\r\nRules: All rooms must fit inside plot. External walls 9 inch, internal 4.5 inch. Min bedroom 10\u00d710ft, bathroom 5\u00d77ft, kitchen 8\u00d710ft. Place veranda at front, garage near gate, bathrooms grouped. Use Pakistani architectural standards.`;\r\n\r\n const res = await fetch('https:\/\/api.anthropic.com\/v1\/messages', {\r\n method: 'POST',\r\n headers: { 'Content-Type': 'application\/json', 'x-api-key': CONFIG.apiKey, 'anthropic-version': '2023-06-01' },\r\n body: JSON.stringify({ model: CONFIG.model, max_tokens: CONFIG.maxTokens,\r\n system: 'You are ArchitectAI Pro, expert in Pakistani residential architecture. Generate floor plans as JSON only. No markdown, no code blocks.',\r\n messages: [{ role: 'user', content: prompt }] })\r\n });\r\n if (!res.ok) throw new Error(`API error ${res.status}: ${await res.text()}`);\r\n const data = await res.json();\r\n const text = (data.content || []).map(c => c.text || '').join('').replace(\/```json\\s*\/g,'').replace(\/```\\s*\/g,'').trim();\r\n return JSON.parse(text);\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n FLOOR PLAN SVG RENDERER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nconst ROOM_FILL = { bedroom:'#DBEAFE',bathroom:'#D1FAE5',kitchen:'#FEF3C7',living:'#EDE9FE',drawing:'#FCE7F3',garage:'#F3F4F6',veranda:'#DCFCE7',store:'#F3F4F6',staircase:'#DBEAFE',dining:'#FEF3C7',servant:'#F9FAFB',other:'#EFF6FF' };\r\nconst ROOM_STROKE = { bedroom:'#1D4ED8',bathroom:'#065F46',kitchen:'#92400E',living:'#4C1D95',drawing:'#831843',garage:'#374151',veranda:'#14532D',store:'#374151',staircase:'#1E3A8A',dining:'#78350F',servant:'#4B5563',other:'#1E40AF' };\r\n\r\nfunction buildSVG(fp, pro) {\r\n if (!fp || !fp.rooms) return '<p style=\"text-align:center;padding:3rem;color:var(--muted)\">No floor plan data<\/p>';\r\n const { rooms=[], doors=[], windows=[], totalWidth=500, totalHeight=400, scale='1:100' } = fp;\r\n const PAD = 60, W = totalWidth + PAD*2, H = totalHeight + PAD*2 + 50;\r\n let s = `<svg viewBox=\"0 0 ${W} ${H}\" style=\"width:100%;display:block\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">`;\r\n s += `<defs><pattern id=\"gm\" width=\"10\" height=\"10\" patternUnits=\"userSpaceOnUse\"><path d=\"M10 0L0 0 0 10\" fill=\"none\" stroke=\"#E2E8F0\" stroke-width=\".4\"\/><\/pattern><pattern id=\"gM\" width=\"50\" height=\"50\" patternUnits=\"userSpaceOnUse\"><rect width=\"50\" height=\"50\" fill=\"url(#gm)\"\/><path d=\"M50 0L0 0 0 50\" fill=\"none\" stroke=\"#CBD5E1\" stroke-width=\".8\"\/><\/pattern><\/defs>`;\r\n s += `<rect width=\"${W}\" height=\"${H}\" fill=\"#F0F7FF\"\/>`;\r\n s += `<rect x=\"${PAD}\" y=\"${PAD}\" width=\"${totalWidth}\" height=\"${totalHeight}\" fill=\"url(#gM)\"\/>`;\r\n \/\/ Header\r\n s += `<rect width=\"${W}\" height=\"${PAD-10}\" fill=\"#1D3557\"\/>`;\r\n s += `<text x=\"${W\/2}\" y=\"${(PAD-10)\/2+4}\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-size=\"12\" font-weight=\"700\" font-family=\"Segoe UI,sans-serif\" fill=\"white\">ARCHITECTURAL FLOOR PLAN \u00b7 SCALE ${scale}<\/text>`;\r\n if (!pro) s += `<text x=\"${W-10}\" y=\"${(PAD-10)\/2+4}\" text-anchor=\"end\" dominant-baseline=\"middle\" font-size=\"9\" font-family=\"Segoe UI,sans-serif\" fill=\"#FFB703\">FREE PLAN<\/text>`;\r\n \/\/ Plot boundary\r\n s += `<rect x=\"${PAD}\" y=\"${PAD}\" width=\"${totalWidth}\" height=\"${totalHeight}\" fill=\"none\" stroke=\"#1D3557\" stroke-width=\"2.5\" stroke-dasharray=\"10,5\"\/>`;\r\n \/\/ Setback hint\r\n s += `<rect x=\"${PAD+15}\" y=\"${PAD+15}\" width=\"${totalWidth-30}\" height=\"${totalHeight-30}\" fill=\"none\" stroke=\"#94A3B8\" stroke-width=\".7\" stroke-dasharray=\"4,3\" opacity=\".5\"\/>`;\r\n\r\n rooms.forEach(r => {\r\n const f = ROOM_FILL[r.type]||'#EFF6FF', st = ROOM_STROKE[r.type]||'#1E40AF';\r\n const rx = PAD+r.x, ry = PAD+r.y, cx = rx+r.w\/2, cy = ry+r.h\/2;\r\n s += `<rect x=\"${rx}\" y=\"${ry}\" width=\"${r.w}\" height=\"${r.h}\" fill=\"${f}\" stroke=\"${st}\" stroke-width=\"1.8\" rx=\"2\"\/>`;\r\n const ly = r.dims ? cy-8 : cy;\r\n s += `<text x=\"${cx}\" y=\"${ly}\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-size=\"9.5\" font-weight=\"700\" font-family=\"Segoe UI,sans-serif\" fill=\"${st}\">${r.label}<\/text>`;\r\n if (r.dims) s += `<text x=\"${cx}\" y=\"${cy+10}\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-size=\"8\" font-family=\"Courier New,monospace\" fill=\"${st}\" opacity=\".8\">${r.dims}<\/text>`;\r\n });\r\n\r\n doors.forEach(d => {\r\n const x = PAD+d.x, y = PAD+d.y, dw = d.width||28, h = d.wall==='top'||d.wall==='bottom';\r\n s += `<line x1=\"${x}\" y1=\"${y}\" x2=\"${h?x+dw:x}\" y2=\"${h?y:y+dw}\" stroke=\"#E63946\" stroke-width=\"2.5\" stroke-linecap=\"round\"\/>`;\r\n s += h ? `<path d=\"M${x},${y} a${dw},${dw} 0 0,1 ${dw},0\" fill=\"none\" stroke=\"#E63946\" stroke-width=\"1\" stroke-dasharray=\"3,2\" opacity=\".5\"\/>`\r\n : `<path d=\"M${x},${y} a${dw},${dw} 0 0,1 0,${dw}\" fill=\"none\" stroke=\"#E63946\" stroke-width=\"1\" stroke-dasharray=\"3,2\" opacity=\".5\"\/>`;\r\n });\r\n\r\n windows.forEach(w => {\r\n const x = PAD+w.x, y = PAD+w.y, ww = w.width||32, h = w.wall==='top'||w.wall==='bottom';\r\n for (let i=0;i<3;i++){const o=i*3-3;\r\n if(h) s+=`<line x1=\"${x}\" y1=\"${y+o}\" x2=\"${x+ww}\" y2=\"${y+o}\" stroke=\"#457B9D\" stroke-width=\"${i===1?2:1}\" opacity=\"${i===1?1:.5}\"\/>`;\r\n else s+=`<line x1=\"${x+o}\" y1=\"${y}\" x2=\"${x+o}\" y2=\"${y+ww}\" stroke=\"#457B9D\" stroke-width=\"${i===1?2:1}\" opacity=\"${i===1?1:.5}\"\/>`;\r\n }\r\n });\r\n\r\n \/\/ North arrow\r\n const nx = W-38, ny = PAD+38;\r\n s += `<circle cx=\"${nx}\" cy=\"${ny}\" r=\"20\" fill=\"white\" stroke=\"#1D3557\" stroke-width=\"1.5\"\/>`;\r\n s += `<polygon points=\"${nx},${ny-16} ${nx-5},${ny-4} ${nx+5},${ny-4}\" fill=\"#1D3557\"\/>`;\r\n s += `<polygon points=\"${nx},${ny+16} ${nx-5},${ny+4} ${nx+5},${ny+4}\" fill=\"#94A3B8\"\/>`;\r\n s += `<text x=\"${nx}\" y=\"${ny-19}\" text-anchor=\"middle\" font-size=\"9\" font-weight=\"800\" font-family=\"Segoe UI,sans-serif\" fill=\"#1D3557\">N<\/text>`;\r\n\r\n \/\/ Legend\r\n [['bedroom','Bedroom'],['bathroom','Bathroom'],['kitchen','Kitchen'],['living','Living'],['veranda','Veranda']].forEach(([t,l],i) => {\r\n const lx = PAD + i*110;\r\n if (lx+105 > W-PAD) return;\r\n s += `<rect x=\"${lx}\" y=\"${H-28}\" width=\"13\" height=\"11\" fill=\"${ROOM_FILL[t]}\" stroke=\"${ROOM_STROKE[t]}\" stroke-width=\"1\" rx=\"2\"\/>`;\r\n s += `<text x=\"${lx+17}\" y=\"${H-19}\" font-size=\"9\" font-family=\"Segoe UI,sans-serif\" fill=\"#374151\">${l}<\/text>`;\r\n });\r\n\r\n \/\/ Scale bar\r\n const sbx = W-140, sby = H-22;\r\n s += `<line x1=\"${sbx}\" y1=\"${sby}\" x2=\"${sbx+100}\" y2=\"${sby}\" stroke=\"#374151\" stroke-width=\"1.5\"\/>`;\r\n [0,50,100].forEach(px => s += `<line x1=\"${sbx+px}\" y1=\"${sby-5}\" x2=\"${sbx+px}\" y2=\"${sby+5}\" stroke=\"#374151\" stroke-width=\"1.5\"\/>`);\r\n s += `<text x=\"${sbx}\" y=\"${sby-8}\" font-size=\"8\" font-family=\"Courier New,monospace\" fill=\"#374151\" text-anchor=\"middle\">0<\/text>`;\r\n s += `<text x=\"${sbx+50}\" y=\"${sby-8}\" font-size=\"8\" font-family=\"Courier New,monospace\" fill=\"#374151\" text-anchor=\"middle\">10ft<\/text>`;\r\n s += `<text x=\"${sbx+100}\" y=\"${sby-8}\" font-size=\"8\" font-family=\"Courier New,monospace\" fill=\"#374151\" text-anchor=\"middle\">20ft<\/text>`;\r\n\r\n \/\/ Watermark\r\n if (!pro) s += `<text x=\"${W\/2}\" y=\"${H\/2+40}\" text-anchor=\"middle\" dominant-baseline=\"middle\" font-size=\"55\" font-weight=\"900\" font-family=\"Courier New,monospace\" fill=\"#1D3557\" opacity=\".065\" transform=\"rotate(-35,${W\/2},${H\/2})\">ARCHITECTAI FREE<\/text>`;\r\n\r\n s += '<\/svg>';\r\n return s;\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n RESULTS RENDERER\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nfunction renderResults(result) {\r\n document.getElementById('load-panel').style.display = 'none';\r\n document.getElementById('res-panel').style.display = 'block';\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n\r\n const sum = result.summary || {};\r\n document.getElementById('res-metrics').innerHTML = [\r\n { l:'Built Area', v: sum.totalBuiltArea||'\u2014' },\r\n { l:'Plot Area', v: sum.plotArea||'\u2014' },\r\n { l:'Coverage', v: sum.coverage||'\u2014' },\r\n { l:'Setback (F)',v: sum.setbacks?.front||'5 ft' },\r\n { l:'Bedrooms', v: formData.bedrooms||'\u2014' },\r\n { l:'Floors', v: formData.floors||'\u2014' },\r\n ].map(m => `<div class=\"mc\"><div class=\"ml\">${m.l}<\/div><div class=\"mv\">${m.v}<\/div><\/div>`).join('');\r\n\r\n const TABS = [\r\n { id:'floor', l:'\ud83d\uddfa\ufe0f Floor Plan', free:true },\r\n { id:'water', l:'\ud83d\udca7 Water', free:false },\r\n { id:'gas', l:'\ud83d\udd25 Gas', free:false },\r\n { id:'elec', l:'\u26a1 Electrical', free:false },\r\n { id:'mats', l:'\ud83e\uddf1 Materials', free:false },\r\n { id:'sched', l:'\ud83d\udccb Schedules', free:false },\r\n { id:'notes', l:'\ud83d\udcdd Notes', free:true },\r\n ];\r\n\r\n document.getElementById('res-tabs').innerHTML = TABS.map(t => {\r\n const lk = !t.free && !isPro;\r\n return `<button class=\"tb${t.id==='floor'?' on':''}\" onclick=\"switchTab('${t.id}',${lk})\">${t.l}${lk?' \ud83d\udd12':''}<\/button>`;\r\n }).join('');\r\n\r\n const est = result.materialEstimate || {};\r\n const ds = result.doorSchedule || [];\r\n const ws = result.windowSchedule || [];\r\n\r\n const html = {\r\n floor: `<div class=\"fp-wrap\" id=\"fp-svg\">${buildSVG(result.floorPlan, isPro)}<\/div>\r\n <div style=\"display:flex;gap:10px;margin-top:1rem;flex-wrap:wrap\">\r\n <button class=\"btn btn-blue\" id=\"pdf-btn\" onclick=\"exportPDF()\">\u2b07\ufe0f Export PDF${isPro?'':' (Watermarked)'}<\/button>\r\n ${isPro?'':'<button class=\"btn btn-primary\" onclick=\"showPage(\\'home\\');showSection(\\'pricing\\')\">\u2728 Upgrade for Full PDF<\/button>'}\r\n <\/div>\r\n <div class=\"info-strip\">\ud83d\udccc <strong>Legend:<\/strong> <span style=\"color:#E63946\">\u2501\u2501 Door swing<\/span> <span style=\"color:#457B9D\">\u2504\u2504 Window<\/span> <span style=\"color:#888\">\u2014 \u2014 Plot boundary<\/span><\/div>`,\r\n\r\n water: isPro ? `<div class=\"util-box\"><div class=\"util-hdr\"><span style=\"font-size:24px\">\ud83d\udca7<\/span><h3 style=\"color:var(--blue)\">Water Supply System<\/h3><\/div><div class=\"util-body\">${esc(result.waterPlan||'No data.')}<\/div><\/div>` : lockedTab('Water Supply System','\ud83d\udca7'),\r\n gas: isPro ? `<div class=\"util-box\"><div class=\"util-hdr\"><span style=\"font-size:24px\">\ud83d\udd25<\/span><h3 style=\"color:var(--red)\">Gas Supply System<\/h3><\/div><div class=\"util-body\">${esc(result.gasPlan||'No data.')}<\/div><\/div>` : lockedTab('Gas Supply System','\ud83d\udd25'),\r\n elec: isPro ? `<div class=\"util-box\"><div class=\"util-hdr\"><span style=\"font-size:24px\">\u26a1<\/span><h3 style=\"color:var(--yellow-dk)\">Electrical System<\/h3><\/div><div class=\"util-body\">${esc(result.electricalPlan||'No data.')}<\/div><\/div>` : lockedTab('Electrical Plan','\u26a1'),\r\n\r\n mats: isPro ? `<div class=\"mat-grid\">\r\n <div class=\"mat-card\"><div class=\"mat-icon\">\ud83e\uddf1<\/div><div class=\"mat-lbl\">Bricks<\/div><div class=\"mat-val\">${n(est.bricks)} <span style=\"font-size:.75rem;font-weight:400\">units<\/span><\/div><\/div>\r\n <div class=\"mat-card\"><div class=\"mat-icon\">\ud83c\udfd7\ufe0f<\/div><div class=\"mat-lbl\">Cement Bags<\/div><div class=\"mat-val\">${n(est.cementBags)} <span style=\"font-size:.75rem;font-weight:400\">bags<\/span><\/div><\/div>\r\n <div class=\"mat-card\"><div class=\"mat-icon\">\u2699\ufe0f<\/div><div class=\"mat-lbl\">Steel \/ Rebar<\/div><div class=\"mat-val\">${est.steelTons||0} <span style=\"font-size:.75rem;font-weight:400\">tons<\/span><\/div><\/div>\r\n <div class=\"mat-card\"><div class=\"mat-icon\">\u2b1c<\/div><div class=\"mat-lbl\">Tiles Area<\/div><div class=\"mat-val\">${n(est.tilesArea)} <span style=\"font-size:.75rem;font-weight:400\">sq ft<\/span><\/div><\/div>\r\n <\/div>\r\n <div class=\"alert-w\" style=\"margin-top:1rem\">\u2139\ufe0f Estimates are approximate \u00b115%. Actual quantities vary by site conditions and finish quality.<\/div>` : lockedTab('Material Estimates','\ud83e\uddf1'),\r\n\r\n sched: isPro ? `\r\n <h3 style=\"margin-bottom:1rem;color:var(--blue)\">Door Schedule<\/h3>\r\n <div class=\"sched-wrap\"><table class=\"sched-tbl\"><thead><tr><th>ID<\/th><th>Location<\/th><th>Size<\/th><th>Material<\/th><th>Direction<\/th><\/tr><\/thead><tbody>\r\n ${ds.length ? ds.map(d=>`<tr><td class=\"mono\">${d.id||'\u2014'}<\/td><td>${d.location||'\u2014'}<\/td><td class=\"mono\">${d.size||'\u2014'}<\/td><td>${d.material||'\u2014'}<\/td><td>${d.direction||'\u2014'}<\/td><\/tr>`).join('') : '<tr><td colspan=\"5\" style=\"text-align:center;padding:1.5rem;color:var(--muted)\">No data<\/td><\/tr>'}\r\n <\/tbody><\/table><\/div>\r\n <div class=\"sep\"><h3>Window Schedule<\/h3>\r\n <div class=\"sched-wrap\"><table class=\"sched-tbl\"><thead><tr><th>ID<\/th><th>Location<\/th><th>Size<\/th><th>Wall<\/th><th>Height from Floor<\/th><\/tr><\/thead><tbody>\r\n ${ws.length ? ws.map(w=>`<tr><td class=\"mono\">${w.id||'\u2014'}<\/td><td>${w.location||'\u2014'}<\/td><td class=\"mono\">${w.size||'\u2014'}<\/td><td>${w.wall||'\u2014'}<\/td><td class=\"mono\">${w.heightFromFloor||'\u2014'}<\/td><\/tr>`).join('') : '<tr><td colspan=\"5\" style=\"text-align:center;padding:1.5rem;color:var(--muted)\">No data<\/td><\/tr>'}\r\n <\/tbody><\/table><\/div><\/div>` : lockedTab('Door & Window Schedules','\ud83d\udccb'),\r\n\r\n notes: `<div class=\"util-box\"><div class=\"util-hdr\"><span style=\"font-size:24px\">\ud83d\udcdd<\/span><h3 style=\"color:var(--blue)\">Design Notes & Recommendations<\/h3><\/div><div class=\"util-body\">${esc(result.designNotes||'No notes generated.')}<\/div><\/div>`\r\n };\r\n\r\n document.getElementById('res-content').innerHTML = Object.entries(html)\r\n .map(([id,h]) => `<div class=\"tp${id==='floor'?' on':''}\" id=\"tp-${id}\">${h}<\/div>`).join('');\r\n}\r\n\r\nfunction lockedTab(name, icon) {\r\n return `<div class=\"locked-tab\"><div style=\"font-size:48px;margin-bottom:1rem\">${icon}<\/div><h3 style=\"margin-bottom:.5rem;color:var(--blue)\">${name}<\/h3><p style=\"color:var(--muted);font-size:14px;margin-bottom:1.5rem\">Available on Pro plan<\/p><button class=\"btn btn-primary btn-lg\" onclick=\"showPage('home');showSection('pricing')\">\u2728 Upgrade to Pro<\/button><\/div>`;\r\n}\r\n\r\nfunction switchTab(id, locked) {\r\n if (locked) { showPage('home'); showSection('pricing'); return; }\r\n document.querySelectorAll('.tb').forEach(b => b.classList.remove('on'));\r\n document.querySelectorAll('.tp').forEach(p => p.classList.remove('on'));\r\n event.target.classList.add('on');\r\n document.getElementById('tp-' + id)?.classList.add('on');\r\n}\r\n\r\nfunction esc(s) { return String(s).replace(\/<\/g,'<').replace(\/\\n\/g,'<br>'); }\r\nfunction n(v) { return (v||0).toLocaleString(); }\r\n\r\nfunction resetWizard() {\r\n curStep = 0;\r\n Object.keys(formData).forEach(k => delete formData[k]);\r\n currentResult = null;\r\n document.getElementById('res-panel').style.display = 'none';\r\n document.getElementById('wiz-panel').style.display = 'block';\r\n renderStep();\r\n updateTierBanner();\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n PDF EXPORT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\nasync function exportPDF() {\r\n if (typeof jsPDF === 'undefined') { alert('PDF library loading... please try again in a moment.'); return; }\r\n const btn = document.getElementById('pdf-btn');\r\n if (btn) { btn.disabled = true; btn.textContent = '\u23f3 Generating PDF...'; }\r\n\r\n try {\r\n const doc = new jsPDF({ orientation:'landscape', unit:'mm', format:'a2' });\r\n const PW = doc.internal.pageSize.getWidth();\r\n const PH = doc.internal.pageSize.getHeight();\r\n\r\n \/\/ Header bar\r\n doc.setFillColor(29, 53, 87);\r\n doc.rect(0, 0, PW, 28, 'F');\r\n doc.setTextColor(255, 255, 255);\r\n doc.setFontSize(18); doc.setFont('helvetica', 'bold');\r\n doc.text('ARCHITECTURAL FLOOR PLAN', 20, 12);\r\n doc.setFontSize(10); doc.setFont('helvetica', 'normal');\r\n doc.setTextColor(168, 218, 220);\r\n doc.text(`Project: ${formData.projName || 'Untitled'} | Owner: ${formData.ownerName || 'N\/A'} | Plot: ${formData.plotWidth||'?'}\u00d7${formData.plotLength||'?'} ft | ${formData.floors || ''}`, 20, 20);\r\n doc.setTextColor(255, 183, 3);\r\n doc.setFont('helvetica', 'bold'); doc.setFontSize(10);\r\n doc.text('ArchitectAI Pro', PW-20, 10, { align:'right' });\r\n doc.setFont('helvetica', 'normal'); doc.setTextColor(200, 220, 240);\r\n doc.text(`Date: ${new Date().toLocaleDateString('en-PK',{year:'numeric',month:'long',day:'numeric'})} | Scale: 1:100`, PW-20, 18, { align:'right' });\r\n\r\n \/\/ Capture SVG as image\r\n const svgEl = document.querySelector('#fp-svg svg');\r\n if (svgEl && typeof html2canvas !== 'undefined') {\r\n const clone = svgEl.cloneNode(true);\r\n clone.style.cssText = 'width:900px;height:650px;position:absolute;left:-9999px;top:0';\r\n document.body.appendChild(clone);\r\n try {\r\n const canvas = await html2canvas(clone, { scale:2, backgroundColor:'#F0F7FF', logging:false });\r\n const img = canvas.toDataURL('image\/png');\r\n const maxW = PW-40, maxH = PH-80;\r\n const r = Math.min(maxW\/canvas.width, maxH\/canvas.height)*2;\r\n doc.addImage(img, 'PNG', 20, 34, canvas.width*r\/2, canvas.height*r\/2);\r\n } finally { document.body.removeChild(clone); }\r\n }\r\n\r\n \/\/ Watermark for free\r\n if (!isPro) {\r\n doc.setFont('helvetica', 'bold'); doc.setFontSize(55);\r\n doc.setTextColor(29, 53, 87);\r\n doc.setGState(doc.GState({ opacity:0.07 }));\r\n doc.text('ARCHITECTAI FREE', PW\/2, PH\/2, { angle:35, align:'center' });\r\n doc.setGState(doc.GState({ opacity:1 }));\r\n }\r\n\r\n \/\/ Summary strip\r\n const sum = currentResult?.summary || {};\r\n const stripY = PH - 50;\r\n doc.setFillColor(240, 247, 255);\r\n doc.roundedRect(20, stripY, PW-40, 40, 3, 3, 'F');\r\n doc.setDrawColor(29, 53, 87); doc.setLineWidth(0.5);\r\n doc.roundedRect(20, stripY, PW-40, 40, 3, 3, 'S');\r\n const mets = [\r\n ['Built Area', sum.totalBuiltArea||'N\/A'],['Plot Area', sum.plotArea||'N\/A'],\r\n ['Coverage', sum.coverage||'N\/A'],['Front Setback', sum.setbacks?.front||'5 ft'],\r\n ['Bedrooms', formData.bedrooms||'N\/A'],['Floors', formData.floors||'N\/A']\r\n ];\r\n const cw = (PW-40)\/mets.length;\r\n mets.forEach((m,i) => {\r\n const mx = 20 + i*cw + cw\/2;\r\n doc.setFont('helvetica','bold'); doc.setFontSize(7); doc.setTextColor(100,116,139);\r\n doc.text(m[0].toUpperCase(), mx, stripY+10, { align:'center' });\r\n doc.setFontSize(12); doc.setTextColor(29,53,87);\r\n doc.text(String(m[1]), mx, stripY+24, { align:'center' });\r\n });\r\n\r\n \/\/ Pro: utility sheets\r\n if (isPro && currentResult) {\r\n const utils = [\r\n { title:'WATER SUPPLY SYSTEM', content: currentResult.waterPlan, r:69, g:123, b:157 },\r\n { title:'GAS SUPPLY SYSTEM', content: currentResult.gasPlan, r:230, g:57, b:70 },\r\n { title:'ELECTRICAL PLAN', content: currentResult.electricalPlan, r:180, g:100, b:0 },\r\n ];\r\n utils.forEach(u => {\r\n doc.addPage();\r\n doc.setFillColor(u.r, u.g, u.b); doc.rect(0, 0, PW, 20, 'F');\r\n doc.setTextColor(255,255,255); doc.setFontSize(14); doc.setFont('helvetica','bold');\r\n doc.text(u.title, 20, 13);\r\n doc.setTextColor(30,30,30); doc.setFontSize(10); doc.setFont('helvetica','normal');\r\n doc.text(doc.splitTextToSize(u.content||'No data.', PW-40), 20, 30);\r\n });\r\n\r\n \/\/ Materials\r\n doc.addPage();\r\n doc.setFillColor(45,198,83); doc.rect(0,0,PW,20,'F');\r\n doc.setTextColor(255,255,255); doc.setFontSize(14); doc.setFont('helvetica','bold');\r\n doc.text('MATERIAL ESTIMATE REPORT', 20, 13);\r\n const e = currentResult.materialEstimate || {};\r\n [['\ud83e\uddf1 Bricks', n(e.bricks)+' units'],['\ud83c\udfd7\ufe0f Cement', n(e.cementBags)+' bags'],['\u2699\ufe0f Steel', (e.steelTons||0)+' tons'],['\u2b1c Tiles', n(e.tilesArea)+' sq ft']].forEach((m,i) => {\r\n const mx = 20 + i*80;\r\n doc.setFillColor(240,247,255); doc.roundedRect(mx,28,72,36,3,3,'F');\r\n doc.setFont('helvetica','bold'); doc.setFontSize(8); doc.setTextColor(100,116,139);\r\n doc.text(m[0].toUpperCase(), mx+36, 38, { align:'center' });\r\n doc.setFontSize(13); doc.setTextColor(29,53,87);\r\n doc.text(m[1], mx+36, 54, { align:'center' });\r\n });\r\n\r\n \/\/ Notes\r\n doc.addPage();\r\n doc.setFillColor(29,53,87); doc.rect(0,0,PW,20,'F');\r\n doc.setTextColor(255,255,255); doc.setFontSize(14); doc.setFont('helvetica','bold');\r\n doc.text('DESIGN NOTES & RECOMMENDATIONS', 20, 13);\r\n doc.setTextColor(30,30,30); doc.setFontSize(10); doc.setFont('helvetica','normal');\r\n doc.text(doc.splitTextToSize(currentResult.designNotes||'No notes.', PW-40), 20, 30);\r\n }\r\n\r\n const fname = `${(formData.projName||'ArchitectAI-Plan').replace(\/\\s+\/g,'-')}-${new Date().toISOString().slice(0,10)}.pdf`;\r\n doc.save(fname);\r\n\r\n } catch(e) {\r\n alert('PDF export failed: ' + e.message);\r\n } finally {\r\n if (btn) { btn.disabled = false; btn.textContent = '\u2b07\ufe0f Export PDF' + (isPro ? '' : ' (Watermarked)'); }\r\n }\r\n}\r\n\r\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n INIT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n updateTierBanner();\r\n renderStep();\r\n updateTierBanner();\r\n});\r\n<\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":17,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_uag_custom_page_level_css":"","footnotes":""},"class_list":["post-22","page","type-page","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1.jpg",2000,1200,false],"thumbnail":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1-150x150.jpg",150,150,true],"medium":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1-300x180.jpg",300,180,true],"medium_large":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1-768x461.jpg",640,384,true],"large":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1-1024x614.jpg",640,384,true],"1536x1536":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1-1536x922.jpg",1536,922,true],"2048x2048":["https:\/\/qaisarsocialedits.com\/wp-content\/uploads\/2025\/06\/espresso-1.jpg",2000,1200,false]},"uagb_author_info":{"display_name":"qaisarawan0944@gmail.com","author_link":"https:\/\/qaisarsocialedits.com\/?author=1"},"uagb_comment_info":0,"uagb_excerpt":null,"_links":{"self":[{"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=22"}],"version-history":[{"count":3,"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions"}],"predecessor-version":[{"id":86,"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/pages\/22\/revisions\/86"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=\/wp\/v2\/media\/17"}],"wp:attachment":[{"href":"https:\/\/qaisarsocialedits.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}