const { Button, Eyebrow, Card, Divider, Icon } = window.SolasEyeDesignSystem_10f8ce;
const { AxisLine } = window.SolasEyeDesignSystem_10f8ce;

/* The hero opens the page, so it only dissolves at its foot — into the page field. */
const HERO_FADE = 'linear-gradient(to bottom, #000 0%, #000 62%, transparent 100%)';

function Hero() {
  return (
    <div style={{ position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(124% 96% at 50% 6%, rgba(26,76,89,.52) 0%, rgba(18,56,66,.22) 46%, rgba(8,9,16,0) 80%)', maskImage: HERO_FADE, WebkitMaskImage: HERO_FADE }} />
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 50% 40%, rgba(18,56,66,.46) 0%, rgba(18,56,66,.14) 42%, rgba(8,9,16,0) 68%)', maskImage: HERO_FADE, WebkitMaskImage: HERO_FADE }} />
      <div aria-hidden="true" style={{ position: 'absolute', inset: 0, background: `url(${AB}/patterns/field-pattern.png) center / 520px repeat`, opacity: .1, maskImage: HERO_FADE, WebkitMaskImage: HERO_FADE }} />
      <div style={{ position: 'relative', maxWidth: 'var(--container-text)', margin: '0 auto', padding: 'clamp(56px,9vh,120px) var(--gutter-page)', textAlign: 'center' }}>
        <div style={{ display: 'grid', justifyItems: 'center' }}>
          <IrisPortal size={220} />
          <div style={{ marginTop: 'var(--space-8)' }}><Eyebrow align="center">Grounded alchemical frequency healing work with Sinéad O’Sullivan</Eyebrow></div>
          <img src={`${AB}/logos/wordmark-on-dark.svg`} alt="SOLASEYE" style={{ width: 'min(100%,560px)', display: 'block', margin: 'var(--space-4) 0 var(--space-6)' }} />
          <h1 style={{ fontSize: 'clamp(2rem,4.2vw,3.2rem)', margin: 0, letterSpacing: '.035em' }}>See beyond the surface.</h1>
          <p style={{ fontSize: 'var(--type-lead-size)', lineHeight: 1.75, color: 'var(--text-secondary)', margin: 'var(--space-6) auto 0', maxWidth: '58ch' }}>
            There are times when change begins before we have words for it. You may be navigating a transition, deepening your spiritual path, or simply sensing that something within you is ready to move. SolasEye offers a grounded, compassionate space to reconnect with your true and higher self and meet what is unfolding with greater clarity, trust and wholeness.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 'var(--space-4)', marginTop: 'var(--space-8)', justifyContent: 'center' }}>
            <Button variant="primary" size="lg" href="healings.html">Explore healings</Button>
            <Button variant="outline" size="lg" href="workshops.html">View workshops &amp; training</Button>
          </div>
          <AxisLine height={80} style={{ marginTop: 'var(--space-7)' }} />
        </div>
      </div>
    </div>
  );
}

function Belief() {
  return (
    <Section backdrop="tide" pattern="medium" patternScale={360} align="center" width="var(--container-text)">
      <div style={{ textAlign: 'center' }}>
        <Eyebrow align="center">The starting point</Eyebrow>
        <h2 style={{ fontSize: 'clamp(2.5rem,5vw,4rem)', margin: 'var(--space-5) 0 0' }}>You are not broken.</h2>
        <p style={{ fontSize: 'var(--type-lead-size)', lineHeight: 1.8, color: 'var(--text-secondary)', margin: 'var(--space-6) auto 0', maxWidth: '62ch' }}>
          Healing is not about becoming someone else. It is a return: beneath the noise, beneath the roles and beneath the patterns that have carried you this far. My role is not to tell you who you are or judge where you’ve been. It is to hold a sacred, safe, clear and steady space in which you can listen more deeply to yourself and become receptive to what is ready to change.
        </p>
      </div>
    </Section>
  );
}

function Method() {
  return (
    <Section id="sos" backdrop="atlantic" pattern="subtle" patternScale={620} eyebrow="The S.O.S. Method" heading="A cycle of deeper seeing" lead="Surrender · Open · Shift">
      <div className="se-method-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,440px)', gap: 'clamp(40px,6vw,88px)', alignItems: 'center', marginTop: 'var(--space-8)' }}>
        <div>
          <p style={{ fontSize: 'var(--type-body-size)', lineHeight: 1.85, color: 'var(--text-body)', margin: 0, maxWidth: '58ch' }}>
            At SolasEye, surrender does not mean giving up or handing your power away. It means loosening your grip on what is ready to move. From there, you open - becoming receptive to energy, frequency, insight and possibility. The shift follows in its own way and its own time. With each shift, you see more clearly, and a new cycle begins.
          </p>
          <ol style={{ listStyle: 'none', margin: 'var(--space-8) 0 0', padding: 0, display: 'grid', gap: 'var(--space-5)', counterReset: 'sos' }}>
            {D.sos.map(([step, text], i) => (
              <li key={step} style={{ display: 'grid', gridTemplateColumns: '32px 1fr', gap: 'var(--space-4)', borderTop: '1px solid var(--line-accent)', paddingTop: 'var(--space-4)' }}>
                <span style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--type-caption-size)', letterSpacing: '.18em', color: 'var(--text-accent)', paddingTop: 3 }}>{String(i + 1).padStart(2, '0')}</span>
                <span>
                  <span style={{ display: 'block', fontFamily: 'var(--font-body)', fontSize: 'var(--type-eyebrow-size)', letterSpacing: 'var(--type-eyebrow-tracking)', textTransform: 'uppercase', fontWeight: 500, color: 'var(--text-display)' }}>{step}</span>
                  <span style={{ display: 'block', marginTop: 6, fontSize: 'var(--type-small-size)', lineHeight: 1.75, color: 'var(--text-body)' }}>{text}</span>
                </span>
              </li>
            ))}
          </ol>
        </div>
        <figure style={{ margin: 0, display: 'grid', justifyItems: 'center', gap: 'var(--space-4)' }}>
          <SosDiagram width={440} />
          <figcaption style={{ fontFamily: 'var(--font-body)', fontSize: 'var(--type-caption-size)', letterSpacing: 'var(--tracking-wider)', textTransform: 'uppercase', color: 'var(--text-accent)', fontWeight: 600, textAlign: 'center' }}>See → Surrender → Open → Shift → See</figcaption>
        </figure>
      </div>
    </Section>
  );
}

function Pathways() {
  const items = [
    { eyebrow: 'Receive a healing', title: 'Private frequency healing sessions', body: 'Private alchemical frequency healing sessions for clarity, alignment and support through change.', cta: 'Find your session', href: 'healings.html' },
    { eyebrow: 'Learn the work', title: 'Workshops and structured training', body: 'Experiential workshops and structured training for personal practice, intuitive development and deeper study.', cta: 'Explore learning', href: 'workshops.html' }
  ];
  return (
    <Section backdrop="dawn" pattern="medium" patternScale={440} eyebrow="Two pathways" heading="Where would you like to begin?">
      <div className="se-two-col" style={{ display: 'grid', gridTemplateColumns: 'repeat(2,minmax(0,1fr))', gap: 'var(--space-6)', marginTop: 'var(--space-8)' }}>
        {items.map(it => (
          <Card key={it.eyebrow} padding="var(--space-8)" style={{ display: 'grid', gap: 'var(--space-5)', alignContent: 'start' }}>
            <Eyebrow>{it.eyebrow}</Eyebrow>
            <h3 style={{ fontSize: 'var(--type-h2-size)', margin: 0 }}>{it.title}</h3>
            <p style={{ margin: 0, fontSize: 'var(--type-body-size)', lineHeight: 1.8, color: 'var(--text-body)' }}>{it.body}</p>
            <div><Button variant="outline" href={it.href}>{it.cta}</Button></div>
          </Card>
        ))}
      </div>
    </Section>
  );
}

function AboutTeaser() {
  return (
    <Section backdrop="bone" pattern="subtle" patternScale={400} tone="light">
      <div className="se-about-grid" style={{ display: 'grid', gridTemplateColumns: 'minmax(0,300px) minmax(0,1fr)', gap: 'clamp(32px,6vw,80px)', alignItems: 'center' }}>
        <div style={{ display: 'grid', justifyItems: 'center' }}><Portrait width={300} /></div>
        <div>
          <Eyebrow>The practitioner</Eyebrow>
          <h2 style={{ fontSize: 'var(--type-display-size)', margin: 'var(--space-4) 0 0' }}>Meet Sinéad</h2>
          <p style={{ fontSize: 'var(--type-body-size)', lineHeight: 1.85, color: 'var(--text-body)', margin: 'var(--space-5) 0 var(--space-7)', maxWidth: '62ch' }}>
            I bring both intuition and discernment to this work. I value structure, integrity and language that can make room for mystery without asking you to abandon common sense. I am a trained Transference Healing practitioner and teacher, and SolasEye is the space through which I offer this work in my own grounded, personal way.
          </p>
          <Button variant="outline" href="about.html">My approach</Button>
        </div>
      </div>
    </Section>
  );
}

const TWEAK_DEFAULTS = { blend: 220, boneMode: "Faded bone", patternIntensity: 1, groundIntensity: 1 };

function Page() {
  window.SE_TWEAKS = TWEAK_DEFAULTS;
  return (
    <React.Fragment>
      <Header current="Home" />
      <main id="main">
        <Hero />
        <Belief />
        <Method />
        <Pathways />
        <AboutTeaser />
      </main>
      <Footer />
    </React.Fragment>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Page />);