// v5_close.jsx — Irish vocab strip, pricing, closing CTA, footer

// ── Irish vocab strip (horizontal navy) ────────────────────────────────
function IrishStripV5() {
  const terms = [
    { tag: "AIP", icon: "bldg",     desc: "Agreement in Principle" },
    { tag: "HTB", icon: "key",      desc: "Help to Buy" },
    { tag: "FHS", icon: "home",     desc: "First Home Scheme" },
    { tag: "RPZ", icon: "pin",      desc: "Rent Pressure Zone" },
    { tag: "RTB", icon: "shield",   desc: "Residential Tenancies Act" },
    { tag: "BER", icon: "bolt",     desc: "Building Energy Rating" },
    { tag: "CAT", icon: "handshake", desc: "Capital Acquisitions Tax" },
    { tag: "PPR", icon: "user",     desc: "Principal Private Residence" },
    { tag: "PSD2", icon: "lock",    desc: "Bank Data (Your consent)" },
  ];
  return (
    <section style={{
      padding: "44px 48px",
      background: "linear-gradient(180deg, #0A1F3D 0%, #061429 100%)",
      color: "#FFFFFF",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{
          fontSize: 11, color: "rgba(255,255,255,0.55)",
          letterSpacing: ".12em", textTransform: "uppercase",
          marginBottom: 22,
        }}>
          We speak Irish property fluently.
        </div>
        <div className="r-irish-grid" style={{
          display: "grid",
          gridTemplateColumns: "repeat(9, 1fr)",
          gap: 18,
        }}>
          {terms.map((t, i) => (
            <div key={i} style={{ display: "flex", flexDirection: "column", gap: 6, paddingRight: 6 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <span style={{
                  width: 26, height: 26, borderRadius: 7,
                  background: "rgba(255,255,255,0.06)",
                  border: "0.5px solid rgba(255,255,255,0.10)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                  color: "#7FB1FF",
                }}>
                  <Icon name={t.icon} size={13}/>
                </span>
                <span style={{ fontSize: 14, fontWeight: 600, letterSpacing: ".02em" }}>{t.tag}</span>
              </div>
              <div style={{ fontSize: 11, color: "rgba(255,255,255,0.6)", lineHeight: 1.35 }}>{t.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Pricing ────────────────────────────────────────────────────────────
function PricingV5() {
  const tiers = [
    {
      name: "Free", price: "€0", period: "/month",
      sub: "Essentials to get started.",
      features: ["Unlimited property alerts", "Document storage (3)", "Basic AI matching"],
      cta: "Get started", primary: false,
    },
    {
      name: "Pro", price: "€19", period: "/month",
      sub: "Everything you need to win.",
      features: ["All Free features", "Auto-filled forms", "Application templates", "Viewing coordination", "Priority AI matching"],
      cta: "Start Pro", primary: true, badge: "Most popular",
    },
    {
      name: "Pro+", price: "€39", period: "/month",
      sub: "For serious buyers.",
      features: ["All Pro features", "Mortgage form autopilot", "Offer & negotiation support", "Market intelligence", "Conveyancing partner access"],
      cta: "Start Pro+", primary: false,
    },
  ];
  return (
    <section id="pricing" style={{ padding: "100px 48px", background: "#FBF8F2" }}>
      <div style={{ maxWidth: 1320, margin: "0 auto" }}>
        {/* Header on top, centered */}
        <div style={{ textAlign: "center", marginBottom: 56, maxWidth: 720, margin: "0 auto 56px" }}>
          <div style={{ fontSize: 11, color: "#1E5BFF", letterSpacing: ".10em", textTransform: "uppercase", fontWeight: 500, marginBottom: 14 }}>
            Simple, honest pricing.
          </div>
          <h2 className="display" style={{ fontSize: 44, margin: "0 0 14px", lineHeight: 1.05, letterSpacing: "-0.025em", fontWeight: 500 }}>
            Choose the plan <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>that's right for you.</span>
          </h2>
          <p style={{ fontSize: 15, color: "var(--ink-2)", margin: 0, lineHeight: 1.55, maxWidth: 540, marginLeft: "auto", marginRight: "auto" }}>
            One plan to start, two to go further. No agent commissions. Your data is never sold. Cancel any time.
          </p>
        </div>

        {/* 4 cards in a row — 3 plans + Your data */}
        <div className="r-pricing-grid" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 18 }}>
          {tiers.map(t => <PricingTile key={t.name} t={t}/>)}
          <YourDataCard/>
        </div>
      </div>
    </section>
  );
}

function PricingTile({ t }) {
  return (
    <div className="r-pricing-tile" style={{
      background: t.primary ? "#1E5BFF" : "#FFFFFF",
      color: t.primary ? "#FFFFFF" : "var(--ink)",
      border: t.primary ? "0.5px solid #1E5BFF" : "0.5px solid var(--border)",
      borderRadius: 18, padding: "26px 22px 22px",
      display: "flex", flexDirection: "column",
      position: "relative",
      boxShadow: t.primary ? "0 24px 60px rgba(30,91,255,0.32)" : "0 4px 18px rgba(10,24,48,0.04)",
      minHeight: 420,
      transform: t.primary ? "translateY(-8px)" : "none",
    }}>
      {t.badge && (
        <span style={{
          position: "absolute", top: -12, left: "50%", transform: "translateX(-50%)",
          background: "#0A1830", color: "#FFFFFF",
          padding: "5px 14px", borderRadius: 999,
          fontSize: 11, fontWeight: 600, letterSpacing: ".04em",
          boxShadow: "0 4px 12px rgba(10,24,48,0.18)",
        }}>{t.badge}</span>
      )}
      <div style={{ fontSize: 14, fontWeight: 500, opacity: 0.75, marginBottom: 10 }}>{t.name}</div>
      <div style={{ display: "flex", alignItems: "baseline", gap: 5, marginBottom: 6 }}>
        <span className="display tnum" style={{ fontSize: 42, letterSpacing: "-0.025em", fontWeight: 500, lineHeight: 1 }}>{t.price}</span>
        <span style={{ fontSize: 13, opacity: 0.7 }}>{t.period}</span>
      </div>
      <div style={{ fontSize: 13.5, opacity: 0.85, marginBottom: 22, minHeight: 40, lineHeight: 1.4 }}>{t.sub}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: 10, marginBottom: 22, flex: 1 }}>
        {t.features.map((f, i) => (
          <div key={i} style={{ display: "flex", gap: 9, fontSize: 13.5, alignItems: "flex-start", lineHeight: 1.45 }}>
            <Icon name="check" size={13} strokeWidth={2.2} style={{ marginTop: 3, color: t.primary ? "rgba(255,255,255,0.92)" : "var(--green-2)", flexShrink: 0 }}/>
            <span style={{ opacity: 0.95 }}>{f}</span>
          </div>
        ))}
      </div>
      <button style={{
        background: t.primary ? "#FFFFFF" : "#1E5BFF",
        color: t.primary ? "#1E5BFF" : "#FFFFFF",
        border: 0, padding: "12px", borderRadius: 10,
        fontSize: 14, fontWeight: 600,
        boxShadow: t.primary ? "0 4px 12px rgba(0,0,0,0.10)" : "0 4px 12px rgba(30,91,255,0.25)",
      }}>{t.cta}</button>
    </div>
  );
}

function YourDataCard() {
  return (
    <div style={{
      background: "#FBF8F2",
      border: "0.5px solid var(--border)",
      borderRadius: 18, padding: "26px 22px 22px",
      display: "flex", flexDirection: "column",
      minHeight: 420,
      position: "relative",
    }}>
      <div style={{ fontSize: 14, fontWeight: 500, opacity: 0.75, marginBottom: 10 }}>Your data</div>
      <div className="display" style={{ fontSize: 26, fontWeight: 500, color: "var(--ink)", letterSpacing: "-0.015em", lineHeight: 1.15, marginBottom: 6 }}>
        Your data. <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>Your move.</span>
      </div>
      <div style={{ fontSize: 13.5, opacity: 0.85, marginBottom: 22, minHeight: 40, lineHeight: 1.4, color: "var(--ink-2)" }}>
        Built for trust, end-to-end.
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: 12, flex: 1, marginBottom: 22 }}>
        <DataRow label="Bank-grade security"/>
        <DataRow label="You control your data"/>
        <DataRow label="We never sell your info"/>
        <DataRow label="GDPR & PSD2 native"/>
      </div>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
        <span style={{ fontSize: 11.5, color: "var(--ink-3)", letterSpacing: ".02em" }}>
          Privacy by design. Always.
        </span>
        <div style={{
          width: 40, height: 40, borderRadius: 10,
          background: "linear-gradient(135deg, #7FB1FF, #1E5BFF)",
          display: "inline-flex", alignItems: "center", justifyContent: "center",
          color: "#FFFFFF",
          boxShadow: "0 4px 14px rgba(30,91,255,0.32)",
        }}>
          <Icon name="shield" size={20}/>
        </div>
      </div>
    </div>
  );
}

function DataRow({ label }) {
  return (
    <div style={{ display: "flex", gap: 10, alignItems: "center", fontSize: 13.5, color: "var(--ink-2)" }}>
      <span style={{
        width: 20, height: 20, borderRadius: 999,
        background: "var(--green-soft)",
        color: "var(--green-2)",
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        flexShrink: 0,
      }}>
        <Icon name="check" size={12} strokeWidth={2.2}/>
      </span>
      {label}
    </div>
  );
}

// ── Closing CTA ────────────────────────────────────────────────────────
function ClosingCTAV5() {
  return (
    <section style={{
      position: "relative",
      padding: "100px 48px",
      background: `
        linear-gradient(105deg, rgba(8,18,42,0.95) 0%, rgba(8,18,42,0.78) 45%, rgba(8,18,42,0.30) 100%),
        url("assets/house-4.png")`,
      backgroundSize: "cover",
      backgroundPosition: "right bottom",
      color: "#FFFFFF",
      overflow: "hidden",
    }}>
      <div className="r-closing-cta" style={{ maxWidth: 1180, margin: "0 auto", display: "grid", gridTemplateColumns: "1fr 1.1fr 1fr", gap: 36, alignItems: "center", position: "relative", zIndex: 2 }}>
        {/* LEFT: headline */}
        <div>
          <h2 className="display" style={{ fontSize: 42, margin: "0 0 16px", letterSpacing: "-0.025em", lineHeight: 1.05, fontWeight: 500, color: "#FFFFFF" }}>
            Ready to move <br/>with <span className="serif" style={{ color: "#7FB1FF", fontWeight: 400 }}>confidence?</span>
          </h2>
          <p style={{ fontSize: 14.5, color: "rgba(255,255,255,0.75)", margin: 0, maxWidth: 320, lineHeight: 1.55 }}>
            90 seconds to get started. <br/>A clearer path to the keys.
          </p>
        </div>

        {/* MIDDLE: 90-second checklist */}
        <div style={{
          background: "rgba(13,24,48,0.78)",
          backdropFilter: "blur(18px)",
          border: "0.5px solid rgba(255,255,255,0.10)",
          borderRadius: 14, padding: 20,
        }}>
          <div style={{ fontSize: 12, color: "rgba(255,255,255,0.62)", letterSpacing: ".08em", textTransform: "uppercase", marginBottom: 14, fontWeight: 500 }}>
            Your 90-second start
          </div>
          <div style={{ display: "flex", flexDirection: "column", gap: 9 }}>
            {[
              { label: "Tell us your goal", time: "30 sec" },
              { label: "Upload ID",         time: "20 sec" },
              { label: "Add your details", time: "20 sec" },
              { label: "See your first matches", time: "20 sec" },
            ].map((c, i) => (
              <div key={i} style={{
                display: "grid", gridTemplateColumns: "20px 1fr auto",
                gap: 10, alignItems: "center",
                padding: "8px 10px",
                background: "rgba(255,255,255,0.05)",
                borderRadius: 8,
                fontSize: 13,
              }}>
                <span style={{
                  width: 18, height: 18, borderRadius: 999,
                  background: "rgba(127,229,164,0.18)", color: "#7FE5A4",
                  display: "inline-flex", alignItems: "center", justifyContent: "center",
                }}>
                  <Icon name="check" size={11}/>
                </span>
                <span style={{ color: "#FFFFFF" }}>{c.label}</span>
                <span className="tnum" style={{ fontSize: 11, color: "rgba(255,255,255,0.55)" }}>{c.time}</span>
              </div>
            ))}
          </div>
          <button style={{
            marginTop: 16, width: "100%",
            background: "#1E5BFF", color: "#FFFFFF",
            border: 0, padding: "12px", borderRadius: 10,
            fontSize: 14, fontWeight: 500,
            boxShadow: "0 4px 18px rgba(30,91,255,0.4)",
          }}>
            Start my journey
          </button>
        </div>

        {/* RIGHT: 3 reassurance points */}
        <div style={{
          background: "rgba(13,24,48,0.55)",
          backdropFilter: "blur(14px)",
          border: "0.5px solid rgba(255,255,255,0.08)",
          borderRadius: 14, padding: 20,
          display: "flex", flexDirection: "column", gap: 14,
        }}>
          <ReassurePoint icon="sparkles" color="#E8A83A" title="AI watches the market for you 24/7"/>
          <ReassurePoint icon="file"     color="#7FB1FF" title="We prepare your paperwork automatically"/>
          <ReassurePoint icon="key"      color="#7FE5A4" title="You're first in line when the right home appears"/>
        </div>
      </div>
    </section>
  );
}

function ReassurePoint({ icon, color, title }) {
  return (
    <div style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
      <span style={{
        width: 30, height: 30, borderRadius: 8,
        background: `${color}22`, color,
        display: "inline-flex", alignItems: "center", justifyContent: "center",
        flexShrink: 0,
      }}>
        <Icon name={icon} size={15}/>
      </span>
      <div style={{ fontSize: 13.5, color: "#FFFFFF", lineHeight: 1.4, paddingTop: 4 }}>{title}</div>
    </div>
  );
}

// ── Footer ─────────────────────────────────────────────────────────────
function FooterV5() {
  return (
    <footer style={{
      padding: "44px 48px 32px",
      background: "#061429",
      color: "rgba(255,255,255,0.55)",
      fontSize: 12,
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "flex", flexDirection: "column", gap: 22 }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", gap: 16 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
            <svg width="18" height="18" 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: 14, fontWeight: 600, color: "#FFFFFF" }}>HomeSplicer</span>
            <span style={{ fontSize: 11, color: "rgba(255,255,255,0.4)" }}>· Built in Ireland</span>
          </div>
          <div style={{ display: "flex", gap: 24, fontSize: 12 }}>
            <a style={{ color: "rgba(255,255,255,0.6)" }}>Privacy</a>
            <a style={{ color: "rgba(255,255,255,0.6)" }}>Terms</a>
            <a style={{ color: "rgba(255,255,255,0.6)" }}>Independence policy</a>
            <a style={{ color: "rgba(255,255,255,0.6)" }}>Press</a>
            <a style={{ color: "rgba(255,255,255,0.6)" }}>Contact</a>
          </div>
        </div>
        <div style={{ height: 0.5, background: "rgba(255,255,255,0.08)" }}/>
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, fontSize: 11 }}>
          <span>© 2026 HomeSplicer Technologies Ltd. · Registered in Ireland · 718432</span>
          <span className="mono">Not affiliated with Daft.ie, MyHome.ie, or any estate agent.</span>
        </div>
      </div>
    </footer>
  );
}

window.IrishStripV5 = IrishStripV5;
window.PricingV5 = PricingV5;
window.ClosingCTAV5 = ClosingCTAV5;
window.FooterV5 = FooterV5;