const { useState, useEffect } = React;

// Import TsuchiyaVideo from window / module.exports shim
const TsuchiyaVideo = window.TsuchiyaVideo || (window.module && window.module.exports && window.module.exports.TsuchiyaVideo);

function App() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [message, setMessage] = useState("");
  const [subscribed, setSubscribed] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [isPlaying, setIsPlaying] = useState(true);
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  const formspreeId = "mjgqogep";

  useEffect(() => {
    const playStateHandler = (e) => {
      setIsPlaying(e.detail.playing);
    };
    window.addEventListener('tsuchiya-play-state', playStateHandler);
    return () => {
      window.removeEventListener('tsuchiya-play-state', playStateHandler);
    };
  }, []);

  const onPlayPause = () => {
    window.dispatchEvent(new CustomEvent('tsuchiya-toggle-play'));
  };

  const onToggleMenu = () => {
    setIsMenuOpen(prev => !prev);
  };

  const onCloseMenu = () => {
    setIsMenuOpen(false);
  };

  const handleSubmit = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    if (!email) {
      alert("Please enter your email address.");
      return;
    }
    setSubmitting(true);
    fetch("https://formspree.io/f/" + formspreeId, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "Accept": "application/json"
      },
      body: JSON.stringify({ name, email, message })
    })
      .then(response => {
        if (response.ok) {
          setSubscribed(true);
          setSubmitting(false);
        } else {
          return response.json().then(data => {
            throw new Error(data.error || "Failed to submit form");
          });
        }
      })
      .catch(error => {
        console.error("Formspree error:", error);
        alert("Submission failed. If you haven't configured your Formspree ID yet, please replace 'YOUR_FORMSPREE_FORM_ID' in Tsuchiya_template.js with your Formspree Form ID.");
        setSubmitting(false);
      });
  };

  const editItems = [
    {
      name: "The First Essence",
      kanji: "一",
      imageNote: "[ product — rice ferment essence ]",
      desc: "A single-origin fermented rice essence from a maker in Niigata. The foundation of the ritual.",
    },
    {
      name: "The Cleansing Balm",
      kanji: "二",
      imageNote: "[ product — camellia & koji balm ]",
      desc: "Camellia oil and koji, pressed slowly. Removes the day without removing the skin's own work.",
    },
    {
      name: "The Deep Treatment",
      kanji: "三",
      imageNote: "[ product — aged ferment concentrate ]",
      desc: "An aged ferment concentrate, bottled in small lots. For evenings when the skin asks for more.",
    },
  ];

  return (
    <React.Fragment>
      {/* Intro video section */}
      <div className="intro-video-section" style={{ position: 'relative', width: '100%', height: '100vh', overflow: 'hidden', background: '#1A1410' }}>
        <div style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
          {TsuchiyaVideo ? <TsuchiyaVideo /> : null}
        </div>

        {/* Custom Play/Pause Toggle */}
        <button className="intro-play-pause-btn" onClick={onPlayPause} title="Play/Pause Video">
          {isPlaying ? (
            <svg viewBox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z" /></svg>
          ) : (
            <svg viewBox="0 0 24 24"><path d="M8 5v14l11-7z" /></svg>
          )}
        </button>

        {/* Subtle Scroll Down Indicator */}
        {/* <div className="intro-scroll-indicator" style={{ position: 'absolute', bottom: '40px', left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px', color: 'rgba(242, 237, 228, 0.45)', fontFamily: "'DM Sans', sans-serif", fontSize: '10px', letterSpacing: '0.3em', textTransform: 'uppercase', pointerEvents: 'none' }}>
          <span>Scroll</span>
          <div style={{ width: '1px', height: '32px', background: 'rgba(242, 237, 228, 0.25)', position: 'relative', overflow: 'hidden' }}>
            <div className="scroll-line-animation"></div>
          </div>
        </div> */}
      </div>

      
    </React.Fragment>
  );
}

// Render component to the #root element
const rootElement = document.getElementById("root");
if (ReactDOM.createRoot) {
  ReactDOM.createRoot(rootElement).render(<App />);
} else {
  ReactDOM.render(<App />, rootElement);
}