/* AboutUsPerks.jsx — Why-choose-us section + final CTA for About page. */

const AboutWhyChoose = () => {
  const PERKS = [
  {
    Icon: IconDollar,
    title: "High-end aesthetics, smart budgets",
    body: "We understand that cost concerns can be a major stressor during a renovation. We actively help our clients select beautiful, cost-effective material alternatives that deliver premium, luxury aesthetics without the premium price tag.",
    bullets: [
    "Material financing through trusted retailers.",
    "Flexible payment options for installation services.",
    "Cost-effective material swaps without compromising design."]
  },
  {
    Icon: IconHardHat,
    title: "Value-added perks on every project",
    body: "We believe in delivering unmatched value right from the start. That's why every applicable project includes a set of perks designed to make your project seamless.",
    bullets: [
    "Free 3D renderings — visualize your newly designed space before any construction begins.",
    "Free floor leveling — a perfectly flat, structurally sound foundation for your new floors.",
    "Free demolition & disposal of your old flooring at no extra cost."]
  },
  {
    Icon: IconShield,
    title: "Certified quality & safety",
    body: "Your peace of mind is our priority. We manage a strict network of trusted, certified subcontractors whose insurance coverage is meticulously verified before a single tool touches your project.",
    bullets: [
    "Proud members of the National Tile Contractors Association.",
    "Installers with specialized certifications including large-format tile.",
    "Built using the latest industry standards and trends."]
  }];

  return (
    <section className="section" data-screen-label="about-why">
      <div className="container">
        <div className="text-center" style={{ marginBottom: 56, maxWidth: 820, marginLeft: "auto", marginRight: "auto" }}>
          <div className="divider-flag" style={{ marginLeft: "auto", marginRight: "auto" }} />
          <div className="eyebrow">Why choose Gus Skyy?</div>
          <h2 className="section-title">Premium results, transparent process, certified quality</h2>
        </div>
        <div className="reno-grid">
          {PERKS.map((p, i) => {
          const Icon = p.Icon;
          return (
          <div className="reno-card" key={i}>
              <div style={{ width: 56, height: 56, borderRadius: 14, background: "rgba(217,71,42,0.10)", display: "flex", alignItems: "center", justifyContent: "center", color: "var(--gsc-red)", marginBottom: 12 }}>
                <Icon size={28} stroke={2} />
              </div>
              <h3 className="reno-card__title">{p.title}</h3>
              <p className="reno-card__body">{p.body}</p>
              <ul className="reno-card__list">
                {p.bullets.map((b, j) =>
                <li key={j}>
                  <IconCheck size={18} stroke={3.5} /> <span>{b}</span>
                </li>
              )}
              </ul>
            </div>);
        })}
        </div>
      </div>
    </section>);
};


const AboutFinalCTA = ({ onCta }) =>
  <section className="cta-final" data-screen-label="about-cta">
    <div className="container">
      <h2>Ready to build your dream space?</h2>
      <p>Whether you're starting with a single bathroom or designing a full custom home, we're ready to help you build something you'll be proud of for decades. Let's talk.</p>
      <button className="btn btn--primary" onClick={onCta} style={{ marginRight: 12 }}>
        Contact Us For A Consultation
      </button>
      <a className="btn btn--secondary--dark" href="tel:9735779383">Call 973-577-9383</a>
    </div>
  </section>;

window.AboutWhyChoose = AboutWhyChoose;
window.AboutFinalCTA = AboutFinalCTA;