/*
Theme Name: Lightning Child Sample
Theme URI:
Template: lightning
Description:
Author:
Tags:
Version: 0.6.1
*/
.header-top {
background-color: #f9f9f9;
padding:4px 0;
font-size:12px;
}
.header-top__inner {
max-width:1200px;
width:100%;
margin:0 auto;
padding:0 10px;
display: flex;
align-items: center;
}
.header-top__items{
display:flex;
column-gap:12px;
justify-content:end;
align-items:center;
margin:0;
padding:0;
}
.header-top__description{
display: flex;
align-items: center;
margin-right: auto;
line-height: normal;
}
.header-top__menu{
display: flex;
align-items: center;
}
.header-top__item:not(:first-child){
margin-left:10px;
}
.header-top__item-link{
display:block;
}
.header-top__contact{
margin-left:12px;
}
.header-top__contact-link{
font-size:12px;
}
}
function mytheme_customize_register( $wp_customize ) {

    $theme = wp_get_theme();
    if ( 'lightning' !== $theme->get_template() && 'lightning' !== $theme->get_stylesheet() ) {
        return;
    }

    // セクション
    $wp_customize->add_section( 'header_top_section', array(
        'title'    => __( 'ヘッダー上部カスタマイズ', 'mytheme' ),
        'priority' => 30,
    ) );

    // 背景色
    $wp_customize->add_setting( 'header_top_background_color', array(
        'default'           => '#f9f9f9',
        'transport'         => 'refresh',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            $wp_customize,
            'header_top_background_color_control',
            array(
                'label'   => __( 'ヘッダー上部の背景色', 'mytheme' ),
                'section' => 'header_top_section',
                'settings'=> 'header_top_background_color',
            )
        )
    );

    // 文字色
    $wp_customize->add_setting( 'header_top_text_color', array(
        'default'           => '#333333',
        'transport'         => 'refresh',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

    $wp_customize->add_control(
        new WP_Customize_Color_Control(
            $wp_customize,
            'header_top_text_color_control',
            array(
                'label'   => __( 'ヘッダー上部の文字色', 'mytheme' ),
                'section' => 'header_top_section',
                'settings'=> 'header_top_text_color',
            )
        )
    );

    // 説明文
    $wp_customize->add_setting( 'header_top_description', array(
        'default'           => 'ここに表示したい文言を入力',
        'transport'         => 'refresh',
        'sanitize_callback' => 'sanitize_text_field',
    ) );

    $wp_customize->add_control( 'header_top_description_control', array(
        'label'   => __( 'ヘッダー上部の文言', 'mytheme' ),
        'section' => 'header_top_section',
        'settings'=> 'header_top_description',
        'type'    => 'text',
    ) );

    // リンク1テキスト
    $wp_customize->add_setting( 'header_top_link1_text', array(
        'default'           => 'リンク1',
        'transport'         => 'refresh',
        'sanitize_callback' => 'sanitize_text_field',
    ) );

    $wp_customize->add_control( 'header_top_link1_text_control', array(
        'label'   => __( 'リンク1の文言', 'mytheme' ),
        'section' => 'header_top_section',
        'type'    => 'text',
    ) );

    // リンク1URL
    $wp_customize->add_setting( 'header_top_link1_url', array(
        'default'           => '#',
        'transport'         => 'refresh',
        'sanitize_callback' => 'esc_url_raw',
    ) );

    $wp_customize->add_control( 'header_top_link1_url_control', array(
        'label'   => __( 'リンク1のURL', 'mytheme' ),
        'section' => 'header_top_section',
        'type'    => 'url',
    ) );

    // 電話表示
    $wp_customize->add_setting( 'header_top_show_tel', array(
        'default'           => 1,
        'transport'         => 'refresh',
        'sanitize_callback' => function($v){ return $v ? 1 : 0; },
    ) );

    $wp_customize->add_control( 'header_top_show_tel_control', array(
        'label'   => __( '電話番号を表示', 'mytheme' ),
        'section' => 'header_top_section',
        'type'    => 'checkbox',
    ) );

    // 電話番号
    $wp_customize->add_setting( 'header_top_tel', array(
        'default'           => '090-0000-0000',
        'transport'         => 'refresh',
        'sanitize_callback' => 'sanitize_text_field',
    ) );

    $wp_customize->add_control( 'header_top_tel_control', array(
        'label'   => __( '電話番号', 'mytheme' ),
        'section' => 'header_top_section',
        'type'    => 'text',
    ) );

    // お問い合わせ表示
    $wp_customize->add_setting( 'header_top_show_contact', array(
        'default'           => 1,
        'transport'         => 'refresh',
        'sanitize_callback' => function($v){ return $v ? 1 : 0; },
    ) );

    $wp_customize->add_control( 'header_top_show_contact_control', array(
        'label'   => __( 'お問い合わせリンクを表示', 'mytheme' ),
        'section' => 'header_top_section',
        'type'    => 'checkbox',
    ) );

    // お問い合わせURL
    $wp_customize->add_setting( 'header_top_contact_url', array(
        'default'           => '#',
        'transport'         => 'refresh',
        'sanitize_callback' => 'esc_url_raw',
    ) );

    $wp_customize->add_control( 'header_top_contact_url_control', array(
        'label'   => __( 'お問い合わせリンク', 'mytheme' ),
        'section' => 'header_top_section',
        'type'    => 'url',
    ) );
}

add_action( 'customize_register', 'mytheme_customize_register' );
function mytheme_custom_header_top_styles() {

    $theme = wp_get_theme();
    if ( 'lightning' !== $theme->get_template() && 'lightning' !== $theme->get_stylesheet() ) {
        return;
    }

    $bg_color   = sanitize_hex_color( get_theme_mod( 'header_top_background_color', '#f9f9f9' ) ) ?: '#f9f9f9';
    $text_color = sanitize_hex_color( get_theme_mod( 'header_top_text_color', '#333333' ) ) ?: '#333333';

    $custom_css = "
        .header-top {
            background-color: {$bg_color};
        }
        .header-top__description,
        .header-top__menu a {
            color: {$text_color};
        }
    ";

    wp_add_inline_style( 'lightning-common-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_header_top_styles' );
function add_custom_header_top_area() {

    $description = get_theme_mod( 'header_top_description', 'ここに表示したい文言を入力' );

    $link1_text  = get_theme_mod( 'header_top_link1_text', 'リンク1' );
    $link1_url   = get_theme_mod( 'header_top_link1_url', '#' );

    $show_tel    = get_theme_mod( 'header_top_show_tel', 1 );
    $tel         = get_theme_mod( 'header_top_tel', '090-0000-0000' );

    $show_contact = get_theme_mod( 'header_top_show_contact', 1 );
    $contact_url  = get_theme_mod( 'header_top_contact_url', '#' );

    // telリンク用に数字だけ抽出（安全）
    $tel_href = preg_replace( '/[^0-9+]/', '', $tel );

    ?>
    <div class="header-top">
        <div class="header-top__inner">

            <p class="header-top__description">
                <?php echo esc_html( $description ); ?>
            </p>

            <nav class="header-top__menu">
                <ul class="header-top__items">

                    <li class="header-top__item">
                        <a href="<?php echo esc_url( $link1_url ); ?>" class="header-top__item-link">
                            <?php echo esc_html( $link1_text ); ?>
                        </a>
                    </li>

                    <?php if ( $show_tel ) : ?>
                        <li class="header-top__item">
                            <a href="tel:<?php echo esc_attr( $tel_href ); ?>"
                               class="header-top__item-link header-top__item-link--tel">
                                <i class="fa-solid fa-phone"></i>
                                <?php echo esc_html( $tel ); ?>
                            </a>
                        </li>
                    <?php endif; ?>

                </ul>
            </nav>

            <?php if ( $show_contact ) : ?>
                <div class="header-top__contact">
                    <a href="<?php echo esc_url( $contact_url ); ?>" class="header-top__contact-link btn btn-primary">
                        <i class="fa-solid fa-envelope"></i>
                        お問い合わせ
                    </a>
                </div>
            <?php endif; ?>

        </div>
    </div>
    <?php
}

add_action( 'lightning_site_header_prepend', 'add_custom_header_top_area' );