Hero Section

import React from 'react';

/**
 * MonolithicHero Component
 * 
 * Design: Monolithic slabs of sand-blasted basalt floating in a void of pulverized charcoal.
 * Typography is chiseled into the stone with harsh, low-angle directional lighting.
 */

const MonolithicHero: React.FC = () => {
  return (
    <section className="relative min-h-screen w-full bg-[#050505] flex items-center justify-center overflow-hidden font-sans select-none">
      {/* Background Texture Overlay */}
      <div 
        className="absolute inset-0 opacity-30 pointer-events-none" 
        style={{ 
          backgroundImage: `url("https://cdn.21st.dev/assets/mirror/ac/acb288e1bc5ee834750cd3ad8c1f78db0c82de133d6750836186f72c54d8c2c6.png")`,
          mixBlendMode: 'overlay'
        }} 
      />

      {/* Hero Content Wrapper */}
      <div className="relative z-10 w-full max-w-6xl px-6 py-20 flex flex-col items-center">
        
        {/* Main Monolith Slab */}
        <div className="relative group transition-transform duration-1000 ease-out transform -rotate-1 hover:rotate-0">
          <div className="
            relative
            bg-gradient-to-br from-[#1a1a1a] to-[#0d0d0d]
            p-12 md:p-24 
            border-t border-l border-white/10
            shadow-[60px_100px_120px_-30px_rgba(0,0,0,1)]
            before:content-[''] before:absolute before:inset-0 before:bg-[url('https://cdn.21st.dev/assets/mirror/7a/7aec37844fa033cbdb586efaa1955dc6f43d56707c0b1bf91e8b5e32386d8d69.png')] before:opacity-10
          ">
            
            {/* Meta Info */}
            <div className="mb-12 flex items-center gap-4 overflow-hidden">
              <div className="h-[1px] w-12 bg-white/20" />
              <span className="text-[10px] tracking-[0.8em] text-white/30 uppercase font-bold">
                Codex: Foundation
              </span>
            </div>

            {/* Chiseled Heading */}
            <h1 className="
              text-[clamp(4rem,15vw,10rem)] 
              font-black 
              leading-[0.85] 
              tracking-tighter 
              text-[#0c0c0c]
              drop-shadow-[1px_1px_1px_rgba(255,255,255,0.12)]
              mb-16
            ">
              STEL<br/>LAR
            </h1>

            {/* Sub-text and CTA Row */}
            <div className="flex flex-col md:flex-row md:items-end justify-between gap-12">
              <p className="max-w-xs text-[#555] text-lg font-medium leading-tight border-l-2 border-white/5 pl-6">
                BRUTALIST INTERFACES FOR THE POST-DIGITAL LANDSCAPE. CARVED IN SILICON.
              </p>
              
              <button className="
                relative
                px-12 py-6
                bg-[#121212]
                border border-white/10
                overflow-hidden
                group/btn
                transition-all
                duration-500
                hover:border-white/30
                shadow-[10px_15px_30px_rgba(0,0,0,0.5)]
              ">
                <span className="relative z-10 text-white/40 group-hover/btn:text-white transition-colors duration-500 text-xs tracking-[0.4em] uppercase font-black">
                  ENTER VOID
                </span>
                <div className="absolute inset-0 bg-white/5 opacity-0 group-hover/btn:opacity-100 transition-opacity duration-500" />
                {/* Harsh Highlight on edge of button */}
                <div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-white/20 to-transparent" />
              </button>
            </div>
          </div>

          {/* Decorative Chiseled Detail */}
          <div className="absolute -top-4 -right-4 w-24 h-24 border-t border-r border-white/10" />
        </div>

        {/* Floating Secondary Elements */}
        <div className="absolute top-1/4 -left-20 w-40 h-80 bg-[#111] border-l border-white/5 -z-10 opacity-40 blur-sm transform -rotate-12 shadow-[40px_40px_60px_black]" />
        <div className="absolute bottom-1/4 -right-10 w-20 h-40 bg-[#111] border-r border-white/5 -z-10 opacity-30 blur-md transform rotate-45 shadow-[40px_40px_60px_black]" />
      </div>

      {/* Global Grain/Noise Overlay */}
      <div className="fixed inset-0 pointer-events-none opacity-20 mix-blend-soft-light bg-[url('https://grainy-gradients.vercel.app/noise.svg')]" />
    </section>
  );
};

export default MonolithicHero;

/**
 * TAILWIND CONFIGURATION HINT:
 * Ensure your tailwind.config.js includes the standard spacing and color palette.
 * The custom shadows and gradients are handled via arbitrary values.
 */

/* 
  Optional CSS for the "chiseled" effect if standard tailwind shadow is insufficient:
  .chiseled {
    color: #0c0c0c;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.1), -1px -1px 1px rgba(0,0,0,0.7);
  }
*/