/* Quote Connect — About Us */

const AB_WHY = [
  ["send", "One simple quote request reaches multiple suppliers."],
  ["clock", "Save hours of researching and contacting businesses individually."],
  ["git-compare", "Compare pricing, products and services in one place."],
  ["gift", "Free for customers to use."],
  ["map", "Connect with Australian businesses across a wide range of industries."],
  ["target", "Suppliers receive genuine quote opportunities from customers ready to purchase."],
  ["heart-handshake", "Supporting Australian businesses."],
];

const AB_STEPS = [
  ["Submit your quote request.", "One form, two minutes, no account needed."],
  ["Relevant suppliers receive your enquiry.", "It goes straight to businesses that serve your category and area."],
  ["Suppliers contact you directly with their quote.", "Real prices from real businesses, in your inbox."],
  ["Compare your options and choose.", "Pick the business that’s right for you."],
];

function AboutScreen({ nav, t }) {
  return (
    <div className="screen about-screen">
      <div className="qc-wrap">
        <header className="ab-head">
          <div className="eyebrow">About us</div>
          <h1 className="display ab-h1">About QuoteConnect Australia</h1>
          <p className="ab-lead">At QuoteConnect Australia, we believe getting quotes shouldn’t be time-consuming or frustrating.</p>
        </header>

        <div className="ab-intro">
          <p>Our platform was created to simplify the way Australians connect with suppliers. Instead of contacting multiple businesses individually, customers submit a single quote request and receive responses from businesses ready to compete for their business. It’s a smarter, faster, and more efficient way to compare options and make informed purchasing decisions.</p>
          <p>Whether you’re looking for a new shed, water tank, fencing, farm supplies, trailers, machinery, vehicles, or thousands of other products and services, QuoteConnect Australia helps you save valuable time while giving suppliers access to genuine customers actively looking to buy.</p>
        </div>

        <section className="ab-mission card">
          <div className="ab-mission-in">
            <div className="eyebrow">Our mission</div>
            <h2 className="display ab-mission-h">To make requesting quotes easy for customers while helping Australian businesses generate quality leads and grow.</h2>
            <p>We believe competition benefits everyone. Customers receive multiple competitive quotes, while businesses gain direct access to motivated buyers without spending hours chasing new leads.</p>
          </div>
        </section>

        <section className="ab-sec">
          <h2 className="display ab-sec-h">Why choose QuoteConnect?</h2>
          <ul className="ab-why">
            {AB_WHY.map(([ic, txt]) => (
              <li key={txt}><span className="ab-why-ic"><Icon name={ic} size={17} /></span><span>{txt}</span></li>
            ))}
          </ul>
        </section>

        <section className="ab-sec ab-aussie">
          <div className="ab-aussie-copy">
            <h2 className="display ab-sec-h">Supporting Australian businesses</h2>
            <p><b>QuoteConnect Australia is proudly Australian owned and operated.</b></p>
            <p>Our goal is to help businesses of all sizes — from local family-owned companies to national suppliers — connect with customers who are actively searching for their products and services.</p>
            <p>Rather than replacing the relationship between customer and supplier, we simply make that connection easier.</p>
          </div>
        </section>

        <section className="ab-sec">
          <h2 className="display ab-sec-h">How it works</h2>
          <ol className="ab-steps">
            {AB_STEPS.map(([t2, d], i) => (
              <li key={t2}>
                <span className="ab-step-n mono">{String(i + 1).padStart(2, "0")}</span>
                <div><b>{t2}</b><span>{d}</span></div>
              </li>
            ))}
          </ol>
          <p className="ab-noend">No endless searching. No dozens of phone calls. Just one request and multiple quotes.</p>
        </section>

        <section className="ab-sec">
          <h2 className="display ab-sec-h">Our vision</h2>
          <div className="ab-intro">
            <p>We’re building Australia’s most trusted quote marketplace — bringing together customers and businesses through a platform that’s simple, transparent and focused on creating value for both sides.</p>
            <p>As we continue to grow, our commitment remains the same: making it easier for Australians to find the right supplier at the right price while helping businesses expand their reach and win more work.</p>
          </div>
        </section>

        <section className="ab-cta card">
          <div className="ab-cta-bg" />
          <div className="ab-cta-in">
            <div className="ab-cta-name display">QuoteConnect Australia</div>
            <div className="ab-cta-tag display">One Request. Multiple Quotes.</div>
            <div className="ab-cta-actions">
              <Btn variant="primary" size="lg" onClick={() => nav.go("browse")}>Get quotes <Icon name="arrow-right" size={18} /></Btn>
              <Btn variant="ghost" size="lg" onClick={() => nav.go("contact")}>Contact us</Btn>
            </div>
          </div>
        </section>
      </div>
    </div>
  );
}

window.AboutScreen = AboutScreen;