// ciclo. — Hero
// Bold typographic display + the week-strip as the centerpiece visual.
// The week strip shows supplies dwindling Mon→Sat then a green "reset" Sun.

const DAYS = [
  { k: "seg", label: "seg", stock: "100%", size: 6, sun: false },
  { k: "ter", label: "ter", stock: "82%",  size: 8, sun: false },
  { k: "qua", label: "qua", stock: "64%",  size: 10, sun: false },
  { k: "qui", label: "qui", stock: "48%",  size: 12, sun: false },
  { k: "sex", label: "sex", stock: "30%",  size: 14, sun: false },
  { k: "sab", label: "sab", stock: "12%",  size: 16, sun: false },
  { k: "dom", label: "dom", stock: "novo kit", size: 22, sun: true },
];

const WeekStrip = () => (
  <div className="week-strip" role="img" aria-label="ciclo semanal de seg a dom">
    {DAYS.map((d) => (
      <div key={d.k} className={`week-day${d.sun ? ' sun' : ''}`}>
        <span
          className="dot"
          style={{ width: d.size, height: d.size }}
        />
        <span className="label">{d.label}</span>
        <span className="stock">{d.stock}</span>
      </div>
    ))}
  </div>
);

const Hero = ({ tone = "default" }) => {
  return (
    <section id="top" className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow-row">
              <span className="eyebrow">
                <span className="dot"/>
                entrega grátis · todo domingo · são paulo
              </span>
              <span className="sep"/>
              <span className="meta">temporada 04 · 2026</span>
            </div>

            <h1 className="hero-display">
              <span className="hl-row">sua casa em</span>
              <span className="hl-row">modo <em>automático</em><span className="p">.</span></span>
            </h1>

            <p className="hero-sub">
              assinatura semanal de sacos de lixo, limpeza e refis que
              chega no seu domingo. você responde o quiz, a gente
              monta — e nunca mais pensa nisso.
            </p>

            <div className="hero-cta-row">
              <a href="#quiz" className="btn btn-primary">
                começar o quiz · 2 min
                <span className="arr"><Icon name="arrow-up-right" size={12}/></span>
              </a>
              <a href="#como" className="btn btn-secondary">como funciona</a>
              <span className="micro">
                <span className="check"><Icon name="check" size={9}/></span>
                cancela quando quiser
              </span>
            </div>
          </div>

          <div className="hero-week" aria-labelledby="week-ttl">
            <div className="hero-week-head">
              <span id="week-ttl" className="ttl">
                a semana que se repete &nbsp;<em>— seu kit dura 7 dias, exato</em>
              </span>
              <span className="meta">seg → dom · cresce · reseta</span>
            </div>
            <WeekStrip/>
            <div className="hero-badges">
              <span className="badge b-ink">
                <span className="ico"><Icon name="truck" size={11}/></span>
                frete grátis
              </span>
              <span className="badge b-paper">pula semanas</span>
              <span className="badge b-paper">refis inclusos</span>
              <span className="badge b-mint">
                <span className="ico"><Icon name="repeat" size={11}/></span>
                troca itens
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Hero = Hero;