// Hero — split layout with accent-word headline.

const Hero = ({
  title,            // ["Inference,", "rebuilt for the", "city."]
  accentIndex = 2,  // which fragment to color orange
  body,
  ctas = [],
  image,            // src
  imageAlt = "",
  variant = "split", // "split" | "wide"
}) => (
  <section className={`pyrra-hero pyrra-hero--${variant}`}>
    <div className="pyrra-hero__text">
      <h1 className="pyrra-hero__title">
        {title.map((line, i) => (
          <React.Fragment key={i}>
            {typeof line === "string" && i === accentIndex
              ? <span className="pyrra-accent-word">{line}</span>
              : line}
            {i < title.length - 1 ? <br /> : null}
          </React.Fragment>
        ))}
      </h1>
      {body ? <p className="pyrra-hero__body">{body}</p> : null}
      {ctas.length ? (
        <div className="pyrra-hero__ctas">
          {ctas.map((cta, i) => (
            <Button key={i} variant={cta.variant || (i === 0 ? "primary" : "secondary")} onClick={cta.onClick}>
              {cta.label}
            </Button>
          ))}
        </div>
      ) : null}
    </div>
    <div className="pyrra-hero__media">
      <img src={image} alt={imageAlt} />
    </div>
  </section>
);

// Spec bar — 3 columns of icon + value + label.
const SpecBar = ({ items }) => (
  <div className="pyrra-specbar">
    {items.map((it, i) => (
      <div className="pyrra-specbar__item" key={i}>
        <div className="pyrra-specbar__icon">{it.icon}</div>
        <div>
          <div className="pyrra-specbar__value">{it.value}</div>
          <div className="pyrra-specbar__label">{it.label}</div>
        </div>
      </div>
    ))}
  </div>
);

// Feature grid — 3 or 4 cards.
const FeatureGrid = ({ items }) => (
  <div className={`pyrra-features pyrra-features--n${items.length}`}>
    {items.map((it, i) => (
      <div className="pyrra-feature" key={i}>
        <div className="pyrra-feature__icon">{it.icon}</div>
        <h3 className="pyrra-feature__title">{it.title}</h3>
        <p className="pyrra-feature__body">{it.body}</p>
      </div>
    ))}
  </div>
);

// Env card — image-on-top, title, body. Used for residential/hospital/office.
const EnvCard = ({ image, title, body, action }) => (
  <div className="pyrra-env">
    <div className="pyrra-env__image" style={{ backgroundImage: `url(${image})` }} />
    <div className="pyrra-env__text">
      <h4>{title}</h4>
      <p>{body}</p>
      {action ? <a className="pyrra-env__action" href="#">{action} →</a> : null}
    </div>
  </div>
);

// Numbered step card.
const StepCard = ({ n, title, body, image }) => (
  <div className="pyrra-step">
    <div className="pyrra-step__head">
      <div className="pyrra-step__num">{n}</div>
      <div>
        <h4>{title}</h4>
        <p>{body}</p>
      </div>
    </div>
    {image ? <div className="pyrra-step__image" style={{ backgroundImage: `url(${image})` }} /> : null}
  </div>
);

Object.assign(window, { Hero, SpecBar, FeatureGrid, EnvCard, StepCard });