import React from 'react';

// Sample icon component or placeholder for the main logo
const PolygraphixLogo = () => (
  <div style={{
    width: '300px',
    height: '300px',
    background: '#000',
    borderRadius: '20px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    fontSize: '180px',
    fontWeight: 'bold',
    color: '#FF6F61' // Sample color from logo
  }}>
    Px
  </div>
);

const serviceItems = [
  {
    title: 'Content Creation & Storytelling',
    description: 'We develop compelling visual and written content that captures the unique spirit of your brand. From video production to editorial writing, we build authentic narratives that resonate.',
    icon: '🎥'
  },
  {
    title: 'Digital & Graphic Design',
    description: 'Branding, website design, and marketing assets designed with a focus on truth and consistency. We ensure every touchpoint is a genuine reflection of who you are.',
    icon: '🎨'
  },
  {
    title: 'Social Media Strategy',
    description: 'Grow a community around your brand\'s purpose. We manage platforms and create engagement strategies that foster real, lasting relationships with your audience.',
    icon: '📱'
  },
  {
    title: 'Media Relations & Outreach',
    description: 'Share your truth with the wider world. We craft and distribute messaging that earns genuine media coverage and builds public trust.',
    icon: '📰'
  },
];

const PolygraphixWebsite = () => {
  return (
    <div style={{
      fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif',
      color: '#fff',
      margin: 0,
      padding: 0,
      minHeight: '100vh',
      backgroundColor: '#000', // Black background to match the logo context
    }}>
      {/* Navigation Header */}
      <nav style={{
        padding: '20px 60px',
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        borderBottom: '1px solid #333',
        position: 'sticky',
        top: 0,
        backgroundColor: '#000',
        zIndex: 1000
      }}>
        <div style={{ fontSize: '24px', fontWeight: 'bold', letterSpacing: '2px', textTransform: 'uppercase' }}>
          POLYGRAPHIX
        </div>
        <div style={{ display: 'flex', gap: '40px' }}>
          <a href="#services" style={{ color: '#aaa', textDecoration: 'none' }}>Services</a>
          <a href="#portfolio" style={{ color: '#aaa', textDecoration: 'none' }}>Portfolio</a>
          <a href="#about" style={{ color: '#aaa', textDecoration: 'none' }}>About</a>
          <a href="#contact" style={{ backgroundColor: '#fff', color: '#000', padding: '10px 20px', borderRadius: '5px', textDecoration: 'none', fontWeight: 'bold' }}>Let's Talk</a>
        </div>
      </nav>

      {/* Hero Section */}
      <section style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
        padding: '120px 20px',
        position: 'relative',
        overflow: 'hidden',
        minHeight: '70vh'
      }}>
        {/* Integrating the full logo as a background graphic */}
        <div style={{
          position: 'absolute',
          top: 0,
          left: 0,
          width: '100%',
          height: '100%',
          backgroundImage: 'url("path-to-your-logo.png")', // Replace with actual logo image path
          backgroundSize: 'cover',
          backgroundPosition: 'center',
          opacity: 0.1, // Set subtle transparency
          zIndex: 1
        }}></div>

        <div style={{ zIndex: 2 }}>
          <h1 style={{ fontSize: '72px', maxWidth: '800px', lineHeight: '1.1', marginBottom: '20px' }}>
            Polygraphix.<br /> We Help Brands<br /> <span style={{ textDecoration: 'underline', textDecorationColor: '#FF6F61' }}>Tell Their Truth.</span>
          </div>
          <p style={{ fontSize: '20px', color: '#aaa', maxWidth: '600px', margin: '0 auto 50px' }}>
            Media solutions rooted in authenticity. Discover the power of honest, impactful communication for your brand.
          </p>
          <button style={{
            fontSize: '18px',
            backgroundColor: '#000',
            color: '#fff',
            border: '2px solid #fff',
            padding: '15px 40px',
            borderRadius: '50px',
            cursor: 'pointer',
            transition: 'background-color 0.3s',
            fontWeight: 'bold'
          }}>
            Explore Services
          </button>
        </div>
      </section>

      {/* Services Section */}
      <section id="services" style={{ padding: '80px 60px', backgroundColor: '#111' }}>
        <h2 style={{ fontSize: '48px', textAlign: 'center', marginBottom: '60px', textTransform: 'uppercase', letterSpacing: '2px' }}>
          Services We Provide
        </h2>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: '40px',
          maxWidth: '1200px',
          margin: '0 auto'
        }}>
          {serviceItems.map((service, index) => (
            <div key={index} style={{
              backgroundColor: '#000',
              padding: '40px',
              borderRadius: '15px',
              border: '1px solid #333',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'start',
              transition: 'border-color 0.3s'
            }}
            onMouseOver={e => e.currentTarget.style.borderColor = '#FF6F61'}
            onMouseOut={e => e.currentTarget.style.borderColor = '#333'}
            >
              <div style={{ fontSize: '50px', marginBottom: '20px' }}>{service.icon}</div>
              <h3 style={{ fontSize: '24px', marginBottom