/* About page (about.html) */

const PRINCIPLES = [
  { n: "01", head: "Modern is better", body: "The clipboard and gate-code era is over." },
  { n: "02", head: "Controlled beats convenient", body: "We'd rather be the safest site on the peninsula than the loosest." },
  { n: "03", head: "Pricing should be honest", body: "Read it once on the site, pay it forever." },
  { n: "04", head: "People matter more than space", body: "The unit is rented. The service is what you remember." },
  { n: "05", head: "Local is the point", body: "We're not a national chain pretending to care." },
];

const FACILITY_PHOTOS = [
  "Facility exterior",
  "Corridor & units",
  "Manager-attended access",
  "Site signage",
];

const AboutPage = () => (
  <Page>
    <PageHero
      eyebrow="About"
      title="Storage built on the peninsula, for the peninsula."
      lede="Local people, modern systems, and storage that actually works."
    />

    {/* The story */}
    <section className="section section--steel">
      <div className="container">
        <SectionHead eyebrow="The story" title="Why we started." />
        <div className="story">
          <p>Storage Cartel started because traditional self storage doesn't match how people actually want to use it.</p>
          <p>Most storage in Australia hasn't changed in twenty years. Gate codes from a printed slip. Pricing that varies depending on who you ask. Empty offices and "call us during business hours" when you need help.</p>
          <p>We built Storage Cartel to fix that. A facility with a manager onsite for every visit. Pricing that's the same on the website as it is on the invoice. An online account where you book your own access and see your own paperwork — and a real human to call when you need one.</p>
          <p>We're based in Blairgowrie and we run one site, properly. That's by design. Bigger isn't better in this business — controlled is.</p>
        </div>
      </div>
    </section>

    {/* Principles */}
    <section className="section section--mist" style={{ paddingTop: 80, paddingBottom: 80 }}>
      <div className="container">
        <SectionHead eyebrow="What we believe" title="Five rules we run by." />
        <div className="principles">
          {PRINCIPLES.map((p) => (
            <div className="principle" key={p.n}>
              <h3><span className="num">{p.n}</span></h3>
              <h3 style={{ fontSize: 20, marginBottom: 10 }}>{p.head}</h3>
              <p>{p.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>

    {/* Team */}
    <section className="section section--steel">
      <div className="container">
        <SectionHead eyebrow="The team" title="Who you'll deal with." lede="Photos, names and bios coming once the team's been properly captured. Four placeholders for now." />
        <div className="team-grid">
          {[
            { name: "Founder / Owner", role: "Owner-operator", bio: "Runs the place. Onsite for most weekends. Photo and bio supplied closer to launch." },
            { name: "Facility Manager", role: "Site Manager", bio: "Meets you at move-in. Knows where everything goes. Has strong opinions about trolley placement." },
            { name: "Customer Support", role: "Service & Bookings", bio: "Answers the phone when you call. Coordinates premium callouts and deliveries." },
            { name: "Operations", role: "Logistics & Intake", bio: "Handles deliveries, condition recording on vehicle storage, and the parts of the business you never see." },
          ].map((p, i) => (
            <article className="team-card" key={i}>
              <div className="photo"><div className="label">Photo placeholder</div></div>
              <div className="info">
                <h4>{p.name}</h4>
                <div className="role">{p.role}</div>
                <p>{p.bio}</p>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>

    {/* The facility */}
    <section className="section section--mist">
      <div className="container">
        <SectionHead eyebrow="The facility" title="Our site." lede="Our Blairgowrie facility runs Friday and Saturday attended access by default, with premium callouts available outside those windows. The site is fully fenced, monitored, and managed in person by our team." />
        <div className="facility-grid">
          {FACILITY_PHOTOS.map((p, i) => (
            <div className="facility-photo" key={i}>
              <div className="label">{p}</div>
            </div>
          ))}
        </div>
        <p style={{ fontSize: 14, color: "var(--ink-2)", marginTop: 16, fontStyle: "italic" }}>Real facility photos to be supplied — placeholders shown for layout.</p>
      </div>
    </section>

    <CTABand
      title="Want to see it for yourself?"
      lede="Book a unit, or get in touch and we'll arrange a look around."
      ctaLabel="Book Storage"
      ctaHref="book.html"
      secondaryLabel="Contact us"
      secondaryHref="contact.html"
    />
  </Page>
);

ReactDOM.createRoot(document.getElementById("root")).render(<AboutPage />);