import React from 'react';
import { APP_URL, REGISTRATION_URL } from '../config';

export default function LandingPage() {
  const goLogin = () => {
    window.location.href = APP_URL;
  };

  const goRegister = () => {
    window.location.href = REGISTRATION_URL;
  };

  return (
    <div className="landing-page">
      <div className="landing-header">
        <div className="landing-logo">
          <div className="landing-logo-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
            </svg>
          </div>
          <span className="landing-logo-text">AdPlatform</span>
        </div>

        <div style={{ display: 'flex', gap: 10 }}>
          <button className="btn" onClick={goRegister}>Register</button>
          <button className="btn btn-primary" onClick={goLogin}>Login</button>
        </div>
      </div>

      <div className="landing-hero">
        <h1>Take Control of Your Advertising</h1>
        <h2 className="landing-subtitle">Launch and Manage Your Ad Campaigns</h2>
        <p>A simple, self-service platform to create, launch, and optimize campaigns across multiple channels — backed by expert guidance.</p>

        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
          <button className="btn btn-primary btn-lg" onClick={goLogin}>Login</button>
          <button className="btn btn-lg" onClick={goRegister}>Register</button>
        </div>

        <div className="landing-features">
          <div className="feature-card">
            <div className="feature-card-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" /></svg>
            </div>
            <h3>Campaign Management</h3>
            <p>Create and manage search, display, and video campaigns with an intuitive interface.</p>
          </div>
          <div className="feature-card">
            <div className="feature-card-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" /></svg>
            </div>
            <h3>Performance Reporting</h3>
            <p>Track impressions, clicks, conversions, and spend with real-time reporting dashboards.</p>
          </div>
          <div className="feature-card">
            <div className="feature-card-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>
            </div>
            <h3>Managed by Experts</h3>
            <p>Your campaigns run under our agency account with professional oversight and support.</p>
          </div>
        </div>
      </div>
    </div>
  );
}
