<!-- ============================================================
     WELL PLANNED — Trip Wardrobe Intake Wizard (Squarespace embed)
     HOW TO ADD THIS TO YOfUR SITE:
     1. In the Squarespace editor, create a new page (e.g. "Start My Trip").
     2. Add a Code Block to that page.
     3. Paste this entire file's contents into the Code Block.
     4. Before saving, replace STYLIST_EMAIL below with your real inbox
        (it's used for the "email us your photos" button).
     5. Save + publish. Link to this page from your checkout confirmation
        / thank-you step so customers land here right after purchase.
     ============================================================ -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@500;600;700&family=Jost:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  #wp-wizard-root{
    --ink:#2c3324;
    --forest:#3f4a37;
    --forest-dark:#333c2c;
    --cream:#f6f1e6;
    --card:#fffdf8;
    --tan:#e7d9c2;
    --accent:#b98a4e;
    --accent-dark:#96703b;
    --muted:#7c8570;
    --error:#b3543f;
  }
  #wp-wizard-root, #wp-wizard-root *{box-sizing:border-box;}
  #wp-wizard-root{
    font-family:'Jost', system-ui, -apple-system, sans-serif;
    background: var(--forest);
    color: var(--ink);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow-x:hidden;
    box-sizing:border-box;
    width: 100%;
    border-radius: 24px;
  }
  #wp-wizard-root h1, #wp-wizard-root h2, #wp-wizard-root h3{font-family:'Bodoni Moda', Georgia, serif; margin:0; font-weight:600;}
  #wp-wizard-root .app{
    width:100%;
    max-width:640px;
    display:flex;
    flex-direction:column;
    padding: 48px 22px 60px;
    margin: 0 auto;
  }
  #wp-wizard-root .topbar{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:34px;
  }
  #wp-wizard-root .brand{
    font-family:'Bodoni Moda', serif;
    color:var(--cream);
    font-size:15px;
    letter-spacing:0.4px;
    white-space:nowrap;
  }
  #wp-wizard-root .progress-track{
    flex:1;
    height:6px;
    background:rgba(246,241,230,0.18);
    border-radius:99px;
    overflow:hidden;
  }
  #wp-wizard-root .progress-fill{
    height:100%;
    width:0%;
    background: linear-gradient(90deg, var(--accent), var(--accent-dark));
    border-radius:99px;
    transition: width .45s ease;
  }
  #wp-wizard-root .stepcount{
    color:var(--cream);
    opacity:.75;
    font-size:12.5px;
    white-space:nowrap;
  }
  #wp-wizard-root .stage{
    flex:1;
    display:flex;
    align-items:center;
    width:100%;
  }
  #wp-wizard-root .card{
    width:100%;
    background: var(--card);
    border-radius:18px;
    padding:40px 36px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.28);
    opacity:0;
    transform: translateY(14px);
    animation: wp-rise .5s ease forwards;
  }
  @keyframes wp-rise{ to{ opacity:1; transform:translateY(0);} }
  #wp-wizard-root .eyebrow{
    font-size:12.5px;
    font-weight:600;
    letter-spacing:1.4px;
    text-transform:uppercase;
    color:var(--accent-dark);
    margin-bottom:10px;
  }
  #wp-wizard-root .q-title{
    font-size:26px;
    line-height:1.3;
    color:var(--ink);
    margin-bottom:8px;
  }
  #wp-wizard-root .q-sub{
    font-size:14.5px;
    line-height:1.55;
    color:var(--muted);
    margin-bottom:26px;
  }
  #wp-wizard-root .q-sub em{ color:var(--accent-dark); font-style:normal; font-weight:600; }
  #wp-wizard-root input[type=text], #wp-wizard-root input[type=email], #wp-wizard-root textarea, #wp-wizard-root input[type=date]{
    width:100%;
    font-family:'Jost', sans-serif;
    font-size:16px;
    padding:14px 16px;
    border-radius:10px;
    border:1.5px solid var(--tan);
    background:#fffefc;
    color:var(--ink);
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  #wp-wizard-root input[type=text]:focus, #wp-wizard-root input[type=email]:focus, #wp-wizard-root textarea:focus, #wp-wizard-root input[type=date]:focus{
    border-color:var(--accent);
    box-shadow:0 0 0 3px rgba(185,138,78,0.18);
  }
  #wp-wizard-root textarea{ min-height:110px; resize:vertical; line-height:1.5; }
  #wp-wizard-root .date-row{ display:flex; gap:14px; flex-wrap:wrap; }
  #wp-wizard-root .date-field{ flex:1; min-width:180px; }
  #wp-wizard-root .date-field label{ display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px; font-weight:500; }
  #wp-wizard-root .chip-grid{ display:flex; flex-wrap:wrap; gap:10px; }
  #wp-wizard-root .chip{
    padding:11px 18px;
    border-radius:999px;
    border:1.5px solid var(--tan);
    background:#fff;
    color:var(--ink);
    font-size:14.5px;
    font-family:'Jost', sans-serif;
    cursor:pointer;
    transition: all .15s ease;
    user-select:none;
  }
  #wp-wizard-root .chip:hover{ border-color:var(--accent); }
  #wp-wizard-root .chip.selected{
    background: var(--forest);
    border-color: var(--forest);
    color: var(--cream);
  }
  #wp-wizard-root .other-input{ margin-top:14px; display:none; }
  #wp-wizard-root .other-input.show{ display:block; }
  #wp-wizard-root .grid-rows{ display:flex; flex-direction:column; gap:14px; }
  #wp-wizard-root .grid-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding-bottom:12px;
    border-bottom:1px solid #eee3d2;
    flex-wrap:wrap;
  }
  #wp-wizard-root .grid-row:last-child{ border-bottom:none; }
  #wp-wizard-root .grid-label{ font-size:14.5px; color:var(--ink); flex:1 1 180px; }
  #wp-wizard-root .pill-row{ display:flex; gap:6px; flex-wrap:wrap; }
  #wp-wizard-root .pill{
    width:36px; height:36px;
    border-radius:50%;
    border:1.5px solid var(--tan);
    background:#fff;
    font-size:13px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
    transition: all .15s ease;
  }
  #wp-wizard-root .pill.selected{ background:var(--accent); border-color:var(--accent); color:#fff; font-weight:600; }
  #wp-wizard-root .slider-wrap{ padding: 6px 4px 0; }
  #wp-wizard-root input[type=range]{ width:100%; accent-color: var(--accent); }
  #wp-wizard-root .slider-labels{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--muted); margin-top:8px; }
  #wp-wizard-root .nav-row{ display:flex; align-items:center; justify-content:space-between; margin-top:32px; gap:14px; }
  #wp-wizard-root .btn{
    font-family:'Jost', sans-serif;
    font-size:15px;
    font-weight:600;
    padding:14px 26px;
    border-radius:6px;
    border:none;
    cursor:pointer;
    transition: transform .12s ease, opacity .12s ease;
  }
  #wp-wizard-root .btn:active{ transform: scale(0.97); }
  #wp-wizard-root .btn-primary{ background: var(--forest); color: var(--cream); }
  #wp-wizard-root .btn-primary:hover{ background: var(--forest-dark); }
  #wp-wizard-root .btn-ghost{ background:none; color:var(--muted); padding:14px 8px; }
  #wp-wizard-root .btn-ghost:hover{ color:var(--ink); }
  #wp-wizard-root .btn-skip{ background:none; color:var(--accent-dark); text-decoration:underline; padding:14px 8px; font-weight:500; }
  #wp-wizard-root .err{ color:var(--error); font-size:13px; margin-top:10px; display:none; }
  #wp-wizard-root .err.show{ display:block; }
  #wp-wizard-root .confetti-icon{ display:flex; justify-content:center; margin-bottom:10px; }
  #wp-wizard-root .intro, #wp-wizard-root .thanks{ text-align:center; }
  #wp-wizard-root .intro h1, #wp-wizard-root .thanks h1{ font-size:32px; margin-bottom:14px; }
  #wp-wizard-root .intro p, #wp-wizard-root .thanks p{ font-size:15.5px; line-height:1.6; color:var(--muted); max-width:440px; margin: 0 auto 26px; }
  #wp-wizard-root .intro .btn, #wp-wizard-root .thanks .btn{ margin: 0 auto; display:block; }
  #wp-wizard-root .badge-row{ display:flex; gap:10px; justify-content:center; margin-bottom:22px; flex-wrap:wrap; }
  #wp-wizard-root .badge{ font-size:12px; letter-spacing:.5px; text-transform:uppercase; background:var(--tan); color:var(--forest-dark); padding:6px 12px; border-radius:999px; font-weight:600; }
  #wp-wizard-root .mailto-box{ background:var(--cream); border:1px dashed var(--tan); border-radius:12px; padding:18px 20px; margin-bottom:22px; }
  #wp-wizard-root .mailto-box p{ margin:0 0 12px; text-align:left; max-width:none; }
  #wp-wizard-root .mailto-box a.btn{ display:inline-block; }
  #wp-wizard-root .divider-note{ font-size:13px; color:var(--muted); text-align:center; margin-top:18px; }
</style>

<div id="wp-wizard-root">
  <div class="app">
    <div class="topbar">
      <span class="brand">WELL PLANNED</span>
      <div class="progress-track"><div class="progress-fill" id="wpProgressFill"></div></div>
      <span class="stepcount" id="wpStepCount"></span>
    </div>
    <div class="stage">
      <div class="card" id="wpCard"></div>
    </div>
  </div>
</div>

<script>
(function(){
/* ============ CONFIGURE ME ============ */
var STYLIST_EMAIL = "sam_rosendahl@hotmail.com"; // Real inbox to receive photo uploads
var FORM_ACTION = "https://docs.google.com/forms/d/e/1FAIpQLSeA-csv_0jmjDh4AFV-k9502k6XHqxWdKjvwJJG_Mv-iyP94w/formResponse";
/* ======================================= */

var answers = {};
function E(id){ return "entry." + id; }

var ACTIVITIES = [
  {label:"Casual dinner", entry:566463521},
  {label:"Elegant / formal dinner", entry:198608792},
  {label:"Beach day", entry:1770535655},
  {label:"Pool day", entry:541985332},
  {label:"Hike / outdoor adventure", entry:641108313},
  {label:"Historic / cultural tour", entry:621241137},
  {label:"Wine tasting / culinary experience", entry:1075615527},
  {label:"Special celebration (wedding, anniversary, proposal, etc.)", entry:1261750260},
  {label:"Casual exploring / sightseeing", entry:1829676296},
  {label:"Other", entry:367966631}
];
var COUNT_OPTIONS = ["0","1","2","3","4","5+"];

var PACKAGE_LIMITS = {
      "Essentials (3 outfits) — $49": {min:3, max:3, label:"exactly 3 outfits"},
      "Personalized (4-6 outfits)— $99": {min:4, max:6, label:"4-6 outfits"},
      "Full Concierge (7-10 outfits) — $149": {min:7, max:10, label:"7-10 outfits"}
};
function pkgShortName(pkg){ return pkg ? pkg.split(" (")[0] : ""; }

var CONFETTI_ICON = '<svg width="72" height="60" viewBox="0 0 96 80" fill="none" xmlns="http://www.w3.org/2000/svg">'+
  '<rect x="28" y="34" width="40" height="34" rx="7" fill="#3f4a37"/>'+
  '<rect x="40" y="26" width="16" height="10" rx="4" fill="none" stroke="#3f4a37" stroke-width="4"/>'+
  '<rect x="28" y="48" width="40" height="4" fill="#e7d9c2"/>'+
  '<rect x="34" y="40" width="6" height="6" rx="1.5" fill="#b98a4e"/>'+
  '<rect x="56" y="58" width="6" height="6" rx="1.5" fill="#b98a4e"/>'+
  '<circle cx="20" cy="20" r="3" fill="#b98a4e"/>'+
  '<circle cx="44" cy="8" r="2.5" fill="#c97b63"/>'+
  '<circle cx="70" cy="14" r="3" fill="#7c94a0"/>'+
  '<circle cx="60" cy="4" r="2" fill="#3f4a37"/>'+
  '<rect x="10" y="30" width="7" height="3" rx="1.5" fill="#7c94a0" transform="rotate(-25 10 30)"/>'+
  '<rect x="30" y="14" width="7" height="3" rx="1.5" fill="#3f4a37" transform="rotate(20 30 14)"/>'+
  '<rect x="76" y="26" width="7" height="3" rx="1.5" fill="#b98a4e" transform="rotate(-15 76 26)"/>'+
  '<rect x="78" y="4" width="7" height="3" rx="1.5" fill="#c97b63" transform="rotate(35 78 4)"/>'+
  '<polygon points="16,10 20,10 18,15" fill="#c97b63" transform="rotate(15 18 12)"/>'+
  '<polygon points="52,16 56,16 54,21" fill="#7c94a0" transform="rotate(-10 54 18)"/>'+
  '</svg>';
function activitiesTotal(){
  var total = 0;
  ACTIVITIES.forEach(function(row, i){
    var v = (answers.activities && answers.activities[i]) || "0";
    total += (v === "5+") ? 5 : parseInt(v, 10);
  });
  return total;
}

var steps = [];
steps.push({type:"intro"});

steps.push({type:"text", key:"name", entry:201334605, title:"First, what should we call you?",
  sub:"Your name, so your lookbook feels like it was made just for you (because it was).", placeholder:"First & last name", required:true});

steps.push({type:"email", key:"email", entry:2114088816, title:"And your email?",
  sub:"This is where we'll send your finished lookbook — so make sure it's one you check!", placeholder:"you@example.com", required:true});

steps.push({type:"single-chip", key:"package", entry:1032676924, title:"Which package did you book?",
  sub:"Just so we can tailor everything to what you purchased.", required:true,
      options:["Essentials (3 outfits) — $49","Personalized (4-6 outfits)— $99","Full Concierge (7-10 outfits) — $149"]});

steps.push({type:"textarea", key:"destinations", entry:232343447, title:"Where are you headed?",
  sub:"List each city & country, in the order you'll visit them.", placeholder:"e.g. Rome, Italy → Positano, Italy → Paris, France", required:true});

steps.push({type:"dual-date", key:"dates", title:"When's the big trip?",
  sub:"Arrival at your first stop, and when you're back home.",
  entryA:1679278394, labelA:"Arrive", entryB:1308047345, labelB:"Depart / return home", required:true});

steps.push({type:"grid-pills", key:"activities", title:"What's on the itinerary?",
  sub:"Tap a number for every occasion you'll need an outfit for — beach days to black-tie dinners.",
  rows: ACTIVITIES, required:true});

steps.push({type:"text", key:"activity_other", entry:1597829680, title:"Anything else about your plans?",
  sub:"Optional — add detail on any activity above, or something we didn't list.",
  placeholder:"e.g. Sightseeing days involve a lot of walking, so I need cute-but-comfy sandals"});

steps.push({type:"single-chip", key:"budget_outfit", entry:1416605584, title:"What's your budget, per outfit?",
  sub:"Just a range — this keeps us shopping in the right lane for you.", required:true,
  options:["Under $50 per outfit","$50-$100 per outfit","Under $150 per outfit","$150 - $250 per outfit","$250 - $350 per outfit","$350 - $500 per outfit","$500+ per outfit"]});

steps.push({type:"text", key:"budget_total", entry:1949443480, title:"And your total budget for this trip?",
  sub:"For all clothing & accessory purchases combined (not including your styling package).",
  placeholder:"e.g. $500", required:true});

steps.push({type:"transition", title:"You're through the essentials!",
  sub:"Everything from here on is optional — but here's the truth: <em>the more detail you share, the better your chances of loving every look we send.</em> Give us five more minutes, or skip straight to done."});

steps.push({type:"text", key:"measurements", entry:2119463469, title:"What are your measurements?",
  sub:"Bust, waist, hips, inseam — in inches. Totally optional, but it helps us nail the fit.",
  placeholder:"e.g. 34-27-38, 30\" inseam"});

steps.push({type:"single-chip", key:"top_size", entry:2098289125, required:true, title:"What's your usual dress / top size?",
             sub:"", options:["XS","S","M","L","XL","XXL","Varies by brand / not sure"]});

steps.push({type:"single-chip", key:"bottom_size", entry:4022025, required:true, title:"And your usual bottom size?",
             sub:"Pants, shorts, or skirts.", options:["XS","S","M","L","XL","XXL","Varies by brand / not sure"]});

steps.push({type:"single-chip", key:"shoe_size", entry:1186948649, required:true, title:"What's your usual US shoe size?",
                        sub:"Pick the size that fits you best.",
                        options:["5","5.5","6","6.5","7","7.5","8","8.5","9","9.5","10","10.5","11","11.5","12+"], hasOther:true});

steps.push({type:"textarea", key:"size_notes", entry:2042802210, title:"Anything to clarify about sizing?",
  sub:"Optional — brands run differently, so tell us anything that helps.",
  placeholder:"e.g. Small shirts, 26\" waist, XS-S pants, 6.5-7 shoes"});

steps.push({type:"textarea", key:"brands", entry:1401449156, required:true, title:"Any brands you love, or stores where you normally shop?",
                        sub:"Brands you love or that fit you well - examples: Faherty, Marine Layer, Free People, Faithfull the Brand, Z Supply, Sam Edelman, Olukai, Left on Friday, Babaton, Vuori, Frank & Eileen. Or just tell us where you normally shop - examples: Target, Amazon, Nordstrom, Aritzia, Poshmark, Anthropologie, Lululemon, Athleta.",
                        placeholder:"e.g. Faherty, Vuori - or just Target and Amazon"});

steps.push({type:"multi-chip", key:"colors_love", entry:849031214, title:"Which colors do you gravitate toward?",
  sub:"Select all that feel like you.",
  options:["Neutrals / earth tones (tan, camel, olive, sand)","Black","White / cream / ivory","Blue (navy, denim, sky)","Green (olive, sage, emerald)","Red / burgundy / rust","Pink / blush / mauve","Yellow / orange","Purple / lavender","Metallics (gold, bronze)","Prints / patterns (florals, stripes, etc.)","I'm not sure"]});

steps.push({type:"multi-chip", key:"colors_avoid", entry:1947231089, title:"Any colors we should avoid?",
  sub:"Select all that apply — or tell us you're open to anything.",
  options:["Pink","Red","Orange","Yellow","Green","Blue","Purple","Black","White / cream","Bright / neon colors","Busy prints / patterns","I'm open to all colors"]});

steps.push({type:"multi-chip", key:"style", entry:1425542639, title:"How would you describe your style?",
  sub:"Pick every vibe that feels right — the more, the merrier.", hasOther:true,
  options:["Bohemian","Classic / timeless","Elegant / sophisticated","Minimalist","Romantic / feminine","Preppy","Sporty / athleisure","Edgy","Glam","Coastal / resort","Trendy","Vintage-inspired"]});

steps.push({type:"single-chip", key:"neckline", entry:1717528000, title:"What neckline feels most like you?",
  sub:"", options:["High / crew neckline","Modest V-neck or scoop","Lower / plunging necklines are fine","No preference"]});

steps.push({type:"single-chip", key:"length", entry:1825976412, title:"And your preferred length for skirts & dresses?",
  sub:"", options:["Maxi / floor-length","Midi (below knee)","Knee-length","Mini / above-knee is fine","No preference"]});

steps.push({type:"single-chip", key:"arms", entry:757279144, title:"How do you feel about arms & shoulders showing?",
  sub:"", options:["Prefer sleeves / covered","Fine with shoulders and arms bare","No preference"]});

steps.push({type:"slider", key:"skinbaring", entry:1224137761, title:"Overall, how comfortable are you with skin-baring styles?",
  sub:"Slide to wherever feels right — no wrong answer here.",
  min:1, max:5, minLabel:"Very modest / fully covered", maxLabel:"Very open to skin-baring styles"});

steps.push({type:"multi-chip", key:"jewelry_bags_shoes", entry:1261790543, title:"Would you like us to include jewelry, bags, shoes in your looks?", sub:"",
                options:["Yes, please show me jewelry options with each outfit","Yes, please show me bag options with each outfit","Yes, please show me shoe options with each outfit","No, please stick to clothing only"]});
  
  steps.push({type:"single-chip", key:"jewelry", entry:1019982318, title:"What jewelry metal tone do you prefer?",
  sub:"", options:["Gold / warm tones","Silver / cool tones","Mixed metals are fine","No preference"]});

steps.push({type:"single-chip", key:"secondhand", entry:9708514, title:"Open to secondhand or resale pieces?",
  sub:"", options:["Yes - I have a resale account and I'm open to secondhand pieces","I don't have an account, but I'm open to you sourcing secondhand pieces for me","I prefer new items only - no secondhand / resale"]});

steps.push({type:"extras-photos", title:"Got photos to share?",
  sub:"Inspo pics, closet staples, even a photo of yourself — all optional, and all genuinely helpful."});

steps.push({type:"textarea", key:"photo_notes", entry:2144808359, title:"Tell us about those photos",
  sub:"Optional — e.g. \"these are looks I've worn and loved\" or \"these aren't me, but I want to channel this vibe.\"",
  placeholder:"A sentence or two is plenty"});

steps.push({type:"textarea", key:"closet_notes", entry:450869129, title:"Anything from your closet we should build around?",
  sub:"Optional — tell us about pieces you're bringing that you'd like styled into your looks.",
  placeholder:"e.g. Bringing my tan Brixton fedora — please pair it with a couple of looks"});

steps.push({type:"textarea", key:"three_pieces", entry:338530184, title:"If you had to name 3 must-have looks, what would they be?",
  sub:"Optional, but so helpful — paint the picture for us.", big:true,
  placeholder:"e.g. 1) A cute dress for exploring Florence, paired with comfy sandals since we'll walk a lot..."});

steps.push({type:"thanks"});

/* ---------------- engine ---------------- */
var idx = 0;

function totalCountable(){
  return steps.filter(function(s){ return s.type!=="intro" && s.type!=="thanks"; }).length;
}
function currentCountablePosition(){
  var pos = 0;
  for (var i=0;i<idx;i++){ if (steps[i].type!=="intro" && steps[i].type!=="thanks") pos++; }
  return pos;
}

function render(){
  var s = steps[idx];
  var card = document.getElementById("wpCard");
  card.style.animation = "none";
  void card.offsetWidth;
  card.style.animation = "wp-rise .45s ease forwards";
  card.innerHTML = "";

  var total = totalCountable();
  var pos = currentCountablePosition();
  document.getElementById("wpProgressFill").style.width = (s.type==="intro" ? 0 : s.type==="thanks" ? 100 : Math.round((pos/total)*100)) + "%";
  document.getElementById("wpStepCount").textContent = (s.type==="intro"||s.type==="thanks") ? "" : (pos+1) + " of " + total;

  if (s.type === "intro"){
    card.innerHTML =
      '<div class="intro">'+
      '<div class="badge-row"><span class="badge">5 minutes</span><span class="badge">Save as you go</span></div>'+
      '<h1>Let\'s plan your trip wardrobe</h1>'+
      '<p>A few fun questions and we\'ll get to work finding you looks you\'ll actually love. Answer as much or as little as you\'d like — but a little extra detail goes a long way.</p>'+
      '<button class="btn btn-primary" id="wpStartBtn">Let\'s go →</button>'+
      '</div>';
    document.getElementById("wpStartBtn").onclick = function(){ go(1); };
    return;
  }

  if (s.type === "thanks"){
    card.innerHTML =
      '<div class="thanks">'+
      '<div class="badge-row"><span class="badge">You\'re all set</span></div>'+
      '<div class="confetti-icon">'+CONFETTI_ICON+'</div>'+
      '<h1>Thank you!</h1>'+
      '<p>We\'ve got everything we need to start planning. Your stylist will be in touch, and your lookbook will land in your inbox before you know it.</p>'+
      '<p style="font-size:13px;">Forgot something? Just reply to your confirmation email — we\'re happy to add it in.</p>'+
      '</div>';
    return;
  }

  if (s.type === "transition"){
    card.innerHTML =
      '<div class="intro">'+
      '<div class="confetti-icon">'+CONFETTI_ICON+'</div>'+
      '<h1 style="font-size:27px;">'+s.title+'</h1>'+
      '<p>'+s.sub+'</p>'+
      '<button class="btn btn-primary" id="wpContBtn">Continue →</button>'+
      '<div class="divider-note"><a href="#" id="wpSkipAll" style="color:var(--accent-dark);">Skip the rest & submit now</a></div>'+
      '</div>';
    document.getElementById("wpContBtn").onclick = function(){ go(1); };
    document.getElementById("wpSkipAll").onclick = function(e){ e.preventDefault(); jumpToStepType("thanks", true); };
    return;
  }

  if (s.type === "extras-photos"){
    card.innerHTML =
      '<div class="eyebrow">Optional</div>'+
      '<h2 class="q-title">'+s.title+'</h2>'+
      '<p class="q-sub">'+s.sub+'</p>'+
      '<div class="mailto-box"><p>Easiest way: just email your photos to us and mention your name so we can match them up.</p>'+
      '<a class="btn btn-primary" href="mailto:'+STYLIST_EMAIL+'?subject='+encodeURIComponent("Photos for my Well Planned lookbook")+'&body='+encodeURIComponent("Hi! Attaching a few photos for my trip styling — my name is: ")+'">Email photos to us</a></div>'+
      navHtml()+
      '</div>';
    wireNav(s, function(){ return true; });
    return;
  }

  var html = '<div class="eyebrow">'+(s.required?'Required':'Optional')+'</div>';
  html += '<h2 class="q-title">'+s.title+'</h2>';
  var subText = s.sub;
  if (s.type === "grid-pills"){
    var pkgLimit = PACKAGE_LIMITS[answers.package];
    if (pkgLimit){
      subText += ' Your ' + pkgShortName(answers.package) + ' package covers <em>' + pkgLimit.label + '</em> — select ' + pkgLimit.label + ' worth of occasions below so we stay in line with what you booked.';
    }
  }
  if (subText) html += '<p class="q-sub">'+subText+'</p>';

  if (s.type === "text" || s.type === "email"){
    var val = answers[s.key] || "";
    html += '<input type="'+(s.type==="email"?"email":"text")+'" id="wpField" placeholder="'+(s.placeholder||"")+'" value="'+escapeAttr(val)+'">';
  }
  else if (s.type === "textarea"){
    var val2 = answers[s.key] || "";
    html += '<textarea id="wpField" placeholder="'+(s.placeholder||"")+'" style="'+(s.big?"min-height:160px;":"")+'">'+escapeHtml(val2)+'</textarea>';
  }
  else if (s.type === "single-chip"){
    html += '<div class="chip-grid" id="wpChipGrid">';
    s.options.forEach(function(opt){
      var sel = answers[s.key]===opt ? " selected" : "";
      html += '<div class="chip'+sel+'" data-val="'+escapeAttr(opt)+'">'+opt+'</div>';
    });
    html += '</div>';
  }
  else if (s.type === "multi-chip"){
    var chosen = answers[s.key] || [];
    html += '<div class="chip-grid" id="wpChipGrid">';
    s.options.forEach(function(opt){
      var sel = chosen.indexOf(opt) > -1 ? " selected" : "";
      html += '<div class="chip'+sel+'" data-val="'+escapeAttr(opt)+'">'+opt+'</div>';
    });
    if (s.hasOther){
      var otherSel = chosen.indexOf("__other__") > -1 ? " selected" : "";
      html += '<div class="chip'+otherSel+'" data-val="__other__">Other</div>';
    }
    html += '</div>';
    if (s.hasOther){
      var showOther = chosen.indexOf("__other__") > -1 ? " show" : "";
      html += '<div class="other-input'+showOther+'" id="wpOtherWrap"><input type="text" id="wpOtherField" placeholder="Tell us more..." value="'+escapeAttr(answers[s.key+"_other"]||"")+'"></div>';
    }
  }
  else if (s.type === "grid-pills"){
    html += '<div class="grid-rows">';
    s.rows.forEach(function(row, i){
      html += '<div class="grid-row" data-idx="'+i+'"><div class="grid-label">'+row.label+'</div><div class="pill-row">';
      COUNT_OPTIONS.forEach(function(opt){
        var current = (answers.activities && answers.activities[i]) || "0";
        var sel = current===opt ? " selected" : "";
        html += '<div class="pill'+sel+'" data-row="'+i+'" data-val="'+opt+'">'+opt+'</div>';
      });
      html += '</div></div>';
    });
    html += '</div>';
  }
  else if (s.type === "dual-date"){
    var a = answers[s.key+"_a"] || "";
    var b = answers[s.key+"_b"] || "";
    html += '<div class="date-row">'+
      '<div class="date-field"><label>'+s.labelA+'</label><input type="date" id="wpDateA" value="'+a+'"></div>'+
      '<div class="date-field"><label>'+s.labelB+'</label><input type="date" id="wpDateB" value="'+b+'"></div>'+
      '</div>';
  }
  else if (s.type === "slider"){
    var v = answers[s.key] || 3;
    html += '<div class="slider-wrap"><input type="range" min="'+s.min+'" max="'+s.max+'" value="'+v+'" id="wpField">'+
      '<div class="slider-labels"><span>'+s.minLabel+'</span><span>'+s.maxLabel+'</span></div></div>';
  }

  html += '<div class="err" id="wpErrMsg">Please fill this in before continuing.</div>';
  html += navHtml();
  card.innerHTML = html;
  wireQuestionInputs(s);
  wireNav(s, function(){ return validate(s); });
}

function navHtml(){
  var s = steps[idx];
  var isOptional = !s.required && s.type!=="extras-photos";
  var backDisabled = idx<=1 ? ' style="visibility:hidden;"' : '';
  var skipLink = (isOptional) ? '<button class="btn btn-skip" id="wpSkipBtn" type="button">Skip this one</button>' : '<span></span>';
  return '<div class="nav-row">'+
    '<button class="btn btn-ghost" id="wpBackBtn" type="button"'+backDisabled+'>← Back</button>'+
    skipLink+
    '<button class="btn btn-primary" id="wpNextBtn" type="button">'+(isLastQuestion()?"Finish →":"Next →")+'</button>'+
    '</div>';
}

function isLastQuestion(){ return idx === steps.length-2; }

function wireQuestionInputs(s){
  if (s.type === "single-chip"){
    var grid = document.getElementById("wpChipGrid");
    grid.querySelectorAll(".chip").forEach(function(chip){
      chip.onclick = function(){
        grid.querySelectorAll(".chip").forEach(function(c){ c.classList.remove("selected"); });
        chip.classList.add("selected");
        answers[s.key] = chip.getAttribute("data-val");
      };
    });
  }
  else if (s.type === "multi-chip"){
    var grid2 = document.getElementById("wpChipGrid");
    grid2.querySelectorAll(".chip").forEach(function(chip){
      chip.onclick = function(){
        var v = chip.getAttribute("data-val");
        chip.classList.toggle("selected");
        var list = answers[s.key] || [];
        var pos = list.indexOf(v);
        if (chip.classList.contains("selected")){ if (pos===-1) list.push(v); }
        else { if (pos>-1) list.splice(pos,1); }
        answers[s.key] = list;
        if (s.hasOther && v==="__other__"){
          var wrap = document.getElementById("wpOtherWrap");
          wrap.classList.toggle("show", chip.classList.contains("selected"));
        }
      };
    });
    var otherField = document.getElementById("wpOtherField");
    if (otherField){ otherField.oninput = function(){ answers[s.key+"_other"] = otherField.value; }; }
  }
  else if (s.type === "grid-pills"){
    if (!answers.activities) answers.activities = {};
    document.querySelectorAll("#wp-wizard-root .pill").forEach(function(pill){
      pill.onclick = function(){
        var row = pill.getAttribute("data-row");
        document.querySelectorAll('#wp-wizard-root .pill[data-row="'+row+'"]').forEach(function(p){ p.classList.remove("selected"); });
        pill.classList.add("selected");
        answers.activities[row] = pill.getAttribute("data-val");
      };
    });
  }
}

function validate(s){
  var errEl = document.getElementById("wpErrMsg");
  function fail(){ if (errEl) errEl.classList.add("show"); return false; }
  function ok(){ if (errEl) errEl.classList.remove("show"); return true; }

  if (s.type === "text" || s.type === "email"){
    var f = document.getElementById("wpField");
    answers[s.key] = f.value.trim();
    if (s.required && !answers[s.key]) return fail();
    if (s.type==="email" && answers[s.key] && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(answers[s.key])) return fail();
    return ok();
  }
  if (s.type === "textarea"){
    var f2 = document.getElementById("wpField");
    answers[s.key] = f2.value.trim();
    if (s.required && !answers[s.key]) return fail();
    return ok();
  }
  if (s.type === "single-chip"){
    if (s.required && !answers[s.key]) return fail();
    return ok();
  }
  if (s.type === "multi-chip"){
    if (s.required && (!answers[s.key] || answers[s.key].length===0)) return fail();
    return ok();
  }
  if (s.type === "grid-pills"){
    var total = activitiesTotal();
    if (errEl) errEl.textContent = "Please fill this in before continuing.";
    if (s.required && total === 0) return fail();
    var limit = PACKAGE_LIMITS[answers.package];
    if (limit && (total < limit.min || total > limit.max)){
      if (errEl) errEl.textContent = 'Your ' + pkgShortName(answers.package) + ' package covers ' + limit.label + ' — you\'ve selected ' + total + '. Please adjust the counts above to match your package before continuing.';
      return fail();
    }
    return ok();
  }
  if (s.type === "dual-date"){
    var a = document.getElementById("wpDateA").value;
    var b = document.getElementById("wpDateB").value;
    answers[s.key+"_a"] = a;
    answers[s.key+"_b"] = b;
    if (s.required && (!a || !b)) return fail();
    if (a && b){
      var todayStr = new Date().toISOString().slice(0,10);
      if (a < todayStr){
        if (errEl) errEl.textContent = "Arrival date must be in the future.";
        return fail();
      }
      if (b <= a){
        if (errEl) errEl.textContent = "Departure date must be after your arrival date.";
        return fail();
      }
    }
    return ok();
  }
  if (s.type === "slider"){
    var v = document.getElementById("wpField").value;
    answers[s.key] = v;
    return ok();
  }
  return ok();
}

function wireNav(s, validateFn){
  document.getElementById("wpBackBtn").onclick = function(){ go(-1); };
  var skipBtn = document.getElementById("wpSkipBtn");
  if (skipBtn) skipBtn.onclick = function(){ go(1); };
  document.getElementById("wpNextBtn").onclick = function(){
    if (validateFn()) {
      if (isLastQuestion()){ submitAndFinish(); }
      else { go(1); }
    }
  };
}

function go(dir){
  idx += dir;
  if (idx < 0) idx = 0;
  if (idx > steps.length-1) idx = steps.length-1;
  render();
  var root = document.getElementById("wp-wizard-root");
  if (root && root.scrollIntoView) root.scrollIntoView({behavior:"smooth", block:"start"});
}

function jumpToStepType(type, submit){
  for (var i=0;i<steps.length;i++){ if (steps[i].type===type){ idx=i; break; } }
  if (submit) submitAndFinish(); else render();
}

function escapeHtml(str){ return String(str).replace(/[&<>"']/g, function(c){ return {'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]; }); }
function escapeAttr(str){ return escapeHtml(str); }

function buildFormData(){
  var fd = new FormData();
  steps.forEach(function(s){
    if (s.type==="text" || s.type==="email" || s.type==="textarea"){
      if (s.entry && answers[s.key]) fd.append(E(s.entry), answers[s.key]);
    }
    else if (s.type==="single-chip"){
      if (s.entry && answers[s.key]) fd.append(E(s.entry), answers[s.key]);
    }
    else if (s.type==="multi-chip"){
      if (s.entry && answers[s.key]){
        answers[s.key].forEach(function(v){
          if (v === "__other__"){
            fd.append(E(s.entry), "__other_option__");
            fd.append(E(s.entry) + ".other_option_response", answers[s.key+"_other"] || "");
          } else {
            fd.append(E(s.entry), v);
          }
        });
      }
    }
    else if (s.type==="dual-date"){
      var a = answers[s.key+"_a"], b = answers[s.key+"_b"];
      if (a){ var pa=a.split("-"); fd.append(E(s.entryA)+"_year", pa[0]); fd.append(E(s.entryA)+"_month", pa[1]); fd.append(E(s.entryA)+"_day", pa[2]); }
      if (b){ var pb=b.split("-"); fd.append(E(s.entryB)+"_year", pb[0]); fd.append(E(s.entryB)+"_month", pb[1]); fd.append(E(s.entryB)+"_day", pb[2]); }
    }
    else if (s.type==="grid-pills"){
      s.rows.forEach(function(row, i){
        var v = (answers.activities && answers.activities[i]) || "0";
        fd.append(E(row.entry), v);
      });
    }
    else if (s.type==="slider"){
      if (s.entry) fd.append(E(s.entry), answers[s.key] || String(s.min));
    }
  });
  return fd;
}

function submitAndFinish(){
  try{
    var fd = buildFormData();
    fetch(FORM_ACTION, { method:"POST", mode:"no-cors", body: fd });
           } catch(e){ console.error('Well Planned wizard: submission failed', e); try{ localStorage.setItem('wpFailedSubmission_'+Date.now(), JSON.stringify(answers)); }catch(e2){} }
  jumpToStepType("thanks", false);
}

/* Pre-select the package if the customer arrived via a package link,
   e.g. start-my-trip?package=essentials | personalized | concierge */
(function prefillPackageFromUrl(){
  try{
    var params = new URLSearchParams(window.location.search);
    var raw = (params.get("package") || "").toLowerCase();
    var map = {
      essentials: "Essentials (3 outfits) — $49",
            personalized: "Personalized (4-6 outfits)— $99",
            concierge: "Full Concierge (7-10 outfits) — $149",
            "full-concierge": "Full Concierge (7-10 outfits) — $149"
    };
    if (map[raw]) answers.package = map[raw];
  } catch(e){ /* ignore */ }
})();

render();
})();
</script>