// sig-countdown.jsx — Section 02. The Countdown.
//
// Beats: 35 → 7 → 5 → 3 → 1
// Visual escalation: starts grounded (street-level architecture)
// and progressively becomes more luminous as it descends toward "1
// Culture." Each layout option preserves the architecture.
//
// Layout options (tweak: countdown):
// stacked — vertical staircase. Each beat is a full-width
// row with a giant number and the headline beside.
// Background hairlines suggest architectural floor
// plan. Most cinematic / most editorial.
// marquee — horizontal billboard row of 5 plates. Compact,
// immediate, sign-shop register.
// alternating — full-bleed alternating sides. Each beat takes
// its own row, alternating left/right. Magazine
// spread cadence.
const COUNTDOWN_BEATS = [
{
n: 35,
title: 'Thirty-five seats.',
body: 'One inaugural class. Intentionally small. Built to stay intimate.',
},
{
n: 7,
title: '7 Days.',
body: 'Monday, June 1 — Sunday, June 7, 2026. The flagship Signature Program of The Art of Living Digitally™ — a live, seven-day cohort experience built for the way you actually live.',
},
{
n: 5,
title: 'Five Lifestyles.',
body: 'Technology is no longer separate from the way you live. It is the way you live.',
},
{
n: 3,
title: 'Three Doorways.',
body: 'Three Levels of depth. Same foundation. Same community. Same seven days. Chosen by you.',
},
{
n: 1,
title: 'One Culture.',
body: 'Where every Doorway leads. Where every Lifestyle arrives. The Art of Living Digitally™.',
},
];
// glow intensity escalates from 35 down to 1
const glowFor = (i) => {
const intensities = [0.10, 0.18, 0.28, 0.40, 0.62];
return intensities[i] || 0;
};
// ─────────────────────────────────────────────────────────────
// Section frame — shared across all layouts.
// ─────────────────────────────────────────────────────────────
const CountdownFrame = ({ children }) => (
{/* faint architectural grid */}
Every Resident arrives the same way.
By walking through the doorway.
{children}
);
// ─────────────────────────────────────────────────────────────
// LAYOUT A · STACKED (default)
// Vertical staircase. Each beat is a full-width row with:
// - Giant Garamond numeral on the left (glow intensifies as it
// descends)
// - Title + body on the right
// - Hairline rule below each row
// ─────────────────────────────────────────────────────────────
const CountdownStacked = () => (
{COUNTDOWN_BEATS.map((B, i) => (
{B.n}
{B.title}
{B.body}
))}
);
// ─────────────────────────────────────────────────────────────
// LAYOUT B · MARQUEE
// Horizontal row of 5 plates. Each plate has the number stacked
// over the title and body. Plates "sign-shop" register —
// rectangular, hairlined, gold-numbered.
// ─────────────────────────────────────────────────────────────
const CountdownMarquee = () => (
{COUNTDOWN_BEATS.map((B, i) => (
{['I','II','III','IV','V'][i]}
{B.n}
{B.title}
{B.body}
))}
);
// ─────────────────────────────────────────────────────────────
// LAYOUT C · ALTERNATING — uniform left-number / right-text rows
// Number column is a fixed-width gold-rule rail on the left; text
// column flows to the right. No alternating sides, no "Beat 0X / 05"
// markers, no fragile fr grid. Reads side-by-side at any viewport
// down to ~520px, then stacks cleanly.
// ─────────────────────────────────────────────────────────────
const CountdownAlternating = () => (
{/* LEFT — number, fixed-width column, right-aligned */}
{B.n}
{/* RIGHT — text */}
{B.title}
{B.body}
);
})}
);
// ─────────────────────────────────────────────────────────────
// LAYOUT D · STAIRCASE — descending steps (default)
// Each beat is a row offset progressively to the right so the
// eye reads them as descending stairs. A faint gold "riser" line
// connects each step's bottom-left to the next step's top-left.
// The final beat (1) lands furthest right with the brightest
// aqua glow. The architecture, walked.
// ─────────────────────────────────────────────────────────────
const CountdownStaircase = () => (