/* How It Works, Who It's For, Comparison */

const STEPS = [
  {
    n: "01",
    title: "Book online",
    body: "Pick a unit size, sign your agreement and pay. Takes about five minutes.",
    icon: <Icon.Card size={32} />,
  },
  {
    n: "02",
    title: "Book your move-in",
    body: "Choose a Friday or Saturday window. Your manager will be there to let you in.",
    icon: <Icon.Calendar size={32} />,
  },
  {
    n: "03",
    title: "Access on your schedule",
    body: "Request access 24 hours ahead through your account. Premium callouts available for urgent visits.",
    icon: <Icon.Lock size={32} />,
  },
];

const HowItWorks = () => (
  <section className="section section--navy" id="how">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow on-dark">How it works</div>
        <h2 style={{ color: "#F4F6F9" }}>Three steps. Five minutes.</h2>
        <p className="lede">Different on purpose. Easier where it counts.</p>
      </div>
      <div className="steps">
        {STEPS.map((s) => (
          <article className="step" key={s.n}>
            <div className="step-icon">{s.icon}</div>
            <div className="num">{s.n}</div>
            <h3>{s.title}</h3>
            <p>{s.body}</p>
          </article>
        ))}
      </div>
      <div className="section-foot" style={{ marginTop: 40 }}>
        <a className="btn btn-secondary on-dark" href="#how-full">Read the full process <Icon.Arrow /></a>
      </div>
    </div>
  </section>
);

const SEGMENTS = [
  {
    head: "Moving or renovating",
    body: "Temporary space while life is in transit. Drop boxes, furniture and tools while the build runs.",
    icon: <Icon.Move />,
  },
  {
    head: "Holiday home overflow",
    body: "Off-season storage for the peninsula property — bikes, kayaks, linen, kids' gear.",
    icon: <Icon.Holiday />,
  },
  {
    head: "Small business",
    body: "Stock, tools and equipment without leasing more space.",
    icon: <Icon.Business />,
  },
  {
    head: "Boat, caravan & vehicle",
    body: "Secure storage for the things that don't fit at home.",
    icon: <Icon.Vehicle />,
  },
  {
    head: "Downsizing",
    body: "Keep what matters while you settle into less space.",
    icon: <Icon.Downsize />,
  },
];

const WhoItsFor = () => (
  <section className="section section--mist">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">Who it's for</div>
        <h2>Five reasons<br />the unit fills up.</h2>
      </div>
      <div className="segments">
        {SEGMENTS.map((s, i) => (
          <article className="seg" key={i}>
            <div className="seg-glyph">{s.icon}</div>
            <h4>{s.head}</h4>
            <p>{s.body}</p>
          </article>
        ))}
      </div>
    </div>
  </section>
);

const COMPARE = [
  ["Gate codes and empty offices", "Manager-attended access"],
  ["Surprise fees and bond traps", "Transparent pricing"],
  ["Paper agreements in a folder", "Digital agreement, online account"],
  ['"Call us between 9 and 4"', "Book access through your account"],
  ["Dusty and forgotten", "Modern, controlled, accountable"],
];

const Comparison = () => (
  <section className="section section--steel" id="why">
    <div className="container">
      <div className="section-head">
        <div className="eyebrow">Why Storage Cartel</div>
        <h2>The old way.<br />The way it should be.</h2>
        <p className="lede">Self storage has been operated the same way for thirty years. We changed five things that matter.</p>
      </div>
      <div className="compare">
        <div className="compare-col old">
          <header>Old storage</header>
          {COMPARE.map(([a], i) => (
            <div className="compare-row" key={i}>
              <span className="mark">×</span>
              <span>{a}</span>
            </div>
          ))}
        </div>
        <div className="compare-col new">
          <header>
            <Wordmark size={18} onDark />
          </header>
          {COMPARE.map(([, b], i) => (
            <div className="compare-row" key={i}>
              <span className="mark">→</span>
              <span>{b}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  </section>
);

Object.assign(window, { HowItWorks, WhoItsFor, Comparison });