// v5_middle.jsx — old vs new, quote, how it works, built for every move, family
// Refined to match reference exactly: bigger property cards, taller family layout, larger how-it-works

// ── Old way vs HomeWoosh way ────────────────────────────────────────────
function OldVsNewV5() {
  return (
    <section style={{
      padding: "72px 48px",
      background: "linear-gradient(180deg, #0A1F3D 0%, #061429 100%)",
      color: "#FFFFFF",
      position: "relative",
      overflow: "hidden",
    }}>
      <div style={{
        position: "absolute", left: "50%", top: "50%",
        width: 600, height: 600,
        transform: "translate(-50%, -50%)",
        background: "radial-gradient(circle, rgba(30,91,255,0.10), transparent 60%)",
        pointerEvents: "none",
      }}/>

      <div style={{ maxWidth: 1280, margin: "0 auto", position: "relative" }}>
        <div className="r-oldvsnew" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, alignItems: "center", position: "relative" }}>
          <div className="r-oldvsnew-half" style={{ display: "grid", gridTemplateColumns: "1fr 1.05fr", gap: 28, alignItems: "center" }}>
            <div>
              <div style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", marginBottom: 14, letterSpacing: ".04em" }}>The old way</div>
              <h3 className="display" style={{ fontSize: 30, margin: "0 0 24px", lineHeight: 1.12, letterSpacing: "-0.02em", fontWeight: 500 }}>
                A listings board.<br/>A search box.<br/>Digital classifieds.
              </h3>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {[
                  "You search for listings",
                  "You chase answers",
                  "You fill the same forms",
                  "You hope to win",
                  "You start from scratch",
                ].map((t, i) => (
                  <div key={i} style={{ display: "flex", gap: 12, fontSize: 15, color: "rgba(255,255,255,0.78)", alignItems: "center", fontWeight: 400 }}>
                    <span style={{
                      width: 22, height: 22, borderRadius: 999,
                      background: "rgba(209,74,60,0.22)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      color: "#FF6B5C", flexShrink: 0,
                      border: "1px solid rgba(255,107,92,0.35)",
                    }}><Icon name="x" size={13} strokeWidth={2.2}/></span>
                    {t}
                  </div>
                ))}
              </div>
            </div>
            <DaftMockup/>
          </div>

          <div className="r-oldvsnew-pill" style={{
            position: "absolute", left: "50%", top: "50%",
            transform: "translate(-50%, -50%)",
            width: 44, height: 44, borderRadius: 999,
            background: "#1E5BFF",
            color: "#FFFFFF",
            display: "flex", alignItems: "center", justifyContent: "center",
            fontSize: 13, fontWeight: 600,
            boxShadow: "0 0 0 6px rgba(30,91,255,0.18), 0 12px 32px rgba(30,91,255,0.4)",
            zIndex: 3,
          }}>
            vs
          </div>

          <div className="r-oldvsnew-half" style={{ display: "grid", gridTemplateColumns: "1fr 0.85fr", gap: 28, alignItems: "center" }}>
            <div>
              <div style={{ fontSize: 12, color: "rgba(255,255,255,0.55)", marginBottom: 14, letterSpacing: ".04em" }}>The HomeWoosh way</div>
              <h3 className="display" style={{ fontSize: 30, margin: "0 0 24px", lineHeight: 1.12, letterSpacing: "-0.02em", fontWeight: 500 }}>
                An AI advantage system<br/>built around you.
              </h3>
              <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
                {[
                  "AI watches 24/7 for you",
                  "We prepare your paperwork",
                  "We surface the right homes",
                  "We coordinate & negotiate",
                  "You move first, you win",
                ].map((t, i) => (
                  <div key={i} style={{ display: "flex", gap: 12, fontSize: 15, color: "#FFFFFF", alignItems: "center", fontWeight: 400 }}>
                    <span style={{
                      width: 22, height: 22, borderRadius: 999,
                      background: "rgba(127,229,164,0.22)",
                      display: "inline-flex", alignItems: "center", justifyContent: "center",
                      color: "#7FE5A4", flexShrink: 0,
                      border: "1px solid rgba(127,229,164,0.40)",
                    }}><Icon name="check" size={13} strokeWidth={2.5}/></span>
                    {t}
                  </div>
                ))}
              </div>
            </div>
            <PropertyMatchCard/>
          </div>
        </div>
      </div>
    </section>
  );
}

function DaftMockup() {
  return (
    <div style={{
      background: "#0B1A30",
      border: "0.5px solid rgba(255,255,255,0.08)",
      borderRadius: 12,
      padding: 14,
      boxShadow: "0 18px 50px rgba(0,0,0,0.45)",
      transform: "rotate(-1deg)",
      minHeight: 240,
    }}>
      <div style={{
        background: "rgba(255,255,255,0.05)",
        borderRadius: 6, padding: "6px 10px",
        fontSize: 10.5, color: "rgba(255,255,255,0.45)",
        display: "flex", alignItems: "center", gap: 8,
        marginBottom: 12,
      }}>
        <Icon name="search" size={11}/> Search for homes…
        <span style={{ marginLeft: "auto" }}>3-bed · Dublin</span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
        {Array.from({length: 6}).map((_, i) => (
          <div key={i} style={{
            display: "grid", gridTemplateColumns: "32px 1fr 40px",
            gap: 8, alignItems: "center",
            padding: "5px 6px",
            background: "#1c2942", borderRadius: 4,
          }}>
            <div style={{ width: 32, height: 22, background: "rgba(255,255,255,0.08)", borderRadius: 3 }}/>
            <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
              <div style={{ width: "82%", height: 4, background: "rgba(255,255,255,0.18)", borderRadius: 2 }}/>
              <div style={{ width: "55%", height: 3, background: "rgba(255,255,255,0.08)", borderRadius: 2 }}/>
            </div>
            <div style={{ width: 28, height: 4, background: "rgba(255,255,255,0.18)", borderRadius: 2, marginLeft: "auto" }}/>
          </div>
        ))}
      </div>
      <div style={{ marginTop: 10, fontSize: 9, color: "rgba(255,255,255,0.4)", textAlign: "right", letterSpacing: ".06em" }}>
        FEATURED · SPONSORED · FEATURED · …
      </div>
    </div>
  );
}

function PropertyMatchCard() {
  return (
    <div style={{
      background: "#FBF8F2", color: "var(--ink)",
      borderRadius: 14, overflow: "hidden",
      boxShadow: "0 24px 60px rgba(0,0,0,0.4)",
      transform: "rotate(1deg)",
      minHeight: 280,
    }}>
      <div style={{
        background: "url(assets/house-3.png)",
        backgroundSize: "cover", backgroundPosition: "center",
        height: 150, position: "relative",
      }}>
        <span style={{
          position: "absolute", top: 10, right: 10,
          background: "#E8A83A", color: "#0A1830",
          padding: "3px 9px", borderRadius: 999,
          fontSize: 10.5, fontWeight: 600, letterSpacing: ".02em",
        }}>New match</span>
      </div>
      <div style={{ padding: "14px 16px" }}>
        <div className="tnum" style={{ fontSize: 18, fontWeight: 600, marginBottom: 2 }}>€585,000</div>
        <div style={{ fontSize: 12, color: "var(--ink-3)", marginBottom: 10 }}>Ranelagh, Dublin 6</div>
        <div style={{ display: "flex", gap: 10, fontSize: 11, color: "var(--ink-2)" }} className="tnum">
          <span>🛏 3</span><span>🛁 2</span><span>BER A3</span>
        </div>
        <button style={{
          marginTop: 12, width: "100%",
          background: "var(--ink)", color: "#FFFFFF",
          border: 0, padding: "8px", borderRadius: 8,
          fontSize: 12, fontWeight: 500,
        }}>View match</button>
      </div>
    </div>
  );
}

// ── Bridge quote ───────────────────────────────────────────────────────
function BridgeQuoteV5() {
  return (
    <section className="r-bridge-quote" style={{ padding: "44px 48px", background: "#FBF8F2", textAlign: "center" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", position: "relative", display: "inline-flex", alignItems: "center", gap: 16, justifyContent: "center", flexWrap: "wrap" }}>
        <span className="serif" style={{
          fontSize: 44, color: "var(--ink-4)", lineHeight: 1, opacity: 0.5,
          alignSelf: "flex-start", marginTop: -4,
        }}>"</span>
        <p className="display" style={{
          fontSize: "clamp(20px, 2.0vw, 26px)",
          letterSpacing: "-0.015em", lineHeight: 1.3,
          margin: 0, color: "var(--ink)", fontWeight: 500,
        }}>
          Daft helps you find listings. <span style={{ color: "#1E5BFF" }}>HomeWoosh</span> helps you become the person who wins them.
        </p>
        <span className="serif" style={{
          fontSize: 44, color: "var(--ink-4)", lineHeight: 1, opacity: 0.5,
          alignSelf: "flex-start", marginTop: -4,
        }}>"</span>
      </div>
    </section>
  );
}

// ── How it works — cinematic 3-step journey ────────────────────────────
function HowItWorksV5() {
  const [audience, setAudience] = useStateV5("renting");
  const [displayedAudience, setDisplayedAudience] = useStateV5("renting");
  const [bulletsOut, setBulletsOut] = useStateV5(false);
  const [revealed, setRevealed] = useStateV5(false);
  const sectionRef = React.useRef(null);

  // Scroll-trigger reveal (once)
  useEffectV5(() => {
    if (!sectionRef.current || revealed) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          setRevealed(true);
          obs.disconnect();
        }
      });
    }, { threshold: 0.18 });
    obs.observe(sectionRef.current);
    return () => obs.disconnect();
  }, [revealed]);

  // Tab swap: fade out current bullets → swap → fade back in (per-card stagger via CSS)
  useEffectV5(() => {
    if (audience === displayedAudience) return;
    setBulletsOut(true);
    const t = setTimeout(() => {
      setDisplayedAudience(audience);
      setBulletsOut(false);
    }, 150);
    return () => clearTimeout(t);
  }, [audience, displayedAudience]);

  const steps = [
    {
      n: "01",
      tag: "YOU · 90 seconds",
      icon: "target",
      title: "Tell us your goal.",
      italic: "Where. When. Why.",
      body: "Three questions answered in ninety seconds — that becomes your plan.",
      bullets: {
        renting: ["Where you want to live", "When you need to be in", "What you can afford"],
        buying:  ["Where you want to live", "When you need the keys", "What you can afford"],
      },
      accent: "#7FB1FF",
      glow: "rgba(30,91,255,0.22)",
    },
    {
      n: "02",
      tag: "HOMEWOOSH · always on",
      icon: "sparkles",
      title: "We get to work.",
      italic: "While you sleep.",
      body: "The agent prepares your paperwork and watches the market every hour — so the right home doesn't pass you by.",
      bullets: {
        renting: [
          "Pack built (references, employment, deposit)",
          "47 portals watched 24/7",
          "Viewing slots booked into your Google Calendar",
          "Application sent before you finish your tea",
        ],
        buying: [
          "Mortgage-ready (AIP, source of funds, paperwork)",
          "47 portals watched 24/7",
          "Viewings auto-booked into your Google Calendar",
          "Offer strategy ready when you say go",
        ],
      },
      accent: "#7FE5A4",
      glow: "rgba(127,229,164,0.22)",
    },
    {
      n: "03",
      tag: "TOGETHER · until the keys",
      icon: "key",
      title: "You move first.",
      italic: "And you win.",
      body: "You arrive at the viewing or the bid already prepared — not competing on the day, but ahead of it.",
      bullets: {
        renting: [
          "Pre-qualified",
          "Pack pre-sent",
          "Landlord pre-briefed",
          "You walk in already in pole position",
        ],
        buying: [
          "Bid-ready",
          "Paperwork-signed",
          "Solicitor active",
          "You arrive at the bid already ahead",
        ],
      },
      accent: "#E8A83A",
      glow: "rgba(232,168,58,0.25)",
    },
  ];

  return (
    <section ref={sectionRef} id="how-it-works" style={{
      position: "relative",
      padding: "130px 48px 110px",
      background: "linear-gradient(180deg, #0A1F3D 0%, #061429 100%)",
      color: "#FFFFFF",
      overflow: "hidden",
    }}>
      {/* Ambient glow */}
      <div style={{
        position: "absolute", left: "50%", top: "20%",
        width: 900, height: 900,
        transform: "translate(-50%, -50%)",
        background: "radial-gradient(circle, rgba(127,177,255,0.10), transparent 55%)",
        pointerEvents: "none",
      }}/>
      <div style={{
        position: "absolute", right: -120, bottom: -180,
        width: 520, height: 520,
        background: "radial-gradient(circle, rgba(232,168,58,0.12), transparent 60%)",
        pointerEvents: "none",
      }}/>

      <div style={{ maxWidth: 1320, margin: "0 auto", position: "relative", zIndex: 2 }}>
        {/* Header */}
        <div style={{ textAlign: "center", marginBottom: 36, maxWidth: 820, marginLeft: "auto", marginRight: "auto" }}>
          <div style={{
            fontSize: 11, color: "#7FB1FF",
            letterSpacing: ".14em", textTransform: "uppercase", fontWeight: 500,
            marginBottom: 18,
          }}>
            How it works
          </div>
          <h2 className="display" style={{
            fontSize: "clamp(40px, 5vw, 64px)",
            margin: "0 0 18px",
            lineHeight: 1.04, letterSpacing: "-0.03em",
            fontWeight: 500, color: "#FFFFFF",
          }}>
            From your goal — <br/>
            <span className="serif" style={{ color: "#E8A83A", fontWeight: 400 }}>
              to the keys in your hand.
            </span>
          </h2>
          <p style={{
            fontSize: 17, lineHeight: 1.55, margin: "16px auto 0",
            color: "rgba(255,255,255,0.72)", maxWidth: 560,
          }}>
            Three steps. The first one takes ninety seconds. After that, the agent works while you carry on with the rest of your life.
          </p>
        </div>

        {/* Audience tabs */}
        <div style={{
          display: "flex", justifyContent: "center", marginBottom: 48,
        }}>
          <div style={{
            display: "inline-flex",
            padding: 5, borderRadius: 999,
            background: "rgba(255,255,255,0.05)",
            border: "0.5px solid rgba(255,255,255,0.12)",
            backdropFilter: "blur(12px)",
          }}>
            {[
              { id: "renting", label: "I'm renting" },
              { id: "buying",  label: "I'm buying" },
            ].map(t => (
              <button key={t.id} onClick={() => setAudience(t.id)} style={{
                appearance: "none", border: 0,
                background: audience === t.id ? "#FFFFFF" : "transparent",
                color: audience === t.id ? "#0A1830" : "rgba(255,255,255,0.78)",
                padding: "10px 22px", borderRadius: 999,
                fontSize: 14, fontWeight: 500,
                letterSpacing: ".01em",
                cursor: "pointer", transition: "all .25s",
                minWidth: 140,
              }}>
                {t.label}
              </button>
            ))}
          </div>
        </div>

        {/* The journey */}
        <div className="r-howitworks-journey" style={{
          display: "grid",
          gridTemplateColumns: "1fr 36px 1fr 36px 1fr",
          gap: 0,
          alignItems: "stretch",
          marginBottom: 56,
        }}>
          {steps.map((s, i) => (
            <React.Fragment key={s.n}>
              <StepCardV6
                step={s}
                audience={displayedAudience}
                bulletsOut={bulletsOut}
                cardIndex={i}
                revealed={revealed}
                revealDelay={i * 500}
              />
              {i < steps.length - 1 && (
                <JourneyConnector
                  accent={steps[i+1].accent}
                  revealed={revealed}
                  revealDelay={300 + i * 500}
                />
              )}
            </React.Fragment>
          ))}
        </div>

        {/* Closing flourish */}
        <div className="r-howitworks-flourish" style={{
          display: "flex", alignItems: "center", justifyContent: "center", gap: 18,
          padding: "26px 32px",
          background: "rgba(255,255,255,0.04)",
          border: "0.5px solid rgba(255,255,255,0.10)",
          borderRadius: 999,
          maxWidth: 720, margin: "0 auto",
          backdropFilter: "blur(12px)",
        }}>
          <KeysFlourish/>
          <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
            <span className="serif" style={{ fontSize: 22, color: "#FFFFFF", letterSpacing: "-0.01em", lineHeight: 1.1 }}>
              And then — <span style={{ color: "#E8A83A" }}>welcome home.</span>
            </span>
            <span style={{ fontSize: 12, color: "rgba(255,255,255,0.55)" }}>
              The average HomeWoosh member completes step one before their coffee gets cold.
            </span>
          </div>
          <button style={{
            background: "#1E5BFF", color: "#FFFFFF",
            border: 0, padding: "12px 22px", borderRadius: 10,
            fontSize: 14, fontWeight: 500,
            display: "inline-flex", alignItems: "center", gap: 8,
            marginLeft: "auto",
            boxShadow: "0 6px 20px rgba(30,91,255,0.4)",
            flexShrink: 0,
          }}>
            Start step one <Icon name="arrow" size={14}/>
          </button>
        </div>
      </div>
    </section>
  );
}

function StepCardV6({ step: s, audience, bulletsOut, cardIndex = 0, revealed, revealDelay = 0 }) {
  return (
    <div className="r-step-card" style={{
      position: "relative",
      background: "linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.02) 100%)",
      border: "0.5px solid rgba(255,255,255,0.12)",
      borderRadius: 20,
      padding: "32px 28px 28px",
      display: "flex", flexDirection: "column",
      minHeight: 460,
      overflow: "hidden",
      backdropFilter: "blur(12px)",
      boxShadow: `0 24px 60px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.06)`,
      opacity: revealed ? 1 : 0,
      transform: revealed ? "translateY(0)" : "translateY(12px)",
      transition: `opacity 300ms ease-out ${revealDelay}ms, transform 300ms ease-out ${revealDelay}ms`,
    }}>
      {/* Big watermark numeral */}
      <div className="serif" style={{
        position: "absolute",
        top: -28, right: -8,
        fontSize: 220, lineHeight: 1,
        color: s.accent,
        opacity: 0.08,
        fontWeight: 400, fontStyle: "italic",
        pointerEvents: "none",
        letterSpacing: "-0.05em",
      }}>
        {s.n}
      </div>

      {/* Glow blob */}
      <div style={{
        position: "absolute",
        top: -80, right: -80,
        width: 260, height: 260,
        background: `radial-gradient(circle, ${s.glow}, transparent 65%)`,
        pointerEvents: "none",
      }}/>

      {/* Tag */}
      <div style={{
        fontSize: 10.5, letterSpacing: ".10em", textTransform: "uppercase",
        color: s.accent, fontWeight: 600,
        marginBottom: 22, position: "relative", zIndex: 2,
      }}>
        Step {s.n} · <span style={{ color: "rgba(255,255,255,0.55)", fontWeight: 500 }}>{s.tag.split("·")[1]?.trim()}</span>
      </div>

      {/* Icon medallion */}
      <div style={{
        width: 56, height: 56, borderRadius: 16,
        background: `linear-gradient(135deg, ${s.accent}40, ${s.accent}15)`,
        border: `1px solid ${s.accent}50`,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        color: s.accent, marginBottom: 22,
        position: "relative", zIndex: 2,
        boxShadow: `0 8px 24px ${s.glow}`,
        animation: revealed ? `icon-pulse 700ms ease-out ${revealDelay + 200}ms 1` : "none",
      }}>
        <Icon name={s.icon} size={24} strokeWidth={1.8}/>
      </div>

      {/* Headline */}
      <h3 className="display" style={{
        fontSize: 28, lineHeight: 1.1, letterSpacing: "-0.02em",
        margin: "0 0 6px", fontWeight: 500, color: "#FFFFFF",
        position: "relative", zIndex: 2,
      }}>
        {s.title}
      </h3>
      <div className="serif" style={{
        fontSize: 20, lineHeight: 1.2, letterSpacing: "-0.01em",
        color: s.accent, marginBottom: 16, fontStyle: "italic",
        position: "relative", zIndex: 2,
      }}>
        {s.italic}
      </div>

      {/* Body */}
      <p style={{
        fontSize: 14, lineHeight: 1.6, margin: "0 0 22px",
        color: "rgba(255,255,255,0.74)",
        position: "relative", zIndex: 2,
      }}>
        {s.body}
      </p>

      {/* Audience-aware bullets — fade out simultaneously, fade in staggered per card */}
      <div style={{
        display: "flex", flexDirection: "column", gap: 9,
        paddingTop: 18, marginTop: "auto",
        borderTop: "0.5px solid rgba(255,255,255,0.10)",
        position: "relative", zIndex: 2,
        opacity: bulletsOut ? 0 : 1,
        transform: bulletsOut ? "translateY(4px)" : "translateY(0)",
        transition: bulletsOut
          ? "opacity 150ms ease-in, transform 150ms ease-in"
          : `opacity 220ms ease-out ${cardIndex * 80}ms, transform 220ms ease-out ${cardIndex * 80}ms`,
      }}>
        {s.bullets[audience].map((b, i) => (
          <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 13, color: "rgba(255,255,255,0.84)", lineHeight: 1.45 }}>
            <span style={{
              width: 6, height: 6, borderRadius: 999,
              background: s.accent, marginTop: 7,
              flexShrink: 0,
            }}/>
            {b}
          </div>
        ))}
      </div>
    </div>
  );
}

function JourneyConnector({ accent, revealed, revealDelay = 0 }) {
  const [drawn, setDrawn] = React.useState(false);
  React.useEffect(() => {
    if (!revealed) return;
    const t = setTimeout(() => setDrawn(true), revealDelay);
    return () => clearTimeout(t);
  }, [revealed, revealDelay]);

  return (
    <div className="r-journey-connector" style={{
      display: "flex", alignItems: "center", justifyContent: "center",
      position: "relative",
    }}>
      <svg width="36" height="20" viewBox="0 0 36 20" style={{ overflow: "visible" }}>
        <defs>
          <linearGradient id={`arr-${accent.slice(1)}`} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%"  stopColor="rgba(255,255,255,0.15)"/>
            <stop offset="100%" stopColor={accent}/>
          </linearGradient>
          <linearGradient id={`shim-${accent.slice(1)}`} x1="0" y1="0" x2="1" y2="0">
            <stop offset="0%"   stopColor={accent} stopOpacity="0"/>
            <stop offset="50%"  stopColor={accent} stopOpacity="0.7"/>
            <stop offset="100%" stopColor={accent} stopOpacity="0"/>
          </linearGradient>
        </defs>
        {/* Drawing-in dashed line */}
        <line x1="0" y1="10" x2="28" y2="10"
              stroke={`url(#arr-${accent.slice(1)})`}
              strokeWidth="1.5" strokeDasharray="28"
              strokeDashoffset={drawn ? 0 : 28}
              style={{ transition: "stroke-dashoffset 200ms ease-out" }}/>
        {/* Ambient shimmer overlay */}
        {drawn && (
          <line x1="0" y1="10" x2="28" y2="10"
                stroke={`url(#shim-${accent.slice(1)})`}
                strokeWidth="2.5"
                style={{ animation: "chevron-shimmer 4s ease-in-out infinite" }}/>
        )}
        {/* Arrowhead */}
        <path d="M 24 5 L 30 10 L 24 15" fill="none"
              stroke={accent} strokeWidth="1.8"
              strokeLinecap="round" strokeLinejoin="round"
              style={{ opacity: drawn ? 1 : 0, transition: "opacity 180ms ease-out 180ms" }}/>
        {/* Pulse halo */}
        {drawn && (
          <circle cx="30" cy="10" r="3" fill={accent} opacity="0.4">
            <animate attributeName="r" values="3;6;3" dur="2.2s" repeatCount="indefinite"/>
            <animate attributeName="opacity" values="0.4;0.05;0.4" dur="2.2s" repeatCount="indefinite"/>
          </circle>
        )}
      </svg>
    </div>
  );
}

function KeysFlourish() {
  return (
    <svg viewBox="0 0 64 64" width="48" height="48" aria-hidden="true">
      <defs>
        <linearGradient id="keyGold" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#F0CB7A"/>
          <stop offset="100%" stopColor="#A07A36"/>
        </linearGradient>
        <radialGradient id="keyHalo" cx="50%" cy="50%" r="50%">
          <stop offset="0%" stopColor="#E8A83A" stopOpacity="0.55"/>
          <stop offset="100%" stopColor="#E8A83A" stopOpacity="0"/>
        </radialGradient>
      </defs>
      <circle cx="32" cy="32" r="30" fill="url(#keyHalo)"/>
      <g transform="rotate(-22 32 32)">
        <circle cx="32" cy="20" r="9" fill="none" stroke="url(#keyGold)" strokeWidth="3.5"/>
        <circle cx="32" cy="20" r="3" fill="#0A1830"/>
        <rect x="30.5" y="28" width="3" height="26" fill="url(#keyGold)"/>
        <rect x="33.5" y="44" width="6" height="2.6" fill="url(#keyGold)"/>
        <rect x="33.5" y="49" width="4" height="2.6" fill="url(#keyGold)"/>
      </g>
    </svg>
  );
}

// ── Built for every move (BIG property cards + insights) ───────────────
function BuiltForEveryMoveV5() {
  const props = [
    { photoA: "assets/houseroom.png", photoB: "assets/house-1.png", price: "€585,000", loc: "Ranelagh, Dublin 6",      beds: 3, baths: 2, ber: "A3", score: 92, scoreLabel: "Great match" },
    { photoA: "assets/houseroom.png", photoB: "assets/house-2.png", price: "€350,000", loc: "Douglas, Cork",            beds: 3, baths: 2, ber: "B1", score: 86, scoreLabel: "Strong match" },
    { photoA: "assets/houseroom.png", photoB: "assets/house-3.png", price: "€695,000", loc: "Ballsbridge, Dublin 4",    beds: 4, baths: 3, ber: "A2", score: 78, scoreLabel: "Good match" },
    { photoA: "assets/houseroom.png", photoB: "assets/house-4.png", price: "€295,000", loc: "Castletroy, Limerick",     beds: 3, baths: 2, ber: "B2", score: 74, scoreLabel: "Worth viewing" },
    { photoA: "assets/houseroom.png", photoB: "assets/house-5.png", price: "€465,000", loc: "Salthill, Galway",         beds: 4, baths: 2, ber: "A3", score: 69, scoreLabel: "Stretch match" },
  ];

  return (
    <section style={{ padding: "100px 48px", background: "#FFFFFF" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto" }}>
        {/* Header — full width, title left, CTA right */}
        <div className="r-built-header" style={{
          display: "flex", justifyContent: "space-between", alignItems: "flex-end",
          gap: 40, marginBottom: 40, flexWrap: "wrap",
        }}>
          <div style={{ maxWidth: 720 }}>
            <div style={{ fontSize: 11, color: "#1E5BFF", letterSpacing: ".10em", textTransform: "uppercase", fontWeight: 500, marginBottom: 14 }}>Built for every move</div>
            <h2 className="display" style={{ fontSize: 44, margin: "0 0 16px", lineHeight: 1.05, letterSpacing: "-0.025em", fontWeight: 500 }}>
              Whatever life brings. <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>We've got your back.</span>
            </h2>
            <p style={{ fontSize: 15, color: "var(--ink-2)", margin: 0, lineHeight: 1.6, maxWidth: 600 }}>
              Live matches scored against your goal, finances and life — plus the area data that makes the call obvious.
            </p>
          </div>
          <button style={{
            background: "#1E5BFF", color: "#FFFFFF",
            border: 0, padding: "14px 26px", borderRadius: 12,
            fontSize: 15, fontWeight: 500,
            display: "inline-flex", alignItems: "center", gap: 10,
            boxShadow: "0 8px 22px rgba(30,91,255,0.28)",
            flexShrink: 0,
          }}>
            <Icon name="search" size={15}/> Find a property <Icon name="arrow" size={15}/>
          </button>
        </div>

        {/* Full-width property + map row */}
        <div className="r-bfem" style={{ display: "grid", gridTemplateColumns: "1.7fr 1fr", gap: 22 }}>
          <div style={{
            background: "#FBF8F2",
            border: "0.5px solid var(--border)",
            borderRadius: 20, padding: 22,
            display: "flex", flexDirection: "column", gap: 4,
            boxShadow: "0 4px 24px rgba(10,24,48,0.05)",
          }}>
            {props.map((p, i) => (
              <div key={i} className="r-prop-row" style={{
                display: "grid", gridTemplateColumns: "180px 180px 1fr auto",
                gap: 20, alignItems: "center",
                padding: "14px 6px",
                borderBottom: i < props.length - 1 ? "0.5px solid var(--border)" : "none",
              }}>
                <div style={{
                  height: 140, background: `url(${p.photoA})`,
                  backgroundSize: "cover", backgroundPosition: "center",
                  borderRadius: 12,
                }}/>
                <div style={{
                  height: 140, background: `url(${p.photoB})`,
                  backgroundSize: "cover", backgroundPosition: "center",
                  borderRadius: 12,
                }}/>
                <div className="r-prop-meta">
                  <div className="tnum display" style={{ fontSize: 26, fontWeight: 500, color: "var(--ink)", letterSpacing: "-0.015em", lineHeight: 1.1 }}>{p.price}</div>
                  <div style={{ fontSize: 14, color: "var(--ink-3)", marginTop: 6 }}>{p.loc}</div>
                  <div className="tnum" style={{ fontSize: 12.5, color: "var(--ink-3)", marginTop: 10, display: "flex", gap: 14 }}>
                    <span>🛏 {p.beds}</span><span>🛁 {p.baths}</span><span>BER {p.ber}</span>
                  </div>
                </div>
                <div className="r-prop-score" style={{ textAlign: "right", paddingRight: 14 }}>
                  <div className="tnum display" style={{ fontSize: 46, color: "var(--green-2)", lineHeight: 1, fontWeight: 600, letterSpacing: "-0.025em" }}>{p.score}</div>
                  <div style={{ fontSize: 11.5, color: "var(--ink-3)", marginTop: 8 }}>{p.scoreLabel}</div>
                </div>
              </div>
            ))}
          </div>

          <AreaInsightsCard/>
        </div>
      </div>
    </section>
  );
}

function AreaInsightsCard() {
  return (
    <div className="r-area-insights" style={{
      background: "#FBF8F2",
      border: "0.5px solid var(--border)",
      borderRadius: 18, padding: 20,
      display: "flex", flexDirection: "column",
      gap: 16,
      boxShadow: "0 4px 24px rgba(10,24,48,0.05)",
      height: "100%",
    }}>
      <div>
        <div style={{ fontSize: 17, fontWeight: 500, marginBottom: 10, letterSpacing: "-0.01em" }}>Ranelagh, Dublin 6</div>
        <div style={{ display: "flex", gap: 6, marginBottom: 18, flexWrap: "wrap" }}>
          <span style={{ fontSize: 11, padding: "4px 10px", borderRadius: 999, background: "var(--green-soft)", color: "var(--green-2)", fontWeight: 600 }}>High demand</span>
          <span style={{ fontSize: 11, padding: "4px 10px", borderRadius: 999, background: "var(--clay-soft)", color: "#7E4318", fontWeight: 600 }}>Family friendly</span>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 10, fontSize: 13, color: "var(--ink-2)" }}>
          <div style={{ display: "flex", justifyContent: "space-between" }}><span>Avg. price (3m)</span><span className="tnum" style={{ color: "var(--ink)", fontWeight: 500 }}>€612,000 <span style={{ color: "var(--green-2)", fontSize: 11 }}>+4.2%</span></span></div>
          <div style={{ display: "flex", justifyContent: "space-between" }}><span>Price trend (12m)</span><span className="tnum" style={{ color: "var(--green-2)", fontWeight: 500 }}>+6.1%</span></div>
          <div style={{ display: "flex", justifyContent: "space-between" }}><span>Commute to city</span><span className="tnum" style={{ color: "var(--ink)" }}>18–24 min</span></div>
          <div style={{ display: "flex", justifyContent: "space-between" }}><span>Top schools</span><span className="tnum" style={{ color: "var(--ink)" }}>6</span></div>
          <div style={{ display: "flex", justifyContent: "space-between" }}><span>Parks &amp; green</span><span className="tnum" style={{ color: "var(--ink)" }}>7</span></div>
          <div style={{ display: "flex", justifyContent: "space-between" }}><span>Walkability</span><span className="tnum" style={{ color: "var(--ink)" }}>92 / 100</span></div>
        </div>
        <a style={{ marginTop: 14, display: "inline-flex", alignItems: "center", gap: 4, fontSize: 12.5, color: "#1E5BFF", fontWeight: 500 }}>
          View area insights <Icon name="arrow" size={12}/>
        </a>
      </div>
      <FauxMap/>
    </div>
  );
}

function FauxMap() {
  return (
    <div className="r-faux-map" style={{
      background: "linear-gradient(135deg, #E8EEF6 0%, #D8E3F0 100%)",
      borderRadius: 12,
      position: "relative",
      overflow: "hidden",
      flex: 1,
      minHeight: 360,
    }}>
      <svg viewBox="0 0 320 380" style={{ position: "absolute", inset: 0, width: "100%", height: "100%" }} preserveAspectRatio="xMidYMid slice">
        {/* major roads */}
        <path d="M 0 90 Q 120 110 200 75 T 320 130" stroke="#FFFFFF" strokeWidth="5" fill="none"/>
        <path d="M 50 0 Q 70 160 110 220 T 160 380" stroke="#FFFFFF" strokeWidth="4.5" fill="none"/>
        <path d="M 220 0 Q 240 100 250 180 T 320 380" stroke="#FFFFFF" strokeWidth="4" fill="none"/>
        <path d="M 0 240 L 320 260" stroke="#FFFFFF" strokeWidth="3.5" fill="none"/>
        <path d="M 0 320 L 320 335" stroke="#FFFFFF" strokeWidth="3" fill="none"/>
        {/* minor */}
        <path d="M 30 50 L 290 60" stroke="#FFFFFF" strokeWidth="1.5" fill="none" opacity="0.55"/>
        <path d="M 110 0 L 130 380" stroke="#FFFFFF" strokeWidth="1.5" fill="none" opacity="0.55"/>
        <path d="M 180 0 L 200 380" stroke="#FFFFFF" strokeWidth="1.5" fill="none" opacity="0.55"/>
        {/* river */}
        <path d="M 0 360 Q 80 340 160 350 T 320 360" stroke="#B8D4F0" strokeWidth="14" fill="none" opacity="0.7"/>
        {/* boundary polygon */}
        <path d="M 70 80 L 230 65 L 275 180 L 220 280 L 90 265 Z"
              fill="rgba(30,91,255,0.10)" stroke="#1E5BFF" strokeWidth="2.2" strokeDasharray="6 4"/>
        {/* pins */}
        {[
          { x: 145, y: 130 },
          { x: 215, y: 200 },
          { x: 125, y: 225 },
          { x: 195, y: 100 },
          { x: 105, y: 175 },
        ].map((pt, i) => (
          <g key={i}>
            <circle cx={pt.x} cy={pt.y + 4} r="6" fill="rgba(10,24,48,0.20)"/>
            <path d={`M ${pt.x} ${pt.y - 14} C ${pt.x - 8} ${pt.y - 14} ${pt.x - 8} ${pt.y - 4} ${pt.x} ${pt.y + 4} C ${pt.x + 8} ${pt.y - 4} ${pt.x + 8} ${pt.y - 14} ${pt.x} ${pt.y - 14} Z`}
                  fill="#1E5BFF"/>
            <circle cx={pt.x} cy={pt.y - 9} r="3" fill="#FFFFFF"/>
          </g>
        ))}
      </svg>
    </div>
  );
}

// ── Family support — proper 3-area layout per reference ────────────────
function FamilySupportV5() {
  return (
    <section id="families" style={{ padding: "100px 48px", background: "#FBF8F2" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div className="r-family" style={{ display: "grid", gridTemplateColumns: "1fr 1.5fr 1.5fr", gap: 24, alignItems: "stretch" }}>
          {/* Copy column */}
          <div style={{ paddingTop: 12 }}>
            <div style={{ fontSize: 11, color: "#1E5BFF", letterSpacing: ".10em", textTransform: "uppercase", fontWeight: 500, marginBottom: 14 }}>Family support</div>
            <h2 className="display" style={{ fontSize: 34, margin: "0 0 18px", lineHeight: 1.1, letterSpacing: "-0.025em", fontWeight: 500 }}>
              Helping the Next<br/>Generation. <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>Handled together.</span>
            </h2>
            <p style={{ fontSize: 14, color: "var(--ink-2)", margin: 0, lineHeight: 1.6 }}>
              Coordinate contributions, track milestones and keep everyone aligned.
            </p>
          </div>

          {/* Contribution plan */}
          <ContributionCard/>

          {/* What's next + photo */}
          <div className="r-family-photo-grid" style={{
            background: "#FFFFFF",
            border: "0.5px solid var(--border)",
            borderRadius: 16,
            overflow: "hidden",
            boxShadow: "0 4px 20px rgba(10,24,48,0.04)",
            display: "grid",
            gridTemplateColumns: "1fr 1fr",
            minHeight: 280,
          }}>
            <WhatsNextCard/>
            <div style={{
              background: "url(assets/mother-daughter.png)",
              backgroundSize: "cover",
              backgroundPosition: "center",
            }}/>
          </div>
        </div>
      </div>
    </section>
  );
}

function ContributionCard() {
  const ppl = [
    { name: "Emma",     role: "(You)",    amt: 10000, avatar: "emma"   },
    { name: "Dad",      role: "Patrick",  amt: 10000, avatar: "dad"    },
    { name: "Mum",      role: "Siobhán",  amt:  7000, avatar: "mum"    },
    { name: "Grandma",  role: "Nana Joan",amt:  5000, avatar: "nana"   },
  ];
  const total = 32000;
  const goal = 80000;
  const pct = (total / goal) * 100;

  return (
    <div style={{
      background: "#FFFFFF", border: "0.5px solid var(--border)",
      borderRadius: 16, padding: 22,
      boxShadow: "0 4px 20px rgba(10,24,48,0.04)",
      display: "flex", flexDirection: "column",
    }}>
      <div style={{ marginBottom: 16 }}>
        <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4, color: "var(--ink)", letterSpacing: "-0.005em" }}>Contribution plan</div>
        <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>Everyone chipping in for Emma's first home</div>
      </div>

      <div className="tnum display" style={{ fontSize: 32, fontWeight: 500, letterSpacing: "-0.02em", color: "var(--ink)", marginBottom: 6 }}>
        €32,000 <span style={{ fontSize: 14, color: "var(--ink-3)", fontWeight: 400 }}>/ €80,000 goal</span>
      </div>
      <div style={{ height: 6, borderRadius: 999, background: "var(--soft)", overflow: "hidden", marginBottom: 4 }}>
        <div style={{ width: `${pct}%`, height: "100%", background: "#1E5BFF" }}/>
      </div>
      <div style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 20 }} className="tnum">
        {Math.round(pct)}% · 4 family members contributing
      </div>

      {/* TWO-COLUMN family list with photo avatars */}
      <div className="r-contrib-people" style={{
        display: "grid",
        gridTemplateColumns: "1fr 1fr",
        gap: 10, flex: 1, marginBottom: 18,
      }}>
        {ppl.map((p, i) => (
          <div key={i} style={{
            display: "flex", flexDirection: "column",
            alignItems: "flex-start", gap: 10,
            padding: 12,
            background: "#FBF8F2",
            border: "0.5px solid var(--border)",
            borderRadius: 12,
          }}>
            <FamilyAvatar kind={p.avatar} size={56}/>
            <div style={{ width: "100%" }}>
              <div style={{ fontSize: 13, fontWeight: 600, color: "var(--ink)", lineHeight: 1.1 }}>
                {p.name} <span style={{ fontWeight: 400, color: "var(--ink-3)", fontSize: 11 }}>{p.role}</span>
              </div>
              <div className="tnum display" style={{ fontSize: 18, color: "var(--ink)", fontWeight: 500, letterSpacing: "-0.01em", marginTop: 4 }}>
                €{p.amt.toLocaleString()}
              </div>
            </div>
          </div>
        ))}
      </div>

      <button style={{
        background: "#0A1830", color: "#FFFFFF",
        border: 0, padding: "11px 18px", borderRadius: 8,
        fontSize: 13, fontWeight: 500,
        alignSelf: "flex-start",
        display: "inline-flex", alignItems: "center", gap: 8,
      }}>
        <Icon name="plus" size={13}/> Invite family
      </button>
    </div>
  );
}

// Illustrated portrait-style SVG avatars — warm, photo-feeling
function FamilyAvatar({ kind, size = 56 }) {
  const looks = {
    emma: { skin: "#F2C9A3", hair: "#C58A4A", hairBg: "#A86E2E", bg: "linear-gradient(135deg, #FFE6CF, #F2C9A3)", shirt: "#1E5BFF" },
    dad:  { skin: "#E8B68B", hair: "#5A5A5A", hairBg: "#3D3D3D", bg: "linear-gradient(135deg, #D9E4F2, #B6CFEB)", shirt: "#3D6A4F" },
    mum:  { skin: "#F0BD92", hair: "#D9A85A", hairBg: "#A87F40", bg: "linear-gradient(135deg, #FFEBC8, #F4D7A8)", shirt: "#E8A83A" },
    nana: { skin: "#F0C3A3", hair: "#E4E4E4", hairBg: "#BDBDBD", bg: "linear-gradient(135deg, #F3E8DD, #E4D2BE)", shirt: "#C76B3C" },
  };
  const l = looks[kind] || looks.emma;
  const s = size;
  const id = `avat-${kind}`;
  return (
    <div style={{
      width: s, height: s, borderRadius: 999,
      background: l.bg,
      overflow: "hidden",
      position: "relative",
      flexShrink: 0,
      boxShadow: "0 2px 8px rgba(10,24,48,0.10)",
      border: "2px solid #FFFFFF",
      outline: "0.5px solid rgba(10,24,48,0.08)",
    }}>
      <svg viewBox="0 0 56 56" width={s} height={s} style={{ display: "block" }}>
        <defs>
          <clipPath id={id + "-clip"}>
            <circle cx="28" cy="28" r="28"/>
          </clipPath>
        </defs>
        <g clipPath={`url(#${id}-clip)`}>
          {/* Hair back */}
          <ellipse cx="28" cy="22" rx="15" ry="14" fill={l.hairBg}/>
          {/* Neck */}
          <rect x="22" y="34" width="12" height="10" fill={l.skin}/>
          {/* Face */}
          <ellipse cx="28" cy="25" rx="11" ry="13" fill={l.skin}/>
          {/* Hair front */}
          {kind === "emma" && (
            <path d="M 17 22 Q 18 12 28 11 Q 38 12 39 22 Q 38 17 33 16 Q 28 14 23 16 Q 18 17 17 22 Z" fill={l.hair}/>
          )}
          {kind === "mum" && (
            <path d="M 17 22 Q 17 13 28 12 Q 39 13 39 22 Q 36 16 33 15 Q 28 13 23 15 Q 20 16 17 22 Z" fill={l.hair}/>
          )}
          {kind === "dad" && (
            <path d="M 18 21 Q 19 14 28 13 Q 37 14 38 21 Q 36 18 34 17 Q 28 16 22 17 Q 20 18 18 21 Z" fill={l.hair}/>
          )}
          {kind === "nana" && (
            <>
              <path d="M 16 22 Q 16 13 28 12 Q 40 13 40 22 Q 37 17 33 16 Q 28 14 23 16 Q 19 17 16 22 Z" fill={l.hair}/>
              <ellipse cx="20" cy="24" rx="3" ry="5" fill={l.hair}/>
              <ellipse cx="36" cy="24" rx="3" ry="5" fill={l.hair}/>
            </>
          )}
          {/* Eyes */}
          <ellipse cx="24" cy="26" rx="1.2" ry="1.5" fill="#2A2A2A"/>
          <ellipse cx="32" cy="26" rx="1.2" ry="1.5" fill="#2A2A2A"/>
          {/* Cheeks */}
          <circle cx="22" cy="30" r="1.3" fill="rgba(217,93,72,0.20)"/>
          <circle cx="34" cy="30" r="1.3" fill="rgba(217,93,72,0.20)"/>
          {/* Smile */}
          <path d="M 25 31.5 Q 28 33.5 31 31.5" stroke="#7A4530" strokeWidth="0.8" fill="none" strokeLinecap="round"/>
          {/* Shirt */}
          <path d="M 10 56 Q 14 42 22 42 L 34 42 Q 42 42 46 56 Z" fill={l.shirt}/>
          {/* Shirt collar v */}
          <path d="M 24 42 Q 28 47 32 42" fill={l.skin}/>
        </g>
      </svg>
    </div>
  );
}

function WhatsNextCard() {
  return (
    <div style={{ padding: 22, display: "flex", flexDirection: "column" }}>
      <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 16, color: "var(--ink)", letterSpacing: "-0.005em" }}>What's next</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        <NextRow color="#1E5BFF" icon="check"    title="Mortgage AIP"        sub="In progress"/>
        <NextRow color="#E8A83A" icon="calendar" title="Viewings this week"  sub="2 scheduled"/>
        <NextRow color="#3D6A4F" icon="bolt"     title="Offer strategy"      sub="Ready when you are"/>
      </div>
    </div>
  );
}

function NextRow({ color, icon, title, sub }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "30px 1fr", gap: 12, alignItems: "flex-start" }}>
      <span style={{
        width: 30, height: 30, borderRadius: 8,
        background: `${color}1A`, color,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        flexShrink: 0,
      }}>
        <Icon name={icon} size={14}/>
      </span>
      <div>
        <div style={{ fontSize: 13, fontWeight: 500, color: "var(--ink)" }}>{title}</div>
        <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{sub}</div>
      </div>
    </div>
  );
}

window.OldVsNewV5 = OldVsNewV5;
window.BridgeQuoteV5 = BridgeQuoteV5;
window.HowItWorksV5 = HowItWorksV5;
window.BuiltForEveryMoveV5 = BuiltForEveryMoveV5;
window.FamilySupportV5 = FamilySupportV5;