// v5_lifecycle_footer.jsx — 8-mode lifecycle grid + richer site footer

// ── 8-mode lifecycle marquee — infinite horizontal scroll ─────────────
function LifecycleGridV5() {
  const modes = [
    { tag: "Live · v1",   status: "live",   statusText: "LIVE NOW",
      title: "First-time renter",      persona: "Aisling, 28 · Dublin",
      copy: "Verified listings · drafted applications · landlord matching.",
      photo: "assets/houseroom.png",   avatar: "f1" },
    { tag: "Live · v1",   status: "live",   statusText: "LIVE NOW",
      title: "Active renter",          persona: "Mark, 31 · Galway",
      copy: "RTB-compliant rent tracking · deposit safeguards · move-in support.",
      photo: "assets/house-2.png",     avatar: "m1" },
    { tag: "Live · v1",   status: "live",   statusText: "LIVE NOW",
      title: "Saving to buy",          persona: "Niamh & Eoin, 32 · Cork",
      copy: "Affordability clarity · HTB & FHS modelling · readiness coaching.",
      photo: "assets/house-1.png",     avatar: "couple1" },
    { tag: "Live · v1",   status: "live",   statusText: "LIVE NOW",  primary: true,
      title: "First-time buyer",       persona: "Aoife & Cian, 33 · Dublin",
      copy: "AIP autopilot · property scoring · negotiation & conveyancing.",
      photo: "assets/house-3.png",     avatar: "couple2" },
    { tag: "Q4 2026",     status: "soon",  statusText: "COMING Q4 2026",
      title: "Upsizing",               persona: "The Murphys, 38 · Wicklow",
      copy: "Chain choreography · bridging finance · stamp duty at the higher tier.",
      photo: "assets/house-4.png",     avatar: "f2" },
    { tag: "Q1 2027",     status: "soon",  statusText: "COMING Q1 2027",
      title: "Downsizing",             persona: "Maeve, 64 · Killarney",
      copy: "Equity release · right-size analysis · care-proximity filter.",
      photo: "assets/house-5.png",     avatar: "f3" },
    { tag: "Q1 2027",     status: "soon",  statusText: "COMING Q1 2027",
      title: "Helping the Next Generation",       persona: "Patrick & Siobhán · Limerick",
      copy: "CAT thresholds · gift letters · sibling fairness register.",
      photo: "assets/mother-daughter.png", avatar: "couple3" },
    { tag: "Q2 2027",     status: "soon",  statusText: "COMING Q2 2027",
      title: "Inherited property",     persona: "John, 47 · Sligo",
      copy: "Probate routing · sell / rent / keep modelling · solicitor matching.",
      photo: "assets/house-2.png",     avatar: "m2" },
  ];
  // duplicate for seamless infinite scroll
  const track = [...modes, ...modes];

  return (
    <section id="lifecycle" style={{ padding: "100px 0", background: "#FBF8F2", overflow: "hidden" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto", padding: "0 48px" }}>
        <div style={{ textAlign: "center", marginBottom: 48, maxWidth: 760, marginLeft: "auto", marginRight: "auto" }}>
          <div style={{ fontSize: 11, color: "#1E5BFF", letterSpacing: ".10em", textTransform: "uppercase", fontWeight: 500, marginBottom: 14 }}>
            One asset · a lifetime of decisions.
          </div>
          <h2 className="display" style={{ fontSize: 44, margin: "0 0 14px", lineHeight: 1.05, letterSpacing: "-0.025em", fontWeight: 500 }}>
            An AI to support <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>any lifecycle stage.</span>
          </h2>
          <p style={{ fontSize: 15, color: "var(--ink-2)", margin: 0, lineHeight: 1.55, maxWidth: 580, marginLeft: "auto", marginRight: "auto" }}>
            Renting today. Saving tomorrow. Bidding next year. Helping your kid the year after that. HomeSplicer stays — one account, every move.
          </p>
        </div>
      </div>

      {/* The marquee */}
      <div className="lifecycle-marquee" style={{
        position: "relative",
        overflow: "hidden",
        WebkitMaskImage: "linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%)",
        maskImage: "linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%)",
      }}>
        <div className="lifecycle-track" style={{
          display: "flex", gap: 16,
          padding: "12px 24px",
          width: "max-content",
          animation: "lifecycle-scroll 70s linear infinite",
        }}>
          {track.map((m, i) => (
            <LifecycleCard key={i} m={m}/>
          ))}
        </div>
      </div>

      <style>{`
        @keyframes lifecycle-scroll {
          from { transform: translateX(0); }
          to   { transform: translateX(-50%); }
        }
        .lifecycle-marquee:hover .lifecycle-track { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) {
          .lifecycle-track { animation: none !important; }
        }
      `}</style>
    </section>
  );
}

function LifecycleCard({ m }) {
  const live = m.status === "live";
  return (
    <div style={{
      width: 320, flexShrink: 0,
      background: m.primary ? "var(--ink)" : "#FFFFFF",
      color: m.primary ? "#FFFFFF" : "var(--ink)",
      border: m.primary ? "0.5px solid var(--ink)" : "0.5px solid var(--border)",
      borderRadius: 16, overflow: "hidden",
      boxShadow: m.primary ? "0 12px 30px rgba(10,24,48,0.25)" : "0 2px 14px rgba(10,24,48,0.06)",
      display: "flex", flexDirection: "column",
      opacity: m.status === "soon" ? 0.96 : 1,
    }}>
      {/* Photo header with gradient overlay */}
      <div style={{
        height: 150,
        backgroundImage: `linear-gradient(180deg, rgba(10,24,48,0.05) 0%, rgba(10,24,48,0.55) 100%), url(${m.photo})`,
        backgroundSize: "cover",
        backgroundPosition: "center",
        position: "relative",
      }}>
        {/* Avatar (bottom-left, overlapping) */}
        <div style={{
          position: "absolute", bottom: -22, left: 16,
        }}>
          <PersonaAvatar kind={m.avatar} size={48}/>
        </div>

        {/* Persona name (bottom-right) */}
        <div style={{
          position: "absolute", bottom: 8, right: 12,
          fontSize: 10.5, color: "rgba(255,255,255,0.95)",
          textShadow: "0 1px 2px rgba(0,0,0,0.4)",
          fontWeight: 500,
        }}>
          {m.persona}
        </div>
      </div>

      {/* Body */}
      <div style={{ padding: "32px 20px 22px", display: "flex", flexDirection: "column", flex: 1 }}>
        <h3 style={{ fontSize: 18, fontWeight: 600, margin: "0 0 8px", letterSpacing: "-0.01em" }}>
          {m.title}
        </h3>
        <p style={{ fontSize: 12.5, lineHeight: 1.55, margin: 0, opacity: 0.78 }}>{m.copy}</p>
      </div>
    </div>
  );
}

// Small persona-style SVG avatars — 8 distinct looks
function PersonaAvatar({ kind = "f1", size = 48 }) {
  const looks = {
    f1:     { skin: "#F2C9A3", hair: "#3A2415", bg: "#B8C7DB" },
    f2:     { skin: "#E8B68B", hair: "#C58A4A", bg: "#D6BFAB" },
    f3:     { skin: "#F0BD92", hair: "#D5D5D5", bg: "#E6D4BB" },
    m1:     { skin: "#D4A175", hair: "#1F1F1F", bg: "#A8BCD2" },
    m2:     { skin: "#E0AF85", hair: "#6B4A2E", bg: "#C2B59B" },
    couple1:{ skin: "#F2C9A3", skin2:"#D4A175", hair: "#C58A4A", hair2:"#3A2415", bg:"#B8C7DB", couple:true },
    couple2:{ skin: "#F0BD92", skin2:"#E0AF85", hair: "#3A2415", hair2:"#1F1F1F", bg:"#D6BFAB", couple:true },
    couple3:{ skin: "#E8B68B", skin2:"#D4A175", hair: "#D5D5D5", hair2:"#6B4A2E", bg:"#C2B59B", couple:true },
  };
  const l = looks[kind];
  const s = size;
  return (
    <div style={{
      width: s, height: s, borderRadius: 999,
      background: l.bg, overflow: "hidden", position: "relative",
      border: "2.5px solid #FFFFFF",
      boxShadow: "0 4px 12px rgba(10,24,48,0.20)",
      flexShrink: 0,
    }}>
      <svg viewBox="0 0 48 48" width={s} height={s}>
        <defs><clipPath id={`pclip-${kind}`}><circle cx="24" cy="24" r="24"/></clipPath></defs>
        <g clipPath={`url(#pclip-${kind})`}>
          {l.couple ? (
            <>
              {/* Left person */}
              <g transform="translate(-4 4)">
                <ellipse cx="20" cy="18" rx="9" ry="11" fill={l.skin}/>
                <path d="M 11 18 Q 12 9 20 8 Q 28 9 29 18 Q 27 13 24 12 Q 20 11 16 12 Q 13 13 11 18 Z" fill={l.hair}/>
                <ellipse cx="17" cy="19" rx="1" ry="1.2" fill="#2A2A2A"/>
                <ellipse cx="23" cy="19" rx="1" ry="1.2" fill="#2A2A2A"/>
                <path d="M 18 23 Q 20 25 22 23" stroke="#7A4530" strokeWidth="0.7" fill="none" strokeLinecap="round"/>
                <path d="M 5 48 Q 9 32 16 32 L 24 32 Q 31 32 35 48 Z" fill="#1E5BFF"/>
              </g>
              {/* Right person */}
              <g transform="translate(8 6)">
                <ellipse cx="20" cy="18" rx="9" ry="11" fill={l.skin2}/>
                <path d="M 11 18 Q 12 9 20 8 Q 28 9 29 18 Q 27 14 24 13 Q 20 12 16 13 Q 13 14 11 18 Z" fill={l.hair2}/>
                <ellipse cx="17" cy="19" rx="1" ry="1.2" fill="#2A2A2A"/>
                <ellipse cx="23" cy="19" rx="1" ry="1.2" fill="#2A2A2A"/>
                <path d="M 18 23 Q 20 24.5 22 23" stroke="#7A4530" strokeWidth="0.7" fill="none" strokeLinecap="round"/>
                <path d="M 5 48 Q 9 33 16 33 L 24 33 Q 31 33 35 48 Z" fill="#3D6A4F"/>
              </g>
            </>
          ) : (
            <>
              <ellipse cx="24" cy="20" rx="13" ry="11" fill={l.hair} opacity="0.95"/>
              <ellipse cx="24" cy="22" rx="10" ry="12" fill={l.skin}/>
              <path d="M 11 18 Q 12 8 24 7 Q 36 8 37 18 Q 35 12 31 11 Q 24 9 17 11 Q 13 12 11 18 Z" fill={l.hair}/>
              {kind === "f3" && <><ellipse cx="14" cy="20" rx="2" ry="3.5" fill={l.hair}/><ellipse cx="34" cy="20" rx="2" ry="3.5" fill={l.hair}/></>}
              <ellipse cx="20" cy="22" rx="1.1" ry="1.4" fill="#2A2A2A"/>
              <ellipse cx="28" cy="22" rx="1.1" ry="1.4" fill="#2A2A2A"/>
              <circle cx="18" cy="26" r="1.2" fill="rgba(217,93,72,0.20)"/>
              <circle cx="30" cy="26" r="1.2" fill="rgba(217,93,72,0.20)"/>
              <path d="M 21 28 Q 24 30 27 28" stroke="#7A4530" strokeWidth="0.8" fill="none" strokeLinecap="round"/>
              <path d="M 6 48 Q 11 36 19 36 L 29 36 Q 37 36 42 48 Z" fill={kind.startsWith("m") ? "#3D6A4F" : "#1E5BFF"}/>
              <path d="M 21 36 Q 24 41 27 36" fill={l.skin}/>
            </>
          )}
        </g>
      </svg>
    </div>
  );
}

// ── Site footer (rich, replaces FooterV5 placeholder) ──────────────────
function SiteFooterV5() {
  return (
    <footer style={{ background: "#061429", color: "rgba(255,255,255,0.65)", padding: "72px 48px 32px" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>

        {/* Founder block */}
        <div className="r-founder" style={{
          background: "linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01))",
          border: "0.5px solid rgba(255,255,255,0.08)",
          borderRadius: 18,
          padding: "32px 36px",
          marginBottom: 48,
          display: "grid",
          gridTemplateColumns: "auto 1fr",
          gap: 28,
          alignItems: "center",
        }}>
          <FounderAvatar/>
          <div>
            <div style={{ fontSize: 11, color: "#7FB1FF", letterSpacing: ".10em", textTransform: "uppercase", fontWeight: 500, marginBottom: 14 }}>
              From the founder
            </div>
            <div className="serif" style={{
              fontSize: "clamp(20px, 1.8vw, 24px)", lineHeight: 1.4, color: "#FFFFFF",
              fontStyle: "italic", letterSpacing: "-0.005em", marginBottom: 14, maxWidth: 760,
            }}>
              "I built HomeSplicer after watching three friends spend two years trying to buy a home in Dublin — with no idea, on any given day, whether they were getting closer. Property in Ireland needed a customer-side advantage. So we built one."
            </div>
            <div style={{ fontSize: 13, color: "rgba(255,255,255,0.55)" }}>
              Dónal Ó Riordain · Founder · Dublin, May 2026
            </div>
          </div>
        </div>

        {/* Journal + roadmap + security */}
        <div className="r-footer-cols" style={{
          display: "grid",
          gridTemplateColumns: "2.4fr 1fr 1fr",
          gap: 32,
          marginBottom: 48,
        }}>
          {/* Journal — 3 articles */}
          <div>
            <div style={{ fontSize: 11, color: "rgba(255,255,255,0.45)", letterSpacing: ".10em", textTransform: "uppercase", fontWeight: 500, marginBottom: 18 }}>
              From the Journal
            </div>
            <div className="r-footer-journal" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 12 }}>
              <JournalCard
                eyebrow="Independence"
                title="Why we won't take agent money"
                date="03 May 2026 · 4 min read"
              />
              <JournalCard
                eyebrow="Regulation"
                title="Reading the 2026 RPZ rules, line by line"
                date="22 Apr 2026 · 9 min read"
              />
              <JournalCard
                eyebrow="Schemes"
                title="How the Help-to-Buy refund really works"
                date="14 Mar 2026 · 6 min read"
              />
            </div>
          </div>

          {/* Security & Privacy */}
          <FooterColumn title="Security & Privacy" items={[
            "GDPR-native (EU only)",
            "PSD2-licensed Open Banking",
            "Independence policy",
            "Data deletion any time",
            "Read the security paper →",
          ]}/>

          {/* About */}
          <FooterColumn title="Company" items={[
            "About",
            "Manifesto",
            "Careers · 3 open",
            "Press",
            "Contact",
          ]}/>
        </div>

        {/* Bottom strip */}
        <div style={{
          paddingTop: 24,
          borderTop: "0.5px solid rgba(255,255,255,0.08)",
          display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap",
        }}>
          <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <svg width="20" height="20" viewBox="0 0 24 24">
              <path d="M4 11.5L12 4l8 7.5V20a1 1 0 01-1 1h-5v-6h-4v6H5a1 1 0 01-1-1z" fill="#FFFFFF"/>
              <circle cx="12" cy="13" r="2.2" fill="#061429"/>
            </svg>
            <span style={{ fontSize: 15, fontWeight: 600, color: "#FFFFFF" }}>HomeSplicer</span>
            <span style={{ fontSize: 12, color: "rgba(255,255,255,0.45)" }}>· Built in Ireland</span>
          </div>
          <div style={{ display: "flex", gap: 22, fontSize: 12 }}>
            <a style={{ color: "rgba(255,255,255,0.55)" }}>Privacy</a>
            <a style={{ color: "rgba(255,255,255,0.55)" }}>Terms</a>
            <a style={{ color: "rgba(255,255,255,0.55)" }}>Independence policy</a>
            <a style={{ color: "rgba(255,255,255,0.55)" }}>Press</a>
            <a style={{ color: "rgba(255,255,255,0.55)" }}>Contact</a>
          </div>
        </div>
        <div style={{
          marginTop: 18,
          fontSize: 11, color: "rgba(255,255,255,0.4)",
        }}>
          © 2026 HomeSplicer is a trading name of Quantum Touch Limited · Registered in Ireland · 718432
        </div>
      </div>
    </footer>
  );
}

function JournalCard({ eyebrow, title, date }) {
  return (
    <a style={{
      display: "flex", flexDirection: "column", gap: 10,
      padding: "16px 16px",
      background: "rgba(255,255,255,0.04)",
      border: "0.5px solid rgba(255,255,255,0.08)",
      borderRadius: 12,
      minHeight: 140,
      justifyContent: "space-between",
      cursor: "pointer",
      transition: "all .2s",
    }}>
      <span style={{ fontSize: 10, letterSpacing: ".10em", textTransform: "uppercase", color: "rgba(127,177,255,0.85)", fontWeight: 600 }}>
        {eyebrow}
      </span>
      <span style={{ fontSize: 14, color: "#FFFFFF", fontWeight: 500, lineHeight: 1.35, letterSpacing: "-0.005em" }}>
        {title}
      </span>
      <span style={{ fontSize: 11, color: "rgba(255,255,255,0.45)" }} className="tnum">{date} →</span>
    </a>
  );
}

function FooterColumn({ title, items }) {
  return (
    <div>
      <div style={{ fontSize: 11, color: "rgba(255,255,255,0.45)", letterSpacing: ".10em", textTransform: "uppercase", fontWeight: 500, marginBottom: 18 }}>
        {title}
      </div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 10 }}>
        {items.map((it, i) => (
          <li key={i} style={{ fontSize: 13, color: "rgba(255,255,255,0.78)", cursor: "pointer" }}>{it}</li>
        ))}
      </ul>
    </div>
  );
}

function FounderAvatar() {
  return (
    <div style={{
      width: 96, height: 96, borderRadius: 999,
      background: "linear-gradient(135deg, #B6CFEB, #5E84B8)",
      overflow: "hidden", position: "relative",
      border: "3px solid rgba(255,255,255,0.10)",
      boxShadow: "0 8px 24px rgba(0,0,0,0.3)",
      flexShrink: 0,
    }}>
      <svg viewBox="0 0 96 96" width={96} height={96}>
        <defs>
          <clipPath id="founder-clip"><circle cx="48" cy="48" r="48"/></clipPath>
        </defs>
        <g clipPath="url(#founder-clip)">
          <rect width="96" height="96" fill="url(#fbg)"/>
          <linearGradient id="fbg" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="#1E5BFF"/>
            <stop offset="1" stopColor="#0A1830"/>
          </linearGradient>
          <ellipse cx="48" cy="42" rx="22" ry="20" fill="#3D2A1A"/>
          <ellipse cx="48" cy="46" rx="18" ry="22" fill="#E2B58A"/>
          <path d="M 28 42 Q 30 22 48 21 Q 66 22 68 42 Q 64 30 56 28 Q 48 26 40 28 Q 32 30 28 42 Z" fill="#5A3E1A"/>
          <ellipse cx="42" cy="46" rx="1.8" ry="2.2" fill="#1F1F1F"/>
          <ellipse cx="54" cy="46" rx="1.8" ry="2.2" fill="#1F1F1F"/>
          <path d="M 43 56 Q 48 60 53 56" stroke="#7A4530" strokeWidth="1.4" fill="none" strokeLinecap="round"/>
          <path d="M 16 96 Q 22 70 36 70 L 60 70 Q 74 70 80 96 Z" fill="#22324E"/>
          <path d="M 40 70 Q 48 78 56 70" fill="#E2B58A"/>
        </g>
      </svg>
    </div>
  );
}

window.LifecycleGridV5 = LifecycleGridV5;
window.SiteFooterV5 = SiteFooterV5;