'use client'

import Link from 'next/link'
import { ArrowLeftIcon } from '@ciphera-net/ui'

export default function ReactIntegrationPage() {
  return (
    <div className="relative min-h-screen flex flex-col overflow-hidden">
      {/* * --- ATMOSPHERE (Background) --- */}
      <div className="absolute inset-0 -z-10 pointer-events-none">
        <div className="absolute bottom-0 right-1/4 w-[500px] h-[500px] bg-neutral-400/10 rounded-full blur-[128px] opacity-40" />
        <div 
          className="absolute inset-0 bg-grid-pattern opacity-[0.05]"
          style={{ maskImage: 'radial-gradient(ellipse at center, black 0%, transparent 70%)' }}
        />
      </div>

      <div className="flex-grow w-full max-w-4xl mx-auto px-4 pt-20 pb-10 z-10">
        <Link 
          href="/integrations" 
          className="inline-flex items-center text-sm text-neutral-500 hover:text-brand-orange mb-8 transition-colors"
        >
          <ArrowLeftIcon className="w-4 h-4 mr-2" />
          Back to Integrations
        </Link>

        <div className="flex items-center gap-4 mb-8">
          <div className="p-3 bg-neutral-800 rounded-xl">
            <svg viewBox="0 0 128 128" className="w-10 h-10 text-[#61DAFB] fill-current">
              <path d="M64 10.6c18.4 0 34.6 5.8 44.6 14.8 6.4 5.8 10.2 12.8 10.2 20.6 0 21.6-28.6 41.2-64 41.2-1.6 0-3.2-.1-4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11 11.2-5.6 20.2-13 26.2-21.4-6.4-5.8-15.4-10-25.6-12.2-10.2-2.2-21.4-3.4-33-3.4-1.6 0-3.2.1-4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-33.4 62c-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8 13.6-1.6 26.2-5.4 37.4-11zm-15.2-16.6c-6.4-5.8-10.2-12.8-10.2-20.6 0-21.6 28.6-41.2 64-41.2 1.6 0 3.2.1 4.8.2 1.2-10.8 6.2-20.2 13.8-27.6 8.8-8.6 20.6-13.4 33.2-13.4 2.2 0 4.4.2 6.4.4-10.2 12.8-15.6 29.2-15.6 46.2 0 2.6.2 5.2.4 7.8-13.6 1.6-26.2 5.4-37.4 11-11.2 5.6-20.2 13-26.2 21.4 6.4 5.8 15.4 10 25.6 12.2 10.2 2.2 21.4 3.4 33 3.4 1.6 0 3.2-.1 4.8-.2-1.2 10.8-6.2 20.2-13.8 27.6-8.8 8.6-20.6 13.4-33.2 13.4-2.2 0-4.4-.2-6.4-.4 10.2-12.8 15.6-29.2 15.6-46.2 0-2.6-.2-5.2-.4-7.8z" />
              <circle cx="64" cy="64" r="10.6" />
            </svg>
          </div>
          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-white">
            React Integration
          </h1>
        </div>

        <div className="prose prose-invert max-w-none">
          <p className="lead text-xl text-neutral-400">
            For standard React SPAs (Create React App, Vite, etc.), you can simply add the script tag to your <code>index.html</code>.
          </p>

          <hr className="my-8 border-neutral-800" />

          <h3>Method 1: index.html (Recommended)</h3>
          <p>
            The simplest way is to add the script tag directly to the <code>&lt;head&gt;</code> of your <code>index.html</code> file.
          </p>

          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
              <span className="text-xs text-neutral-400 font-mono">public/index.html</span>
            </div>
            <div className="p-4 overflow-x-auto">
              <pre className="text-sm font-mono text-neutral-300">
{`<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <!-- Pulse Analytics -->
    <script 
      defer 
      data-domain="your-site.com" 
      src="https://pulse.ciphera.net/script.js"
    ></script>
    
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>`}
              </pre>
            </div>
          </div>

          <h3>Method 2: Programmatic Injection</h3>
          <p>
            If you need to load the script dynamically (e.g., only in production), you can use a <code>useEffect</code> hook in your main App component.
          </p>

          <div className="bg-neutral-900 rounded-xl overflow-hidden border border-neutral-800 my-6">
            <div className="flex items-center px-4 py-2 bg-neutral-800 border-b border-neutral-800">
              <span className="text-xs text-neutral-400 font-mono">src/App.tsx</span>
            </div>
            <div className="p-4 overflow-x-auto">
              <pre className="text-sm font-mono text-neutral-300">
{`import { useEffect } from 'react'

function App() {
  useEffect(() => {
    // Only load in production
    if (process.env.NODE_ENV === 'production') {
      const script = document.createElement('script')
      script.defer = true
      script.setAttribute('data-domain', 'your-site.com')
      script.src = 'https://pulse.ciphera.net/script.js'
      document.head.appendChild(script)
    }
  }, [])

  return (
    <div className="App">
      <h1>Hello World</h1>
    </div>
  )
}`}
              </pre>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
