import React, { useEffect, useRef, useState } from 'react';
import { createRoot } from 'react-dom/client';
import { getOfferUrl, offerConfig } from './config';
import './styles.css';

const imageRoot = '/assets/images/';
// User-approved local prototype artwork. Keep the trio intact as one image.
const heroArtwork = {
  src: `${imageRoot}${encodeURIComponent('Trio d’héroïnes tactiques en illustration PNG.png')}`,
  width: 1672,
  height: 941,
};

function Atmosphere() {
  return <div className="atmosphere" aria-hidden="true">
    <div className="ambient-light" />
    <div className="light-rays" />
    <div className="industrial-grain" />
    <svg className="contours contours-left" viewBox="0 0 600 1000" fill="none">
      {Array.from({ length: 14 }, (_, index) => <path key={index} d={`M ${-160 + index * 17} -60 C ${580 + index * 12} 140, ${-390 + index * 22} 460, ${240 + index * 18} 590 S ${250 + index * 20} 900, ${-100 + index * 24} 1100`} />)}
    </svg>
    <svg className="contours contours-right" viewBox="0 0 600 1000" fill="none">
      {Array.from({ length: 14 }, (_, index) => <path key={index} d={`M ${-160 + index * 17} -60 C ${580 + index * 12} 140, ${-390 + index * 22} 460, ${240 + index * 18} 590 S ${250 + index * 20} 900, ${-100 + index * 24} 1100`} />)}
    </svg>
    <div className="technical-ring ring-left" /><div className="technical-ring ring-right" />
    <div className="fog fog-left" /><div className="fog fog-right" />
    <div className="scan scan-left" /><div className="scan scan-right" />
    <div className="particles particles-left" /><div className="particles particles-right" />
    <div className="structural-accent accent-left" /><div className="structural-accent accent-right" />
    <div className="vignette" />
  </div>;
}

function Gameplay() {
  const video = useRef(null);
  const [unavailable, setUnavailable] = useState(false);
  useEffect(() => {
    const element = video.current;
    element.muted = true;
    element.play()?.catch(() => setUnavailable(true));
  }, []);
  return <div className={`gameplay${unavailable ? ' playback-unavailable' : ''}`} aria-label="Arknights Endfield gameplay">
    <img className="video-fallback" src={`${imageRoot}feature-poster.jpg`} width="640" height="338" alt="" aria-hidden="true" />
    <video ref={video} autoPlay muted loop playsInline controls={false} disablePictureInPicture disableRemotePlayback
      preload="auto" poster={`${imageRoot}feature-poster.jpg`} width="640" height="338" aria-label="Muted looping gameplay"
      onPlaying={() => setUnavailable(false)} onError={() => setUnavailable(true)}>
      <source src="/assets/videos/feature_8.mp4" type="video/mp4" />
    </video>
  </div>;
}

function App() {
  const destination = getOfferUrl();
  function onOfferClick() {
    try { offerConfig.onClick?.({ destination, placement: 'poster' }); }
    catch (error) { console.error('Click hook failed', error); }
  }
  return <div className="stage">
    <Atmosphere />
    <main className="poster" aria-labelledby="game-title">
      <div className="portraits">
        <img className="hero-artwork" src={heroArtwork.src} alt="Three tactical heroines together in one unified composition" width={heroArtwork.width} height={heroArtwork.height} fetchPriority="high" />
        <div className="portrait-shading" />
      </div>
      <div className="offer-bridge">
        <span className="bridge-line" aria-hidden="true" />
        <div className="offer">
          <a className="cta" href={destination} onClick={onOfferClick}><span className="cta-icon" aria-hidden="true">↗</span><span className="cta-label">PLAY NOW</span><span className="cta-arrow" aria-hidden="true">→</span></a>
          <span className="destination-label">{offerConfig.isDemo ? 'DEMO DESTINATION · OFFICIAL GAME WEBSITE' : 'EXTERNAL PROMOTIONAL OFFER'}</span>
        </div>
        <span className="bridge-line" aria-hidden="true" />
      </div>
      <Gameplay />
      <div className="billing">
        <h1 id="game-title" aria-label="Arknights: Endfield"><span>ARKNIGHTS:</span><strong>ENDFIELD</strong></h1>
        <p className="disclosure">Unofficial promotional page <span aria-hidden="true">/</span> <small>Typographic logo recreation</small></p>
      </div>
    </main>
  </div>;
}

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