// =========================================================================
// Alice Murrell, About
// =========================================================================
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 APPROACH = [
['01', 'Strategy first', 'Every project starts with understanding the challenge - the customer, the business, the friction. Design is how you bring those pieces together into something that actually works.'],
['02', 'Creativity & empathy', "Empathy is at the core of everything I do creatively. Understanding the people we're designing for - customers, clients, internal teams - is what turns a good idea into something meaningful."],
['03', 'Mentor & collaborate', "I love working with designers at every stage, from research through to concept. In my experience, the best work comes from designers who feel trusted and confident in what they're doing - nurturing that is as much a part of my job as the design itself."],
['04', 'Iterate, always', 'Good work is never finished, just refined. I believe in testing, learning and iterating - both on the work itself and the way we work.']];


const PASSIONS = [
['Painting', 'An avid painter, endlessly inspired by the ocean, it finds its way into both my art and my palettes.'],
['Galleries', "I'd happily spend every weekend immersed in London's gallery scene, collecting ideas and colour."],
['Interiors', "My true passion. Hand me a fabric swatch and a tape measure and I'm completely in my element."]];


const CAPABILITIES = [
['01', 'Design strategy & vision', "Setting the direction, connecting design decisions to business goals and the customer's reality."],
['02', 'Team leadership', 'Building, hiring and growing design teams; creating the conditions for designers to do their best work.'],
['03', 'Design systems & ops', 'Scalable systems and ways of working that keep quality high as teams and products grow.'],
['04', 'Brand & art direction', 'A confident visual voice across identity, campaign and storytelling, for hospitality and luxury.'],
['05', 'Product & e‑commerce', "End‑to‑end product and storefront design that's intuitive, considered and converts."],
['06', 'Research & discovery', 'Listening first, uncovering the real problem before committing a single pixel.']];


function App() {
  useSiteEffects();
  return (
    <React.Fragment>
      <Cursor />
      <Nav active="about" />
      <main>
        <section className="wrap about-head">
          <div className="about-hero">
            <h1 className="display" data-reveal style={{ fontSize: 'clamp(2.6rem, 6.5vw, 5.6rem)', maxWidth: '15ch' }}>Designing experiences people want to return to.

            </h1>
          </div>
        </section>

        <section className="wrap section-tight" style={{ borderTop: '1px solid var(--hairline)' }}>
          <div className="bio-grid">
            <div className="bio-label" data-reveal>A bit about me</div>
            <div className="bio-prose">
              <p className="lead lead-first" data-reveal style={{ color: 'var(--text-strong)' }}>I'm Alice, a London‑based Head of Design with over fifteen years' experience in digital design, and a strong focus on e‑commerce, luxury and hospitality.</p>
              <p className="lead" data-reveal>I'm a problem‑solver through creativity and empathy. I set the strategy, then bring teams with me, mentoring, nurturing and collaborating with designers from the research phase right through to concept and launch.</p>
                <p className="lead" data-reveal>Aside from my day job I have a deep appreciation for many forms of design. As an avid painter I find inspiration in the ocean, and I'd happily spend every weekend immersed in London's gallery scene, but my true passion lies in interiors: hand me a fabric swatch and a tape measure, and I'm in my element.</p>
                <p className="lead" data-reveal>Currently, you'll find me heading up the design team at <a className="accent-word" href="https://www.tomandco.co.uk/" target="_blank" rel="noopener">Tom &amp; Co.</a></p>
            </div>
          </div>
        </section>

        <section className="wrap section" style={{ paddingTop: 0 }}>
          <div className="about-editorial">
            <div className="about-editorial-frame" data-reveal>
              <img src="uploads/PHLOW_PHOTO_20250829_1950_0001 2.JPEG" alt="Alice Murrell" />
            </div>
          </div>
        </section>

        <section className="wrap section" style={{ paddingTop: 0, borderTop: '1px solid var(--hairline)' }}>
          <div className="about-approach-right">
            <div className="approach-list">
              {APPROACH.map(([ix, t, d]) =>
              <div className="approach-item" key={ix} data-reveal>
                  <span className="ix">{ix}</span>
                  <div><div className="t">{t}</div><div className="d">{d}</div></div>
                </div>
              )}
            </div>
          </div>
        </section>

        <section className="section-tight" style={{ paddingTop: 0 }}>
          <FeaturedCarousel
            eyebrow="Selected clients"
            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>

      </main>
      <Footer />
    </React.Fragment>);

}

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