/*
 * Instant Strata hero: how the layout works
 *
 * 1. THIRDS-BASED LAYOUT (12-column grid on desktop)
 *    Each step = 4 columns = 1 third. Starts and spans are derived as:
 *      col start = 1, 5, 9   →   col span = 13 − start = 12, 8, 4
 *
 *    lines[0] → cols  1–12, row 1  (100%: full top width)
 *    lines[1] → cols  5–12, row 2  ( 2/3: sits over the photo)
 *    lines[2] → cols  9–12, row 3  ( 1/3: clear of the photo)
 *
 *    The photo is absolutely positioned at w-2/3 (8 cols wide) so its
 *    right edge falls exactly at the col-9 boundary: the same column
 *    where lines[2] and the copy block begin.
 *
 * 2. THE LIME RIBBON
 *    Each line is its own lime block. Selective corner flattening fuses them
 *    into one continuous ribbon:
 *      · lines[0]: flat bottom-right
 *      · lines[1]: flat top-left, top-right, bottom-right
 *      · lines[2]: flat top-left
 *
 * 3. CONCAVE NOTCH MASKING  ← the signature detail
 *    At each interior junction, a HeroNotch carves a concave (inward) curve
 *    so adjacent blocks fuse smoothly. The trick:
 *      a) a small lime square is pushed just OUTSIDE the block edge
 *         (translateX ±100%), extending the block by 24 px;
 *      b) a larger ::after (110%, forest-coloured) with ONE rounded corner
 *         masks it: leaving a smooth inward curve.
 *    Notch positions: top-left on lines[1] and lines[2]; bottom-right on lines[1].
 *    The photo's HeroVisual `notches={["topRight"]}` carves the same concave
 *    curve at the photo's top-right corner, interlocking it with lines[1].
 *
 * 4. OVERFLOW CLIPPING
 *    Each line sits inside a clip-path wrapper:
 *      lines[0]  → inset(0 0 0 0)     standard clip
 *      lines[1+] → inset(0 0 0 -24px) expands 24 px left so the
 *                  topLeft notch remains visible, right side still clips.
 *
 * 5. FLUID TYPE
 *    The section is a CSS container ([container-type:inline-size]) and the
 *    headline uses cqw units (clamp(26px, 6.4cqw, 92px)) so it scales with
 *    the hero's own width: not the viewport.
 */

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/hero/registry.json

<Hero
  lines={[
    "Strata Intelligence",  // lines[0]: 100% width  (cols 1–12, row 1)
    "built around",         // lines[1]:  2/3 width  (cols 5–12, row 2) over photo
    "your clients",         // lines[2]:  1/3 width  (cols 9–12, row 3) clear of photo
  ]}
  subtext="..."             // supporting paragraph: right 1/3, below ribbon
  actions={...}             // dual CTA (HeroAction primary + outline)
  visual={...}              // lower-left photo (w-2/3): use <HeroVisual> for notch masking
/>

import { Hero, HeroAction, HeroVisual } from "@/components/ui/hero"

export function Page() {
  return (
    <Hero
      lines={["Strata Intelligence", "built around", "your clients"]}
      subtext="Instant Strata is the command centre for your portfolio, uniting owners, committees and managers around the data that keeps every building running."
      actions={
        <>
          <HeroAction href="/signup">Book a demo</HeroAction>
          <HeroAction href="/tour" variant="outline">Take a tour</HeroAction>
        </>
      }
      visual={
        <HeroVisual
          src="/img/people/1.webp"
          alt="Strata managers reviewing a building portfolio"
        />
      }
    />
  )
}