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

function ProcessPage() {
  const steps = [
    ["01", "Initial call", "Fifteen minutes, no soft pull. A veteran broker learns your file and tells you the programs that actually fit. No scripted intake. If we aren't the right shop, we'll say that."],
    ["02", "Application", "A full 1003, handled with a human. We collect only the documents the chosen program needs — no generic ten-document dump that sits in a portal."],
    ["03", "Shop the lenders", "We run your file against 40+ wholesale lenders. You see the top three with real pricing breakdowns. We recommend one and explain why."],
    ["04", "Underwriting", "Our processor packages the file. Conditions come back through us, not to you directly. Clean communication, one point of contact."],
    ["05", "Appraisal + title", "Ordered through a local vendor we use every week. If the appraisal comes in low, we tell you the same hour, with options."],
    ["06", "Close + donate", "Clear to close, final disclosure, signing. At the table you pick one of four nonprofits. Haven donates in your name, at no cost to you."],
  ];

  const lanes = [
    {
      title: "Purchase",
      total: "21–30 days",
      rows: [
        ["Day 0", "Initial call"],
        ["Day 2", "Application + docs"],
        ["Day 5", "Lender selected"],
        ["Day 12", "Underwriting complete"],
        ["Day 18", "Appraisal + clear to close"],
        ["Day 24", "Close + charity"],
      ],
    },
    {
      title: "Refinance",
      total: "18–28 days",
      rows: [
        ["Day 0", "Initial call"],
        ["Day 2", "Application + docs"],
        ["Day 4", "Lender selected"],
        ["Day 10", "Underwriting complete"],
        ["Day 14", "Appraisal + clear to close"],
        ["Day 20", "Close + charity"],
      ],
    },
    {
      title: "Cash-out",
      total: "24–35 days",
      rows: [
        ["Day 0", "Initial call"],
        ["Day 3", "Application + docs"],
        ["Day 6", "Lender selected"],
        ["Day 14", "Underwriting complete"],
        ["Day 22", "Appraisal + clear to close"],
        ["Day 28", "Close + charity"],
      ],
    },
  ];

  return (
    <div>
      <section style={{ maxWidth: 1080, margin: "64px auto 0", padding: "0 16px" }}>
        <Eyebrow tone="coral">How it works</Eyebrow>
        <h1 style={{ marginTop: 12, fontSize: 56, fontWeight: 300, letterSpacing: "-1.4px", lineHeight: 1.05, color: "#1f2d3d", maxWidth: 780 }}>
          Six steps, one point of contact, an honest cost sheet.
        </h1>
        <p style={{ marginTop: 18, fontSize: 18, fontWeight: 300, color: "#6b7c92", lineHeight: 1.45, maxWidth: 620 }}>
          The same broker is with you from the first call to the closing table. No warm handoffs, no queue, no learners.
        </p>
      </section>

      {/* Steps */}
      <section style={{ maxWidth: 1080, margin: "64px auto 0", padding: "0 16px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
          {steps.map(([num, title, body]) => (
            <div key={num} style={{
              background: "#fff", border: "1px solid #e1e7ef", borderRadius: 6,
              padding: 28, fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'",
            }}>
              <div style={{ fontFamily: "'Source Code Pro',monospace", fontSize: 11, fontWeight: 700, color: "#ff7a59", letterSpacing: "0.08em" }}>{num}</div>
              <div style={{ marginTop: 12, fontSize: 22, fontWeight: 400, color: "#1f2d3d", letterSpacing: "-0.22px" }}>{title}</div>
              <div style={{ marginTop: 10, fontSize: 15, fontWeight: 300, color: "#6b7c92", lineHeight: 1.55 }}>{body}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Timelines by file type */}
      <section style={{ maxWidth: 1080, margin: "96px auto 0", padding: "0 16px" }}>
        <Eyebrow>Typical timelines</Eyebrow>
        <h3 style={{ marginTop: 10, fontSize: 36, fontWeight: 300, letterSpacing: "-0.72px", lineHeight: 1.1, color: "#1f2d3d", maxWidth: 640 }}>
          Purchase, refinance, cash-out.
        </h3>
        <div style={{ marginTop: 32, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
          {lanes.map(lane => (
            <div key={lane.title} style={{
              background: "#fff", border: "1px solid #e1e7ef", borderRadius: 8, padding: 24,
              boxShadow: "rgba(31,45,61,0.06) 0 2px 4px",
              fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'",
            }}>
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline" }}>
                <div style={{ fontSize: 20, fontWeight: 400, color: "#1f2d3d", letterSpacing: "-0.2px" }}>{lane.title}</div>
                <div style={{ fontFamily: "'Source Code Pro',monospace", fontSize: 11, fontWeight: 500, color: "#c64a2b", textTransform: "uppercase", letterSpacing: "0.08em" }}>{lane.total}</div>
              </div>
              <div style={{ marginTop: 18 }}>
                {lane.rows.map(([d, s], i) => (
                  <div key={d} style={{ display: "flex", gap: 16, padding: "10px 0", borderTop: i === 0 ? "none" : "1px solid #e1e7ef" }}>
                    <div style={{ fontFamily: "'Source Code Pro',monospace", fontSize: 11, fontWeight: 700, color: "#ff7a59", width: 48, flexShrink: 0 }}>{d}</div>
                    <div style={{ fontSize: 14, fontWeight: 400, color: "#1f2d3d" }}>{s}</div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ maxWidth: 1080, margin: "96px auto 0", padding: "0 16px" }}>
        <div style={{ 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={{ fontSize: 28, fontWeight: 300, letterSpacing: "-0.56px", lineHeight: 1.15 }}>Start with the fifteen-minute call.</div>
            <div style={{ marginTop: 10, fontSize: 14, fontWeight: 300, color: "rgba(255,255,255,0.7)" }}>No soft pull. No commitment. A real broker, on a real call.</div>
          </div>
          <PrimaryButton as="a" href="contact.html">Book a call</PrimaryButton>
        </div>
      </section>
    </div>
  );
}

function AboutPage() {
  const principles = [
    ["Broker over bank", "We work for you, not a balance sheet. Forty-plus wholesale lenders compete for your file."],
    ["Program over margin", "We recommend the program that fits your file, not the one with the widest spread."],
    ["Transparency over polish", "Every cost, every fee, on day one. No last-minute reconciliation at the table."],
    ["Atlanta over everywhere", "We live here. Our charity-at-closing partners are Atlanta-rooted. Our lenders know our files."],
  ];

  return (
    <div>
      <section style={{ maxWidth: 1080, margin: "64px auto 0", padding: "0 16px" }}>
        <Eyebrow tone="coral">About Haven</Eyebrow>
        <h1 style={{ marginTop: 12, fontSize: 56, fontWeight: 300, letterSpacing: "-1.4px", lineHeight: 1.05, color: "#1f2d3d", maxWidth: 780 }}>
          A boutique Atlanta brokerage for borrowers banks skip.
        </h1>
        <p style={{ marginTop: 18, fontSize: 18, fontWeight: 300, color: "#6b7c92", lineHeight: 1.5, maxWidth: 640 }}>
          Haven Home Loans is a wholesale mortgage brokerage based in Atlanta. We opened because too many borrowers — self-employed, asset-rich, rebuilding, foreign national — get bounced out of retail banks for reasons that have nothing to do with their ability to pay.
        </p>
      </section>

      {/* Mission */}
      <section style={{ maxWidth: 1080, margin: "80px auto 0", padding: "0 16px", display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 56 }}>
        <div>
          <Eyebrow>Mission</Eyebrow>
          <h3 style={{ marginTop: 10, fontSize: 28, fontWeight: 300, letterSpacing: "-0.56px", lineHeight: 1.2, color: "#1f2d3d" }}>
            Match every borrower to the right program, the first time.
          </h3>
        </div>
        <div style={{ fontSize: 16, fontWeight: 300, color: "#6b7c92", lineHeight: 1.6, maxWidth: 540 }}>
          <p style={{ margin: 0 }}>Most mortgage advice comes from someone who only sells one product. A broker's job is different. We look at your file, figure out what a lender will want to see, and bring the lender to you.</p>
          <p style={{ marginTop: 16 }}>That's it. No rate promises. No pressure. If we're not the right shop for you, we'll say that — and often refer you somewhere that is.</p>
        </div>
      </section>

      {/* Principles */}
      <section style={{ maxWidth: 1080, margin: "96px auto 0", padding: "0 16px" }}>
        <Eyebrow>Principles</Eyebrow>
        <h3 style={{ marginTop: 10, fontSize: 36, fontWeight: 300, letterSpacing: "-0.72px", lineHeight: 1.1, color: "#1f2d3d" }}>
          Four things we hold ourselves to.
        </h3>
        <div style={{ marginTop: 36, display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 24 }}>
          {principles.map(([t, b]) => (
            <div key={t} style={{ padding: "24px 0", borderTop: "1px solid #e1e7ef" }}>
              <div style={{ fontSize: 22, fontWeight: 400, color: "#1f2d3d", letterSpacing: "-0.22px" }}>{t}</div>
              <div style={{ marginTop: 10, fontSize: 15, fontWeight: 300, color: "#6b7c92", lineHeight: 1.55, maxWidth: 480 }}>{b}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Licensing map */}
      <section style={{ maxWidth: 1080, margin: "96px auto 0", padding: "0 16px" }}>
        <Eyebrow>Licensing</Eyebrow>
        <h3 style={{ marginTop: 10, fontSize: 36, fontWeight: 300, letterSpacing: "-0.72px", lineHeight: 1.1, color: "#1f2d3d" }}>
          Licensed in Georgia, Florida, and Texas.
        </h3>
        <div style={{ marginTop: 32, background: "#fff", border: "1px solid #e1e7ef", borderRadius: 8, padding: 32,
          display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 40, alignItems: "center",
          boxShadow: "rgba(31,45,61,0.06) 0 2px 4px" }}>
          <svg viewBox="0 0 400 260" style={{ width: "100%", height: "auto", maxHeight: 280 }}>
            <rect x="0" y="0" width="400" height="260" fill="#f5f8fb"/>
            <path d="M40 80 L120 60 L200 70 L280 80 L360 110 L360 200 L280 230 L200 240 L120 230 L60 200 Z"
              fill="#e1e7ef" stroke="#cbd5df" strokeWidth="1"/>
            {/* TX */}
            <path d="M55 110 L130 105 L140 145 L160 165 L150 195 L130 215 L80 220 L65 195 L50 170 Z" fill="#33475b" opacity="0.9"/>
            <text x="100" y="170" fontFamily="Inter Tight" fontSize="11" fill="#fff" fontWeight="400" textAnchor="middle">TX</text>
            {/* GA */}
            <path d="M210 130 L255 130 L265 170 L255 210 L218 215 L210 180 Z" fill="#33475b" opacity="0.9"/>
            <text x="233" y="175" fontFamily="Inter Tight" fontSize="11" fill="#fff" fontWeight="400" textAnchor="middle">GA</text>
            {/* FL */}
            <path d="M225 215 L285 215 L315 235 L285 245 L240 240 Z" fill="#33475b" opacity="0.9"/>
            <text x="270" y="232" fontFamily="Inter Tight" fontSize="10" fill="#fff" fontWeight="400" textAnchor="middle">FL</text>
            <circle cx="233" cy="150" r="5" fill="#ff7a59" stroke="#fff" strokeWidth="2"/>
            <text x="243" y="146" fontFamily="Source Code Pro" fontSize="9" fill="#c64a2b" fontWeight="500" letterSpacing="0.8">ATL · HQ</text>
          </svg>
          <div>
            <div style={{ fontFamily: "'Source Code Pro',monospace", fontSize: 11, fontWeight: 500, color: "#6b7c92", textTransform: "uppercase", letterSpacing: "0.08em" }}>Headquarters</div>
            <div style={{ marginTop: 10, fontSize: 17, fontWeight: 400, color: "#1f2d3d", lineHeight: 1.45 }}>
              2964 Peachtree Road NW<br/>
              Suite 530<br/>
              Atlanta, GA 30305
            </div>
            <div style={{ marginTop: 20, fontFamily: "'Source Code Pro',monospace", fontSize: 11, fontWeight: 500, color: "#6b7c92", textTransform: "uppercase", letterSpacing: "0.08em" }}>States licensed</div>
            <div style={{ marginTop: 10, fontSize: 15, fontWeight: 400, color: "#1f2d3d" }}>Georgia · Florida · Texas</div>
            <div style={{ marginTop: 4, fontSize: 13, fontWeight: 300, color: "#6b7c92" }}>This site is not an offer to lend in any state where Haven is not licensed.</div>
            <div style={{ marginTop: 20, fontFamily: "'Source Code Pro',monospace", fontSize: 11, fontWeight: 500, color: "#6b7c92", textTransform: "uppercase", letterSpacing: "0.08em" }}>NMLS</div>
            <div style={{ marginTop: 10, fontSize: 15, fontWeight: 400, color: "#1f2d3d", fontFeatureSettings: "'tnum'" }}>#2431561 · GA Broker #2431561 · FL Broker #MBR6228 · TX SML #2431561</div>
          </div>
        </div>
      </section>
    </div>
  );
}

function CommunityPage() {
  const partners = [
    { name: "Rally Foundation", sub: "Pediatric cancer research · Atlanta", body: "Rally funds childhood cancer research at Emory, Children's Healthcare of Atlanta, and partner institutions. Our donations fund active research grants." },
    { name: "Best Buddies", sub: "Friendships, jobs, leadership for IDD", body: "Best Buddies creates one-to-one friendships and employment programs for people with intellectual and developmental disabilities. Our Atlanta chapter runs year-round." },
    { name: "Wounded Warrior Project", sub: "Post-9/11 injured service members", body: "WWP serves post-9/11 veterans and service members with combat injuries, through mental health, rehabilitation, and career programs." },
    { name: "Ozzie Albies Foundation", sub: "Atlanta youth & education", body: "The Ozzie Albies Foundation supports Atlanta-area youth programs, educational initiatives, and community-based sports access." },
  ];

  return (
    <div>
      <section style={{ maxWidth: 1080, margin: "64px auto 0", padding: "0 16px" }}>
        <Eyebrow tone="coral">Charity at closing</Eyebrow>
        <h1 style={{ marginTop: 12, fontSize: 56, fontWeight: 300, letterSpacing: "-1.4px", lineHeight: 1.05, color: "#1f2d3d", maxWidth: 780 }}>
          Small ritual, real money, Atlanta-rooted.
        </h1>
        <p style={{ marginTop: 18, fontSize: 18, fontWeight: 300, color: "#6b7c92", lineHeight: 1.5, maxWidth: 640 }}>
          At every Haven closing, the borrower picks one of four Atlanta-rooted nonprofits. Haven makes a donation in their name, at no cost to the borrower. No fee stack, no markup, no asterisk.
        </p>
      </section>

      <section style={{ maxWidth: 1080, margin: "64px auto 0", padding: "0 16px" }}>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
          {partners.map(p => (
            <div key={p.name} style={{
              background: "#fff", border: "1px solid #e1e7ef", borderRadius: 8, padding: 28,
              fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'",
              boxShadow: "rgba(31,45,61,0.06) 0 2px 4px",
            }}>
              <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
                <div style={{ width: 44, height: 44, borderRadius: 6, background: "#fff3ee", border: "1px solid #ffd9cd", display: "grid", placeItems: "center" }}>
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#ff7a59" strokeWidth="1.8"><path d="M20.8 4.6a5.5 5.5 0 0 0-7.8 0L12 5.6l-1-.9a5.5 5.5 0 1 0-7.8 7.8l1 1L12 21l7.8-7.8 1-1a5.5 5.5 0 0 0 0-7.8z"/></svg>
                </div>
                <div>
                  <div style={{ fontSize: 20, fontWeight: 400, color: "#1f2d3d", letterSpacing: "-0.2px" }}>{p.name}</div>
                  <div style={{ fontSize: 12, fontWeight: 300, color: "#6b7c92", marginTop: 3 }}>{p.sub}</div>
                </div>
              </div>
              <div style={{ marginTop: 18, fontSize: 15, fontWeight: 300, color: "#6b7c92", lineHeight: 1.6 }}>{p.body}</div>
            </div>
          ))}
        </div>
      </section>

      <section style={{ maxWidth: 1080, margin: "96px auto 0", padding: "0 16px" }}>
        <div style={{ background: "#1f2d3d", borderRadius: 8, padding: "48px 44px",
          fontFamily: "'Inter Tight',sans-serif", fontFeatureSettings: "'ss01'" }}>
          <Eyebrow tone="coral">How it works</Eyebrow>
          <div style={{ marginTop: 14, fontSize: 28, fontWeight: 300, letterSpacing: "-0.56px", lineHeight: 1.2, color: "#fff", maxWidth: 700 }}>
            At the closing table, pick one. We write the check that week.
          </div>
          <div style={{ marginTop: 28, display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 16 }}>
            {[
              ["You pick", "Choose one of the four partners. We have cards at every closing."],
              ["We donate", "Haven makes the donation in your name within five business days."],
              ["You get a letter", "The partner mails an acknowledgement to the address on your file."],
            ].map(([t, b]) => (
              <div key={t} style={{ padding: 20, background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.12)", borderRadius: 6 }}>
                <div style={{ fontSize: 17, fontWeight: 400, color: "#fff", letterSpacing: "-0.17px" }}>{t}</div>
                <div style={{ marginTop: 8, fontSize: 13, fontWeight: 300, color: "rgba(255,255,255,0.65)", lineHeight: 1.55 }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { ProcessPage, AboutPage, CommunityPage });