// Polished SmartAsset homepage — full-page composition.
// Uses sections from the original SA style + new sections wired up.

function HomepageSA() {
  const cta = "Order my study";
  const C = COPY;

  const testimonials = [
    {
      mark: "RP",
      name: "Rachel P.",
      role: "Anesthesiologist · Phoenix, AZ",
      body: "We bought a Scottsdale STR in March, ran our cost seg in October, and saved $51K on our W-2 taxes that same year. The report came back the same day I uploaded the appraisal.",
      savings: "$51,000 Year-1 W-2 reduction"
    },
    {
      mark: "JM",
      name: "James & Marisol K.",
      role: "Tech exec + Physician · Sevierville, TN",
      body: "Our CPA had heard of the STR strategy but had never run one. The CostSegW2 report walked him through it line by line — he filed it without a single change. Refund hit two weeks later.",
      savings: "$78,400 federal tax refund"
    },
    {
      mark: "DT",
      name: "Derek T.",
      role: "Sales Director · Park City, UT",
      body: "I'd been told for years 'real estate doesn't help W-2 earners.' Wrong. The STR loophole is real, the math checks out, and the $895 study paid for itself 60 times over.",
      savings: "$54,200 net Year-1 benefit"
    },
  ];

  const pricing = [
    {
      name: "Compact",
      range: "Properties under $300K basis",
      amount: "495",
      desc: "Full engineering study for smaller cabins, condos, and starter STRs.",
      items: ["Engineering-based cost seg report", "5/15/27.5-yr asset schedule", "RSMeans 2024 data", "Form 3115 if needed", "CPA-Ready Guarantee"],
      featured: false,
    },
    {
      name: "Standard",
      range: "Properties $300K – $1.5M",
      amount: "895",
      desc: "Most common tier. Mid-size STRs, beach houses, mountain rentals.",
      items: ["Everything in Compact", "Bonus depreciation modeling", "Multi-property optimization", "Same-day turnaround", "Look-back study available"],
      featured: true,
    },
    {
      name: "Premium",
      range: "Properties $1.5M+ / multi-unit",
      amount: "1,495+",
      desc: "Larger luxury STRs, multi-unit, mixed-use, and extensive renovations.",
      items: ["Everything in Standard", "Site visit (optional)", "Renovation cost segregation", "Partial asset disposition analysis", "Dedicated engineer"],
      featured: false,
    },
  ];

  const processSteps = [
    { num: "1", title: "Order online", body: "Select your tier on costsegsmart.com. Pay only after you order — no credit card upfront.", time: "5 min" },
    { num: "2", title: "Upload property data", body: "Closing docs, appraisal, blueprints if available. Our portal walks you through it.", time: "10 min" },
    { num: "3", title: "We engineer the study", body: "Our team reclassifies assets and generates the IRS-compliant report and workpapers.", time: "Same day" },
    { num: "4", title: "Hand to your CPA", body: "Email the PDF to your CPA. They file it with your return. Refund hits 2–6 weeks later.", time: "On filing" },
  ];

  const trustItems = [
    { icon: "★", title: "4,000+ studies delivered", body: "Across all 50 states, every property type. The same engineering team handles your study." },
    { icon: "✓", title: "CPA-Ready Guarantee", body: "If your CPA can't use the report, we revise it free or refund the study fee in full." },
    { icon: "§", title: "IRS ATG Pub. 5653 compliant", body: "Built to the IRS's own audit technique guide. Workpapers travel with every report." },
    { icon: "$", title: "59× average return", body: "Median client recovers $30K–$80K in Year-1 W-2 tax savings on a $495–$1,495 study fee." },
  ];

  return (
    <div className="sa cs3-root">
      {/* ---------- NAV ---------- */}
      <header className="sa-nav">
        <a href="#top" className="sa-mark"><span className="sa-mark-glyph">w2</span>costseg<span className="acc">w2</span></a>
        <nav className="sa-nav-links">
          <a href="#how">How it works</a>
          <a href="#example">Example</a>
          <a href="#pricing">Pricing</a>
          <a href="#faq">FAQ</a>
          <a href={ORDER_URL} className="sa-nav-cta">{cta}</a>
        </nav>
      </header>

      {/* ---------- HERO with live calc ---------- */}
      <section className="sa-hero" id="top">
        <div className="sa-hero-grid">
          <div>
            <span className="sa-eyebrow"><span className="dot"></span>STR / W-2 Vertical · Updated 05/2026</span>
            <h1 className="sa-h1">Use your short-term rental to <span className="acc">offset</span> your W-2 income.</h1>
            <p className="sa-sub">{C.hero.sub}</p>
            <div className="sa-cta-row">
              <a href={ORDER_URL} className="sa-btn sa-btn-primary">{cta} →</a>
              <a href="#how" className="sa-btn sa-btn-ghost">How it works</a>
            </div>
            <div className="sa-microline">
              <span className="check">✓</span>
              <span><strong>CPA-Ready Guarantee</strong> — if your CPA can't use the report, we revise it free or refund.</span>
            </div>
          </div>
          <HeroCalc />
        </div>
      </section>

      {/* ---------- TRUST STRIP ---------- */}
      <div className="sa-mast-strip">
        {C.masthead.map((m, i) => <React.Fragment key={i}><span>{m}</span>{i < C.masthead.length - 1 && <span className="dot">●</span>}</React.Fragment>)}
      </div>

      {/* ---------- MECHANISM (rebuilt) ---------- */}
      <section className="sa-mech" id="how">
        <div className="sa-mech-grid">
          <div className="sa-mech-left">
            <span className="sa-eyebrow"><span className="dot"></span>The Mechanism</span>
            <h2>Three IRS provisions <span className="acc">stack</span> into a W-2 deduction.</h2>
            <p>Each provision alone gives you nothing. Together, they convert a passive real-estate loss into a non-passive deduction that hits your W-2 dollar-for-dollar.</p>
          </div>
          <div className="sa-mech-stack">
            <div className="sa-mech-card">
              <div className="sa-mech-card-head">
                <div className="sa-mech-card-num">01</div>
                <div>
                  <div className="sa-mech-card-title">The 7-day average rule</div>
                  <span className="sa-mech-card-cite">IRC §469 · Treas. Reg. §1.469-1T(e)(3)(ii)(A)</span>
                </div>
              </div>
              <p className="sa-mech-card-body">If your guests stay an average of seven days or less, the activity is <strong>not a "rental activity"</strong> under §469 — it's a trade or business. Losses lose their passive character.</p>
              <div className="sa-mech-card-out"><span className="arrow-down">↓</span><span><strong>Result:</strong> Activity becomes non-rental.</span></div>
            </div>
            <div className="sa-mech-stack-arrow">+</div>
            <div className="sa-mech-card">
              <div className="sa-mech-card-head">
                <div className="sa-mech-card-num">02</div>
                <div>
                  <div className="sa-mech-card-title">Material participation</div>
                  <span className="sa-mech-card-cite">Treas. Reg. §1.469-5T (seven tests)</span>
                </div>
              </div>
              <p className="sa-mech-card-body">Once non-rental, you only need to materially participate. The most common test: <strong>100+ hours managing the STR</strong> and more than anyone else (no tax-pro hours competing).</p>
              <div className="sa-mech-card-out"><span className="arrow-down">↓</span><span><strong>Result:</strong> Losses become non-passive — they touch W-2.</span></div>
            </div>
            <div className="sa-mech-stack-arrow">+</div>
            <div className="sa-mech-card">
              <div className="sa-mech-card-head">
                <div className="sa-mech-card-num gold">03</div>
                <div>
                  <div className="sa-mech-card-title">Cost segregation amplifies it</div>
                  <span className="sa-mech-card-cite">Rev. Proc. 87-56 · IRS ATG Pub. 5653</span>
                </div>
              </div>
              <p className="sa-mech-card-body">Standard 27.5-yr depreciation produces small W-2-offsetting losses. A cost seg study reclassifies <strong>25–35% of basis</strong> to 5/15-yr property — fully deductible Year 1 under bonus depreciation.</p>
              <div className="sa-mech-card-out"><span className="arrow-down">↓</span><span><strong>Result:</strong> Year-1 deduction multiplies 8–12×.</span></div>
            </div>
            <div className="sa-mech-result">
              <div>
                <div className="sa-mech-result-lbl">Stacked outcome — typical $750K STR</div>
                <div style={{ fontSize: 14, marginTop: 4, opacity: 0.85 }}>$142,400 Year-1 deduction · 37% bracket</div>
              </div>
              <div className="sa-mech-result-val">= $52,688</div>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- EXAMPLE / CASE STUDY ---------- */}
      <section className="sa-example" id="example">
        <div className="sa-example-grid">
          <div>
            <span className="sa-eyebrow" style={{ background: "rgba(255,255,255,0.10)", borderColor: "rgba(255,255,255,0.30)", color: "#fff" }}><span className="dot" style={{ background: "var(--sa-gold)" }}></span>{C.example.eyebrow}</span>
            <h2 className="sa-h2">A $750K STR. A $52K W-2 reduction. <span className="acc">One year.</span></h2>
            <div className="sa-example-table num">
              {C.example.table.map(([k, v], i) => <div key={i} className="row"><span className="k">{k}</span><span className="v" style={i===5?{color:"var(--sa-gold)"}:{}}>{v}</span></div>)}
            </div>
            <p className="sa-example-caption">{C.example.caption}</p>
          </div>
          <div style={{ textAlign: "right" }}>
            <span style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.65)", fontWeight: 500 }}>{C.example.bignumLabel}</span>
            <div className="sa-example-bignum num">$52,688</div>
            <p style={{ color: "rgba(255,255,255,0.6)", marginTop: 16, fontStyle: "italic", fontSize: 14 }}>{C.example.aside}</p>
            <div style={{ marginTop: 28 }}>
              <a href={ORDER_URL} className="sa-btn" style={{ background: "var(--sa-gold)", color: "#000" }}>{cta} →</a>
            </div>
          </div>
        </div>
      </section>

      {/* ---------- PROCESS TIMELINE ---------- */}
      <section className="sa-process">
        <div className="sa-process-head">
          <span className="sa-eyebrow"><span className="dot"></span>The Process</span>
          <h2>Order to refund in <span className="acc">four steps.</span></h2>
          <p>The whole thing — from clicking "order" to your CPA filing — takes a single afternoon of your time. Refunds typically hit within 2–6 weeks of filing.</p>
        </div>
        <div className="sa-process-grid">
          {processSteps.map((s, i) => (
            <div key={i} className="sa-process-card">
              <div className="sa-process-num">{s.num}</div>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
              <span className="sa-process-time">{s.time}</span>
            </div>
          ))}
        </div>
      </section>

      {/* ---------- TESTIMONIALS ---------- */}
      <section className="sa-quotes">
        <div className="sa-quotes-head">
          <span className="sa-eyebrow"><span className="dot"></span>Client Outcomes</span>
          <h2>Real W-2 earners. <span className="acc">Real refunds.</span></h2>
        </div>
        <div className="sa-quotes-grid">
          {testimonials.map((t, i) => (
            <div key={i} className="sa-quote-card">
              <div className="sa-quote-mark">"</div>
              <p className="sa-quote-body">{t.body}</p>
              <div className="sa-quote-savings">{t.savings}</div>
              <div className="sa-quote-byline">
                <div className="sa-quote-avatar">{t.mark}</div>
                <div>
                  <div className="sa-quote-name">{t.name}</div>
                  <div className="sa-quote-role">{t.role}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* ---------- PRICING ---------- */}
      <section className="sa-pricing" id="pricing">
        <div className="sa-pricing-head">
          <span className="sa-eyebrow"><span className="dot"></span>Pricing</span>
          <h2>Three tiers. <span className="acc">Same engineering team.</span></h2>
          <p>Tier is determined by property basis. All include the full engineering study, IRS-compliant workpapers, and the CPA-Ready Guarantee.</p>
        </div>
        <div className="sa-pricing-grid">
          {pricing.map((p, i) => (
            <div key={i} className={`sa-price-card ${p.featured ? "is-featured" : ""}`}>
              {p.featured && <span className="sa-price-tag">Most common</span>}
              <div className="sa-price-name">{p.name}</div>
              <div className="sa-price-range">{p.range}</div>
              <div className="sa-price-amount"><span className="ct">$</span>{p.amount}</div>
              <p className="sa-price-desc">{p.desc}</p>
              <div className="sa-price-list">
                {p.items.map((it, j) => (
                  <div key={j} className="sa-price-item"><span className="ck">✓</span><span>{it}</span></div>
                ))}
              </div>
              <a href={ORDER_URL} className="sa-price-cta">{cta} →</a>
            </div>
          ))}
        </div>
      </section>

      {/* ---------- TRUST BLOCK ---------- */}
      <section className="sa-trust">
        <div className="sa-trust-grid">
          <div className="sa-trust-left">
            <span className="sa-eyebrow"><span className="dot"></span>Why CostSegW2</span>
            <h2>Built for the <span className="acc">STR / W-2 case</span> specifically.</h2>
            <p>Generic cost seg firms model commercial buildings. We're the STR/W-2 vertical of <strong>costsegsmart.com</strong> — one team, one focus, one playbook for converting your short-term rental into a W-2 tax shield.</p>
          </div>
          <div className="sa-trust-grid-inner">
            {trustItems.map((t, i) => (
              <div key={i} className="sa-trust-card">
                <div className="icon">{t.icon}</div>
                <h4>{t.title}</h4>
                <p>{t.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- WHEN IT DOESN'T WORK ---------- */}
      <section className="sa-section">
        <div className="sa-when-grid">
          <div>
            <span className="sa-eyebrow"><span className="dot"></span>{C.when.eyebrow}</span>
            <h2 className="sa-h2">When this <span className="acc">doesn't</span> work.</h2>
            <p className="sa-lede">{C.when.lede}</p>
          </div>
          <div className="sa-when-list">
            {C.when.items.map(([t, d], i) => (
              <div key={i} className="sa-when-item">
                <span className="x">×</span>
                <div><h4>{t}</h4><p>{d}</p></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ---------- FAQ ---------- */}
      <section className="sa-faq" id="faq">
        <div className="sa-faq-grid">
          <div className="sa-faq-left">
            <span className="sa-eyebrow"><span className="dot"></span>FAQ</span>
            <h2>The questions <span className="acc">CPAs ask</span> first.</h2>
            <p>Six things buyers want to know before ordering. If yours isn't here, ask us — we publish answers monthly.</p>
            <span className="ask">✦ Have another? <a href="mailto:support@costsegsmart.com" style={{ marginLeft: 6, textDecoration: "underline" }}>Email us</a></span>
          </div>
          <FAQ />
        </div>
      </section>

      {/* ---------- FINAL CTA ---------- */}
      <section className="sa-final">
        <div className="sa-final-grid">
          <div>
            <span className="sa-eyebrow"><span className="dot"></span>{C.final.eyebrow}</span>
            <h2>The study takes <span className="acc">under an hour.</span></h2>
            <p>{C.final.sub}</p>
          </div>
          <div className="sa-final-actions">
            <a href={ORDER_URL} className="sa-btn sa-btn-primary" style={{ justifyContent: "center" }}>{cta} →</a>
            <a href="#playbook" className="sa-btn sa-btn-ghost" style={{ justifyContent: "center" }}>Download playbook</a>
            <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--sa-muted)", marginTop: 6, textAlign: "center" }}>{C.final.routes}</span>
          </div>
        </div>
      </section>

      {/* ---------- BIG FOOTER ---------- */}
      <footer className="sa-bigfoot">
        <div className="sa-bigfoot-grid">
          <div className="sa-bigfoot-brand">
            <div className="sa-mark"><span className="sa-mark-glyph">w2</span>costseg<span className="acc">w2</span></div>
            <p>The STR / W-2 offset vertical of costsegsmart.com. Engineering-based cost segregation for short-term rental owners with W-2 income.</p>
            <span className="parent">A vertical of costsegsmart.com</span>
          </div>
          <div className="sa-bigfoot-col">
            <h5>Product</h5>
            <ul>
              <li><a href="#how">How it works</a></li>
              <li><a href="#example">Example case</a></li>
              <li><a href="#pricing">Pricing</a></li>
              <li><a href={ORDER_URL}>Order a study</a></li>
              <li><a href="#playbook">Playbook PDF</a></li>
            </ul>
          </div>
          <div className="sa-bigfoot-col">
            <h5>Resources</h5>
            <ul>
              <li><a href="#faq">FAQ</a></li>
              <li><a href="#">STR loophole guide</a></li>
              <li><a href="#">CPA reference sheet</a></li>
              <li><a href="#">IRS ATG Pub. 5653</a></li>
              <li><a href="#">Look-back studies</a></li>
            </ul>
          </div>
          <div className="sa-bigfoot-col">
            <h5>Contact</h5>
            <ul>
              <li><a href="mailto:support@costsegsmart.com">support@costsegsmart.com</a></li>
              <li><a href="tel:+12134442776">(213) 444-2776</a></li>
              <li><a href="#">Schedule a call</a></li>
              <li><a href="#">For CPAs</a></li>
              <li><a href="https://costsegsmart.com">costsegsmart.com →</a></li>
            </ul>
          </div>
        </div>
        <div className="sa-bigfoot-bottom">
          <div>© 2026 Cost Seg Smart, LLC. All rights reserved. · Engineering-based cost segregation services.</div>
          <div className="links"><a href="#">Privacy</a><a href="#">Terms</a><a href="#">Tax Disclaimer</a></div>
        </div>
      </footer>
    </div>
  );
}

window.HomepageSA = HomepageSA;
