// =========================================================================
// Alice Murrell, Homepage
// =========================================================================
const { Button, Badge } = window.AliceDesignsDesignSystem_af3824;
const { Cursor, Nav, Footer, Icon, PROJECTS, useSiteEffects, FeaturedCarousel } = window;
const FEAT_IMAGES = { 'the-pig': 'assets/pig-thumb-2.png', 'one-and-only': 'assets/one-and-only-next.png', 'agent-clarks': 'assets/clarks-thumb-2.png', 'noble-panacea': 'assets/noble-panacea-thumb.png', 'grenson': 'assets/grenson-thumb.png', 'london-stone': 'assets/london-stone-thumb.png', 'siro-hotels': 'assets/siro-thumb.png', 'agent-provocateur': 'assets/ap-thumb.webp' };
const FEAT_POSITIONS = { 'one-and-only': '80% center', 'agent-clarks': 'center center' };

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "portfolioStyle": "Editorial",
  "paper": "#F6F4EF",
  "heroDirection": "Statement",
  "accent": "#BFEB33"
} /*EDITMODE-END*/;

const PAPER_CLASS = {
  '#f6f4ef': 'paper-porcelain',
  '#efe9dc': 'paper-oat',
  '#e9e5dc': 'paper-greige',
  '#eeeeea': 'paper-cloud'
};

// ---- Hero: Statement -----------------------------------------------------
function HeroStatement() {
  return (
    <div className="hero-split" style={{ gridTemplateColumns: '1fr' }}>
      <div>
        <h1 className="display" data-reveal style={{ fontSize: 'clamp(2.8rem, 7vw, 6.2rem)', maxWidth: '26ch', '--reveal-delay': '90ms' }}>Creating considered
design and digital experiences.
        </h1>
        <div className="hero-lower" data-reveal style={{ '--reveal-delay': '220ms' }}>
          <div className="hero-intro">
            <span className="ad-eyebrow">A BIT ABOUT ME</span>
            <p className="ad-eyebrow-body lead">I'm Alice. I lead design across e-commerce and beyond - directing teams, setting creative direction and making digital experiences people actually want to use.</p>
          </div>
          <div className="hero-ctas">
            <a className="btn btn-primary magnetic" href="work.html">See selected work</a>
            <a className="btn btn-secondary magnetic" href="contact.html">Say hello</a>
          </div>
        </div>
      </div>
    </div>);

}

// ---- Hero: Split (image) -------------------------------------------------
function HeroSplit() {
  return (
    <div className="hero-split">
      <div>
        <div data-reveal style={{ marginBottom: 26 }}>
          <span className="ad-eyebrow">London, Head of Design</span>
        </div>
        <h1 className="display" data-reveal style={{ fontSize: 'clamp(3rem, 6.5vw, 6rem)', '--reveal-delay': '90ms' }}>
          I design places &amp; products people remember.
        </h1>
        <p className="lead" data-reveal style={{ maxWidth: '42ch', marginTop: 28, '--reveal-delay': '220ms' }}>
          Fifteen years shaping brand and digital experience across hospitality, e‑commerce and luxury, led by curiosity, craft and care.
        </p>
        <div data-reveal style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginTop: 36, '--reveal-delay': '320ms' }}>
          <a className="btn btn-primary magnetic" href="work.html">View work</a>
          <a className="btn btn-secondary magnetic" href="about.html">About me</a>
        </div>
      </div>
      <div className="portrait" data-reveal style={{ '--reveal-delay': '180ms' }}>
        <image-slot id="home-hero-portrait" shape="rect" placeholder="Drop a portrait (3:4)"></image-slot>
      </div>
    </div>);

}

// ---- Hero: Index ---------------------------------------------------------
function HeroIndex() {
  const disciplines = [
  ['01', 'Brand & Identity', 'Naming, marks, systems & guidelines'],
  ['02', 'E‑commerce & Product', 'Storefronts, interfaces & design systems'],
  ['03', 'Hospitality Experience', 'Guest journeys & service touchpoints'],
  ['04', 'Design Leadership', 'Teams, direction & operations']];

  return (
    <div className="hero-index">
      <div>
        <h1 className="display" data-reveal style={{ fontSize: 'clamp(3rem, 7vw, 6.4rem)', maxWidth: '13ch', '--reveal-delay': '90ms' }}>
          Head of Design, for hospitality &amp; e‑commerce.
        </h1>
      </div>
      <div data-reveal style={{ '--reveal-delay': '260ms' }}>
        <div className="ad-eyebrow" style={{ marginBottom: 14 }}>Practice</div>
        <div className="disc-list">
          {disciplines.map(([ix, nm, d]) =>
          <div className="disc-row" key={ix}>
              <span className="ix">{ix}</span>
              <span className="nm">{nm}<small>{d}</small></span>
            </div>
          )}
        </div>
      </div>
    </div>);

}

function Hero({ dir }) {
  const ref = React.useRef(null);
  // Reveal hero elements on mount (above the fold) and on direction change.
  React.useEffect(() => {
    const root = ref.current;
    if (!root) return;
    const els = root.querySelectorAll('[data-reveal]');
    const r = requestAnimationFrame(() => els.forEach((el) => window.revealEl(el)));
    return () => cancelAnimationFrame(r);
  }, [dir]);
  return (
    <section className="hero wrap" key={dir} ref={ref}>
      {dir === 'Split' ? <HeroSplit /> : dir === 'Index' ? <HeroIndex /> : <HeroStatement />}
    </section>);

}

// ---- Featured work (full-bleed 3:4 carousel) -----------------------------
function Featured() {
  return (
    <section className="section-tight feat-section" style={{ borderTop: '1px solid var(--hairline)' }}>
      <FeaturedCarousel
        eyebrow="Selected work"
        body="A selection of work I am proud of across hospitality, retail, e-commerce and luxury."
        featImages={FEAT_IMAGES}
        featPositions={FEAT_POSITIONS}
        idPrefix="home-feat"
      />
    </section>);

}

// ---- Clients marquee -----------------------------------------------------
function Clients() {
  const logos = [
    ['atlantis', 'Atlantis, The Palm'], ['clarks', 'Clarks'], ['agent-provocateur', 'Agent Provocateur'],
    ['macallan', 'The Macallan'], ['grenson', 'Grenson'], ['the-pig', 'The Pig Hotels'],
    ['one-and-only', 'One & Only Resorts'], ['london-stone', 'London Stone'],
    ['casa-dragones', 'Casa Dragones'], ['sanderson', 'Sanderson Design Group'], ['noble-panacea', 'Noble Panacea']];

  const big = ['london-stone', 'noble-panacea', 'agent-provocateur', 'the-pig', 'grenson'];
  const small = ['clarks'];

  const row = [...logos, ...logos];
  return (
    <section style={{ borderTop: '1px solid var(--hairline)', borderBottom: '1px solid var(--hairline)', paddingBlock: 'clamp(28px, 4vh, 48px)', marginBottom: 'clamp(64px, 10vh, 140px)' }}>
      <div className="marquee">
        <div className="marquee-track">
          {row.map(([file, name], i) =>
          <React.Fragment key={i}>
              <img className={`client-logo${big.includes(file) ? ' is-lg' : small.includes(file) ? ' is-sm' : ''}`} src={(window.__resources && window.__resources['client_' + file]) || `assets/clients/${file}.png`} alt={name} />
              <span className="oval-sep" aria-hidden="true"></span>
            </React.Fragment>
          )}
        </div>
      </div>
    </section>);

}

// ---- About teaser --------------------------------------------------------
function AboutTeaser() {
  return (
    <section className="wrap section">
      <div className="about-teaser">
        <div className="portrait" data-reveal>
          <image-slot id="home-about-portrait" shape="rect" placeholder="Drop a portrait (4:5)"></image-slot>
        </div>
        <div>
          <div className="ad-eyebrow-row" data-reveal style={{ marginBottom: 26 }}>
            <span className="ad-eyebrow">About</span>
            <p className="ad-eyebrow-body">A problem-solver through creativity and empathy.</p>
          </div>
          <p className="display" data-reveal style={{ fontSize: 'clamp(1.8rem, 3.4vw, 2.9rem)', lineHeight: 1.18 }}>
            I lead with curiosity and care, mentoring designers and shaping work that still feels right in ten years.
          </p>
          <a className="btn btn-secondary magnetic" href="about.html" data-reveal style={{ marginTop: 32 }}>More about me</a>
        </div>
      </div>
    </section>);

}

// ---- Parallax interlude --------------------------------------------------
function ParallaxBand() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const band = ref.current;
    const img = band && band.querySelector('.px-img');
    if (!band || !img) return;
    if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
    let rafId;
    const loop = () => {
      const r = band.getBoundingClientRect();
      const vh = window.innerHeight || 1;
      if (r.bottom > 0 && r.top < vh) {
        // 0 as band enters, 1 as band exits top
        const progress = (vh - r.top) / (vh + r.height);
        const travel = img.offsetHeight - band.offsetHeight;
        // Classic parallax: image moves UP at ~50% of scroll speed
        const offset = -progress * travel * 0.85;
        img.style.transform = `translate3d(0, ${offset.toFixed(1)}px, 0)`;
      }
      rafId = requestAnimationFrame(loop);
    };
    loop();
    return () => cancelAnimationFrame(rafId);
  }, []);
  return (
    <section className="parallax-band" ref={ref}>
      <img className="px-img" src={(window.__resources && window.__resources.homeInterlude) || "assets/home-interlude.png"} alt="" />
    </section>);
}

function App() {
  const { useTweaks, TweaksPanel, TweakSection, TweakRadio, TweakColor } = window;
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useSiteEffects();

  React.useEffect(() => {
    const atelier = t.portfolioStyle === 'Atelier';
    document.documentElement.classList.toggle('theme-atelier', atelier);
    try { localStorage.setItem('adTheme', atelier ? 'atelier' : 'editorial'); } catch (e) {}
    // In Atelier the accent is ink (tonal, like the monogram on its capsule);
    // let the theme stylesheet own --accent. In Editorial, apply the chosen green.
    if (atelier) document.documentElement.style.removeProperty('--accent');
    else document.documentElement.style.setProperty('--accent', t.accent);
  }, [t.portfolioStyle, t.accent]);

  React.useEffect(() => {
    const cls = PAPER_CLASS[String(t.paper).toLowerCase()] || 'paper-porcelain';
    const html = document.documentElement;
    Object.values(PAPER_CLASS).forEach((c) => html.classList.remove(c));
    html.classList.add(cls);
    try { localStorage.setItem('adPaper', cls); } catch (e) {}
  }, [t.paper]);

  return (
    <React.Fragment>
      <Cursor />
      <Nav active="home" />
      <main>
        <Hero dir={t.heroDirection} />
        <ParallaxBand />
        <Featured />
        <Clients />
      </main>
      <Footer />
      <TweaksPanel title="Tweaks">
        <TweakSection label="Portfolio style" />
        <TweakRadio label="Theme" value={t.portfolioStyle}
        options={['Atelier', 'Editorial']} onChange={(v) => setTweak('portfolioStyle', v)} />
        <TweakColor label="Paper" value={t.paper}
        options={['#F6F4EF', '#EFE9DC', '#E9E5DC', '#EEEEEA']} onChange={(v) => setTweak('paper', v)} />
        <TweakSection label="Homepage" />
        <TweakRadio label="Hero direction" value={t.heroDirection}
        options={['Statement', 'Split', 'Index']} onChange={(v) => setTweak('heroDirection', v)} />
        <TweakSection label="Editorial accent" />
        <TweakColor label="Accent" value={t.accent}
        options={['#BFEB33', '#DAF26B', '#A6D118']} onChange={(v) => setTweak('accent', v)} />
      </TweaksPanel>
    </React.Fragment>);

}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);