{currentStepName === "welcome" && (

✦

Design Something
Truly Yours

For over 70 years, Savoy's master goldsmiths have brought visions to life — whether designing something new or reimagining a cherished piece. This guided experience will help you share your dream with our artisans.

◷ About 3–5 minutes

Your responses help our team prepare a personalized consultation for you.

)} {/* ── PROJECT TYPE STEP ── */} {currentStepName === "project" && (

How would you like to begin?

Are you starting with a blank canvas, or do you have existing jewellery you'd like to transform into something new?

{ update("projectType", "new"); setTimeout(() => goTo(STEPS.indexOf("type")), 150); }} > ✨

Start From Scratch Design a brand new piece — we'll guide you through every choice from metal to gemstone.

{ update("projectType", "reimagine"); setTimeout(() => goTo(STEPS.indexOf("existing")), 150); }} > 🔄

Reimagine Existing Jewellery Turn a family heirloom, inherited piece, or jewellery you no longer wear into something you'll love.

)} {/* ── EXISTING JEWELLERY DETAIL STEP ── */} {currentStepName === "existing" && (

Tell us about your existing piece

If you have photos or details about the piece, they'll help our goldsmiths plan your transformation — but don't worry if you don't, we can discuss in person.

{/* Photo upload — optional */}

existingFileInputRef.current?.click()} >

📷

Upload photos of your piece (optional)

Up to 5 images · Show from multiple angles if possible

{existingPhotoUrls.length > 0 && (

{existingPhotoUrls.map((url, idx) => (

))}

)} {/* Description */}

Describe the piece (optional)

update("existingDescription", e.target.value)}
                style={{ resize: "vertical", marginTop: 8 }}
              />
              <p style={{ fontSize: 13, color: "rgba(245,240,232,0.3)", marginTop: 6, fontStyle: "italic" }}>
                Include any details you know: type of metal, stones, approximate age, sentimental significance
              </p>
            </div>
            <p style={{ fontSize: 14, color: "rgba(201,169,110,0.5)", marginTop: 20, marginBottom: 4, textAlign: "center", fontStyle: "italic" }}>
              No photos or description? No problem — you can bring the piece to your consultation.
            </p>

{/* Preservation preference */}
            <div style={{ marginTop: 28 }}>
              <label style={{ ...styles.inputLabel, marginBottom: 12, display: "block" }}>
                What would you like to preserve? *
              </label>
              <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
                {[
                  { id: "preserve-all", label: "Keep the overall design", desc: "Repair, resize, or subtly update while keeping the original piece recognizable", icon: "🏛️" },
                  { id: "preserve-parts", label: "Preserve certain elements", desc: "Keep specific stones or features, but redesign the rest into something new", icon: "💎" },
                  { id: "use-materials", label: "Use the metals & stones", desc: "Melt down the gold/silver and re-set the stones in an entirely new design", icon: "🔥" },
                  { id: "unsure", label: "Not sure yet — let's discuss", desc: "Our goldsmiths will assess the piece and walk you through the options", icon: "💬" },
                ].map((opt) => (
                  <div
                    key={opt.id}
                    className={`option-card ${answers.existingPreservation === opt.id ? "selected" : ""}`}
                    style={{ ...styles.occasionCard, display: "flex", flexDirection: "row", alignItems: "center", gap: 14, padding: "14px 18px" }}
                    onClick={() => update("existingPreservation", opt.id)}
                  >
                    <span style={{ fontSize: 22, flexShrink: 0 }}>{opt.icon}</span>
                    <div>
                      <span style={styles.occasionLabel}>{opt.label}</span>
                      <span style={{ ...styles.occasionDesc, display: "block", marginTop: 2 }}>{opt.desc}</span>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        )}

{currentStepName === "type" && (
          <div style={styles.stepContent}>
            <h2 style={styles.stepTitle}>
              {answers.projectType === "reimagine" ? "What would you like it to become?" : "What would you like us to create?"}
            </h2>
            <p style={styles.stepDesc}>
              {answers.projectType === "reimagine"
                ? "Select the type of jewellery you'd like your existing piece transformed into."
                : "Select the type of jewellery you're envisioning."}
            </p>
            <div style={styles.optionGrid}>
              {JEWELLERY_TYPES.map((t) => (
                <div key={t.id} className={`option-card ${answers.type === t.id ? "selected" : ""}`} style={styles.optionCard} onClick={() => {
                  update("type", t.id);
                  if (t.id !== "ring" && t.id !== "earrings") setTimeout(next, 150);
                }}>
                  <span style={styles.optionIcon}>{t.icon}</span>
                  <span style={styles.optionLabel}>{t.label}</span>
                </div>
              ))}
            </div>
            {answers.type === "ring" && (
              <div style={{ marginTop: 28 }}>
                <p style={{ ...styles.stepDesc, marginBottom: 14 }}>Any particular ring style in mind?</p>
                <div style={styles.chipRow}>
                  {RING_SUBTYPES.map((s) => (
                    <div key={s.id} className={`gem-chip ${answers.ringSubtype === s.id ? "selected" : ""}`}
                      style={{ ...styles.chip, background: answers.ringSubtype === s.id ? "rgba(201,169,110,0.2)" : "rgba(255,255,255,0.05)", borderColor: answers.ringSubtype === s.id ? "#C9A96E" : "rgba(255,255,255,0.1)" }}
                      onClick={() => update("ringSubtype", s.id)}>{s.label}</div>
                  ))}
                </div>
              </div>
            )}
            {answers.type === "ring" && (
              <div style={{ marginTop: 24 }}>
                <label style={styles.inputLabel}>Ring size (if known)</label>
                <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                  <input type="text" placeholder="e.g. 7, or 'not sure'" value={answers.ringSize} onChange={(e) => update("ringSize", e.target.value)} style={{ maxWidth: 200 }} />
                  <button onClick={() => setShowRingSizer(true)}
                    style={{ fontSize: 13, color: "#C9A96E", background: "none", border: "none", cursor: "pointer", whiteSpace: "nowrap", borderBottom: "1px solid rgba(201,169,110,0.3)", paddingBottom: 1, fontFamily: "'Nunito Sans', sans-serif" }}>
                    📏 Find my size
                  </button>
                </div>
                <p style={{ fontSize: 13, color: "rgba(245,240,232,0.35)", marginTop: 8, lineHeight: 1.5 }}>
                  Don't know your size? Use our ring sizer tool, or we'll measure during your consultation.
                </p>
              </div>
            )}
            {answers.type === "earrings" && (
              <div style={{ marginTop: 28 }}>
                <p style={{ ...styles.stepDesc, marginBottom: 14 }}>What style of earring?</p>
                <div style={styles.chipRow}>
                  {EARRING_SUBTYPES.map((s) => (
                    <div key={s.id} className={`gem-chip ${answers.earringSubtype === s.id ? "selected" : ""}`}
                      style={{ ...styles.chip, background: answers.earringSubtype === s.id ? "rgba(201,169,110,0.2)" : "rgba(255,255,255,0.05)", borderColor: answers.earringSubtype === s.id ? "#C9A96E" : "rgba(255,255,255,0.1)" }}
                      onClick={() => update("earringSubtype", s.id)}>{s.label}</div>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

{currentStepName === "occasion" && (
          <div style={styles.stepContent}>
            <h2 style={styles.stepTitle}>What's the occasion?</h2>
            <p style={styles.stepDesc}>This helps our designers understand the sentiment behind your piece.</p>
            <div style={styles.occasionGrid}>
              {OCCASIONS.map((o) => (
                <div key={o.id} className={`option-card ${answers.occasion === o.id ? "selected" : ""}`} style={styles.occasionCard} onClick={() => { update("occasion", o.id); setTimeout(next, 150); }}>
                  <span style={styles.occasionLabel}>{o.label}</span>
                  <span style={styles.occasionDesc}>{o.desc}</span>
                </div>
              ))}
            </div>
          </div>
        )}

{currentStepName === "metal" && (
          <div style={styles.stepContent}>
            <h2 style={styles.stepTitle}>Choose your metal</h2>
            <p style={styles.stepDesc}>
              {answers.projectType === "reimagine"
                ? "Would you like to keep the same metal, or change to something different? Our team can advise during your consultation."
                : "Which metal speaks to you? Our team can advise further during your consultation."}
            </p>
            <div style={styles.metalGrid}>
              {METALS.map((m) => (
                <div key={m.id} className={`option-card ${answers.metal === m.id ? "selected" : ""}`} style={styles.metalCard} onClick={() => { update("metal", m.id); setTimeout(next, 150); }}>
                  <div style={{ ...styles.metalSwatch, background: m.color }} />
                  <span style={styles.metalLabel}>{m.label}</span>
                </div>
              ))}
            </div>
          </div>
        )}

{/* ── GEMSTONE STEP WITH HELPER ── */}
        {currentStepName === "gemstone" && (
          <div style={styles.stepContent}>
            <h2 style={styles.stepTitle}>Gemstone preferences</h2>
            <p style={styles.stepDesc}>Select one or more — you can always refine later with our team.</p>
            
            {/* Help Me Pick Button */}
            <div className="birthstone-btn" onClick={() => setShowBirthstoneHelper(true)}
              style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", background: "rgba(201,169,110,0.06)", border: "1px solid rgba(201,169,110,0.2)", borderRadius: 12, marginBottom: 20, cursor: "pointer" }}>
              <span style={{ fontSize: 22 }}>💡</span>
              <div>
                <span style={{ fontSize: 14, fontWeight: 600, color: "#C9A96E", display: "block" }}>Help Me Pick</span>
                <span style={{ fontSize: 14, fontWeight: 300, color: "rgba(245,240,232,0.5)" }}>Not sure? Explore birthstones, meanings & recommendations</span>
              </div>
              <span style={{ marginLeft: "auto", color: "rgba(201,169,110,0.5)", fontSize: 18 }}>→</span>
            </div>

<div style={styles.gemGrid}>
              {GEMSTONES.map((g) => (
                <div key={g.id} className={`gem-chip ${answers.gemstones.includes(g.id) ? "selected" : ""}`}
                  style={{ ...styles.gemChip, background: answers.gemstones.includes(g.id) ? "rgba(201,169,110,0.15)" : "rgba(255,255,255,0.04)", borderColor: answers.gemstones.includes(g.id) ? "#C9A96E" : "rgba(255,255,255,0.1)" }}
                  onClick={() => toggleGemstone(g.id)}>
                  <div style={{ ...styles.gemDot, background: g.color, border: ["diamond","moissanite","opal","pearl"].includes(g.id) ? "1px solid rgba(255,255,255,0.3)" : "none" }} />
                  <span>{g.label}</span>
                </div>
              ))}
            </div>
          </div>
        )}

{currentStepName === "style" && (
          <div style={styles.stepContent}>
            <h2 style={styles.stepTitle}>What style resonates with you?</h2>
            <p style={styles.stepDesc}>Think about the overall feel you're drawn to.</p>
            <div style={styles.styleGrid}>
              {STYLES.map((s) => (
                <div key={s.id} className={`option-card ${answers.style === s.id ? "selected" : ""}`} style={styles.styleCard} onClick={() => { update("style", s.id); setTimeout(next, 150); }}>
                  <span style={styles.styleEmoji}>{s.img}</span>
                  <span style={styles.styleLabel}>{s.label}</span>
                  <span style={styles.styleDesc}>{s.desc}</span>
                </div>
              ))}
            </div>
          </div>
        )}

{currentStepName === "inspiration" && (
          <div style={styles.stepContent}>
            <h2 style={styles.stepTitle}>Share your inspiration</h2>
            <p style={styles.stepDesc}>Help our designers understand your vision. Choose whichever way feels easiest for you.</p>

{/* Method picker */}
            {!answers.inspirationMethod && (
              <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 8 }}>
                <div className="option-card" style={{ ...styles.optionCard, padding: "20px 18px", display: "flex", gap: 14, alignItems: "center" }}
                  onClick={() => update("inspirationMethod", "photos")}>
                  <span style={{ fontSize: 28 }}>📸</span>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600, color: "#F5F0E8" }}>Upload photos</div>
                    <div style={{ fontSize: 13, color: "rgba(245,240,232,0.45)", marginTop: 2 }}>Pinterest saves, screenshots, sketches — anything visual</div>
                  </div>
                </div>
                <div className="option-card" style={{ ...styles.optionCard, padding: "20px 18px", display: "flex", gap: 14, alignItems: "center" }}
                  onClick={() => update("inspirationMethod", "guided")}>
                  <span style={{ fontSize: 28 }}>💬</span>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600, color: "#F5F0E8" }}>Describe your vision</div>
                    <div style={{ fontSize: 13, color: "rgba(245,240,232,0.45)", marginTop: 2 }}>Pick designers you love, or tell us in your own words</div>
                  </div>
                </div>
              </div>
            )}

{/* ── Photo upload path ── */}
            {answers.inspirationMethod === "photos" && (
              <div>
                <div style={styles.dropZone} onClick={() => fileInputRef.current?.click()}>
                  <input ref={fileInputRef} type="file" multiple accept="image/*" onChange={handlePhotos} style={{ display: "none" }} />
                  <div style={styles.dropIcon}>📸</div>
                  <p style={styles.dropText}>Tap to upload photos</p>
                  <p style={styles.dropSubtext}>Up to 5 images · JPG, PNG, HEIC</p>
                </div>
                {photoPreviewUrls.length > 0 && (
                  <div style={styles.photoRow}>
                    {photoPreviewUrls.map((url, idx) => (
                      <div key={idx} className="photo-thumb" style={styles.photoThumb}>
                        <img src={url} alt={"Inspiration " + (idx + 1)} style={styles.photoImg} />
                        <button className="photo-remove" onClick={() => removePhoto(idx)}>✕</button>
                      </div>
                    ))}
                  </div>
                )}
                <button style={{ background: "none", border: "none", color: "rgba(201,169,110,0.5)", fontSize: 13, cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif", marginTop: 16 }}
                  onClick={() => update("inspirationMethod", null)}>
                  ← Choose a different method
                </button>
              </div>
            )}

{/* ── Guided path ── */}
            {answers.inspirationMethod === "guided" && !answers.inspirationPath && (
              <div style={{ display: "flex", flexDirection: "column", gap: 12, marginTop: 8 }}>
                <div className="option-card" style={{ ...styles.optionCard, padding: "20px 18px", display: "flex", gap: 14, alignItems: "center" }}
                  onClick={() => update("inspirationPath", "designers")}>
                  <span style={{ fontSize: 28 }}>✨</span>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600, color: "#F5F0E8" }}>Designers I love</div>
                    <div style={{ fontSize: 13, color: "rgba(245,240,232,0.45)", marginTop: 2 }}>Select from world-renowned jewellery houses</div>
                  </div>
                </div>
                <div className="option-card" style={{ ...styles.optionCard, padding: "20px 18px", display: "flex", gap: 14, alignItems: "center" }}
                  onClick={() => update("inspirationPath", "freeform")}>
                  <span style={{ fontSize: 28 }}>✍️</span>
                  <div>
                    <div style={{ fontSize: 15, fontWeight: 600, color: "#F5F0E8" }}>Describe it myself</div>
                    <div style={{ fontSize: 13, color: "rgba(245,240,232,0.45)", marginTop: 2 }}>Tell us in your own words what inspires you</div>
                  </div>
                </div>
                <button style={{ background: "none", border: "none", color: "rgba(201,169,110,0.5)", fontSize: 13, cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif", marginTop: 8 }}
                  onClick={() => update("inspirationMethod", null)}>
                  ← Choose a different method
                </button>
              </div>
            )}

{/* ── Designer selection ── */}
            {answers.inspirationPath === "designers" && (
              <div>
                <p style={{ fontSize: 14, color: "rgba(245,240,232,0.5)", marginBottom: 14 }}>Select any designers whose aesthetic resonates with you. This helps our goldsmiths understand your taste.</p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 10 }}>
                  {DESIGNERS.map((d) => {
                    const sel = answers.inspirationDesigners.includes(d.id);
                    return (
                      <div key={d.id} className={"gem-chip " + (sel ? "selected" : "")}
                        onClick={() => {
                          const cur = answers.inspirationDesigners;
                          update("inspirationDesigners", sel ? cur.filter(x => x !== d.id) : [...cur, d.id]);
                        }}
                        style={{
                          padding: "10px 16px", borderRadius: 20, cursor: "pointer",
                          border: sel ? "1px solid #C9A96E" : "1px solid rgba(255,255,255,0.08)",
                          background: sel ? "rgba(201,169,110,0.12)" : "rgba(255,255,255,0.03)",
                          transition: "all 0.2s",
                        }}>
                        <span style={{ fontSize: 14, fontWeight: sel ? 600 : 400, color: sel ? "#C9A96E" : "#F5F0E8" }}>{d.label}</span>
                        <span style={{ display: "block", fontSize: 11, color: "rgba(245,240,232,0.35)", marginTop: 2 }}>{d.desc}</span>
                      </div>
                    );
                  })}
                </div>
                {answers.inspirationDesigners.length > 0 && (
                  <p style={{ fontSize: 13, color: "#C9A96E", marginTop: 14 }}>
                    {"Selected: " + answers.inspirationDesigners.map(id => DESIGNERS.find(d => d.id === id)?.label).join(", ")}
                  </p>
                )}
                <div style={{ display: "flex", gap: 12, marginTop: 16 }}>
                  <button style={{ background: "none", border: "none", color: "rgba(201,169,110,0.5)", fontSize: 13, cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif" }}
                    onClick={() => update("inspirationPath", null)}>
                    ← Back
                  </button>
                </div>
              </div>
            )}

{/* ── Free-form text ── */}
            {answers.inspirationPath === "freeform" && (
              <div>
                <p style={{ fontSize: 14, color: "rgba(245,240,232,0.5)", marginBottom: 14 }}>Describe the look, feel, or references that inspire you — anything goes. Think about shapes, textures, eras, nature, architecture, or art that speak to you.</p>
                <textarea
                  placeholder="e.g. I love the Art Deco era — geometric lines, emerald-cut stones, platinum settings. I want something that feels like the Chrysler Building in ring form..."
                  value={answers.inspirationText}
                  onChange={(e) => update("inspirationText", e.target.value)}
                  rows={5}
                  style={{ width: "100%", padding: 14, borderRadius: 10, border: "1px solid rgba(201,169,110,0.2)", background: "rgba(255,255,255,0.04)", color: "#F5F0E8", fontSize: 14, fontFamily: "'Nunito Sans', sans-serif", resize: "vertical", lineHeight: 1.6 }}
                />
                <div style={{ display: "flex", gap: 12, marginTop: 16 }}>
                  <button style={{ background: "none", border: "none", color: "rgba(201,169,110,0.5)", fontSize: 13, cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif" }}
                    onClick={() => update("inspirationPath", null)}>
                    ← Back
                  </button>
                </div>
              </div>
            )}

<p style={styles.skipHint}>Not sure yet? No problem — you can skip this step.</p>
          </div>
        )}

{currentStepName === "budget" && (
          <div style={styles.stepContent}>
            <h2 style={styles.stepTitle}>One last practical detail: budget</h2>
            <p style={styles.stepDesc}>This helps our team tailor stone size, metal weight, and construction details to the range that makes sense for you.</p>
            <div style={styles.budgetGrid}>
              {BUDGETS.map((b) => (
                <div key={b.id} className={`option-card ${answers.budget === b.id ? "selected" : ""}`} style={styles.budgetCard} onClick={() => { update("budget", b.id); setTimeout(next, 150); }}>
                  {b.label}
                </div>
              ))}
            </div>
          </div>
        )}

{currentStepName === "timeline" && (
          <div style={styles.stepContent}>
            <h2 style={styles.stepTitle}>When do you need it?</h2>
            <p style={styles.stepDesc}>Custom pieces typically take 4–8 weeks, but we can accommodate most timelines.</p>
            <div style={styles.timelineGrid}>
              {TIMELINES.map((t) => (
                <div key={t.id} className={`option-card ${answers.timeline === t.id ? "selected" : ""}`} style={styles.timelineCard} onClick={() => {
                  update("timeline", t.id);
                  if (t.id !== "specific") setTimeout(next, 150);
                }}>
                  <span style={styles.timelineLabel}>{t.label}</span>
                  <span style={styles.timelineDesc}>{t.desc}</span>
                </div>
              ))}
            </div>
            {answers.timeline === "specific" && (
              <div style={{ marginTop: 20 }}>
                <label style={styles.inputLabel}>Target date</label>
                <input type="date" value={answers.specificDate} onChange={(e) => update("specificDate", e.target.value)} style={{ maxWidth: 220 }} />
              </div>
            )}
          </div>
        )}

{/* ── DESIGN PREVIEW STEP ── */}
        {currentStepName === "preview" && (
          <div style={styles.stepContent}>
            <div style={{ marginTop: 12 }}>
              <h2 style={styles.stepTitle}>Your Custom Design Samples</h2>

{!sampleImagesLoading && sampleImages.length === 0 && (
                <button
                  className="btn-primary"
                  style={{ ...styles.ctaButton, padding: "12px 28px", fontSize: 13 }}
                  onClick={generateSampleImages}
                >
                  Generate 3 Sample Images
                </button>
              )}

{sampleImagesLoading && (
                <div style={{ marginTop: 22 }}>
                  <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 18 }}>
                    <div style={{ width: 24, height: 24, border: "2px solid rgba(201,169,110,0.2)", borderTopColor: "#C9A96E", borderRadius: "50%", animation: "spin 1s linear infinite" }} />
                    <span style={{ fontSize: 15, color: "rgba(245,240,232,0.6)" }}>Generating three sample images...</span>
                  </div>
                  <div className="sample-grid">
                    {[1, 2, 3].map((item) => (
                      <div key={item} style={{ background: "rgba(255,255,255,0.03)", border: "1px solid rgba(201,169,110,0.12)", borderRadius: 14, overflow: "hidden" }}>
                        <div style={{ aspectRatio: "1 / 1", background: "rgba(201,169,110,0.08)", animation: "skeletonPulse 1.5s ease-in-out infinite" }} />
                        <div style={{ padding: 14 }}>
                          <div style={{ height: 14, width: "70%", borderRadius: 4, background: "rgba(201,169,110,0.08)", animation: "skeletonPulse 1.5s ease-in-out infinite", marginBottom: 8 }} />
                          <div style={{ height: 12, width: "100%", borderRadius: 4, background: "rgba(255,255,255,0.05)", animation: "skeletonPulse 1.5s ease-in-out infinite" }} />
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              )}

{sampleImagesError && (
                <div style={{ marginTop: 16 }}>
                  <p style={{ fontSize: 14, color: "rgba(220,120,120,0.9)", marginBottom: 12 }}>{sampleImagesError}</p>
                  <button
                    className="btn-primary"
                    style={{ ...styles.ctaButton, padding: "12px 28px", fontSize: 13 }}
                    onClick={generateSampleImages}
                  >
                    Try Again
                  </button>
                </div>
              )}

{sampleImages.length > 0 && (
                <div style={{ marginTop: 22 }}>
                  <div className="sample-grid">
                    {sampleImages.map((image, index) => (
                      <div key={image.id || index} className={`sample-card ${selectedSampleId === image.id ? "selected" : ""}`}>
                        <div className="sample-stage">
                          <img
                            src={image.imageDataUrl}
                            alt={image.title}
                            style={{ display: "block" }}
                          />
                        </div>
                        <div style={{ padding: 18 }}>
                          <div style={{ fontSize: 11, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(201,169,110,0.7)", marginBottom: 6 }}>
                            Sample {index + 1}
                          </div>
                          <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, color: "#F5F0E8", marginBottom: 6 }}>
                            {image.title}
                          </div>
                          <p style={{ fontSize: 14, lineHeight: 1.6, color: "rgba(245,240,232,0.55)" }}>
                            {image.description}
                          </p>
                          <button
                            className="btn-primary"
                            style={{
                              ...styles.ctaButton,
                              width: "100%",
                              marginTop: 14,
                              padding: "11px 16px",
                              fontSize: 13,
                              background: selectedSampleId === image.id
                                ? "linear-gradient(135deg, #E2C992, #C9A96E)"
                                : "linear-gradient(135deg, #C9A96E, #B8944F)",
                            }}
                            onClick={() => openRefinementStep(image)}
                          >
                            {selectedSampleId === image.id ? "Continue Refining This Direction" : "Choose This Direction"}
                          </button>
                        </div>
                      </div>
                    ))}
                  </div>
                  <div style={{ textAlign: "center", marginTop: 14 }}>
                    <button
                      className="btn-back"
                      style={{ background: "none", border: "none", color: "rgba(201,169,110,0.6)", fontSize: 14, cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif" }}
                      onClick={generateSampleImages}
                    >
                      🔄 Generate Other Examples
                    </button>
                  </div>
                </div>
              )}
            </div>
          </div>
        )}

{currentStepName === "refine" && (
          <div style={{ ...styles.stepContent, maxWidth: "none", margin: 0, width: "100%" }}>
            {!baseSelectedSample ? (
              <div style={{ marginTop: 12, background: "rgba(255,255,255,0.03)", border: "1px solid rgba(201,169,110,0.14)", borderRadius: 18, padding: 24 }}>
                <h2 style={styles.stepTitle}>Refine Your Direction</h2>
                <p style={styles.stepDesc}>Choose one of the three sample directions first, then we’ll shape it into something more precise.</p>
                <button
                  className="btn-primary"
                  style={{ ...styles.ctaButton, marginTop: 14, padding: "12px 22px", fontSize: 13 }}
                  onClick={() => goTo(STEPS.indexOf("preview"))}
                >
                  Back to Sample Choices
                </button>
              </div>
            ) : (
              <div className="refine-page" style={{ marginTop: 12 }}>
                <div className="refine-hero">
                  <div>
                    <div style={{ fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(201,169,110,0.72)", marginBottom: 8 }}>
                      Tailoring Your Design
                    </div>
                    <h2 style={{ ...styles.stepTitle, marginBottom: 8 }}>{activeSelectedSample.title}</h2>
                    <p style={{ ...styles.stepDesc, maxWidth: 720, marginBottom: 0 }}>
                      {refinedSample
                        ? "We’ve already shaped this concept once. Keep fine-tuning until it feels unmistakably right."
                        : "Start from this chosen concept. Make a few thoughtful decisions below, add any personal notes you want, and we’ll generate a more tailored direction."}
                    </p>
                  </div>
                  <button
                    className="btn-back"
                    style={{ background: "none", border: "1px solid rgba(201,169,110,0.24)", borderRadius: 999, color: "rgba(245,240,232,0.78)", fontSize: 13, padding: "10px 16px", cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif" }}
                    onClick={() => goTo(STEPS.indexOf("preview"))}
                  >
                    ← Choose a Different Sample
                  </button>
                </div>

<div className="refine-shell">
                  <div className="refine-panel refine-visual-card">
                    <div style={{ position: "relative", zIndex: 1 }}>
                      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 12, marginBottom: 10, flexWrap: "wrap" }}>
                        <div style={{ fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(201,169,110,0.72)" }}>
                          {refinedSample ? "Latest Refined Direction" : "Selected Direction"}
                        </div>
                        {approvedPreview && (
                          <div style={{ fontSize: 12, color: "#E9D4A5", border: "1px solid rgba(201,169,110,0.32)", borderRadius: 999, padding: "7px 12px", background: "rgba(201,169,110,0.08)" }}>
                            Approved for next step
                          </div>
                        )}
                      </div>
                      <p style={{ fontSize: 14, lineHeight: 1.6, color: "rgba(245,240,232,0.58)", marginBottom: 16, maxWidth: 620 }}>
                        {activeSelectedSample.description}
                      </p>
                      <div className="sample-stage sample-stage-large">
                        <img
                          src={activeSelectedSample.imageDataUrl}
                          alt={activeSelectedSample.title}
                          style={{ display: "block" }}
                        />
                      </div>
                    </div>
                  </div>

<div className="refine-panel refine-controls">
                    <div>
                      <div style={{ fontSize: 12, letterSpacing: "0.1em", textTransform: "uppercase", color: "rgba(201,169,110,0.72)", marginBottom: 8 }}>
                        Design Decisions
                      </div>
                      <p style={{ fontSize: 14, lineHeight: 1.6, color: "rgba(245,240,232,0.55)" }}>
                        Answer these like a jeweller and client shaping the same piece together. We’ll keep the overall direction, but sharpen it around the choices you make here.
                      </p>
                    </div>

<div className="refine-decision-grid">
                      <div className="refine-choice-section">
                        <label style={styles.inputLabel}>What should change most?</label>
                        <div className="refine-choice-grid">
                          {REFINEMENT_SHIFTS.map((option) => (
                            <div
                              key={option.id}
                              className={`refine-choice-card ${refinementAnswers.shift === option.id ? "selected" : ""}`}
                              onClick={() => updateRefinement("shift", refinementAnswers.shift === option.id ? "" : option.id)}
                            >
                              <div className="refine-choice-kicker">Direction</div>
                              <div className="refine-choice-title">{option.label}</div>
                              <div className="refine-choice-desc">{option.desc}</div>
                            </div>
                          ))}
                        </div>
                      </div>

<div className="refine-choice-section">
                        <label style={styles.inputLabel}>What should the eye notice first?</label>
                        <div className="refine-choice-grid">
                          {REFINEMENT_EMPHASIS.map((option) => (
                            <div
                              key={option.id}
                              className={`refine-choice-card ${refinementAnswers.emphasis === option.id ? "selected" : ""}`}
                              onClick={() => updateRefinement("emphasis", refinementAnswers.emphasis === option.id ? "" : option.id)}
                            >
                              <div className="refine-choice-kicker">Focus</div>
                              <div className="refine-choice-title">{option.label}</div>
                              <div className="refine-choice-desc">{option.desc}</div>
                            </div>
                          ))}
                        </div>
                      </div>

<div className="refine-choice-section">
                        <label style={styles.inputLabel}>What emotional tone should it carry?</label>
                        <div className="refine-choice-grid">
                          {REFINEMENT_MOODS.map((option) => (
                            <div
                              key={option.id}
                              className={`refine-choice-card ${refinementAnswers.mood === option.id ? "selected" : ""}`}
                              onClick={() => updateRefinement("mood", refinementAnswers.mood === option.id ? "" : option.id)}
                            >
                              <div className="refine-choice-kicker">Mood</div>
                              <div className="refine-choice-title">{option.label}</div>
                              <div className="refine-choice-desc">{option.desc}</div>
                            </div>
                          ))}
                        </div>
                      </div>

<div className="refine-choice-section">
                        <label style={styles.inputLabel}>How should it wear in real life?</label>
                        <div className="refine-choice-grid">
                          {REFINEMENT_WEARABILITY.map((option) => (
                            <div
                              key={option.id}
                              className={`refine-choice-card ${refinementAnswers.wearability === option.id ? "selected" : ""}`}
                              onClick={() => updateRefinement("wearability", refinementAnswers.wearability === option.id ? "" : option.id)}
                            >
                              <div className="refine-choice-kicker">Wearability</div>
                              <div className="refine-choice-title">{option.label}</div>
                              <div className="refine-choice-desc">{option.desc}</div>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>

<div className="refine-notes">
                      <label style={styles.inputLabel}>Add your own direction in your own words</label>
                      <textarea
                        rows={3}
                        placeholder="For example: keep this elegant overall shape, but make the center stone feel a little more prominent, reduce the height, and make the band cleaner and more refined."
                        value={refinementAnswers.notes}
                        onChange={(e) => updateRefinement("notes", e.target.value)}
                        style={{ resize: "vertical" }}
                      />
                      <div style={{ fontSize: 12, color: "rgba(245,240,232,0.42)", marginTop: 10, lineHeight: 1.6 }}>
                        The more specific you are here, the more tailored the next variation will feel.
                      </div>
                    </div>

<div className="refine-choice-section">
                      <label style={styles.inputLabel}>Your refinement brief</label>
                      <p style={{ fontSize: 13, lineHeight: 1.6, color: "rgba(245,240,232,0.5)" }}>
                        This is the design language we’ll use for the next image.
                      </p>
                      <div className="refine-summary">
                        {refinementSelections.length > 0 ? (
                          refinementSelections.map((item, index) => (
                            <div key={`${item}-${index}`} className="refine-summary-pill">{item}</div>
                          ))
                        ) : (
                          <div className="refine-summary-pill" style={{ color: "rgba(245,240,232,0.5)", background: "rgba(255,255,255,0.04)", borderColor: "rgba(255,255,255,0.08)" }}>
                            No refinements chosen yet
                          </div>
                        )}
                      </div>
                    </div>

{refinementError && (
                      <p style={{ fontSize: 14, color: "rgba(220,120,120,0.9)", marginBottom: 0 }}>
                        {refinementError}
                      </p>
                    )}

<div className="refine-actions">
                      <button
                        className="btn-primary"
                        style={{ ...styles.ctaButton, padding: "13px 22px", fontSize: 13 }}
                        onClick={generateRefinedSample}
                        disabled={refinementLoading}
                      >
                        {refinementLoading ? "Generating Your Next Variation..." : "Generate Refined Version"}
                      </button>
                      <button
                        className="btn-back"
                        style={{
                          background: approvedPreview ? "rgba(201,169,110,0.16)" : "none",
                          border: "1px solid rgba(201,169,110,0.28)",
                          color: approvedPreview ? "#E9D4A5" : "rgba(245,240,232,0.72)",
                          borderRadius: 999,
                          padding: "13px 18px",
                          fontSize: 13,
                          cursor: "pointer",
                          fontFamily: "'Nunito Sans', sans-serif",
                        }}
                        onClick={() => setApprovedPreview((current) => !current)}
                      >
                        {approvedPreview ? "✓ I’m Happy With This Direction" : "I’m Happy With This Direction"}
                      </button>
                    </div>

<p className="refine-status">
                      {approvedPreview
                        ? "This direction is approved. You can continue whenever you’re ready."
                        : "Stay in this step as long as you like. Generate new variations until the piece feels right, then approve it to continue."}
                    </p>
                  </div>
                </div>
              </div>
            )}
          </div>
        )}

{currentStepName === "details" && (
          <div style={styles.stepContent}>
            <h2 style={styles.stepTitle}>Where should we send your brief?</h2>
            <p style={styles.stepDesc}>Add your contact details and any final notes so we can follow up with the right next steps.</p>
            <div style={styles.formGrid}>
              <div style={styles.formGroup}>
                <label style={styles.inputLabel}>Your full name *</label>
                <input type="text" placeholder="First and last name" value={answers.name} onChange={(e) => update("name", e.target.value)} />
              </div>
              <div style={styles.formGroup}>
                <label style={styles.inputLabel}>Email *</label>
                <input type="email" placeholder="you@example.com" value={answers.email} onChange={(e) => update("email", e.target.value)} />
              </div>
              <div style={styles.formGroup}>
                <label style={styles.inputLabel}>Phone (optional)</label>
                <input type="tel" placeholder="(705) 000-0000" value={answers.phone} onChange={(e) => update("phone", e.target.value)} />
              </div>
              <div style={{ ...styles.formGroup, gridColumn: "1 / -1" }}>
                <label style={styles.inputLabel}>Anything else you'd like us to know?</label>
                <textarea rows={3} placeholder="Special engravings, allergies to certain metals, sentimental details..." value={answers.notes} onChange={(e) => update("notes", e.target.value)} style={{ resize: "vertical" }} />
              </div>
            </div>
            <p style={styles.privacyNote}>🔒 Your information is kept private and only used to prepare your consultation.</p>
          </div>
        )}

{currentStepName === "summary" && (
          <div style={styles.stepContent}>
            <div style={styles.summaryHeader}>
              <div style={styles.checkmark}>✓</div>
              <h2 style={styles.stepTitle}>Your Custom Design Brief</h2>
              <p style={styles.stepDesc}>Here's a summary of what you've shared. Our team will review this and reach out to schedule your consultation.</p>
            </div>
            <div style={styles.summaryCard}>
              <SummaryRow label="Project" value={answers.projectType === "reimagine" ? "Reimagining existing jewellery" : "New custom piece"} />
              {answers.projectType === "reimagine" && (
                <>
                  <SummaryRow label="Existing Piece" value={
                    (answers.existingPhotos.length > 0 ? `${answers.existingPhotos.length} photo(s)` : "") +
                    (answers.existingPhotos.length > 0 && answers.existingDescription ? " + " : "") +
                    (answers.existingDescription || (answers.existingPhotos.length === 0 ? "—" : ""))
                  } />
                  <SummaryRow label="Preservation" value={
                    answers.existingPreservation === "preserve-all" ? "Keep overall design" :
                    answers.existingPreservation === "preserve-parts" ? "Preserve certain elements" :
                    answers.existingPreservation === "use-materials" ? "Use the metals & stones" :
                    "Not sure yet — discuss"
                  } />
                </>
              )}
              <SummaryRow label="Jewellery Type" value={getLabelFor("type", answers.type, JEWELLERY_TYPES) + (answers.ringSubtype && answers.ringSubtype !== "unsure" ? ` — ${getLabelFor("ringSubtype", answers.ringSubtype, RING_SUBTYPES)}` : "") + (answers.earringSubtype && answers.earringSubtype !== "unsure" ? ` — ${getLabelFor("earringSubtype", answers.earringSubtype, EARRING_SUBTYPES)}` : "") + (answers.ringSize ? ` (Size: ${answers.ringSize})` : "")} />
              <SummaryRow label="Occasion" value={getLabelFor("occasion", answers.occasion, OCCASIONS)} />
              <SummaryRow label="Metal" value={getLabelFor("metal", answers.metal, METALS)} />
              <SummaryRow label="Gemstone(s)" value={answers.gemstones.map((g) => getLabelFor("gem", g, GEMSTONES)).join(", ")} />
              <SummaryRow label="Style" value={getLabelFor("style", answers.style, STYLES)} />
              <SummaryRow label="Inspiration" value={
                answers.inspirationMethod === "photos" && answers.photos.length > 0
                  ? answers.photos.length + " photo(s) uploaded"
                  : answers.inspirationDesigners.length > 0
                    ? "Designers: " + answers.inspirationDesigners.map(function(id) { return (DESIGNERS.find(function(d) { return d.id === id; }) || {}).label; }).join(", ")
                    : answers.inspirationText
                      ? "\"" + answers.inspirationText.substring(0, 60) + (answers.inspirationText.length > 60 ? "..." : "") + "\""
                      : "None provided"
              } />
              <SummaryRow label="Budget" value={getLabelFor("budget", answers.budget, BUDGETS)} />
              <SummaryRow label="Timeline" value={getLabelFor("timeline", answers.timeline, TIMELINES) + (answers.specificDate ? ` — ${answers.specificDate}` : "")} />
              {activeSelectedSample && <SummaryRow label="Chosen Direction" value={activeSelectedSample.title} />}
              {buildRefinementSummary() && <SummaryRow label="Refinement Notes" value={buildRefinementSummary()} />}
              <SummaryRow label="Name" value={answers.name} />
              <SummaryRow label="Email" value={answers.email} />
              {answers.phone && <SummaryRow label="Phone" value={answers.phone} />}
              {answers.notes && <SummaryRow label="Notes" value={answers.notes} />}
            </div>
            <div style={styles.summaryActions}>
              {submitState === "idle" && (
                <button className="btn-primary" style={styles.ctaButton} onClick={async () => {
                  setSubmitError("");
                  setSubmitState("sending");
                  setSubmitDetail("Preparing your design brief...");
                  try {
                    // Build full payload — this one includes compressed photos for the email
                    const payload = {
                      _action: "submit",
                      sessionId,
                      email: answers.email, name: answers.name, phone: answers.phone,
                      projectType: answers.projectType,
                      existingDescription: answers.existingDescription,
                      existingPreservation: answers.existingPreservation,
                      type: answers.type, ringSubtype: answers.ringSubtype, earringSubtype: answers.earringSubtype, ringSize: answers.ringSize,
                      occasion: answers.occasion, metal: answers.metal,
                      gemstones: answers.gemstones, style: answers.style,
                      budget: answers.budget, timeline: answers.timeline,
                      specificDate: answers.specificDate, notes: answers.notes,
                      selectedPreview: activeSelectedSample ? {
                        title: activeSelectedSample.title,
                        description: activeSelectedSample.description,
                        imageDataUrl: activeSelectedSample.imageDataUrl,
                      } : null,
                      selectedPreviewRefinement: buildRefinementSummary(),
                      lastStep: "summary",
                      completed: true,
                      existingPhotoCount: answers.existingPhotos.length,
                      inspirationPhotoCount: answers.photos.length,
                      inspirationMethod: answers.inspirationMethod,
                      inspirationDesigners: answers.inspirationDesigners.length > 0 ? answers.inspirationDesigners.map(function(id) { return (DESIGNERS.find(function(d) { return d.id === id; }) || {}).label || id; }) : [],
                      inspirationText: answers.inspirationText,
                    };
                    const emailTemplate = buildSubmitEmail();
                    payload.emailSubject = emailTemplate.subject;
                    payload.emailHtml = emailTemplate.html;
                    payload.emailText = emailTemplate.text;

// Compress and attach photos
                    try {
                      const existingFiles = answers.existingPhotos || [];
                      const inspirationFiles = answers.photos || [];
                      if (existingFiles.length > 0 || inspirationFiles.length > 0) {
                        setSubmitDetail("Compressing photos for upload...");
                        const [compressedExisting, compressedInspiration] = await Promise.all([
                          compressAllImages(existingFiles),
                          compressAllImages(inspirationFiles),
                        ]);
                        payload.existingPhotos = compressedExisting.filter(Boolean);
                        payload.inspirationPhotos = compressedInspiration.filter(Boolean);
                      }
                    } catch(e) {
                      console.warn("Photo compression failed during submit:", e);
                    }

setSubmitDetail("Sending your design brief...");
                    const result = await postToBackend(payload);
                    if (result.success) {
                      await window.storage.delete(ACTIVE_DRAFT_STORAGE_KEY);
                      await window.storage.delete(draftStorageKey(sessionId));
                      setSubmitError("");
                    } else {
                      setSubmitError(result.error || "The design brief could not be sent.");
                    }
                    setSubmitState(result.success ? "sent" : "error");
                  } catch (err) {
                    console.error("Submit failed unexpectedly:", err);
                    setSubmitError(err?.message || "The design brief could not be sent.");
                    setSubmitState("error");
                  } finally {
                    setSubmitDetail("");
                  }
                }}>
                  Submit My Design Brief
                </button>
              )}

{submitState === "sending" && (
                <div style={{ display: "flex", alignItems: "center", gap: 14, padding: "16px 0" }}>
                  <div style={{ width: 24, height: 24, border: "2px solid rgba(201,169,110,0.2)", borderTopColor: "#C9A96E", borderRadius: "50%", animation: "spin 1s linear infinite" }} />
                  <span style={{ fontSize: 15, color: "rgba(245,240,232,0.6)" }}>{submitDetail || "Sending your design brief..."}</span>
                </div>
              )}

{submitState === "sent" && (
                <div style={{ textAlign: "center", padding: "12px 0" }}>
                  <div style={{ fontSize: 36, marginBottom: 12 }}>✉️</div>
                  <p style={{ fontSize: 16, color: "#C9A96E", fontWeight: 500, marginBottom: 8 }}>Design brief submitted!</p>
                  <p style={{ fontSize: 15, color: "rgba(245,240,232,0.5)", lineHeight: 1.6 }}>
                    Our team will review your selections and reach out within 1–2 business days to schedule your consultation.
                  </p>
                </div>
              )}

{submitState === "error" && (
                <div style={{ textAlign: "center", padding: "12px 0" }}>
                  <p style={{ fontSize: 15, color: "rgba(245,240,232,0.5)", marginBottom: 14 }}>
                    There was a hiccup sending your brief, but your responses have been saved locally. Please try again, or call us directly.
                  </p>
                  {submitError && (
                    <p style={{ fontSize: 14, color: "rgba(220,120,120,0.9)", lineHeight: 1.6, marginBottom: 14 }}>
                      {submitError}
                    </p>
                  )}
                  <button className="btn-primary" style={styles.ctaButton} onClick={() => setSubmitState("idle")}>
                    Try Again
                  </button>
                </div>
              )}

{submitState !== "sending" && submitState !== "sent" && (
                <button className="btn-back" style={styles.editBtn} onClick={() => goTo(1)}>
                  ← Edit responses
                </button>
              )}
            </div>
            <div style={styles.contactFooter}>
              <p style={styles.contactLine}>Or visit us in person:</p>
              <p style={styles.contactDetail}><strong>Queen St.</strong> — 290 Queen Street East · (705) 253-9703</p>
              <p style={styles.contactDetail}><strong>Station Mall</strong> — 293 Bay Street · (705) 942-3400</p>
              <p style={styles.contactDetail}>savoysjewellers.com</p>
            </div>
          </div>
        )}
      </main>

{/* Footer Nav */}
      {currentStepName !== "welcome" && currentStepName !== "project" && currentStepName !== "summary" && (
        <footer style={styles.footer}>
          <button className="btn-back" style={styles.backBtn} onClick={back}>
            ← Back
          </button>
          {showContinueButton && (
            <button className="btn-primary" style={styles.nextBtn} disabled={!canProceed()} onClick={next}>
              {currentStepName === "details" ? "Review My Brief" : "Continue →"}
            </button>
          )}
        </footer>
      )}

{/* ── BIRTHSTONE HELPER MODAL ── */}
      {showBirthstoneHelper && (
        <div style={styles.modalOverlay} onClick={() => setShowBirthstoneHelper(false)}>
          <div style={styles.modal} onClick={(e) => e.stopPropagation()}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
              <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, fontWeight: 400, color: "#F5F0E8" }}>
                Gemstone Guide
              </h3>
              <button onClick={() => setShowBirthstoneHelper(false)}
                style={{ background: "none", border: "none", color: "rgba(245,240,232,0.5)", fontSize: 20, cursor: "pointer", padding: "4px 8px" }}>✕</button>
            </div>
            <p style={{ fontSize: 15, color: "rgba(245,240,232,0.5)", marginBottom: 6, lineHeight: 1.6 }}>
              Every month has a birthstone with special meaning. Tap a month to add its gemstone to your selection.
            </p>
            <p style={{ fontSize: 14, color: "rgba(201,169,110,0.5)", marginBottom: 20, fontStyle: "italic" }}>
              Birthstones also make wonderful gifts — choose the recipient's birth month!
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, maxHeight: "55vh", overflowY: "auto", paddingRight: 4 }}>
              {BIRTHSTONES.map((b) => (
                <div key={b.month} className="month-card"
                  style={{ background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)", borderRadius: 10, padding: "14px 16px", cursor: "pointer" }}
                  onClick={() => selectBirthstone(b.stones)}>
                  <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
                    <div style={{ width: 24, height: 24, borderRadius: "50%", background: b.color, border: ["April","June","October"].includes(b.month) ? "1px solid rgba(255,255,255,0.3)" : "none", flexShrink: 0 }} />
                    <span style={{ fontSize: 14, fontWeight: 600, color: "#F5F0E8" }}>{b.month}</span>
                  </div>
                  <p style={{ fontSize: 13, fontWeight: 300, color: "rgba(245,240,232,0.45)", lineHeight: 1.5 }}>{b.desc}</p>
                  <div style={{ marginTop: 8, display: "flex", gap: 6, flexWrap: "wrap" }}>
                    {b.stones.map(s => (
                      <span key={s} style={{ fontSize: 13, background: "rgba(201,169,110,0.12)", color: "#C9A96E", padding: "3px 10px", borderRadius: 12 }}>
                        {getLabelFor("s", s, GEMSTONES)}
                      </span>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>
      )}

{/* ── RING SIZER MODAL ── */}
      {showRingSizer && (
        <div style={styles.modalOverlay} onClick={() => setShowRingSizer(false)}>
          <div style={{ ...styles.modal, maxWidth: 520 }} onClick={(e) => e.stopPropagation()}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 20 }}>
              <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, fontWeight: 400, color: "#F5F0E8" }}>
                Ring Size Finder
              </h3>
              <button onClick={() => setShowRingSizer(false)}
                style={{ background: "none", border: "none", color: "rgba(245,240,232,0.4)", fontSize: 22, cursor: "pointer", padding: 4 }}>✕</button>
            </div>
            <RingSizerTool onSelectSize={(size) => { update("ringSize", size); setShowRingSizer(false); }} />
          </div>
        </div>
      )}
    </div>
  );
}

const RING_SIZES = [
  { size: "3", dia: 14.0, circ: 44.2 },
  { size: "3.5", dia: 14.4, circ: 45.2 },
  { size: "4", dia: 14.8, circ: 46.5 },
  { size: "4.5", dia: 15.2, circ: 47.8 },
  { size: "5", dia: 15.7, circ: 49.3 },
  { size: "5.5", dia: 16.1, circ: 50.6 },
  { size: "6", dia: 16.5, circ: 51.9 },
  { size: "6.5", dia: 16.9, circ: 53.1 },
  { size: "7", dia: 17.3, circ: 54.4 },
  { size: "7.5", dia: 17.7, circ: 55.7 },
  { size: "8", dia: 18.1, circ: 57.0 },
  { size: "8.5", dia: 18.5, circ: 58.3 },
  { size: "9", dia: 18.9, circ: 59.5 },
  { size: "9.5", dia: 19.4, circ: 60.8 },
  { size: "10", dia: 19.8, circ: 62.1 },
  { size: "10.5", dia: 20.2, circ: 63.4 },
  { size: "11", dia: 20.6, circ: 64.6 },
  { size: "11.5", dia: 21.0, circ: 65.9 },
  { size: "12", dia: 21.4, circ: 67.2 },
  { size: "13", dia: 22.2, circ: 69.7 },
];

function RingSizerTool({ onSelectSize }) {
  const [method, setMethod] = useState("ring"); // "ring" | "string"
  const [pxPerMm, setPxPerMm] = useState(null);
  const [diameterMm, setDiameterMm] = useState(17.3); // default size 7
  const [circumMm, setCircumMm] = useState("");

const isMobile = typeof window !== "undefined" && window.innerWidth < 500;

const CAL_OBJECTS = [
    { id: "quarter", label: "Quarter", mm: 23.88, shape: "circle", emoji: "🪙" },
    { id: "loonie", label: "Loonie", mm: 26.5, shape: "circle", emoji: "🪙" },
    { id: "toonie", label: "Toonie", mm: 28.0, shape: "circle", emoji: "🪙" },
    { id: "card", label: "Credit Card", mm: 85.6, shape: "bar", emoji: "💳", note: "Turn phone sideways" },
  ];

const [calObject, setCalObject] = useState(isMobile ? null : "card"); // null = show picker on mobile
  const [calPx, setCalPx] = useState(isMobile ? 80 : 280);

const activeRef = CAL_OBJECTS.find(o => o.id === calObject);
  const isCircle = activeRef?.shape === "circle";

const calibrate = () => {
    if (!activeRef) return;
    setPxPerMm(calPx / activeRef.mm);
  };

// Find closest ring size from diameter
  const sizeFromDia = (dia) => {
    let closest = RING_SIZES[0];
    for (const s of RING_SIZES) {
      if (Math.abs(s.dia - dia) < Math.abs(closest.dia - dia)) closest = s;
    }
    return closest;
  };

// Find closest ring size from circumference
  const sizeFromCirc = (circ) => {
    let closest = RING_SIZES[0];
    for (const s of RING_SIZES) {
      if (Math.abs(s.circ - circ) < Math.abs(closest.circ - circ)) closest = s;
    }
    return closest;
  };

const matched = method === "ring" ? sizeFromDia(diameterMm) : (circumMm ? sizeFromCirc(parseFloat(circumMm)) : null);

const tabStyle = (active) => ({
    flex: 1, padding: "10px 0", fontSize: 13, fontWeight: active ? 600 : 400,
    color: active ? "#C9A96E" : "rgba(245,240,232,0.5)",
    background: active ? "rgba(201,169,110,0.1)" : "transparent",
    border: "none", borderBottom: active ? "2px solid #C9A96E" : "2px solid transparent",
    cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif", transition: "all 0.2s",
  });

return (
    <div style={{ overflowY: "auto", maxHeight: "65vh", paddingRight: 4 }}>
      {/* Method tabs */}
      <div style={{ display: "flex", marginBottom: 20, borderBottom: "1px solid rgba(255,255,255,0.06)" }}>
        <button style={tabStyle(method === "ring")} onClick={() => setMethod("ring")}>
          I Have a Ring
        </button>
        <button style={tabStyle(method === "string")} onClick={() => setMethod("string")}>
          Measure My Finger
        </button>
      </div>

{method === "ring" && (
        <div>
          {/* Step 1: Calibration */}
          {!pxPerMm ? (
            <div>
              {/* Mobile: show object picker first */}
              {isMobile && !calObject ? (
                <div>
                  <p style={{ fontSize: 14, color: "rgba(245,240,232,0.6)", marginBottom: 16, lineHeight: 1.6 }}>
                    <strong style={{ color: "#C9A96E" }}>Step 1:</strong> What do you have handy to calibrate your screen?
                  </p>
                  <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                    {CAL_OBJECTS.map(obj => (
                      <div key={obj.id} className="option-card" onClick={() => {
                        setCalObject(obj.id);
                        setCalPx(obj.shape === "circle" ? 80 : 280);
                      }} style={{
                        display: "flex", alignItems: "center", gap: 12,
                        padding: "14px 16px", borderRadius: 10, cursor: "pointer",
                        background: "rgba(255,255,255,0.03)", border: "1px solid rgba(255,255,255,0.08)",
                      }}>
                        <span style={{ fontSize: 22 }}>{obj.emoji}</span>
                        <div>
                          <span style={{ fontSize: 14, fontWeight: 500, color: "#F5F0E8", display: "block" }}>{obj.label}</span>
                          {obj.note && <span style={{ fontSize: 12, color: "rgba(201,169,110,0.5)" }}>{obj.note}</span>}
                          <span style={{ fontSize: 12, color: "rgba(245,240,232,0.3)" }}>{obj.mm}mm {obj.shape === "circle" ? "diameter" : "width"}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              ) : (
                <div>
                  <p style={{ fontSize: 14, color: "rgba(245,240,232,0.6)", marginBottom: 6, lineHeight: 1.6 }}>
                    <strong style={{ color: "#C9A96E" }}>{isMobile ? "Step 2" : "Step 1"}:</strong> Place your {activeRef?.label.toLowerCase()} on the screen and drag the slider until the gold {isCircle ? "circle" : "bar"} matches {isCircle ? "the coin" : "the card's width"} exactly.
                  </p>
                  {activeRef?.id === "card" && isMobile && (
                    <p style={{ fontSize: 13, color: "#C9A96E", marginBottom: 12 }}>📱 Rotate your phone to landscape mode first.</p>
                  )}
                  <div style={{ display: "flex", justifyContent: "center", margin: "20px 0 12px" }}>
                    {isCircle ? (
                      <div style={{
                        width: calPx, height: calPx, borderRadius: "50%",
                        background: "rgba(201,169,110,0.15)",
                        border: "2px solid #C9A96E",
                        transition: "all 0.1s",
                      }} />
                    ) : (
                      <div>
                        <div style={{
                          width: calPx, height: 8, background: "linear-gradient(90deg, #C9A96E, #E2C992)",
                          borderRadius: 4, transition: "width 0.1s",
                        }} />
                        <div style={{ width: calPx, height: 1, borderLeft: "2px solid rgba(201,169,110,0.5)", borderRight: "2px solid rgba(201,169,110,0.5)", marginTop: 4 }} />
                      </div>
                    )}
                  </div>
                  <input type="range" min={isCircle ? 40 : 150} max={isCircle ? 200 : 600} value={calPx} onChange={(e) => setCalPx(Number(e.target.value))}
                    style={{ width: "100%", accentColor: "#C9A96E", marginBottom: 16 }} />
                  <p style={{ fontSize: 12, color: "rgba(245,240,232,0.35)", textAlign: "center", marginBottom: 16 }}>
                    {activeRef?.label}: {activeRef?.mm}mm {isCircle ? "diameter" : "width"}
                  </p>
                  <button className="btn-primary" onClick={calibrate}
                    style={{ width: "100%", background: "linear-gradient(135deg, #C9A96E, #B8944F)", color: "#1A1814", border: "none", borderRadius: 50, padding: "12px 0", fontSize: 14, fontWeight: 600, fontFamily: "'Nunito Sans', sans-serif", cursor: "pointer" }}>
                    It matches — continue
                  </button>
                  {isMobile && (
                    <button onClick={() => setCalObject(null)}
                      style={{ display: "block", margin: "12px auto 0", fontSize: 12, color: "rgba(201,169,110,0.5)", background: "none", border: "none", cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif" }}>
                      ← Use a different object
                    </button>
                  )}
                </div>
              )}
            </div>
          ) : (
            <div>
              <p style={{ fontSize: 14, color: "rgba(245,240,232,0.6)", marginBottom: 16, lineHeight: 1.6 }}>
                <strong style={{ color: "#C9A96E" }}>Step 2:</strong> Place your ring on the circle below and adjust the slider until the circle matches the <em>inside edge</em> of your ring.
              </p>
              {/* Ring circle */}
              <div style={{ display: "flex", justifyContent: "center", alignItems: "center", margin: "16px 0" }}>
                <svg width={Math.max(diameterMm * pxPerMm + 40, 100)} height={Math.max(diameterMm * pxPerMm + 40, 100)} style={{ overflow: "visible" }}>
                  <circle
                    cx={(diameterMm * pxPerMm + 40) / 2}
                    cy={(diameterMm * pxPerMm + 40) / 2}
                    r={(diameterMm * pxPerMm) / 2}
                    fill="none"
                    stroke="#C9A96E"
                    strokeWidth="2"
                  />
                  <circle
                    cx={(diameterMm * pxPerMm + 40) / 2}
                    cy={(diameterMm * pxPerMm + 40) / 2}
                    r={(diameterMm * pxPerMm) / 2}
                    fill="rgba(201,169,110,0.06)"
                    stroke="none"
                  />
                </svg>
              </div>
              <input type="range" min="14" max="23" step="0.1" value={diameterMm} onChange={(e) => setDiameterMm(Number(e.target.value))}
                style={{ width: "100%", accentColor: "#C9A96E", marginBottom: 8 }} />
              <p style={{ fontSize: 13, color: "rgba(245,240,232,0.4)", textAlign: "center", marginBottom: 20 }}>
                Diameter: {diameterMm.toFixed(1)}mm
              </p>
              <button style={{ fontSize: 12, color: "rgba(201,169,110,0.5)", background: "none", border: "none", cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif", marginBottom: 16, display: "block" }}
                onClick={() => setPxPerMm(null)}>
                ← Re-calibrate screen
              </button>
            </div>
          )}
        </div>
      )}

{method === "string" && (
        <div>
          <p style={{ fontSize: 14, color: "rgba(245,240,232,0.6)", marginBottom: 12, lineHeight: 1.6 }}>
            <strong style={{ color: "#C9A96E" }}>1.</strong> Wrap a thin strip of paper or string snugly around the base of your finger.
          </p>
          <p style={{ fontSize: 14, color: "rgba(245,240,232,0.6)", marginBottom: 12, lineHeight: 1.6 }}>
            <strong style={{ color: "#C9A96E" }}>2.</strong> Mark where it overlaps, then measure the length in millimetres with a ruler.
          </p>
          <p style={{ fontSize: 14, color: "rgba(245,240,232,0.6)", marginBottom: 20, lineHeight: 1.6 }}>
            <strong style={{ color: "#C9A96E" }}>3.</strong> Enter the measurement below:
          </p>
          <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 8 }}>
            <input type="number" placeholder="e.g. 54" value={circumMm}
              onChange={(e) => setCircumMm(e.target.value)}
              style={{ width: 100, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(201,169,110,0.25)", borderRadius: 8, padding: "10px 14px", color: "#F5F0E8", fontSize: 16, fontFamily: "'Nunito Sans', sans-serif", outline: "none" }} />
            <span style={{ fontSize: 14, color: "rgba(245,240,232,0.4)" }}>mm circumference</span>
          </div>
          <p style={{ fontSize: 12, color: "rgba(245,240,232,0.3)", marginBottom: 20, lineHeight: 1.5 }}>
            Tip: measure 2–3 times for accuracy. Fingers are slightly larger in the evening and in warm weather.
          </p>
        </div>
      )}

{/* Result */}
      {matched && (method === "ring" ? pxPerMm : circumMm) && (
        <div style={{ background: "rgba(201,169,110,0.08)", border: "1px solid rgba(201,169,110,0.2)", borderRadius: 12, padding: "18px 20px", marginBottom: 16, textAlign: "center" }}>
          <p style={{ fontSize: 13, color: "rgba(245,240,232,0.5)", marginBottom: 6 }}>Your estimated ring size</p>
          <p style={{ fontSize: 36, fontFamily: "'Cormorant Garamond', serif", fontWeight: 400, color: "#C9A96E", marginBottom: 4 }}>
            {matched.size}
          </p>
          <p style={{ fontSize: 12, color: "rgba(245,240,232,0.35)" }}>
            {matched.dia}mm diameter · {matched.circ}mm circumference
          </p>
          <button className="btn-primary" onClick={() => onSelectSize(matched.size)}
            style={{ marginTop: 14, background: "linear-gradient(135deg, #C9A96E, #B8944F)", color: "#1A1814", border: "none", borderRadius: 50, padding: "11px 28px", fontSize: 14, fontWeight: 600, fontFamily: "'Nunito Sans', sans-serif", cursor: "pointer" }}>
            Use size {matched.size}
          </button>
        </div>
      )}

{/* Reference chart */}
      <details style={{ marginTop: 8 }}>
        <summary style={{ fontSize: 13, color: "rgba(201,169,110,0.5)", cursor: "pointer", marginBottom: 10 }}>
          Full size chart (US/Canada)
        </summary>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr 1fr", gap: "1px", fontSize: 12, color: "rgba(245,240,232,0.5)", marginTop: 8 }}>
          <span style={{ fontWeight: 600, color: "#C9A96E", padding: "6px 0" }}>Size</span>
          <span style={{ fontWeight: 600, color: "#C9A96E", padding: "6px 0" }}>Diameter</span>
          <span style={{ fontWeight: 600, color: "#C9A96E", padding: "6px 0" }}>Circumf.</span>
          {RING_SIZES.map(s => (
            <React.Fragment key={s.size}>
              <span style={{ padding: "4px 0", borderTop: "1px solid rgba(255,255,255,0.04)" }}>{s.size}</span>
              <span style={{ padding: "4px 0", borderTop: "1px solid rgba(255,255,255,0.04)" }}>{s.dia}mm</span>
              <span style={{ padding: "4px 0", borderTop: "1px solid rgba(255,255,255,0.04)" }}>{s.circ}mm</span>
            </React.Fragment>
          ))}
        </div>
      </details>

<p style={{ fontSize: 11, color: "rgba(245,240,232,0.25)", marginTop: 16, lineHeight: 1.5, textAlign: "center" }}>
        This is an estimate. For the best fit, we'll confirm your size during your in-store consultation.
      </p>
    </div>
  );
}

function ConceptCard({ concept, index, metalColor, isLiked, onLike, onSvgGenerated }) {
  const [imgState, setImgState] = useState("idle"); // idle, loading, loaded, error
  const [svgMarkup, setSvgMarkup] = useState(null);
  const [statusMsg, setStatusMsg] = useState("");
  const MAX_RETRIES = 3;

// Gem color lookup
  const gemColors = (() => {
    const desc = (concept.description + " " + concept.name).toLowerCase();
    const map = {
      diamond: ["#B8D4E3", "#FFFFFF"], sapphire: ["#1E3A8A", "#6090D0"],
      ruby: ["#9B1B30", "#E05070"], emerald: ["#1B6B3A", "#50C080"],
      amethyst: ["#6B21A8", "#B070E0"], opal: ["#C8D8E8", "#E8D0F0"],
      garnet: ["#8B1A1A", "#D05050"], aquamarine: ["#48A9C5", "#90E0F0"],
      pearl: ["#F0EBD8", "#FFFFFF"], morganite: ["#E8A898", "#F8D0C8"],
      tanzanite: ["#4A3B8F", "#8878C8"], moissanite: ["#D8DCE0", "#FFFFFF"],
      topaz: ["#D4900A", "#F8C850"], peridot: ["#6B8E23", "#A8D050"],
    };
    for (const [gem, cols] of Object.entries(map)) {
      if (desc.includes(gem)) return cols;
    }
    return ["#B8D4E3", "#FFFFFF"];
  })();

// Safe metal color
  const mc = metalColor && metalColor.startsWith("#") && metalColor.length >= 7 ? metalColor : "#D4A843";

// Extract SVG from arbitrary text — handles all model output patterns
  const extractSvg = (text) => {
    if (!text) return null;

// Strip markdown fences
    let cleaned = text.replace(/```(?:svg|xml|html)?\n?/gi, "").replace(/```/g, "");

// Try to find <svg ... </svg> (non-greedy on attributes, greedy on body)
    const m = cleaned.match(/<svg[^>]*>[\s\S]*<\/svg>/i);
    if (m) return m[0];

// Maybe the model output <svg but got cut off before </svg>
    const svgStart = cleaned.indexOf("<svg");
    if (svgStart !== -1) {
      let fragment = cleaned.slice(svgStart);
      // Close any unclosed tags and add </svg>
      if (!fragment.includes("</svg>")) fragment += "</svg>";
      return fragment;
    }

return null;
  };

// Minimal validation — just needs to be parseable SVG with some content
  const isValidSvg = (svg) => {
    if (!svg || svg.length < 100) return false;
    if (!svg.includes("<svg")) return false;
    // Must have SOME drawing content — any element inside the SVG
    const hasContent = /<(path|circle|rect|ellipse|polygon|line|polyline|g|use|text)\b/i.test(svg);
    return hasContent;
  };

// Clean up SVG for safe inline rendering
  const sanitize = (svg) => {
    let s = svg;
    // Remove scripts and event handlers
    s = s.replace(/<script[\s\S]*?<\/script>/gi, "");
    s = s.replace(/\bon\w+\s*=\s*["'][^"']*["']/gi, "");
    // Ensure xmlns
    if (!s.includes("xmlns")) {
      s = s.replace("<svg", '<svg xmlns="http://www.w3.org/2000/svg"');
    }
    // Force viewBox if missing
    if (!s.includes("viewBox")) {
      s = s.replace("<svg", '<svg viewBox="0 0 400 300"');
    }
    // Force dimensions for inline rendering
    if (!/width\s*=/.test(s.split(">")[0])) {
      s = s.replace("<svg", '<svg width="100%" height="100%"');
    }
    return s;
  };

const callApi = async (prompt, systemPrompt) => {
    const data = await callAiProxy({
      task: "svg",
      input: prompt,
      instructions: systemPrompt,
      maxOutputTokens: 2600,
    });
    return data.text || "";
  };

const generateImage = async (retryNum = 0) => {
    setImgState("loading");
    const msgs = [
      "Crafting your illustration...",
      "Trying a different approach...",
      "One more attempt...",
    ];
    setStatusMsg(msgs[Math.min(retryNum, msgs.length - 1)]);

const system = `You are an SVG jewellery illustrator. You ONLY output SVG markup — never explanations, never markdown. Your SVGs are elegant, detailed vector illustrations of fine jewellery on dark backgrounds. You use gradients, filters, layered shapes, and subtle highlights to create premium-looking results. Every SVG you create has at least 15-20 shape elements for rich detail.`;

const prompts = [
      // Attempt 1 — full detail
      `Draw an exquisite vector illustration of this jewellery piece and return only complete SVG markup:

"${concept.name}" — ${concept.description}

Technical palette:
• Background: #1A1814
• Metal: base ${mc}, highlights brighter, shadows darker
• Gemstone: base ${gemColors[0]}, highlight center ${gemColors[1]}

Use:
1. <svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg"> as the root element
2. <defs> block with: metalGrad (linearGradient, 3+ stops from dark to light ${mc}), gemGrad (radialGradient from ${gemColors[1]} center to ${gemColors[0]} edge), shadowFilter (feGaussianBlur stdDeviation="4"), shineGrad (linear, transparent to white at 0.15 opacity to transparent)
3. Background rect filling #1A1814
4. Soft shadow ellipse under the piece (black, 15% opacity, filtered)
5. Main jewellery body using metalGrad — build it from multiple overlapping paths/shapes for 3D depth
6. Gemstone(s) using gemGrad with a small white specular highlight ellipse offset from center
7. Edge highlights: thin strokes or shapes in white at 10-20% opacity tracing the top edges
8. Fine detail elements: prong settings, engravings, texture lines

Make it look as realistic as vector art can — use many gradient stops, layered transparency, and gaussian blur for soft shadows. Return only the final SVG string, and close with </svg>.`,

// Attempt 2 — more structured, less room for model to go off track
      `Return only complete SVG markup for "${concept.name}" (${concept.description}).
Background: #1A1814. Metal: ${mc}. Gem: ${gemColors[0]}.

Output a full SVG with these elements in order:
<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<defs>
  <linearGradient id="metal" x1="0" y1="0" x2="1" y2="1"><stop offset="0%" stop-color="${mc}" stop-opacity="0.6"/><stop offset="50%" stop-color="${mc}"/><stop offset="100%" stop-color="${mc}" stop-opacity="0.8"/></linearGradient>
  <radialGradient id="gem"><stop offset="0%" stop-color="${gemColors[1]}"/><stop offset="100%" stop-color="${gemColors[0]}"/></radialGradient>
  <filter id="shadow"><feGaussianBlur stdDeviation="3"/></filter>
</defs>
<rect width="400" height="300" fill="#1A1814"/>
<ellipse cx="200" cy="246" rx="62" ry="10" fill="black" opacity="0.2" filter="url(#shadow)"/>

Then draw the jewellery piece centered on the canvas with at least 15 shapes. Use url(#metal) for metal parts, url(#gem) for stones, url(#shadow) for soft shadows, and low-opacity white highlight strokes. Close with </svg>.`,

// Attempt 3 — ultra-safe fallback prompt
      `Return only a complete SVG illustration for "${concept.name}". The scene should show a premium jewellery rendering on a dark background.
Requirements:
<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<defs> with a metal gradient and gemstone gradient
One dark background rectangle
One blurred shadow ellipse near the bottom
At least 10 visible jewellery shapes
Use ${mc} for metal and ${gemColors[0]} / ${gemColors[1]} for the stone
No markdown fences, no prose, and include the closing </svg> tag.`,
    ];

try {
      const raw = await callApi(prompts[Math.min(retryNum, prompts.length - 1)], system);
      const svg = extractSvg(raw);

if (svg && isValidSvg(svg)) {
        const cleaned = sanitize(svg);
        setSvgMarkup(cleaned);
        setImgState("loaded");
        setStatusMsg("");
        if (onSvgGenerated) onSvgGenerated(index, cleaned);
        return;
      }

// Validation failed — retry with next prompt
      console.warn(`SVG attempt ${retryNum + 1} failed validation. Length: ${raw?.length}, hasContent: ${svg ? "yes" : "no"}`);
      if (retryNum < MAX_RETRIES - 1) {
        await new Promise(r => setTimeout(r, 600));
        return generateImage(retryNum + 1);
      }

// Last resort: if we got ANY svg-like content, try to show it anyway
      if (svg) {
        const cleaned = sanitize(svg);
        setSvgMarkup(cleaned);
        setImgState("loaded");
        setStatusMsg("");
        if (onSvgGenerated) onSvgGenerated(index, cleaned);
        return;
      }

setImgState("error");
      setStatusMsg("");
    } catch (err) {
      console.error(`Attempt ${retryNum + 1} error:`, err);
      if (retryNum < MAX_RETRIES - 1) {
        await new Promise(r => setTimeout(r, 800));
        return generateImage(retryNum + 1);
      }
      const fallbackSvg = sanitize(buildFallbackSvgMarkup(concept, mc, gemColors));
      setSvgMarkup(fallbackSvg);
      setImgState("loaded");
      setStatusMsg("");
      if (onSvgGenerated) onSvgGenerated(index, fallbackSvg);
    }
  };

const hasImage = imgState === "loaded" && svgMarkup;

return (
    <div className="concept-card" style={{
      background: "rgba(255,255,255,0.03)",
      border: isLiked ? "1px solid rgba(201,169,110,0.35)" : "1px solid rgba(201,169,110,0.12)",
      borderRadius: 14,
      overflow: "hidden",
      transition: "border-color 0.3s ease",
    }}>
      {/* Content section */}
      <div style={{ padding: "20px 22px" }}>
        {/* Header row: swatch + concept label + like button */}
        <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 10 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <div style={{ width: 28, height: 28, borderRadius: "50%", background: metalColor, border: "1px solid rgba(255,255,255,0.12)", flexShrink: 0 }} />
            <span style={{ fontSize: 10, fontWeight: 600, color: "#C9A96E", letterSpacing: "0.1em", textTransform: "uppercase", opacity: 0.7 }}>Concept {index + 1}</span>
          </div>
          <button onClick={() => onLike && onLike(index)}
            className="like-btn"
            style={{
              display: "inline-flex", alignItems: "center", gap: 5,
              background: isLiked ? "rgba(201,169,110,0.15)" : "transparent",
              border: `1px solid ${isLiked ? "#C9A96E" : "rgba(201,169,110,0.2)"}`,
              borderRadius: 20, padding: "5px 12px",
              color: isLiked ? "#C9A96E" : "rgba(201,169,110,0.5)",
              fontSize: 13, cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif",
              transition: "all 0.25s ease",
              flexShrink: 0,
            }}>
            {isLiked ? "♥ Favourite" : "♡ Like"}
          </button>
        </div>

<h4 style={{
          fontFamily: "'Cormorant Garamond', serif",
          fontSize: 20, fontWeight: 500, color: "#F5F0E8",
          marginBottom: 10, lineHeight: 1.3,
        }}>{concept.name}</h4>
        <p style={{
          fontSize: 15, fontWeight: 300, color: "rgba(245,240,232,0.55)",
          lineHeight: 1.7, marginBottom: 16,
        }}>{concept.description}</p>

{/* SVG illustration area — below description */}
        {hasImage && (
          <div style={{
            width: "100%", height: 260, position: "relative", overflow: "hidden",
            borderRadius: 10, background: "#1A1814", marginBottom: 12,
            border: "1px solid rgba(201,169,110,0.08)",
          }}>
            <div
              dangerouslySetInnerHTML={{ __html: svgMarkup }}
              style={{ width: "100%", height: "100%" }}
            />
            <div style={{
              position: "absolute", bottom: 0, left: 0, right: 0, height: 50,
              background: "linear-gradient(to top, rgba(26,24,20,0.6), transparent)",
              pointerEvents: "none",
            }} />
            <span style={{
              position: "absolute", top: 10, left: 12,
              fontSize: 9, fontWeight: 600, color: "#C9A96E", letterSpacing: "0.12em", textTransform: "uppercase",
              background: "rgba(26,24,20,0.75)", backdropFilter: "blur(4px)",
              padding: "3px 8px", borderRadius: 4,
            }}>AI Concept Illustration</span>
          </div>
        )}

{/* Generate / loading / error / regenerate controls */}
        {imgState === "idle" && (
          <button
            onClick={() => generateImage(0)}
            className="gen-img-btn"
            style={{
              display: "inline-flex", alignItems: "center", gap: 8,
              background: "rgba(201,169,110,0.08)",
              border: "1px solid rgba(201,169,110,0.25)",
              borderRadius: 8, padding: "10px 18px",
              color: "#C9A96E", fontSize: 14, fontWeight: 600,
              fontFamily: "'Nunito Sans', sans-serif",
              cursor: "pointer", letterSpacing: "0.03em",
              transition: "all 0.25s ease",
            }}
          >
            <span style={{ fontSize: 16 }}>🎨</span>
            Illustrate This Concept
          </button>
        )}

{imgState === "loading" && (
          <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "10px 0" }}>
            <div style={{
              width: 18, height: 18,
              border: "2px solid rgba(201,169,110,0.2)", borderTopColor: "#C9A96E",
              borderRadius: "50%", animation: "spin 1s linear infinite",
            }} />
            <span style={{ fontSize: 14, color: "rgba(201,169,110,0.6)" }}>{statusMsg}</span>
          </div>
        )}

{imgState === "error" && (
          <div style={{ display: "flex", alignItems: "center", gap: 8, padding: "8px 0", flexWrap: "wrap" }}>
            <span style={{ fontSize: 14, color: "rgba(245,240,232,0.4)" }}>
              Illustration didn't come through.
            </span>
            <button onClick={() => generateImage(0)}
              style={{
                background: "rgba(201,169,110,0.08)", border: "1px solid rgba(201,169,110,0.2)",
                borderRadius: 6, color: "#C9A96E", padding: "6px 14px",
                fontSize: 14, cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif",
              }}>Try again</button>
          </div>
        )}

{hasImage && (
          <button onClick={() => { setSvgMarkup(null); generateImage(0); }}
            style={{
              background: "none", border: "none", color: "rgba(201,169,110,0.4)",
              fontSize: 13, cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif",
              padding: "4px 0",
            }}>🔄 Generate a different version</button>
        )}
      </div>
    </div>
  );
}

function SummaryRow({ label, value }) {
  return (
    <div style={styles.summaryRow}>
      <span style={styles.summaryLabel}>{label}</span>
      <span style={styles.summaryValue}>{value || "—"}</span>
    </div>
  );
}

const styles = {
  wrapper: {
    position: "relative",
    width: "100%",
    minHeight: "100vh",
    background: "#1A1814",
    fontFamily: "'Nunito Sans', sans-serif",
    color: "#F5F0E8",
  },
  bgTexture: {
    position: "absolute",
    inset: 0,
    background: `radial-gradient(ellipse at 20% 0%, rgba(201,169,110,0.06) 0%, transparent 60%),
                 radial-gradient(ellipse at 80% 100%, rgba(201,169,110,0.04) 0%, transparent 50%)`,
    pointerEvents: "none",
    zIndex: 0,
  },
  bgGlow: {
    position: "absolute",
    top: "-30%",
    right: "-10%",
    width: "50%",
    height: "60%",
    background: "radial-gradient(circle, rgba(201,169,110,0.03) 0%, transparent 70%)",
    pointerEvents: "none",
    zIndex: 0,
  },
  header: {
    position: "sticky",
    top: 0,
    zIndex: 10,
    padding: "20px 28px 16px",
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    borderBottom: "1px solid rgba(201,169,110,0.1)",
    background: "#1A1814",
  },
  logoArea: {
    display: "flex",
    flexDirection: "row",
    alignItems: "center",
    gap: 14,
  },
  logoImg: {
    height: 72,
    width: "auto",
    objectFit: "contain",
  },
  brandSub: {
    fontSize: 19,
    fontWeight: 300,
    color: "rgba(201,169,110,0.7)",
    letterSpacing: "0.15em",
    textTransform: "uppercase",
  },
  progressWrap: {
    display: "flex",
    flexDirection: "column",
    alignItems: "flex-end",
    gap: 6,
  },
  progressTrack: {
    width: 120,
    height: 3,
    background: "rgba(255,255,255,0.08)",
    borderRadius: 2,
    overflow: "hidden",
  },
  progressBar: {
    height: "100%",
    background: "linear-gradient(90deg, #C9A96E, #E2C992)",
    borderRadius: 2,
    transition: "width 0.4s ease",
  },
  progressLabel: {
    fontSize: 11,
    color: "rgba(245,240,232,0.4)",
    letterSpacing: "0.05em",
  },
  main: {
    position: "relative",
    zIndex: 5,
    padding: "20px 28px 32px",
  },
  centeredContent: {
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    justifyContent: "center",
    textAlign: "center",
    minHeight: "60vh",
    maxWidth: 520,
    margin: "0 auto",
  },
  heroIcon: {
    fontSize: 36,
    color: "#C9A96E",
    marginBottom: 24,
    animation: "pulse 3s ease-in-out infinite",
  },
  heroTitle: {
    fontFamily: "'Cormorant Garamond', serif",
    fontSize: 42,
    fontWeight: 300,
    lineHeight: 1.15,
    color: "#F5F0E8",
    marginBottom: 20,
    letterSpacing: "0.01em",
  },
  heroDesc: {
    fontSize: 17,
    fontWeight: 300,
    lineHeight: 1.7,
    color: "rgba(245,240,232,0.65)",
    marginBottom: 12,
    maxWidth: 520,
  },
  heroDuration: {
    fontSize: 15,
    color: "rgba(201,169,110,0.6)",
    marginBottom: 36,
    letterSpacing: "0.03em",
  },
  ctaButton: {
    background: "linear-gradient(135deg, #C9A96E, #B8944F)",
    color: "#1A1814",
    border: "none",
    borderRadius: 50,
    padding: "16px 40px",
    fontSize: 15,
    fontWeight: 600,
    fontFamily: "'Nunito Sans', sans-serif",
    cursor: "pointer",
    letterSpacing: "0.03em",
  },
  heroFootnote: {
    fontSize: 14,
    color: "rgba(245,240,232,0.3)",
    marginTop: 20,
    fontStyle: "italic",
  },
  stepContent: {
    maxWidth: 600,
    margin: "0 auto",
  },
  stepTitle: {
    fontFamily: "'Cormorant Garamond', serif",
    fontSize: 30,
    fontWeight: 400,
    color: "#F5F0E8",
    marginBottom: 10,
    lineHeight: 1.2,
  },
  stepDesc: {
    fontSize: 16,
    fontWeight: 300,
    color: "rgba(245,240,232,0.5)",
    marginBottom: 28,
    lineHeight: 1.65,
  },
  optionGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(130px, 1fr))",
    gap: 12,
  },
  optionCard: {
    background: "rgba(255,255,255,0.03)",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 12,
    padding: "20px 14px",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: 10,
    textAlign: "center",
  },
  optionIcon: { fontSize: 28 },
  optionLabel: { fontSize: 15, fontWeight: 400, color: "#F5F0E8", letterSpacing: "0.02em" },
  occasionGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(170px, 1fr))",
    gap: 10,
  },
  occasionCard: {
    background: "rgba(255,255,255,0.03)",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 10,
    padding: "16px 18px",
    display: "flex",
    flexDirection: "column",
    gap: 4,
  },
  occasionLabel: { fontSize: 15, fontWeight: 600, color: "#F5F0E8" },
  occasionDesc: { fontSize: 14, fontWeight: 300, color: "rgba(245,240,232,0.4)" },
  metalGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
    gap: 12,
  },
  metalCard: {
    background: "rgba(255,255,255,0.03)",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 12,
    padding: "20px 14px",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: 12,
    textAlign: "center",
  },
  metalSwatch: {
    width: 40,
    height: 40,
    borderRadius: "50%",
    border: "1px solid rgba(255,255,255,0.12)",
  },
  metalLabel: { fontSize: 15, fontWeight: 400, color: "#F5F0E8" },
  gemGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
    gap: 10,
  },
  gemChip: {
    border: "1px solid rgba(255,255,255,0.1)",
    borderRadius: 10,
    padding: "14px 16px",
    display: "flex",
    alignItems: "center",
    gap: 10,
    cursor: "pointer",
    transition: "all 0.2s ease",
  },
  gemDot: {
    width: 18,
    height: 18,
    borderRadius: "50%",
    flexShrink: 0,
  },
  styleGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))",
    gap: 12,
  },
  styleCard: {
    background: "rgba(255,255,255,0.03)",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 12,
    padding: "22px 16px",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    textAlign: "center",
    gap: 8,
  },
  styleEmoji: { fontSize: 28 },
  styleLabel: { fontSize: 14, fontWeight: 600, color: "#F5F0E8" },
  styleDesc: { fontSize: 14, fontWeight: 300, color: "rgba(245,240,232,0.45)", lineHeight: 1.5 },
  dropZone: {
    border: "2px dashed rgba(201,169,110,0.25)",
    borderRadius: 16,
    padding: "40px 20px",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: 8,
    cursor: "pointer",
    transition: "border-color 0.2s",
    background: "rgba(201,169,110,0.02)",
  },
  dropIcon: { fontSize: 36, marginBottom: 4 },
  dropText: { fontSize: 16, fontWeight: 400, color: "#C9A96E" },
  dropSubtext: { fontSize: 14, color: "rgba(245,240,232,0.35)" },
  photoRow: { display: "flex", gap: 10, marginTop: 20, flexWrap: "wrap" },
  photoThumb: { width: 80, height: 80, borderRadius: 8, overflow: "hidden", flexShrink: 0 },
  photoImg: { width: "100%", height: "100%", objectFit: "cover" },
  skipHint: { fontSize: 15, color: "rgba(245,240,232,0.35)", marginTop: 20, fontStyle: "italic" },
  budgetGrid: {
    display: "grid",
    gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))",
    gap: 10,
  },
  budgetCard: {
    background: "rgba(255,255,255,0.03)",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 10,
    padding: "18px 20px",
    fontSize: 15,
    fontWeight: 400,
    color: "#F5F0E8",
    textAlign: "center",
    cursor: "pointer",
  },
  timelineGrid: { display: "flex", flexDirection: "column", gap: 10 },
  timelineCard: {
    background: "rgba(255,255,255,0.03)",
    border: "1px solid rgba(255,255,255,0.08)",
    borderRadius: 10,
    padding: "16px 20px",
    display: "flex",
    justifyContent: "space-between",
    alignItems: "center",
    cursor: "pointer",
  },
  timelineLabel: { fontSize: 15, fontWeight: 600, color: "#F5F0E8" },
  timelineDesc: { fontSize: 14, fontWeight: 300, color: "rgba(245,240,232,0.4)" },
  chipRow: { display: "flex", flexWrap: "wrap", gap: 8 },
  chip: {
    border: "1px solid rgba(255,255,255,0.1)",
    borderRadius: 20,
    padding: "8px 16px",
    fontSize: 15,
    color: "#F5F0E8",
    cursor: "pointer",
  },
  formGrid: { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 18 },
  formGroup: { display: "flex", flexDirection: "column", gap: 6 },
  inputLabel: {
    fontSize: 13,
    fontWeight: 600,
    color: "rgba(201,169,110,0.7)",
    letterSpacing: "0.05em",
    textTransform: "uppercase",
  },
  privacyNote: { fontSize: 14, color: "rgba(245,240,232,0.35)", marginTop: 24 },
  summaryHeader: { textAlign: "center", marginBottom: 28 },
  checkmark: {
    width: 52, height: 52, borderRadius: "50%",
    background: "linear-gradient(135deg, #C9A96E, #B8944F)",
    color: "#1A1814",
    display: "inline-flex", alignItems: "center", justifyContent: "center",
    fontSize: 26, fontWeight: 700, marginBottom: 18,
  },
  summaryCard: {
    background: "rgba(255,255,255,0.03)",
    border: "1px solid rgba(201,169,110,0.15)",
    borderRadius: 14,
    padding: "4px 0",
    marginBottom: 28,
  },
  summaryRow: {
    display: "flex",
    justifyContent: "space-between",
    alignItems: "flex-start",
    padding: "14px 22px",
    borderBottom: "1px solid rgba(255,255,255,0.04)",
    gap: 16,
  },
  summaryLabel: {
    fontSize: 13, fontWeight: 600, color: "rgba(201,169,110,0.65)",
    letterSpacing: "0.04em", textTransform: "uppercase", flexShrink: 0, minWidth: 100,
  },
  summaryValue: { fontSize: 15, color: "#F5F0E8", textAlign: "right" },
  summaryActions: {
    display: "flex", flexDirection: "column", alignItems: "center", gap: 16, marginBottom: 40,
  },
  editBtn: {
    background: "none", border: "none", color: "rgba(245,240,232,0.5)",
    fontSize: 15, cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif",
  },
  contactFooter: {
    textAlign: "center", padding: "24px 0 0",
    borderTop: "1px solid rgba(201,169,110,0.1)",
  },
  contactLine: { fontSize: 15, color: "rgba(245,240,232,0.5)", marginBottom: 10 },
  contactDetail: { fontSize: 15, color: "rgba(245,240,232,0.4)", lineHeight: 1.8 },
  footer: {
    position: "sticky", bottom: 0, zIndex: 20,
    display: "flex", justifyContent: "space-between", alignItems: "center",
    padding: "16px 28px",
    background: "linear-gradient(to top, #1A1814 60%, transparent)",
    backdropFilter: "blur(8px)",
  },
  backBtn: {
    background: "none", border: "none", color: "rgba(245,240,232,0.5)",
    fontSize: 15, cursor: "pointer", fontFamily: "'Nunito Sans', sans-serif", padding: "10px 16px",
  },
  nextBtn: {
    background: "linear-gradient(135deg, #C9A96E, #B8944F)",
    color: "#1A1814", border: "none", borderRadius: 50,
    padding: "14px 32px", fontSize: 15, fontWeight: 600,
    fontFamily: "'Nunito Sans', sans-serif", cursor: "pointer", letterSpacing: "0.02em",
  },
  // Modal
  modalOverlay: {
    position: "fixed", inset: 0, zIndex: 100,
    background: "rgba(10,8,6,0.85)",
    backdropFilter: "blur(6px)",
    display: "flex", alignItems: "center", justifyContent: "center",
    padding: 20,
  },
  modal: {
    background: "#1A1814",
    border: "1px solid rgba(201,169,110,0.2)",
    borderRadius: 16,
    padding: "28px 24px",
    maxWidth: 520,
    width: "100%",
    maxHeight: "85vh",
    overflow: "hidden",
    display: "flex",
    flexDirection: "column",
  },
};

// Mount the app
ReactDOM.createRoot(document.getElementById("root")).render(<SavoysCustomDesigner />);

Design SomethingTruly Yours

How would you like to begin?

Tell us about your existing piece

Design Something
Truly Yours