/* global React, PROGRAMS, PROGRAM_CATEGORIES, PrimaryButton, GhostButton, Eyebrow */

const { useState: useStateProd } = React;

function ProductsIndex() {
  const [filter, setFilter] = useStateProd("all");
  const shown = PROGRAMS.filter(p => filter === "all" || p.category === filter);

  return (
    <section style={{ maxWidth: 1080, margin: "64px auto 0", padding: "0 16px",
      fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'" }}>
      <Eyebrow tone="coral">Nine programs, one shop</Eyebrow>
      <h1 style={{ marginTop: 12, fontSize: 56, fontWeight: 300, letterSpacing: "-1.4px", lineHeight: 1.05, color: "#1f2d3d" }}>
        Every program we offer, side by side.
      </h1>
      <p style={{ marginTop: 18, fontSize: 18, fontWeight: 300, color: "#6b7c92", lineHeight: 1.45, maxWidth: 620 }}>
        Filter by category, then click any program for documentation requirements, timelines, and highlights.
      </p>

      <div style={{ marginTop: 32, display: "flex", gap: 8, flexWrap: "wrap" }}>
        {PROGRAM_CATEGORIES.map(([k, l]) => (
          <button key={k} onClick={() => setFilter(k)} style={{
            padding: "7px 14px", borderRadius: 4, fontSize: 14, fontWeight: 400, cursor: "pointer",
            fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'",
            background: filter === k ? "#ff7a59" : "transparent",
            color: filter === k ? "#fff" : "#33475b",
            border: filter === k ? "1px solid #ff7a59" : "1px solid #cbd5df",
            transition: "all 180ms cubic-bezier(0.2,0.8,0.2,1)",
          }}>{l}</button>
        ))}
      </div>

      <div style={{ marginTop: 28, background: "#fff", border: "1px solid #e1e7ef", borderRadius: 6, overflow: "hidden", boxShadow: "rgba(31,45,61,0.06) 0 2px 4px" }}>
        <table style={{ width: "100%", borderCollapse: "collapse" }}>
          <thead>
            <tr style={{ background: "#f5f8fb" }}>
              {["Program", "Best for", "Docs", "Max LTV", "Min FICO", ""].map(h => (
                <th key={h} style={{ textAlign: "left", padding: "14px 18px", fontSize: 11, fontWeight: 500, color: "#6b7c92", textTransform: "uppercase", letterSpacing: "0.08em", borderBottom: "1px solid #e1e7ef", fontFamily: "'Source Code Pro',monospace" }}>{h}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {shown.map(p => (
              <tr key={p.id} style={{ borderBottom: "1px solid #e1e7ef" }}>
                <td style={{ padding: "16px 18px", fontSize: 15, fontWeight: 400, color: "#1f2d3d" }}>
                  <a href={`product.html?id=${p.id}`} style={{ color: "#1f2d3d", textDecoration: "none" }}>{p.tag}</a>
                </td>
                <td style={{ padding: "16px 18px", fontSize: 14, fontWeight: 300, color: "#425a73" }}>{p.bestFor}</td>
                <td style={{ padding: "16px 18px", fontSize: 14, fontWeight: 300, color: "#6b7c92" }}>{p.docs}</td>
                <td style={{ padding: "16px 18px", fontSize: 14, fontWeight: 400, color: "#1f2d3d", fontFeatureSettings: "'tnum'" }}>{p.ltv}</td>
                <td style={{ padding: "16px 18px", fontSize: 14, fontWeight: 400, color: "#1f2d3d", fontFeatureSettings: "'tnum'" }}>{p.minFico}</td>
                <td style={{ padding: "16px 18px", textAlign: "right" }}>
                  <GhostButton small as="a" href={`product.html?id=${p.id}`}>View</GhostButton>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>

      <div style={{ marginTop: 48, background: "#1f2d3d", borderRadius: 8, padding: "40px 44px",
        display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24,
        fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'" }}>
        <div style={{ color: "#fff", maxWidth: 560 }}>
          <div style={{ fontFamily: "'Source Code Pro',monospace", fontSize: 11, fontWeight: 500, color: "#ff7a59", textTransform: "uppercase", letterSpacing: "0.08em" }}>Not sure which fits</div>
          <div style={{ marginTop: 10, fontSize: 28, fontWeight: 300, letterSpacing: "-0.56px", lineHeight: 1.15 }}>
            Most borrowers don't know — that's what the first call is for.
          </div>
        </div>
        <PrimaryButton as="a" href="contact.html">Start a 15-minute call</PrimaryButton>
      </div>

      {/* Anti-steering + multi-state disclaimer */}
      <div style={{ marginTop: 32, padding: "20px 22px", border: "1px solid #e1e7ef", borderRadius: 6,
        background: "#fafbfd", fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'" }}>
        <div style={{ fontFamily: "'Source Code Pro',monospace", fontSize: 10, fontWeight: 500, color: "#425a73", textTransform: "uppercase", letterSpacing: "0.08em" }}>Important disclosures</div>
        <p style={{ margin: "10px 0 0", fontSize: 12, fontWeight: 300, color: "#6b7c92", lineHeight: 1.6 }}>
          Haven Home Loans, LLC works with multiple wholesale lenders and presents loan options based on each borrower's circumstances. Other loan products may be available beyond what is shown here. Contact your loan officer to explore alternatives. Program availability, eligibility, documentation requirements, maximum LTV, and minimum FICO shown reflect typical investor guidelines and are subject to change without notice; final terms are determined by the lender after a complete application, credit review, appraisal, and underwriting. This is not a commitment to lend. Haven is licensed only in Georgia and Florida; this site is not an offer to lend in any state where Haven is not licensed. Equal Housing Lender. NMLS #2431561.
        </p>
      </div>
    </section>
  );
}

function ProductDetail() {
  const qsId = useQueryParam("id");
  const program = PROGRAMS.find(p => p.id === qsId) || PROGRAMS[0];
  const related = PROGRAMS.filter(p => p.id !== program.id && p.category === program.category).slice(0, 3);
  const relatedFill = related.length ? related : PROGRAMS.filter(p => p.id !== program.id).slice(0, 3);

  return (
    <div>
      <section style={{ maxWidth: 1080, margin: "48px auto 0", padding: "0 16px", fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'" }}>
        <a href="products.html" style={{ fontSize: 13, fontWeight: 400, color: "#c64a2b", textDecoration: "none" }}>← All programs</a>
        <div style={{ marginTop: 20, fontFamily: "'Source Code Pro',monospace", fontSize: 11, fontWeight: 500, color: "#c64a2b", textTransform: "uppercase", letterSpacing: "0.08em" }}>{program.tag}</div>
        <h1 style={{ marginTop: 12, fontSize: 56, fontWeight: 300, letterSpacing: "-1.4px", lineHeight: 1.05, color: "#1f2d3d", maxWidth: 820 }}>
          {program.headline}
        </h1>
        <p style={{ marginTop: 18, fontSize: 18, fontWeight: 300, color: "#6b7c92", lineHeight: 1.5, maxWidth: 640 }}>
          {program.summary}
        </p>

        {/* Snapshot */}
        <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(4, 1fr)",
          border: "1px solid #e1e7ef", borderRadius: 6, background: "#fff", overflow: "hidden" }}>
          {[
            ["Best for", program.bestFor],
            ["Docs", program.docs],
            ["Max LTV", program.ltv],
            ["Min FICO", program.minFico],
          ].map(([k, v], i) => (
            <div key={k} style={{ padding: "20px 22px", borderLeft: i === 0 ? "none" : "1px solid #e1e7ef" }}>
              <div style={{ fontFamily: "'Source Code Pro',monospace", fontSize: 11, fontWeight: 500, color: "#6b7c92", textTransform: "uppercase", letterSpacing: "0.08em" }}>{k}</div>
              <div style={{ marginTop: 8, fontSize: 18, fontWeight: 400, color: "#1f2d3d", letterSpacing: "-0.18px", fontFeatureSettings: /\d|%/.test(v) ? "'tnum'" : "'ss01'" }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Highlights */}
      <section style={{ maxWidth: 1080, margin: "80px auto 0", padding: "0 16px" }}>
        <Eyebrow>Highlights</Eyebrow>
        <h2 style={{ marginTop: 10, fontSize: 36, fontWeight: 300, letterSpacing: "-0.72px", lineHeight: 1.1, color: "#1f2d3d", maxWidth: 640 }}>
          What this program actually does differently.
        </h2>
        <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {program.highlights.map(([t, d]) => (
            <div key={t} style={{
              background: "#fff", border: "1px solid #e1e7ef", borderRadius: 6, padding: 24,
              fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'",
            }}>
              <div style={{ fontSize: 20, fontWeight: 400, color: "#1f2d3d", letterSpacing: "-0.2px" }}>{t}</div>
              <div style={{ marginTop: 10, fontSize: 14, fontWeight: 300, color: "#6b7c92", lineHeight: 1.55 }}>{d}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Docs + Timeline */}
      <section style={{ maxWidth: 1080, margin: "80px auto 0", padding: "0 16px",
        display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: 48 }}>
        <div>
          <Eyebrow>What you'll need</Eyebrow>
          <h3 style={{ marginTop: 10, fontSize: 28, fontWeight: 300, letterSpacing: "-0.56px", lineHeight: 1.15, color: "#1f2d3d" }}>
            A short list of documents.
          </h3>
          <ul style={{ marginTop: 20, paddingLeft: 0, listStyle: "none" }}>
            {program.docList.map(d => (
              <li key={d} style={{ padding: "14px 0", borderTop: "1px solid #e1e7ef", fontSize: 15, fontWeight: 300, color: "#425a73", display: "flex", alignItems: "center", gap: 12 }}>
                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#15be53" strokeWidth="2" style={{ flexShrink: 0 }}><polyline points="5 12 10 17 19 8"/></svg>
                {d}
              </li>
            ))}
          </ul>
          <div style={{ marginTop: 28, display: "flex", gap: 12 }}>
            <PrimaryButton as="a" href={`contact.html?program=${program.id}`}>Start the call</PrimaryButton>
            <GhostButton as="a" href="products.html">Compare programs</GhostButton>
          </div>
        </div>

        <div style={{ background: "#fff", border: "1px solid #e1e7ef", borderRadius: 8, padding: 28,
          boxShadow: "rgba(31,45,61,0.22) 0 30px 45px -30px, rgba(0,0,0,0.08) 0 18px 36px -18px",
          fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'", alignSelf: "start" }}>
          <Eyebrow>Typical timeline</Eyebrow>
          <div style={{ marginTop: 20, display: "flex", flexDirection: "column" }}>
            {program.timeline.map(([d, step], i) => (
              <div key={d} style={{ display: "flex", alignItems: "flex-start", gap: 18, padding: "14px 0", borderTop: i === 0 ? "none" : "1px solid #e1e7ef" }}>
                <div style={{ fontFamily: "'Source Code Pro',monospace", fontSize: 11, fontWeight: 700, color: "#ff7a59", width: 54, flexShrink: 0, paddingTop: 3 }}>{d}</div>
                <div style={{ fontSize: 15, fontWeight: 400, color: "#1f2d3d" }}>{step}</div>
              </div>
            ))}
          </div>
          <div style={{ marginTop: 16, padding: "10px 12px", background: "#f5f8fb", borderRadius: 4, fontSize: 12, fontWeight: 300, color: "#6b7c92", lineHeight: 1.5 }}>
            Timelines vary by borrower, property, and lender. This is a representative file, not a commitment.
          </div>
        </div>
      </section>

      {/* Related */}
      <section style={{ maxWidth: 1080, margin: "96px auto 0", padding: "0 16px" }}>
        <Eyebrow>Related programs</Eyebrow>
        <h3 style={{ marginTop: 10, fontSize: 28, fontWeight: 300, letterSpacing: "-0.56px", lineHeight: 1.15, color: "#1f2d3d" }}>
          Similar borrowers usually compare these.
        </h3>
        <div style={{ marginTop: 24, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {relatedFill.map(p => (
            <a key={p.id} href={`product.html?id=${p.id}`} style={{
              display: "block", textDecoration: "none",
              background: "#fff", border: "1px solid #e1e7ef", borderRadius: 6, padding: 22,
              boxShadow: "rgba(31,45,61,0.06) 0 2px 4px",
              fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'",
            }}>
              <div style={{ fontFamily: "'Source Code Pro',monospace", fontSize: 11, fontWeight: 500, color: "#c64a2b", textTransform: "uppercase", letterSpacing: "0.08em" }}>{p.tag}</div>
              <div style={{ marginTop: 12, fontSize: 18, fontWeight: 400, color: "#1f2d3d", letterSpacing: "-0.18px", lineHeight: 1.25 }}>{p.headline}</div>
            </a>
          ))}
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ProductsIndex, ProductDetail });