const Storage = () => {
  const tiers = [
    {
      tier: "1 Month",
      cap: "30", unit: "DAYS",
      dur: "Included with every unit",
      price: "Included",
      use: "Dispute window for the current job. Clip, hand-off, done.",
      fill: 10,
    },
    {
      tier: "1 Year",
      cap: "12", unit: "MOS",
      dur: "Cloud retention · cold-tier",
      price: "+$49 /mo",
      use: "One full season of roofs, one renewal cycle of claims.",
      fill: 30,
    },
    {
      tier: "5 Years",
      cap: "5", unit: "YRS",
      dur: "Cloud retention · cold-tier",
      price: "+$149 /mo",
      use: "Long-tail warranty and latent-defect claims. Insurer-friendly.",
      fill: 65,
    },
    {
      tier: "10 Years",
      cap: "10", unit: "YRS",
      dur: "Cloud retention · cold-tier",
      price: "+$249 /mo",
      use: "Liability depth. Keep footage for the life of the roof.",
      fill: 100,
    },
  ];
  return (
    <section className="storage" id="storage">
      <div className="wrap">
        <div className="section-head">
          <Reveal><Eyebrow>Cloud Retention</Eyebrow></Reveal>
          <Reveal delay={80}>
            <h2>Keep the footage<br/><span style={{ color: "var(--muted)" }}>as long as liability lasts.</span></h2>
          </Reveal>
          <Reveal delay={160}>
            <p className="lead">
              Every unit includes one month of cloud retention. Push it to a
              year, five years, or ten — your footage, hashed and signed,
              sitting on our servers until an insurer or attorney asks for it.
              No per-GB billing. Retrieval is included for evidence requests.
            </p>
          </Reveal>
        </div>
      </div>
      <div className="wrap">
        <div className="storage-grid">
          {tiers.map((t, i) => (
            <Reveal key={t.tier} delay={i * 80}>
              <div className="storage-card">
                <div className="tier">{t.tier}</div>
                <div className="cap tabular">{t.cap}<span className="unit">{t.unit}</span></div>
                <div className="storage-meter"><div className="fill" style={{ width: t.fill + "%" }} /></div>
                <div className="dur">{t.dur}</div>
                <div className="use">{t.use}</div>
                <div className="price">{t.price}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Storage });