const services = [
  {
    title: "Tarot Clarity Reading",
    detail: "A focused session for questions around decisions, relationships, career, and timing."
  },
  {
    title: "Life Path Guidance",
    detail: "A reflective reading for transitions, emotional patterns, and personal direction."
  },
  {
    title: "Relationship Insight",
    detail: "A compassionate look at connection, communication, boundaries, and next steps."
  }
];

const values = ["Private", "Intuitive", "Grounded", "Compassionate"];

function MysticalBackground() {
  const canvasRef = React.useRef(null);

  React.useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");
    const pointer = { x: 0.5, y: 0.5 };
    let width = 0;
    let height = 0;
    let animationFrame = 0;
    let startedAt = performance.now();
    let particles = [];

    const createParticles = () => {
      const count = Math.min(120, Math.floor((width * height) / 13000));
      particles = Array.from({ length: count }, (_, index) => ({
        x: Math.random() * width,
        y: Math.random() * height,
        radius: Math.random() * 1.7 + 0.45,
        orbit: Math.random() * 46 + 14,
        speed: Math.random() * 0.00045 + 0.00016,
        phase: Math.random() * Math.PI * 2,
        glow: index % 5 === 0 ? 0.95 : Math.random() * 0.45 + 0.22
      }));
    };

    const resize = () => {
      const ratio = window.devicePixelRatio || 1;
      width = window.innerWidth;
      height = window.innerHeight;
      canvas.width = width * ratio;
      canvas.height = height * ratio;
      canvas.style.width = `${width}px`;
      canvas.style.height = `${height}px`;
      context.setTransform(ratio, 0, 0, ratio, 0, 0);
      createParticles();
    };

    const drawArcana = (time) => {
      const centerX = width * (0.68 + (pointer.x - 0.5) * 0.025);
      const centerY = height * (0.48 + (pointer.y - 0.5) * 0.025);
      const radius = Math.min(width, height) * 0.26;
      const rotation = time * 0.00008;

      context.save();
      context.translate(centerX, centerY);
      context.rotate(rotation);
      context.strokeStyle = "rgba(216, 177, 95, 0.12)";
      context.lineWidth = 1;

      for (let ring = 0; ring < 3; ring += 1) {
        context.beginPath();
        context.arc(0, 0, radius + ring * 32, 0, Math.PI * 2);
        context.stroke();
      }

      for (let spoke = 0; spoke < 12; spoke += 1) {
        const angle = (Math.PI * 2 * spoke) / 12;
        const inner = radius * 0.74;
        const outer = radius + 76;
        context.beginPath();
        context.moveTo(Math.cos(angle) * inner, Math.sin(angle) * inner);
        context.lineTo(Math.cos(angle) * outer, Math.sin(angle) * outer);
        context.stroke();
      }

      context.restore();
    };

    const render = (time) => {
      const elapsed = time - startedAt;
      context.clearRect(0, 0, width, height);

      const aura = context.createRadialGradient(
        width * (0.42 + pointer.x * 0.08),
        height * (0.28 + pointer.y * 0.08),
        0,
        width * 0.48,
        height * 0.32,
        Math.max(width, height) * 0.78
      );
      aura.addColorStop(0, "rgba(216, 177, 95, 0.09)");
      aura.addColorStop(0.42, "rgba(184, 111, 82, 0.045)");
      aura.addColorStop(1, "rgba(17, 15, 20, 0)");
      context.fillStyle = aura;
      context.fillRect(0, 0, width, height);

      drawArcana(elapsed);

      particles.forEach((particle) => {
        const driftX = Math.cos(elapsed * particle.speed + particle.phase) * particle.orbit;
        const driftY = Math.sin(elapsed * particle.speed * 1.3 + particle.phase) * particle.orbit;
        const twinkle = 0.35 + Math.sin(elapsed * 0.002 + particle.phase) * 0.25 + particle.glow * 0.35;

        context.beginPath();
        context.fillStyle = `rgba(246, 222, 162, ${Math.max(0.12, Math.min(0.9, twinkle))})`;
        context.shadowColor = "rgba(216, 177, 95, 0.75)";
        context.shadowBlur = 10;
        context.arc(particle.x + driftX, particle.y + driftY, particle.radius, 0, Math.PI * 2);
        context.fill();
        context.shadowBlur = 0;
      });

      animationFrame = requestAnimationFrame(render);
    };

    const movePointer = (event) => {
      pointer.x = event.clientX / window.innerWidth;
      pointer.y = event.clientY / window.innerHeight;
    };

    resize();
    window.addEventListener("resize", resize);
    window.addEventListener("pointermove", movePointer);
    animationFrame = requestAnimationFrame(render);

    return () => {
      cancelAnimationFrame(animationFrame);
      window.removeEventListener("resize", resize);
      window.removeEventListener("pointermove", movePointer);
    };
  }, []);

  return <canvas className="mystical-canvas" ref={canvasRef} aria-hidden="true" />;
}

function App() {
  const [copiedField, setCopiedField] = React.useState("");

  const copyContact = async (field, value) => {
    try {
      if (navigator.clipboard && window.isSecureContext) {
        await navigator.clipboard.writeText(value);
      } else {
        const textArea = document.createElement("textarea");
        textArea.value = value;
        textArea.setAttribute("readonly", "");
        textArea.style.position = "fixed";
        textArea.style.opacity = "0";
        document.body.appendChild(textArea);
        textArea.select();
        document.execCommand("copy");
        document.body.removeChild(textArea);
      }
      setCopiedField(field);
      window.setTimeout(() => setCopiedField(""), 1800);
    } catch (error) {
      const textArea = document.createElement("textarea");
      textArea.value = value;
      textArea.setAttribute("readonly", "");
      textArea.style.position = "fixed";
      textArea.style.opacity = "0";
      document.body.appendChild(textArea);
      textArea.select();
      document.execCommand("copy");
      document.body.removeChild(textArea);
      setCopiedField(field);
      window.setTimeout(() => setCopiedField(""), 1800);
    }
  };

  return (
    <main>
      <MysticalBackground />
      <nav className="nav" aria-label="Primary navigation">
        <a className="brand" href="#top" aria-label="Home">
          <svg viewBox="0 0 24 24" aria-hidden="true">
            <path d="M3 11.5 12 4l9 7.5" />
            <path d="M5.5 10.5V20h13v-9.5" />
            <path d="M9.5 20v-6h5v6" />
          </svg>
        </a>
        <div className="nav-links">
          <a href="#about">About</a>
          <a href="#readings">Readings</a>
          <a href="#contact">Contact</a>
        </div>
      </nav>

      <section className="hero" id="top" aria-labelledby="page-title">
        <div className="hero-art" aria-hidden="true">
          <div className="moon-ring"></div>
          <div className="star star-one">✦</div>
          <div className="star star-two">✧</div>
        </div>

        <div className="hero-copy">
          <h1 id="page-title">Archana Neogi</h1>
          <p className="intro">
            Warm, intuitive tarot readings for people seeking clarity, emotional
            steadiness, and a deeper sense of direction.
          </p>
          <div className="hero-actions" aria-label="Primary actions">
            <a href="#contact" className="button primary">Book a Reading</a>
            <a href="#readings" className="button secondary">Explore Readings</a>
          </div>
        </div>

        <figure className="portrait-panel">
          <div className="portrait-frame">
            <img
              src="./public/archana-placeholder.png"
              alt="Placeholder portrait for Archana Neogi"
              className="portrait"
            />
          </div>
          <figcaption>Replace with Archana's photo</figcaption>
        </figure>
      </section>

      <section className="intro-strip" aria-label="Reading qualities">
        {values.map((value) => (
          <span key={value}>{value}</span>
        ))}
      </section>

      <section className="about section" id="about" aria-labelledby="about-title">
        <div className="section-heading">
          <p className="section-kicker">About</p>
          <h2 id="about-title">A calm space for insight, reflection, and choice.</h2>
        </div>
        <div className="about-copy">
          <p>
            Archana Neogi offers tarot readings with a steady, compassionate
            presence. Her sessions are designed for clients who want guidance
            without pressure, mysticism without confusion, and a thoughtful way
            to look at the questions sitting closest to the heart.
          </p>
          <p>
            Each reading is private and conversational, with room for practical
            reflection as well as spiritual intuition.
          </p>
        </div>
      </section>

      <section className="section readings" id="readings" aria-labelledby="readings-title">
        <div className="section-heading">
          <p className="section-kicker">Readings</p>
          <h2 id="readings-title">Guidance for the questions that keep returning.</h2>
        </div>
        <div className="service-grid">
          {services.map((service, index) => (
            <article className="service-card" key={service.title}>
              <p className="card-number">0{index + 1}</p>
              <h3>{service.title}</h3>
              <p>{service.detail}</p>
            </article>
          ))}
        </div>
      </section>

      <section className="quote-band" aria-label="Approach">
        <p>
          "The cards are not here to decide for you. They are here to help you
          listen more clearly."
        </p>
      </section>

      <section className="contact section" id="contact" aria-labelledby="contact-title">
        <div className="contact-copy">
          <p className="section-kicker">Contact</p>
          <h2 id="contact-title">Begin with a conversation.</h2>
          <p>
            Reach out to ask about availability, online or in-person sessions,
            and the reading format that best fits your question.
          </p>
        </div>

        <address className="contact-panel">
          <div className="contact-item">
            <a href="tel:+919732178935">
              <span>Phone</span>
              +91 97321 78935
            </a>
            <button
              className={`copy-button ${copiedField === "phone" ? "copied" : ""}`}
              type="button"
              aria-label="Copy phone number"
              onClick={() => copyContact("phone", "+919732178935")}
            >
              {copiedField === "phone" ? (
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="m5 12 4 4L19 6" />
                </svg>
              ) : (
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M9 9h10v10H9z" />
                  <path d="M5 15H4V4h11v1" />
                </svg>
              )}
            </button>
          </div>
          <div className="contact-item">
            <a href="mailto:archananeogi2@gmail.com">
              <span>Email</span>
              archananeogi2@gmail.com
            </a>
            <button
              className={`copy-button ${copiedField === "email" ? "copied" : ""}`}
              type="button"
              aria-label="Copy email address"
              onClick={() => copyContact("email", "archananeogi2@gmail.com")}
            >
              {copiedField === "email" ? (
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="m5 12 4 4L19 6" />
                </svg>
              ) : (
                <svg viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M9 9h10v10H9z" />
                  <path d="M5 15H4V4h11v1" />
                </svg>
              )}
            </button>
          </div>
          <div className="contact-item location-item">
            <span>Location</span>
            Kolkata, India
          </div>
        </address>
      </section>
    </main>
  );
}

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