// homepage2.jsx — remaining homepage sections

// ── Property Intelligence preview (real photos + AI scoring) ────────────
function PropertyIntelSection({ mode }) {
  const m = MODES[mode];
  return (
    <section style={{ padding: "100px 32px", background: "var(--canvas)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, marginBottom: 48, alignItems: "end" }}>
          <div>
            <span className="eyebrow">Property intelligence</span>
            <h2 className="display" style={{ fontSize: 48, margin: "12px 0 0", letterSpacing: "-0.025em", lineHeight: 1.05 }}>
              Every listing, <br/>
              <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>scored against your life.</span>
            </h2>
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: "var(--ink-2)", margin: 0 }}>
            Daft sorts by featured. We sort by what fits <i>you</i>. Real commute at your usual departure time. School catchment. Planning applications next door. Sold-price comparables. Flood maps. BER-modelled bills. Twelve signals. One HomeScore.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 18 }}>
          {PROPERTIES.map(p => <PropertyCard key={p.id} p={p}/>)}
        </div>

        <div style={{ marginTop: 32, padding: "18px 22px", background: "var(--surface-2)", border: "0.5px solid var(--border)", borderRadius: 12, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 24 }}>
          <div style={{ fontSize: 13.5, color: "var(--ink-2)", lineHeight: 1.5 }}>
            <b style={{ color: "var(--ink)" }}>Data sources:</b> Property Price Register · planning portals · SEAI BER register · OPW flood maps · Department of Education catchments · Google Maps Routes · Eircode + 50+ estate agent direct sites
          </div>
          <Icon name="map" size={20} style={{ color: "var(--ink-3)", flexShrink: 0 }}/>
        </div>
      </div>
    </section>
  );
}

function PropertyCard({ p }) {
  const score = p.score;
  const tone = score >= 90 ? "green" : score >= 80 ? "yellow" : "red";
  return (
    <div style={{
      background: "var(--surface)",
      borderRadius: 14,
      overflow: "hidden",
      border: "0.5px solid var(--border)",
      boxShadow: "var(--shadow-sm)",
      display: "flex", flexDirection: "column",
    }}>
      <div className="photo" style={{
        backgroundImage: `url(${p.photo})`,
        height: 180,
        position: "relative",
      }}>
        <div style={{
          position: "absolute", top: 12, left: 12,
          background: "rgba(15,42,29,0.85)", color: "var(--canvas)",
          padding: "4px 9px", borderRadius: 999,
          fontSize: 11, fontWeight: 500,
          backdropFilter: "blur(6px)",
        }} className="mono tnum">
          BER {p.ber} · {p.days}d on market
        </div>
        {p.flag && (
          <div style={{
            position: "absolute", top: 12, right: 12,
            background: "var(--clay)", color: "var(--canvas)",
            padding: "4px 9px", borderRadius: 999,
            fontSize: 11, fontWeight: 500,
          }}>
            {p.flag}
          </div>
        )}
        <div style={{
          position: "absolute", bottom: -22, right: 14,
          width: 56, height: 56, borderRadius: "50%",
          background: "var(--surface)",
          border: "0.5px solid var(--border)",
          display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
          boxShadow: "var(--shadow-md)",
        }}>
          <span className="display tnum" style={{ fontSize: 22, color: `var(--${tone === "green" ? "green-2" : tone === "yellow" ? "clay" : "rose"})`, lineHeight: 1 }}>
            {score}
          </span>
          <span style={{ fontSize: 8.5, color: "var(--ink-3)", letterSpacing: ".05em", textTransform: "uppercase", marginTop: 1 }}>
            HomeScore
          </span>
        </div>
      </div>

      <div style={{ padding: "20px 18px 18px" }}>
        <div style={{ fontSize: 14.5, fontWeight: 500, marginBottom: 3 }}>{p.address}</div>
        <div className="mono" style={{ fontSize: 11, color: "var(--ink-3)", marginBottom: 10 }}>{p.eircode} · {p.type}</div>
        <div className="display tnum" style={{ fontSize: 22, marginBottom: 14, letterSpacing: "-0.01em" }}>
          €{p.price.toLocaleString()}
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 6, fontSize: 12, color: "var(--ink-2)" }}>
          {p.pros.slice(0, 2).map((x, i) => (
            <div key={"pro" + i} style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
              <span style={{ color: "var(--green)", flexShrink: 0, marginTop: 1 }}>+</span>
              <span>{x}</span>
            </div>
          ))}
          {p.cons.slice(0, 1).map((x, i) => (
            <div key={"con" + i} style={{ display: "flex", gap: 8, alignItems: "flex-start" }}>
              <span style={{ color: "var(--clay)", flexShrink: 0, marginTop: 1 }}>−</span>
              <span>{x}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// ── Irish vocabulary strip ──────────────────────────────────────────────
function IrishVocab() {
  const terms = [
    { tag: "AIP", desc: "Approval in Principle — modelled across 7 lenders at live rates" },
    { tag: "HTB", desc: "Help-to-Buy refund · auto-applied to Revenue, tracked to disbursement" },
    { tag: "FHS", desc: "First Home Scheme equity stake · eligibility + buy-out modelled" },
    { tag: "RPZ", desc: "Rent Pressure Zone caps · every listing checked vs CSO postcode" },
    { tag: "RTB", desc: "Residential Tenancies Board · landlord registration + dispute filings" },
    { tag: "BER", desc: "Building Energy Rating · pulled from SEAI register, bills modelled" },
    { tag: "CAT", desc: "Capital Acquisitions Tax · Group A/B/C thresholds tracked over time" },
    { tag: "PPR", desc: "Property Price Register · sold-price comparables by Eircode" },
    { tag: "Eircode", desc: "Every signal — commute, schools, flood, planning — anchored here" },
    { tag: "PSD2", desc: "Open Banking · we read your real income, never store credentials" },
  ];
  return (
    <section style={{ padding: "80px 32px", background: "var(--surface-2)", borderTop: "0.5px solid var(--border)", borderBottom: "0.5px solid var(--border)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ marginBottom: 36, display: "flex", justifyContent: "space-between", alignItems: "end", gap: 32, flexWrap: "wrap" }}>
          <div style={{ maxWidth: 560 }}>
            <h3 className="display" style={{ fontSize: 32, margin: 0, letterSpacing: "-0.02em", lineHeight: 1.1 }}>
              We speak <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>Irish property</span> fluently.
            </h3>
            <p style={{ fontSize: 15, color: "var(--ink-2)", margin: "12px 0 0", lineHeight: 1.55 }}>
              The acronyms, the schemes, the forms — woven into every score, every nudge, every paragraph the agent writes for you.
            </p>
          </div>
          <p style={{ fontSize: 13, color: "var(--ink-3)", margin: 0, maxWidth: 320 }}>
            Not a US property app with a green flag bolted on. Every dataset and rulebook that actually matters here.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 1, background: "var(--border)", border: "0.5px solid var(--border)", borderRadius: 12, overflow: "hidden" }}>
          {terms.map((t, i) => (
            <div key={i} style={{ background: "var(--surface)", padding: "20px 18px", minHeight: 130 }}>
              <div className="mono" style={{ fontSize: 18, fontWeight: 500, color: "var(--green-2)", marginBottom: 8 }}>{t.tag}</div>
              <div style={{ fontSize: 12, lineHeight: 1.5, color: "var(--ink-2)" }}>{t.desc}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Pricing ─────────────────────────────────────────────────────────────
function Pricing({ mode }) {
  const tiers = [
    {
      name: "Watcher", price: 0, period: "free, forever",
      tagline: "Set the goal. See if you're ready.",
      features: ["Readiness dashboard", "One saved area", "Public-register data (PPR, BER, planning)", "No card required"],
      cta: "Set your goal",
      featured: false,
    },
    {
      name: "Searcher", price: 19, period: "/month while searching",
      tagline: "Rent or save with the AI on your side.",
      features: ["Everything in Watcher", "Real-time listing watch + alerts", "Auto-drafted viewing requests", "Open Banking financial mission control", "Tenant pack · RTB legality checks"],
      cta: "Set your goal",
      featured: false,
    },
    {
      name: "Buyer", price: 39, period: "/month, search to keys",
      tagline: "From AIP to bidding to drawdown.",
      features: ["Everything in Searcher", "Mortgage form auto-fill (7 lenders)", "HTB + FHS application engine", "Mortgage coach", "Bidding tracker", "Negotiation playbook", "Solicitor + surveyor partner network"],
      cta: "Set your goal",
      featured: true,
      featuredBadge: "Recommended",
    },
    {
      name: "Family", price: 59, period: "/month for the whole household",
      tagline: "Help your kid. Properly.",
      features: ["Everything in Buyer", "Shared dashboard across 4 members", "CAT tracker + gift letters", "Sibling fairness register", "Estate-planning view"],
      cta: "Set your goal",
      featured: false,
    },
  ];
  return (
    <section id="pricing" style={{ padding: "120px 32px" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 56 }}>
          <span className="eyebrow">Pricing</span>
          <h2 className="display" style={{ fontSize: 48, margin: "12px 0 14px", letterSpacing: "-0.025em", lineHeight: 1.05 }}>
            You're the customer. <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>Not the inventory.</span>
          </h2>
          <p style={{ fontSize: 16, color: "var(--ink-2)", margin: "0 auto", maxWidth: 580 }}>
            No agent contracts. No commissions. No "talk to sales". Cancel any time. Free while you're saving.
          </p>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
          {tiers.map(t => (
            <div key={t.name} style={{
              padding: 24,
              background: t.featured ? "var(--ink)" : "var(--surface)",
              color: t.featured ? "var(--canvas)" : "var(--ink)",
              borderRadius: 16,
              border: t.featured ? "0.5px solid var(--ink)" : "0.5px solid var(--border)",
              boxShadow: t.featured ? "var(--shadow-lg)" : "var(--shadow-sm)",
              transform: t.featured ? "translateY(-8px)" : "none",
              display: "flex", flexDirection: "column",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 6 }}>
                <span style={{ fontSize: 13, fontWeight: 500, opacity: 0.7 }}>{t.name}</span>
                {t.featured && <span style={{ fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", color: "var(--clay-soft)", fontWeight: 600 }}>{t.featuredBadge}</span>}
              </div>
              <div style={{ marginBottom: 4, display: "flex", alignItems: "baseline", gap: 4 }}>
                <span className="display tnum" style={{ fontSize: 40, lineHeight: 1 }}>€{t.price}</span>
                <span style={{ fontSize: 12, opacity: 0.6 }}>{t.period}</span>
              </div>
              <div style={{ fontSize: 13.5, opacity: 0.8, marginBottom: 22, lineHeight: 1.45, minHeight: 38 }}>{t.tagline}</div>
              <div style={{ flex: 1, display: "flex", flexDirection: "column", gap: 9, marginBottom: 22 }}>
                {t.features.map((f, i) => (
                  <div key={i} style={{ display: "flex", gap: 9, fontSize: 13, lineHeight: 1.4, alignItems: "flex-start" }}>
                    <Icon name="check" size={13} style={{ color: t.featured ? "var(--clay-soft)" : "var(--green)", flexShrink: 0, marginTop: 3 }}/>
                    <span style={{ opacity: 0.92 }}>{f}</span>
                  </div>
                ))}
              </div>
              <button style={{
                width: "100%",
                background: t.featured ? "var(--canvas)" : "var(--ink)",
                color: t.featured ? "var(--ink)" : "var(--canvas)",
                border: 0, padding: "11px", borderRadius: 10,
                fontSize: 14, fontWeight: 500,
              }}>
                {t.cta}
              </button>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 36, textAlign: "center", fontSize: 13, color: "var(--ink-3)" }}>
          One-off purchase mode: €299 paid once at completion · keep Homeowner mode for life at €4.99/mo
        </div>
      </div>
    </section>
  );
}

// ── Trust strip + footer ───────────────────────────────────────────────
function TrustStrip() {
  const points = [
    { icon: "shield", label: "Never sold. Never shared.", sub: "Your data goes to no estate agent, ever. It's structural — we're paid by you." },
    { icon: "lock",   label: "GDPR-native, PSD2-licensed.", sub: "EU-only data. Read-only Open Banking. Delete your account, your data leaves with you." },
    { icon: "x",      label: "Not affiliated. Not for sale.", sub: "Independent of Daft, MyHome, Sherry Fitz, DNG, REA. No referral fees. Built in Dublin." },
  ];
  return (
    <section style={{ padding: "80px 32px", background: "var(--canvas)", borderTop: "0.5px solid var(--border)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ marginBottom: 36, display: "flex", justifyContent: "space-between", alignItems: "end", gap: 32, flexWrap: "wrap" }}>
          <h3 className="display" style={{ fontSize: 32, margin: 0, maxWidth: 560, letterSpacing: "-0.02em", lineHeight: 1.1 }}>
            Your data is <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>yours.</span>
          </h3>
          <a style={{ fontSize: 13, color: "var(--ink-2)", display: "inline-flex", alignItems: "center", gap: 6, fontWeight: 500, paddingBottom: 4, borderBottom: "0.5px solid var(--ink-2)" }}>
            Read the independence policy <Icon name="arrow" size={13}/>
          </a>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--border)", border: "0.5px solid var(--border)", borderRadius: 12, overflow: "hidden" }}>
          {points.map((p, i) => (
            <div key={i} style={{ background: "var(--surface)", padding: "22px 24px", display: "flex", gap: 14, alignItems: "flex-start" }}>
              <span style={{ color: "var(--green-2)", flexShrink: 0, marginTop: 1 }}>
                <Icon name={p.icon} size={20}/>
              </span>
              <div>
                <div style={{ fontSize: 14, fontWeight: 500, marginBottom: 4, letterSpacing: "-0.005em" }}>{p.label}</div>
                <div style={{ fontSize: 12.5, color: "var(--ink-3)", lineHeight: 1.5 }}>{p.sub}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function FooterCTA({ mode }) {
  const m = MODES[mode];
  return (
    <section style={{
      padding: "120px 32px",
      background: "var(--canvas)",
      position: "relative",
      overflow: "hidden",
      borderTop: "0.5px solid var(--border)",
    }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", position: "relative", zIndex: 2 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "center" }}>
          <div>
            <span className="eyebrow" style={{ color: "var(--ink-3)" }}>Ready when you are</span>
            <h2 className="display" style={{
              fontSize: "clamp(40px, 5vw, 60px)",
              margin: "16px 0 32px",
              lineHeight: 1.1,
              letterSpacing: "-0.03em",
            }}>
              90 seconds. <br/>One goal. <br/>
              <span style={{ color: "var(--green-2)" }}>A clear path to the keys.</span>
            </h2>
            <p style={{ fontSize: 16.5, color: "var(--ink-2)", margin: "0 0 32px", maxWidth: 480, lineHeight: 1.55 }}>
              Tell us where you want to land. We'll tell you, to the day, when you'll have the keys — and exactly what to do next.
            </p>
            <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
              <button className="btn-primary" style={{ padding: "16px 28px", fontSize: 16 }}>
                Set your goal <Icon name="arrow" size={16}/>
              </button>
              <button className="btn-ghost" style={{ padding: "15px 27px", fontSize: 16 }}>
                See how it works
              </button>
            </div>
            <div style={{ marginTop: 24, display: "flex", alignItems: "center", gap: 18, fontSize: 12, color: "var(--ink-3)" }}>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <Icon name="check" size={12} style={{ color: "var(--green-2)" }}/> Free until you're ready to buy
              </span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <Icon name="check" size={12} style={{ color: "var(--green-2)" }}/> No card required
              </span>
              <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
                <Icon name="check" size={12} style={{ color: "var(--green-2)" }}/> Cancel any time
              </span>
            </div>
          </div>

          {/* Setup-flow preview tile */}
          <div style={{
            background: "var(--surface)",
            border: "0.5px solid var(--border)",
            borderRadius: 16,
            padding: 22,
            boxShadow: "var(--shadow-md)",
          }}>
            <div className="eyebrow" style={{ marginBottom: 18 }}>Setup · 4 steps</div>
            {[
              { n: "01", t: "Pick your mode", s: "Renting · Saving · Buying · Family · Investment" },
              { n: "02", t: "Set the goal", s: "Place, type, when you want the keys" },
              { n: "03", t: "Connect your finances", s: "Open Banking · read-only · 30 seconds" },
              { n: "04", t: "See your date", s: "Live readiness, recalculated every morning" },
            ].map((s, i) => (
              <div key={i} style={{ display: "flex", gap: 14, padding: "12px 0", borderBottom: i < 3 ? "0.5px solid var(--border)" : "none" }}>
                <span className="mono tnum" style={{ fontSize: 11, color: "var(--ink-3)", minWidth: 24 }}>{s.n}</span>
                <div style={{ flex: 1 }}>
                  <div style={{ fontSize: 13.5, fontWeight: 500, marginBottom: 2 }}>{s.t}</div>
                  <div style={{ fontSize: 11.5, color: "var(--ink-3)" }}>{s.s}</div>
                </div>
                <Icon name="check" size={13} style={{ color: i === 0 ? "var(--green-2)" : "var(--ink-4)", marginTop: 4 }}/>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function SiteFooter() {
  const col = (title, items) => (
    <div>
      <div className="eyebrow" style={{ marginBottom: 14, color: "rgba(247,244,238,0.45)" }}>{title}</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 9 }}>
        {items.map(i => <li key={i} style={{ fontSize: 13, color: "rgba(247,244,238,0.78)" }}>{i}</li>)}
      </ul>
    </div>
  );
  return (
    <footer style={{ background: "var(--ink)", color: "var(--canvas)", padding: "0 32px 48px" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto", borderTop: "0.5px solid rgba(247,244,238,0.12)", paddingTop: 56 }}>
        {/* Founder note */}
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 60, paddingBottom: 48, borderBottom: "0.5px solid rgba(247,244,238,0.10)", marginBottom: 48 }}>
          <div>
            <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
              <svg width="22" height="22" 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="var(--canvas)"/><circle cx="12" cy="13" r="2.2" fill="var(--ink)"/></svg>
              <span style={{ fontSize: 16, fontWeight: 600 }}>HomeWoosh</span>
            </div>
            <div style={{ fontFamily: "var(--font-serif)", fontStyle: "italic", fontSize: 22, lineHeight: 1.4, color: "rgba(255,255,255,0.92)", maxWidth: 460, letterSpacing: "-0.01em" }}>
              “I built HomeWoosh 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.”
            </div>
            <div style={{ marginTop: 16, display: "flex", alignItems: "center", gap: 10, fontSize: 12.5, color: "rgba(255,255,255,0.55)" }}>
              <span style={{ width: 28, height: 28, borderRadius: 999, background: "var(--clay)", display: "inline-flex", alignItems: "center", justifyContent: "center", fontSize: 11, fontWeight: 600, color: "var(--canvas)" }}>DÓ</span>
              <span>Dónal Ó Riordain · Founder · Dublin, May 2026</span>
            </div>
          </div>

          <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14 }}>
            <FooterLinkCard
              eyebrow="From the Journal"
              title="Why we won't take agent money"
              date="03 May 2026 · 4 min read"
            />
            <FooterLinkCard
              eyebrow="From the Journal"
              title="Reading the 2026 RPZ rules, line by line"
              date="22 Apr 2026 · 9 min read"
            />
            <FooterLinkCard
              eyebrow="From the Journal"
              title="How the Help-to-Buy refund really works"
              date="14 Mar 2026 · 6 min read"
            />
          </div>
        </div>

        <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr 1fr", gap: 40, marginBottom: 56 }}>
          <div>
            <div style={{ fontSize: 13, color: "rgba(247,244,238,0.55)", lineHeight: 1.6 }}>
              HomeWoosh Technologies Ltd.<br/>
              The Tea Building, 5 Camden Market<br/>
              Dublin 2, D02 X294<br/>
              <a style={{ color: "rgba(247,244,238,0.78)", textDecoration: "underline", textUnderlineOffset: 3 }}>hello@homewoosh.ie</a>
            </div>
          </div>
          {col("Lifecycle", ["First-time renter", "Active renter", "Saving to buy", "First-time buyer", "Upsizing · soon", "Downsizing · soon", "Helping your kid · soon", "Investment · soon"])}
          {col("Product", ["Readiness dashboard", "Property intelligence", "Mortgage auto-fill", "Negotiation coach", "Family mode", "Pricing"])}
          {col("Trust", ["Independence policy", "GDPR + PSD2", "Data sources", "How we make money"])}
          {col("Company", ["About", "Manifesto", "Press kit", "Careers · 3 open", "Status page", "Contact"])}
        </div>

        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 12, color: "rgba(247,244,238,0.45)", flexWrap: "wrap", gap: 16 }}>
          <span>© 2026 HomeWoosh Technologies Ltd. · Registered in Ireland 718432 · VAT IE3854127KH</span>
          <span className="mono" style={{ display: "flex", alignItems: "center", gap: 14 }}>
            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--green)" }}/>
              All systems normal
            </span>
            <span>Not affiliated with Daft.ie or MyHome.ie</span>
          </span>
        </div>
      </div>
    </footer>
  );
}

window.PropertyIntelSection = PropertyIntelSection;
window.IrishVocab = IrishVocab;
window.Pricing = Pricing;
window.TrustStrip = TrustStrip;
window.FooterCTA = FooterCTA;
window.SiteFooter = SiteFooter;
window.ParentModeSection = ParentModeSection;

// Footer link card (used in SiteFooter for 3 journal entries)
function FooterLinkCard({ eyebrow, title, date }) {
  return (
    <a style={{
      padding: "16px 18px",
      background: "rgba(255,255,255,0.04)",
      borderRadius: 10,
      border: "0.5px solid rgba(255,255,255,0.10)",
      display: "flex", flexDirection: "column", gap: 8,
      minHeight: 130,
      justifyContent: "space-between",
      cursor: "pointer",
      transition: "all .2s",
    }}>
      <span style={{ fontSize: 10, letterSpacing: ".08em", textTransform: "uppercase", color: "rgba(255,255,255,0.45)", fontWeight: 500 }}>{eyebrow}</span>
      <span style={{ fontSize: 14, color: "var(--canvas)", fontWeight: 500, lineHeight: 1.35, letterSpacing: "-0.005em" }}>{title}</span>
      <span style={{ fontSize: 11, color: "rgba(255,255,255,0.55)" }} className="tnum">{date} →</span>
    </a>
  );
}

// ── Parent Mode dedicated section ─────────────────────────────────────
function ParentModeSection() {
  return (
    <section style={{ padding: "120px 32px", background: "var(--canvas)" }}>
      <div style={{ maxWidth: 1100, margin: "0 auto" }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 64, alignItems: "center" }}>
          {/* LEFT — copy */}
          <div>
            <span className="eyebrow" style={{ color: "var(--clay)" }}>
              <Icon name="handshake" size={12} style={{ verticalAlign: -2, marginRight: 5 }}/>
              The differentiator
            </span>
            <h2 className="display" style={{ fontSize: 48, margin: "12px 0 18px", letterSpacing: "-0.025em", lineHeight: 1.05 }}>
              Helping your kid? <br/>
              <span className="serif" style={{ color: "var(--green-2)", fontWeight: 400 }}>We handle the awkward bits.</span>
            </h2>
            <p style={{ fontSize: 17, lineHeight: 1.55, color: "var(--ink-2)", margin: "0 0 24px", maxWidth: 480 }}>
              The gift letter. The CAT thresholds. The sibling-fairness register. The deeds trap. The conversations no Irish family wants to have a second time. One shared dashboard, four members, complete agreement.
            </p>

            <div style={{ display: "flex", flexDirection: "column", gap: 14, marginBottom: 28 }}>
              {[
                { tag: "CAT", title: "Tax-aware gifting", desc: "Every gift sized against Group A/B/C thresholds. Live Revenue rules. Never accidentally triggered." },
                { tag: "DOC", title: "Gift letters, co-signed", desc: "Lender-compliant wording. E-signed by both parents. Auto-attached to the mortgage application." },
                { tag: "FAIR", title: "Sibling fairness register", desc: "What Conor got. What Niamh is owed. Tracked across years, indexed to inflation, surfaced to the family." },
              ].map((it, i) => (
                <div key={i} style={{ display: "flex", gap: 14, alignItems: "flex-start" }}>
                  <span className="mono" style={{
                    minWidth: 44, padding: "3px 7px", fontSize: 10, fontWeight: 500,
                    background: "var(--green-soft)", color: "var(--green-2)",
                    borderRadius: 4, textAlign: "center", letterSpacing: ".04em",
                    marginTop: 1,
                  }}>
                    {it.tag}
                  </span>
                  <div>
                    <div style={{ fontSize: 14.5, fontWeight: 500, marginBottom: 2 }}>{it.title}</div>
                    <div style={{ fontSize: 12.5, color: "var(--ink-2)", lineHeight: 1.5 }}>{it.desc}</div>
                  </div>
                </div>
              ))}
            </div>

            <div style={{ fontSize: 12.5, color: "var(--ink-3)", fontStyle: "italic", fontFamily: "var(--font-serif)" }}>
              "The biggest gift you'll ever give shouldn't depend on a forwarded email and a half-remembered chat in the kitchen."
            </div>
          </div>

          {/* RIGHT — family dashboard mock */}
          <div style={{
            background: "var(--surface)",
            borderRadius: 18,
            padding: 26,
            border: "0.5px solid var(--border)",
            boxShadow: "var(--shadow-lg)",
          }}>
            {/* Family header */}
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingBottom: 18, borderBottom: "0.5px solid var(--border)", marginBottom: 20 }}>
              <div>
                <div className="eyebrow" style={{ marginBottom: 4 }}>The Ó Riordains</div>
                <div style={{ fontSize: 15, fontWeight: 500 }}>Family dashboard · 4 members</div>
              </div>
              <div style={{ display: "flex", gap: -8 }}>
                {[
                  { i: "MP", color: "var(--green)" },
                  { i: "EP", color: "var(--clay)" },
                  { i: "CO", color: "var(--green-2)" },
                  { i: "NO", color: "var(--rose)" },
                ].map((p, i) => (
                  <div key={i} style={{
                    width: 30, height: 30, borderRadius: 999,
                    background: p.color, color: "var(--canvas)",
                    fontSize: 11, fontWeight: 600,
                    display: "inline-flex", alignItems: "center", justifyContent: "center",
                    border: "2px solid var(--surface)",
                    marginLeft: i > 0 ? -8 : 0,
                  }}>{p.i}</div>
                ))}
              </div>
            </div>

            {/* The gift */}
            <div style={{ padding: 18, background: "var(--ink)", color: "var(--canvas)", borderRadius: 12, marginBottom: 14 }}>
              <div className="eyebrow" style={{ color: "rgba(247,244,238,0.55)", marginBottom: 8 }}>The gift</div>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 14 }}>
                <span className="display tnum" style={{ fontSize: 38, letterSpacing: "-0.02em" }}>€60,000</span>
                <span style={{ fontSize: 12, color: "rgba(255,255,255,0.6)" }}>Mary + Eoin → Conor</span>
              </div>
              <div style={{ fontSize: 11, color: "rgba(255,255,255,0.55)", marginBottom: 8, letterSpacing: ".02em", textTransform: "uppercase", fontWeight: 500 }}>
                CAT threshold used: €60,000 of €335,000 lifetime
              </div>
              <div style={{ height: 8, borderRadius: 4, background: "rgba(255,255,255,0.12)", overflow: "hidden", marginBottom: 6 }}>
                <div style={{ width: "17.9%", height: "100%", background: "linear-gradient(90deg, var(--clay), var(--clay-soft))" }}/>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 10.5, color: "rgba(255,255,255,0.55)" }} className="mono tnum">
                <span>17.9% used · lifetime gift cap from parents</span>
                <span>€275,000 remaining</span>
              </div>
            </div>

            {/* CAT chip + Fairness */}
            <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 10, marginBottom: 14 }}>
              <div style={{ padding: 14, background: "var(--green-soft)", borderRadius: 10, border: "0.5px solid color-mix(in oklab, var(--green) 18%, transparent)" }}>
                <div style={{ fontSize: 10.5, color: "var(--green-2)", letterSpacing: ".06em", textTransform: "uppercase", marginBottom: 4, fontWeight: 600 }}>
                  ✓ Gift letter
                </div>
                <div style={{ fontSize: 12.5, color: "var(--green-2)", lineHeight: 1.4 }}>
                  Drafted, e-signed by Mary. Awaiting Eoin.
                </div>
              </div>
              <div style={{ padding: 14, background: "var(--clay-soft)", borderRadius: 10, border: "0.5px solid color-mix(in oklab, var(--clay) 25%, transparent)" }}>
                <div style={{ fontSize: 10.5, color: "#7A3A14", letterSpacing: ".06em", textTransform: "uppercase", marginBottom: 4, fontWeight: 600 }}>
                  Fairness register
                </div>
                <div style={{ fontSize: 12.5, color: "#7A3A14", lineHeight: 1.4 }}>
                  Niamh: €0 received. Equivalent owed.
                </div>
              </div>
            </div>

            {/* Conor's plan mini */}
            <div style={{ padding: 14, background: "var(--surface-2)", borderRadius: 10, border: "0.5px solid var(--border)" }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 8 }}>
                <span style={{ fontSize: 12, color: "var(--ink-2)", fontWeight: 500 }}>
                  <Icon name="stairs" size={11} style={{ verticalAlign: -1, marginRight: 5 }}/>
                  Conor's plan
                </span>
                <span className="mono tnum" style={{ fontSize: 10.5, color: "var(--green-2)" }}>+11 weeks earlier</span>
              </div>
              <div style={{ fontSize: 11.5, color: "var(--ink-3)", lineHeight: 1.5 }}>
                The €60k gift moves Conor's mortgage-ready date from <b className="tnum" style={{ color: "var(--ink)" }}>Q3 2028</b> to <b className="tnum" style={{ color: "var(--green-2)" }}>Nov 2027</b>. He sees the same dashboard.
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}
