// YIDAKI. terracotta/gold landscape. Sound wave + 2-col offerings + dot wave footer.

const YIDAKI_FOR = [
  'Spiritual Retreats',
  'Ceremonies & Rites of Passage',
  'Corporate Wellness Events',
  'Festivals & Public Gatherings',
  'Private Gatherings & Homes',
  'Sound Healing Experiences',
  'Collaborations with Artists & Musicians',
  'Birth, Death & Threshold Ceremonies',
];

function SoundWave() {
  // Two stacked sine waves for depth
  const w = 1100, h = 160;
  return (
    <div className="wave-wrap">
      <svg viewBox={`0 0 ${w} ${h}`} preserveAspectRatio="none">
        <defs>
          <linearGradient id="waveFade" x1="0" x2="1">
            <stop offset="0" stopColor="#C9951A" stopOpacity="0"/>
            <stop offset="0.15" stopColor="#C9951A" stopOpacity="1"/>
            <stop offset="0.85" stopColor="#C9951A" stopOpacity="1"/>
            <stop offset="1" stopColor="#C9951A" stopOpacity="0"/>
          </linearGradient>
        </defs>
        {/* Build a sine path */}
        {(() => {
          const stepX = 12; const mid = h/2; const amp = 28; const freq = 0.014;
          let d = '';
          for (let x = 0; x <= w; x += stepX) {
            const y = mid + Math.sin(x * freq) * amp;
            d += (x === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`);
          }
          return <path d={d} className="wave-path" stroke="url(#waveFade)"/>;
        })()}
        {(() => {
          const stepX = 12; const mid = h/2; const amp = 16; const freq = 0.022;
          let d = '';
          for (let x = 0; x <= w; x += stepX) {
            const y = mid + Math.cos(x * freq) * amp;
            d += (x === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`);
          }
          return <path d={d} className="wave-path wave-path--b" stroke="url(#waveFade)"/>;
        })()}
      </svg>
    </div>
  );
}

function DotWave() {
  // Aboriginal dot wave. dots arranged in a sine pattern across the width
  const cols = 80;
  const dots = useMemo(() => {
    const out = [];
    for (let i = 0; i < cols; i++) {
      const x = (i / (cols - 1)) * 100;
      const baseY = 50 + Math.sin(i * 0.42) * 28;
      // 3-4 dots in the wave column
      for (let j = -1; j <= 1; j++) {
        const colorIdx = (i + j + 1) % 4;
        const colors = ['#CC2200', '#C9951A', '#FFF0DC', '#E07B2A'];
        const r = j === 0 ? 3 : 2;
        out.push({ x, y: baseY + j * 9, r, c: colors[colorIdx] });
      }
    }
    return out;
  }, []);
  return (
    <div className="dot-wave" aria-hidden="true">
      <svg viewBox="0 0 100 100" preserveAspectRatio="none" style={{ width: '100%', height: '100%' }}>
        {dots.map((d, i) => (
          <circle key={i} cx={d.x} cy={d.y} r={d.r * 0.18} fill={d.c} opacity="0.85"/>
        ))}
      </svg>
    </div>
  );
}

function Yidaki({ onEnquire }) {
  return (
    <section className="section yidaki" id="yidaki">
      <div className="yidaki__bg"/>
      <div className="container">
        <Reveal as="div" className="yidaki__head">
          <Eyebrow style={{ color: '#3D0000', fontWeight: 700 }}>Yidaki · Sacred Sound & Vibrational Healing</Eyebrow>
          <h2 className="h-section">Ancient Sound. Heavenly Fire.</h2>
          <p className="sub-italic" style={{ color: '#FFF8EE', maxWidth: 820, margin: '0 auto' }}>
            Through the breath of the Yidaki, I bring ancient frequencies to move
            through your body like living intelligence clearing heaviness, awakening
            remembrance, and reigniting the spirit. These sessions are designed to
            move energy, restore balance, and awaken something deeper within the
            people.
          </p>
        </Reveal>

        <Reveal as="div" delay={120}><SoundWave/></Reveal>

        <Reveal as="div" delay={120} threshold={0.15}>
          <p className="eyebrow" style={{ display: 'block', textAlign: 'center', marginBottom: 24, color: '#FFF8EE', fontWeight: 600 }}>
            Available For
          </p>
        </Reveal>

        <Reveal as="div" className="yidaki__grid" stagger>
          {YIDAKI_FOR.map((t) => (
            <div key={t} className="y-card">
              <span className="y-card__dot"/>
              <h3 className="y-card__title">{t}</h3>
            </div>
          ))}
        </Reveal>

        <Reveal as="p" className="yidaki__loc" delay={120} style={{ color: '#3D0000', fontWeight: 700 }}>
          Based in Sydney · Available Worldwide
        </Reveal>

        <Reveal as="div" className="yidaki__cta-row" delay={180}>
          <Button variant="ghost-gold" size="lg" onClick={onEnquire} style={{ color: '#3D0000', borderColor: '#3D0000', fontWeight: 700 }}>Enquire About a Performance</Button>
        </Reveal>
      </div>

      <DotWave/>
    </section>
  );
}

window.Yidaki = Yidaki;